<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-col style="width: 100%;margin-left: 20px;" :span="24">
            <span>选择人员：</span>
            <el-button type="primary" @click="handleDialog">{{
              selectArr && selectArr.length > 0
                ? `已选择（${selectArr.length}）`
                : "点击选择人员"
            }}</el-button>
          </el-col>
        </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="人员ids,多个"','"分割" prop="staffIds"
        v-model="form.staffIds" type="textarea"
        placeholder="请输入人员ids,多个"','"分割"/> <Field
        label="人员名称nams,多个"','"逗号分割" prop="staffNames"
        v-model="form.staffNames" type="textarea"
        placeholder="请输入人员名称nams,多个"','"逗号分割"/>
        <Field
          label="考核人总数"
          prop="staffCount"
          v-model="form.staffCount"
          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-dialog
      title="选择人员"
      :visible.sync="dialog"
      :modal="false"
      width="60%"
    >
      <div class="dia_content">
        <div class="dia_left">
          <div class="title">
            选择人员
          </div>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            show-checkbox
            style="height: 240px; overflow-y: auto;"
            node-key="name"
            @check="handleCheckChange"
            ref="tree"
          ></el-tree>
        </div>
        <div class="dia_right">
          <div class="title">
            已选择
          </div>
          <div class="select_content">
            <el-tag
              v-for="tag in selectArr"
              :key="tag.id"
              closable
              @close="hanleTagClose(tag)"
              style="margin-right: 10px;margin-bottom: 10px;"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="dialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-drawer>
</template>

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

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

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

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

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

          {
            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: {
    handleDialog() {
      this.dialog = true;
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(this.selectArr);
      });
    },
    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.staffConfDetail = 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 = {};
        }
      });
    },
    hanleTagClose(val) {
      this.selectArr = this.selectArr.filter((v) => v.name != val.name);
      this.$refs.tree.setCheckedNodes(this.selectArr);
      this.form.staffIds = this.selectArr.map((v) => v.id).join(",");
    },
    handleCheckChange(checkedNodes, checkedKeys) {
      // checkedKeys.checkedNodes.forEach((v) => {
      //   v.children ? "" : (this.selectArr = [...this.selectArr, v]);
      // });
      this.selectArr = checkedKeys.checkedNodes;
      this.form.staffIds = this.selectArr.map((v) => v.id).join(",");
    },
    handleChange(val) {
      console.log(val);
    },
    handleClick(val) {
      this.getData();
      this.cateObj = {};
      this.type = "";
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      // this.urls.currUrl = "perform/staff/conf/edit";
      this.checkArr = [];
      this.selectArr = [];
      this.type = "";
      this.activeName = "1";
      this.$get("/perform/staff/conf/info", { id: row.id }).then((res) => {
        if (res.code == 1) {
          this.form = res.data;
          console.log(this.treeData);
          let arr = res.data.staffIds.split(",");
          this.selectArr = [];
          arr.forEach((v) => {
            this.treeData.forEach((val) => {
              v == val.id ? this.selectArr.push(val) : "";
            });
          });
          this.checkArr = res.data.staffConfDetail;
          res.data.staffConfDetail.length > 0
            ? res.data.staffConfDetail.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.urls.currUrl = "perform/staff/conf/add";
      this.checkArr = [];
      this.selectArr = [];
      this.type = "";
      this.activeName = "1";
      this.getData();
      this.open = true;
      this.pageInfo.type = "add";
      this.title = "新增人员自动考核信息";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "perform/staff/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 = {
        staffIds: "",
        staffNames: "",
        staffCount: null,
        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 {
  overflow-x: hidden;

  /deep/.el-col-12 {
    width: 98% !important;
  }
  .content {
    width: 100%;
    height: 720px;
    border: 1px solid #e4e7ed;
    border-top: 0;
    padding: 20px;
    overflow-x: hidden;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }
  /deep/.el-tabs__header {
    margin: 0 !important;
  }
}
.dia_content {
  width: 100%;
  height: 100%;
  display: flex;
  border: 1px solid #e4e7ed;
  .dia_left {
    width: 50%;
    height: 300px;
    border-right: 1px solid #e4e7ed;
    padding: 20px;
  }
  .dia_right {
    width: 50%;
    height: 100%;
    padding: 20px;
  }
  .title {
    color: #1890ff;
    font-size: 14px;
    padding-left: 10px;
    position: relative;
    margin-bottom: 10px;
    &::after {
      content: "";
      display: block;
      border-left: 3px solid #1890ff;
      left: 0;
      top: 0;
      bottom: 0;
      position: absolute;
    }
  }
}
</style>
