<template>
  <div>
    <div>
      <el-table
        :data="tableData"
        :border="true"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column prop="name" label="姓名" width="110">
        </el-table-column>
        <el-table-column
          prop="workUnit"
          label="工作单位"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="assessYear" label="考核年度"> </el-table-column>
        <el-table-column
          prop="division"
          label="考核部门"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="assessTime" label="考核时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.assessTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="年度综合评定意见"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ filterDict(scope.row.remark, "remark") }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-hasPermi="['inspector:global:yearEdit']">
              <button class="btnStyle" @click="handleEdit(scope.row)">
                编辑
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="open"
      width="30%"
      append-to-body
      destroy-on-close
      custom-class="my-dialog-container"
    >
      <div slot="title" class="my-dialog-title">编辑年度考核</div>

      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="right"
        label-width="100px"
        class="my-dialog-body"
      >
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="工作单位：" prop="workUnit">
          <el-select v-model="form.workUnit" placeholder="请选择">
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictLabel.toString()"
              v-for="dict in dict.workUnit"
              :key="dict.dictValue"
            ></el-option>
          </el-select>
          <!-- <el-input
            v-model="form.workUnit"
            placeholder="请输入工作单位"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="考核年度：" prop="assessYear">
          <el-date-picker
            v-model="form.assessYear"
            type="year"
            placeholder="请选择"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考核部门：" prop="division">
          <el-select v-model="form.division" placeholder="请选择">
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictLabel.toString()"
              v-for="dict in dict.division"
              :key="dict.dictValue"
            ></el-option>
          </el-select>
          <!-- <el-input
            v-model="form.division"
            placeholder="请输入考核部门"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="考核时间：" prop="assessTime">
          <el-date-picker
            v-model="form.assessTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="综合评定意见：" prop="remark">
          <el-select v-model="form.remark" placeholder="请选择">
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictValue.toString()"
              v-for="dict in dict.remark"
              :key="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-my-save"
          @click="onSubmit('form')"
          >提交</el-button
        >
        <el-button size="small" icon="el-icon-my-reset" @click="reset()"
          >重置</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { exportExcel, dictList } from "@/api/jcy";
import { getList, updateRow } from "@/api/yearAssess";
export default {
  props: {
    inspectorId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      dict: {},
      open: false,
      loading: true,
      tableData: [],
      queryParams: {
        inspectorId: undefined,
      },
      form: {},
      rules: {
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        workUnit: [
          { required: true, message: "请选择工作单位", trigger: "change" },
        ],
        assessYear: [
          { required: true, message: "请选择考核年", trigger: "change" },
        ],
        division: [
          { required: true, message: "请选择考核部门", trigger: "change" },
        ],
        assessTime: [
          { required: true, message: "请选择考核时间", trigger: "change" },
        ],
        remark: [
          { required: true, message: "请选择综合评定意见", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.queryParams.inspectorId = this.inspectorId;
    dictList({ list: "remark,workUnit,division" }).then((res) => {
      if (res.status == 200) {
        for (let key in res.result) {
          this.dict[key] = res.result[key];
        }
        this.getList();
      }
    });
  },
  methods: {
    /**过滤字典 */
    filterDict(value, type) {
      if (this.dict[type] == undefined) {
        return value;
      }
      let dictLable = this.dict[type].filter((item) => item.dictValue == value);
      return dictLable.length > 0 ? dictLable[0].dictLabel : "未知";
    },
    /**重置 */
    reset() {
      this.form = {
        id: null,
        name: "",
        workUnit: "",
        assessYear: "",
        division: "",
        assessTime: "",
        remark: "",
      };
      this.resetForm("form");
    },
    /**提交 */
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateRow(this.form).then((res) => {
            this.open = false;
            this.$modal.msgSuccess("修改成功");
            this.getList();
          });
        } else {
          return false;
        }
      });
    },
    /**编辑 */
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.open = true;
    },
    getList() {
      this.loading = true;
      getList(this.queryParams).then((res) => {
        this.tableData = res.result.records;
        this.loading = false;
      });
    },
    exportTrain() {
      let params = {
        value: 4,
        ids: this.inspectorId,
      };
      exportExcel(params).then((res) => {
        if (res.data.code == 200) {
          this.uploadFile(
            res.data.data.result.url,
            res.data.data.result.originalFilename
          );
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.btnStyle {
  border: 1px solid #ffc89f;
  background: #ffefe3;
  border-radius: 4px;
  color: #f88129;
  font-size: 12px;
  cursor: pointer;
}
</style>
