<template>
  <div>
    <header>
      <i class="el-icon-warning-outline"></i>
      提示：【上传附件】可以上传工作内容证明、职称证书等文件，支持jpg、png、jpeg、pdf、word等格式
    </header>
    <div class="tableDistance">
      <el-table
        :data="tableData"
        :border="true"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="begainTime" label="开始日期" width="110">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.begainTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束日期" width="110">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="workPlace" label="工作单位"> </el-table-column>
        <el-table-column prop="workUnit" label="工作部门"> </el-table-column>
        <el-table-column prop="workUnit" label="从事工作"> </el-table-column>
        <el-table-column prop="duty" label="职务">
          <template slot-scope="scope">
            {{ filterDict(scope.row.duty, "duty") }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="职称">
          <template slot-scope="scope">
            {{ filterDict(scope.row.title, "title") }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <button
                class="btnStyle"
                @click="handleUpdate(scope.$index, scope.row)"
                v-hasPermi="[
                  'inspector:global:workEdit',
                  'inspector:global:workEdit:s',
                ]"
              >
                编辑
              </button>
              <button
                class="btnStyle green"
                @click="handleDelete(scope.$index, scope.row)"
                v-hasPermi="[
                  'inspector:global:workDel',
                  'inspector:global:workDel:s',
                ]"
              >
                删除
              </button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上传附件">
          <template slot-scope="scope">
            <div>
              <button
                class="btnStyle update"
                @click="handleEdit(scope.$index, scope.row)"
                v-hasPermi="[
                  'inspector:global:workUpload',
                  'inspector:global:workUpload:s',
                ]"
              >
                上传附件
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 工作经历 -->
    <el-dialog
      :visible.sync="show"
      width="30%"
      append-to-body
      destroy-on-close
      custom-class="my-dialog-container"
    >
      <div slot="title" class="my-dialog-title">
        {{ this.distinguish }}工作经历
      </div>
      <el-form
        ref="formName"
        :model="form"
        :rules="rules"
        label-position="right"
        label-width="100px"
        class="my-dialog-body"
        v-loading="load1"
      >
        <el-form-item label="开始时间：" prop="begainTime">
          <el-date-picker
            v-model="form.begainTime"
            type="date"
            placeholder="请选择时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间：" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            placeholder="请选择时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工作单位：" prop="workPlace">
          <el-input
            v-model="form.workPlace"
            placeholder="请输入单位名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作部门：" prop="workUnit">
          <el-input
            v-model="form.workUnit"
            placeholder="请输入部门名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="职称：" prop="title">
          <!-- <el-input v-model="form.title" placeholder="请输入职称"></el-input> -->
          <el-select v-model="form.title" placeholder="请选择">
            <el-option
              v-for="item in dict.title"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue.toString()"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务：" prop="duty">
          <el-select v-model="form.duty" placeholder="请选择">
            <el-option
              v-for="item in dict.duty"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue.toString()"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="从事工作：" prop="undertake">
          <el-input
            type="textarea"
            v-model="form.undertake"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-my-save"
          @click="submit"
          >提交</el-button
        >
        <el-button size="small" icon="el-icon-my-reset" @click="reset()"
          >重置</el-button
        >
      </div>
    </el-dialog>
    <fileDiaglog ref="work" :showTitle="showTitle"></fileDiaglog>
  </div>
</template>
<script>
import fileDiaglog from "../../userMsgPage/components/fileDiaglog.vue";
import { dictList } from "@/api/jcy/index.js";

export default {
  data() {
    return {
      //职务字典
      dict: {},

      showTitle: true,
      //区分修改和新增
      distinguish: "",
      loading: true,
      //弹出框的等待效果
      load1: true,
      show: false,
      tableData: [],
      form: {
        begainTime: "",
        duty: "",
        endTime: "",
        inspectorId: undefined,
        title: "",
        undertake: "",
        workPlace: "",
        workUnit: "",
      },
      rules: {
        begainTime: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        workPlace: [
          {
            required: true,
            message: "单位名称不能为空",
            trigger: "blur",
          },
        ],
        workUnit: [
          { required: true, message: "工作部门不能为空", trigger: "blur" },
        ],
        title: [{ required: true, message: "职称不能为空", trigger: "blur" }],

        duty: [{ required: true, message: "请选择职务", trigger: "blur" }],
        undertake: [
          {
            required: true,
            message: "从事工作不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    //获取检查员的id并赋值
    this.form.inspectorId = this.inspectorId;

    dictList({
      list: "duty,title",
    }).then((res) => {
      if (res.status == 200) {
        for (let key in res.result) {
          this.dict[key] = res.result[key];
        }
        this.getList();
      }
    });
  },
  props: {
    inspectorId: {
      type: Number,
      default: 0,
    },
  },
  components: {
    fileDiaglog,
  },
  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 : "未知";
    },
    //获取培训详情列表
    async getList() {
      this.loading = true;
      let msg = await this.$api.work.listWork({
        inspectorId: this.form.inspectorId,
      });
      if (msg.status == 200) this.loading = false;
      this.tableData = msg.result.records;
    },
    //重置
    reset() {
      // this.$refs.formName.resetFields();
      this.form = {
        begainTime: "",
        duty: "",
        endTime: "",
        //检查员id
        inspectorId: this.inspectorId,
        title: "",
        undertake: "",
        workPlace: "",
        workUnit: "",
      };
    },
    //新增
    async workAddList() {
      this.distinguish = "新增";
      this.reset();
      this.show = true;
      this.load1 = false;
    },
    //编辑
    async handleUpdate(index, row) {
      this.show = true;
      this.load1 = true;
      this.distinguish = "修改";
      //获取详情
      let msg1 = await this.$api.work.detailWork(row.id);
      if (msg1.status == 200) this.load1 = false;
      this.form = msg1.result;
    },
    //弹窗的确认
    submit() {
      this.$refs.formName.validate(async (valid) => {
        if (valid) {
          if (this.distinguish === "新增") {
            let msg = await this.$api.work.addWork(this.form);

            if (msg.status == 200) this.dialog();
          } else if (this.distinguish === "修改") {
            let msg = await this.$api.work.updateWork(this.form);
            if (msg.status == 200) this.dialog();
          }
          this.show = false;
          this.getList();
        }
      });
    },
    //弹窗
    dialog() {
      this.$message({
        type: "success",
        message: `${this.distinguish}成功!`,
      });
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将删除该条工作经历, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let msg1 = await this.$api.work.deleteWork(row.id);
          if (msg1.status == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleEdit(index, row) {
      this.$refs.work.open(row.id, "工作");
    },
  },
};
</script>
<style lang="scss" scoped>
header {
  font-size: 14px;
  font-weight: 400;
  color: #e61c1c;
  line-height: 24px;
}
.tableDistance {
  margin-top: 15px;
}
.btnStyle {
  border: 1px solid #ffc89f;
  background: #ffefe3;
  border-radius: 4px;
  color: #f88129;
  font-size: 12px;
  cursor: pointer;
}
.green {
  background: #ffe0de;
  border: 1px solid #f89d97;
  color: #f76359;
  margin-left: 8px;
}
.update {
  background: #ebf5ff;
  border: 1px solid #a1cbf8;
  color: #0e7cf4;
}
</style>
