<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    size="50%"
  >
    <el-form
      ref="form"
      class="form_content"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-row>
        <el-row style="width: 100%;margin-bottom: 10px;">
          <el-form-item label="选择部门">
            <el-col :span="23">
              <el-select v-model="form.deptId" style="width: 100%;">
                <el-option
                  v-for="item in deptArr"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                >
                </el-option
              ></el-select>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row style="width: 96%;margin: 0 auto;">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="考勤绩效指标" name="1">
              <div class="content">
                <div class="top">
                  <div>
                    请选择自动考核指标：
                  </div>
                  <div class="search_box">
                    <el-select
                      v-model="type"
                      placeholder="请选择分类"
                      @change="typeSelect"
                    >
                      <el-option
                        v-for="item in dataArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        style="width: 200px;"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-model="keywords"
                      placeholder="请输入评分标准关键字搜索"
                      style="width: 200px;margin: 0 10px;"
                    ></el-input>
                    <el-button type="primary"> 搜索 </el-button>
                  </div>
                </div>
                <div class="mid_table">
                  <LayoutTable
                    :data="tableData"
                    notAdd
                    notDel
                    notSearch
                    notPagination
                    :config="tableConfig"
                  >
                  </LayoutTable>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="评价绩效指标" name="2">
              <div class="content">
                <div class="top">
                  <div>
                    请选择自动考核指标：
                  </div>
                  <div class="search_box">
                    <el-select
                      v-model="type"
                      placeholder="请选择分类"
                      @change="typeSelect"
                    >
                      <el-option
                        v-for="item in dataArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        style="width: 200px;"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-model="keywords"
                      placeholder="请输入评分标准关键字搜索"
                      style="width: 200px;margin: 0 10px;"
                    ></el-input>
                    <el-button type="primary"> 搜索 </el-button>
                  </div>
                </div>
                <div class="mid_table">
                  <LayoutTable
                    :data="tableData"
                    notAdd
                    notDel
                    notSearch
                    notPagination
                    :config="tableConfig"
                  >
                  </LayoutTable>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="办件绩效指标" name="3">
              <div class="content">
                <div class="top">
                  <div>
                    请选择自动考核指标：
                  </div>
                  <div class="search_box">
                    <el-select
                      v-model="type"
                      placeholder="请选择分类"
                      @change="typeSelect"
                    >
                      <el-option
                        v-for="item in dataArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        style="width: 200px;"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-model="keywords"
                      placeholder="请输入评分标准关键字搜索"
                      style="width: 200px;margin: 0 10px;"
                    ></el-input>
                    <el-button type="primary"> 搜索 </el-button>
                  </div>
                </div>
                <div class="mid_table">
                  <LayoutTable
                    :data="tableData"
                    notAdd
                    notDel
                    notSearch
                    notPagination
                    :config="tableConfig"
                  >
                  </LayoutTable>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="效能绩效指标" name="4">
              <div class="content">
                <div class="top">
                  <div>
                    请选择自动考核指标：
                  </div>
                  <div class="search_box">
                    <el-select
                      v-model="type"
                      placeholder="请选择分类"
                      @change="typeSelect"
                    >
                      <el-option
                        v-for="item in dataArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        style="width: 200px;"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-model="keywords"
                      placeholder="请输入评分标准关键字搜索"
                      style="width: 200px;margin: 0 10px;"
                    ></el-input>
                    <el-button type="primary"> 搜索 </el-button>
                  </div>
                </div>
                <div class="mid_table">
                  <LayoutTable
                    :data="tableData"
                    notAdd
                    notDel
                    notSearch
                    notPagination
                    :config="tableConfig"
                  >
                  </LayoutTable>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="其他绩效指标" name="5">
              <div class="content">
                <div class="top">
                  <div>
                    请选择自动考核指标：
                  </div>
                  <div class="search_box">
                    <el-select
                      v-model="type"
                      placeholder="请选择分类"
                      @change="typeSelect"
                    >
                      <el-option
                        v-for="item in dataArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        style="width: 200px;"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-model="keywords"
                      placeholder="请输入评分标准关键字搜索"
                      style="width: 200px;margin: 0 10px;"
                    ></el-input>
                    <el-button type="primary"> 搜索 </el-button>
                  </div>
                </div>
                <div class="mid_table">
                  <LayoutTable
                    :data="tableData"
                    notAdd
                    notDel
                    notSearch
                    notPagination
                    :config="tableConfig"
                  >
                  </LayoutTable>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-row>

      <form-buttons @submit="submitForm" noCancelBtn />
    </el-form>
    <!-- <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <Field
          label="部门id"
          prop="deptId"
          v-model="form.deptId"
          placeholder="请输入部门id"
        />
        <Field
          label="部门名称"
          prop="deptName"
          v-model="form.deptName"
          type="textarea"
          placeholder="请输入部门名称"
        />
        <Field
          label="考勤绩效指标数量"
          prop="attendCount"
          v-model="form.attendCount"
          placeholder="请输入考勤绩效指标数量"
        />
        <Field
          label="评价绩效指标数量"
          prop="assessCount"
          v-model="form.assessCount"
          placeholder="请输入评价绩效指标数量"
        />
        <Field
          label="办件绩效指标数量"
          prop="workCount"
          v-model="form.workCount"
          placeholder="请输入办件绩效指标数量"
        />
        <Field
          label="效能绩效指标数量"
          prop="effectCount"
          v-model="form.effectCount"
          placeholder="请输入效能绩效指标数量"
        />
        <Field
          label="其它绩效指标数量"
          prop="otherCount"
          v-model="form.otherCount"
          placeholder="请输入其它绩效指标数量"
        />
        <Field
          label="备注"
          prop="remark"
          v-model="form.remark"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-row>

      <form-buttons @submit="submitForm" noCancelBtn />
    </el-form> -->
  </el-drawer>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import table from "@/assets/mixins/table";

export default {
  name: "PerformDeptConfDetail",
  mixins: [form, table],
  components: {},
  created() {
    this.changePath("perform//staff/conf");
    // 获取部门列表
    this.$post("/dept/list", { page: 1, size: -1 }).then((res) => {
      if (res.code == 1) {
        this.deptArr = res.data.data;
      } else {
        this.deptArr = [];
      }
    });
    this.checkArr = [];
    // this.getKaoQin();
  },
  data() {
    return {
      deptGroup: { 1: "部门1", 2: "部门2", 3: "部门3", 4: "部门4", 5: "部门5" },
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "部门自动考核信息",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: [],
      toDate: [],
      tableData: [],
      // 表单校验
      rules: {},
      activeName: "1",
      options: [],
      type: "",
      keywords: "",
      deptArr: [],
      urls: {
        saveUrl: "/perform/dept/conf/save",
      },
      config: {
        isshowTabPane: false,
        search: [],
        columns: [
          { type: "index", label: "序号", width: 50 },

          { label: "考核内容简称", prop: "name" },

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

          { label: "分值", prop: "score" },

          {
            label: "操作",
            width: 100,
            formatter: (row) => {
              if (row.check) {
                return <span style="cursor:pointer;color:#ff0000">不选择</span>;
              } else {
                return <span style="cursor:pointer;color:#1890ff">选择</span>;
              }
            },
          },
        ],
      },
      cateObj: {},
      dataArr: [],
      checkArr: [],
    };
  },
  methods: {
    
    handleRowClick(val) {
      val.check = !val.check;
      val.check
        ? this.checkArr.push(val)
        : (this.checkArr = this.checkArr.filter((v) => v.id !== val.id));
      this.checkArr.length > 0
        ? this.checkArr.forEach((val) => {
            val.ruleId = val.id;
            val.ruleName = val.name;
            this.tableData.data.forEach((v) => {
              val.id == v.id ? (v.check = val.check) : "";
            });
          })
        : "";
      this.form.deptConfDetail = this.checkArr;
      this.tableData.data = [...this.tableData.data];
      this.$forceUpdate(this.tableData.data);
    },
    typeSelect(val) {
      this.getKaoQin(val);
    },
    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: -1,
        orderColList: this.typeArr,
        name: this.searchValue,
      }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.data;
          this.checkArr.length > 0
            ? this.checkArr.forEach((val) => {
                this.tableData.data.forEach((v) => {
                  val.id == v.id ? (v.check = val.check) : "";
                });
              })
            : this.tableData.data.forEach((v) => {
                v.check = false;
              });
          this.tableData.data = [...this.tableData.data];
          this.$forceUpdate(this.tableData);
        } else {
          this.tableData = {};
        }
      });
    },
    handleClick(val) {
      this.getData();
      this.cateObj = {};
      this.type = "";
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.checkArr = [];
      this.type = "";
      this.activeName = "1";
      this.$get("/perform/dept/conf/info", { id: row.id }).then((res) => {
        if (res.code == 1) {
          this.form = res.data;
          this.checkArr = res.data.deptConfDetail;
          res.data.deptConfDetail.length > 0
            ? res.data.deptConfDetail.forEach((val) => {
                val.check = true;
                val.id = val.ruleId;
                this.tableData.data.forEach((v) => {
                  v.check = false;
                  val.ruleId == v.id ? (v.check = true) : "";
                });
              })
            : "";
          this.tableData.data = [...this.tableData.data];
          this.$forceUpdate(this.tableData);
        } else {
          this.form = {};
        }
        this.open = true;
      });
      this.getData();

      this.pageInfo.type = "edit";
      this.title = "修改部门自动考核信息";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.getData();
      this.open = true;
      this.checkArr = [];
      this.type = "";
      this.activeName = "1";
      this.pageInfo.type = "add";
      this.title = "新增部门自动考核信息";
    },
    /** 查看*/
    view(row) {
      console.log(123);
      return;
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "perform/dept/conf/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "部门自动考核信息详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        deptId: null,
        deptName: "",
        attendCount: null,
        assessCount: null,
        workCount: null,
        effectCount: null,
        otherCount: null,
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.form_content {
  /deep/.el-col-12 {
    width: 98% !important;
  }
  .content {
    width: 100%;
    height: 500px;
    border: 1px solid #e4e7ed;
    border-top: 0;
    padding: 20px;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }
  /deep/.el-tabs__header {
    margin: 0 !important;
  }
}
</style>
<style lang="less" scoped>
.form_content {
  /deep/.el-col-12 {
    width: 98% !important;
  }
  .content {
    width: 100%;
    height: 720px;
    border: 1px solid #e4e7ed;
    border-top: 0;
    padding: 20px;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }
  /deep/.el-tabs__header {
    margin: 0 !important;
  }
}
</style>
