<template>
  <div class="attend_page">
    <div class="left_box">
      <h3>分类管理</h3>
      <el-button type="primary" style="margin:20px 0" @click="addCate">
        + 新增分类</el-button
      >
      <div class="left_content">
        <div
          :class="index == i ? 'category_box check' : 'category_box'"
          v-for="(val, i) in dataArr"
          :key="i"
          @click="handleClick(val, i)"
        >
          <span>{{ val.name }}</span>
          <div>
            <i class="el-icon-edit-outline" @click="toEdit(val)"></i>
            <i class="el-icon-delete" @click="toDel(val)"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="right_box">
      <h3>规则管理</h3>
      <div class="search_box">
        <div class="left_search">
          <el-button
            type="primary"
            style="margin:20px 0"
            @click="addRules"
            v-if="cateObj && cateObj.type"
          >
            + 新增规则</el-button
          >
          <el-switch
            v-model="switchValue"
            active-color="#13ce66"
            inactive-color="#1890ff"
            active-value="1"
            inactive-value="0"
            inactive-text="按分值排序"
            active-text="按更新时间排序"
            style="margin-left: 10px;"
            @change="switchChange"
          >
          </el-switch>
        </div>
        <div class="search">
          <el-input
            placeholder="请输入考核内容简称/评分标准关键字搜索"
            style="width: 300px;margin-right: 10px;"
            v-model="searchValue"
          ></el-input>
          <el-button
            type="primary"
            @click="getKaoQin(cateObj.id ? cateObj.id : '')"
          >
            搜索
          </el-button>
        </div>
      </div>
      <div class="table_box">
        <LayoutTable
          :data="tableData"
          notAdd
          notDel
          notSearch
          :config="tableConfig"
        >
        </LayoutTable>
      </div>
    </div>
    <drawer-show ref="drawerform" @ok="getData" />
    <dialog-show ref="dialogform" @ok="getData" />
  </div>
</template>

<script>
import drawerShow from "../drawershow";
import dialogShow from "../dialogshow";
import table from "@/assets/mixins/table";
export default {
  name: "AdminAttendIndex",
  components: {
    drawerShow,
    dialogShow,
  },
  mixins: [table],
  props: {
    activeName: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      switchValue: "0",
      searchValue: "",
      index: -1,
      dataArr: [],
      typeArr: [
        {
          colName: "score",
          sortKind: "desc",
        },
      ],
      cateObj: {},
      config: {
        isshowTabPane: false,
        search: [],
        columns: [
          { type: "selection", width: 60 },
          { type: "index", label: "序号", width: 50 },

          { label: "分类", prop: "categoryId", formatter: this.formatter },
          { label: "考核内容简称", prop: "name" },

          // { label: "考核编码", prop: "ruleCode" },

          { label: "评分标准", prop: "content" },

          { label: "增减类型", prop: "subAddType", formatter: this.formatter },

          { label: "分值", prop: "score", formatter: this.formatter },

          { label: "负责人分值", prop: "ownerScore" },

          {
            label: "创建用户",
            prop: "createUserId",
            formatter: this.formatter,
          },
          {
            label: "操作",
            width: 240,
            formatter: (row) => {
              return (
                <table-buttons
                  noAdd
                  noView
                  row={row}
                  onEdit={this.eddRules}
                  onDel={this.toDelRules}
                />
              );
            },
          },
        ],
      },
    };
  },

  created() {
    // this.getData();
    this.cateObj = {};
  },

  methods: {
    switchChange() {
      this.switchValue == 0
        ? (this.typeArr = [
            {
              colName: "score",
              sortKind: "desc",
            },
          ])
        : (this.typeArr = [
            {
              colName: "updateTime",
              sortKind: "desc",
            },
          ]);

      this.getKaoQin(this.cateObj.id);
    },
    handleClick(val, i) {
      this.index = i;
      this.cateObj = val;
      this.$route.query.page = 1;
      this.query.page = 1;
      this.getKaoQin(val.id);
    },
    addRules() {
      this.$refs.drawerform.add(this.dataArr, this.cateObj);
    },
    eddRules(row) {
      this.$refs.drawerform.edit(row, this.dataArr, this.cateObj);
    },
    addCate() {
      this.$refs.dialogform.add(this.activeName);
    },
    toDelRules(val) {
      this.$get("/perform/rules/delete", { id: val }).then((res) => {
        this.$message.success(res.msg);
        this.getKaoQin(this.cateObj.id ? this.cateObj.id : "");
        // this.tableData = [];
        // this.index = -1;
      });
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    toDel(val) {
      this.$get("/perform/rules/category/delete", { id: val.id }).then(
        (res) => {
          this.$message.success(res.msg);
          this.getData();
          this.index = -1;
        }
      );
    },
    async getData() {
      await this.$post("/perform/rules/category/list", {
        type: this.activeName,
      }).then((res) => {
        this.getKaoQin(this.cateObj ? this.cateObj.id : "");
        if (res.code == 1) {
          this.dataArr = res.data.data;
        } else {
          this.dataArr = [];
        }
      });
    },
    async getKaoQin(categoryId) {
      await this.$post("/perform/rules/list", {
        categoryId,
        type: this.activeName,
        page: this.query.page,
        size: this.query.size,
        orderColList: this.typeArr,
        andConditionList: [
          { content: `%${this.searchValue}%`, name: `%${this.searchValue}%` },
        ],
      }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.data;
          this.$forceUpdate(this.tableData);
        } else {
          this.tableData = {};
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.attend_page {
  width: 100%;
  height: 100%;
  display: flex;
  h3 {
    border-width: 0px;
    display: flex;
    font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  .left_box {
    width: 344px;
    height: 735px;
    background-color: rgba(242, 247, 249, 0.447058823529412);
    border: none;
    border-radius: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: "微软雅黑", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 20px;

    .left_content {
      width: 100%;
      height: 600px;
      overflow-y: auto;
      .category_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-width: 0px;
        width: 304px;
        height: 48px;
        background: inherit;
        background: #ffffff;
        border: none;
        border-radius: 4px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: "微软雅黑", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #000;
        text-align: left;
        padding: 0 10px;
        border: 1px solid #ddd;
        margin-bottom: 20px;
        &:hover {
          background-color: rgba(22, 202, 122, 1);
          color: #ffffff;
          border: none;
        }
        i {
          font-style: normal;
          font-size: 18px;
          margin: 0 5px;
          cursor: pointer;
        }
      }
      .check {
        background-color: rgba(22, 202, 122, 1);
        color: #ffffff;
        border: none;
      }
    }
  }
  .right_box {
    flex: 1;
    padding: 20px;
    overflow: hidden;
    .search_box {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .table_box {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
