<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%;" :span="24">
            <span>选择人员：</span>
            <el-button type="primary" @click="() => (dialog = true)"
              >点击选择人员</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="请选择分类">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        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">
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="考核内容简称"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column prop="simple" label="评分标准">
                    </el-table-column>
                    <el-table-column prop="core" label="扣分分值">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.check"
                          @change="handleChange(scope.row)"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </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="请选择分类">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        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">
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="考核内容简称"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column prop="simple" label="评分标准">
                    </el-table-column>
                    <el-table-column prop="core" label="扣分分值">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.check"
                          @change="handleChange(scope.row)"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </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="请选择分类">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        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">
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="考核内容简称"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column prop="simple" label="评分标准">
                    </el-table-column>
                    <el-table-column prop="core" label="扣分分值">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.check"
                          @change="handleChange(scope.row)"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </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="请选择分类">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        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">
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="考核内容简称"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column prop="simple" label="评分标准">
                    </el-table-column>
                    <el-table-column prop="core" label="扣分分值">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.check"
                          @change="handleChange(scope.row)"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </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" width="40%">
      <div class="dia_content">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-drawer>
</template>

<script>
import form from "@/assets/mixins/formdialog";
export default {
  name: "PerformStaffConfDetail",
  mixins: [form],
  components: {},
  created() {
    this.changePath("perform/staff/conf");
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      dialog: false,
      // 弹出层标题
      title: "人员自动考核信息",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: [],
      toDate: [],
      tableData: [
        {
          core: "-0.5",
          name: "迟到",
          simple: "迟到5分钟以内（包含5分钟）",
          check: false,
        },
      ],
      // 表单校验
      rules: {},
      activeName: "1",
      options: [
        {
          value: "1",
          label: "工作纪律",
        },
        {
          value: "2",
          label: "工作效能",
        },
      ],
      type: "",
      keywords: "",
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },

  methods: {
    handleChange(val) {
      console.log(val);
    },
    handleClick() {},
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "perform/staff/conf/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改人员自动考核信息";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "perform/staff/conf/add";
      this.getData();
      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 {
  /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>
