<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">
            <Field
              label="选择部门："
              prop="deptId"
              v-model="form.deptId"
              placeholder="选择部门"
              :enumData="deptGroup"
              type="select"
            />
          </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%"
                    height="520"
                  >
                    <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="部门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";
export default {
  name: "PerformDeptConfDetail",
  mixins: [form],
  components: {},
  created() {
    this.changePath("perform/dept/conf");
  },
  data() {
    return {
      deptGroup: { 1: "部门1", 2: "部门2", 3: "部门3", 4: "部门4", 5: "部门5" },
      // 遮罩层
      loading: true,
      // 弹出层标题
      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: "",
    };
  },

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