<template>
  <div>
    <header>
      <i class="el-icon-warning-outline"></i>
      提示：【上传附件】可以上传学历，学位证书等文件，支持jpg、png、jpeg、pdf、word等格式
    </header>
    <div class="tableDistance">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        border
      >
        <el-table-column prop="begainTime" label="开始日期">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.begainTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束日期">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="graduateSchool" label="毕业院校">
        </el-table-column>
        <el-table-column prop="department" label="系别">
          <template slot-scope="scope">
            {{ filterDict(scope.row.department, "department") }}
          </template>
        </el-table-column>
        <el-table-column prop="speciality" label="专业"> </el-table-column>
        <el-table-column prop="education" label="学历">
          <template slot-scope="scope">
            {{ filterDict(scope.row.education, "education") }}
          </template>
        </el-table-column>
        <el-table-column prop="degree" label="学位">
          <template slot-scope="scope">
            {{ filterDict(scope.row.degree, "degree") }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <button
                v-hasPermi="[
                  'inspector:global:educationBacEdit',
                  'inspector:global:educationBacEdit:s',
                ]"
                class="btnStyle"
                @click="handleEdit(scope.$index, scope.row)"
              >
                编辑
              </button>
              <button
                v-hasPermi="[
                  'inspector:global:educationBacDel',
                  'inspector:global:educationBacDel:s',
                ]"
                class="btnStyle green"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="a9" label="上传附件">
          <template slot-scope="scope">
            <div>
              <button
                v-hasPermi="[
                  'inspector:global:educationBacUpload',
                  'inspector:global:educationUpload:s',
                ]"
                class="btnStyle update"
                @click="uploadFile(scope.$index, scope.row)"
              >
                上传附件
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 附件上传 -->
    <el-dialog
      :visible.sync="showUpload"
      width="30%"
      append-to-body
      destroy-on-close
      custom-class="my-dialog-container"
      :before-close="handleClose"
    >
      <div slot="title" class="my-dialog-title">附件上传</div>
      <FileUpload v-model="filelist" :isShowTip="false">
        <el-button size="mini" type="primary">上传附件</el-button>
      </FileUpload>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-my-save"
          @click="fileSubmit()"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <!-- 教育、培训经历dialog -->
    <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">{{ 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="begainTime">
          <el-date-picker
            v-model="form.begainTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间：" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="毕业院校：" prop="graduateSchool">
          <el-input
            v-model="form.graduateSchool"
            placeholder="请输入院校名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="系别：" prop="department">
          <el-select v-model="form.department">
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictValue.toString()"
              v-for="dict in dict.department"
              :key="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业：" prop="speciality">
          <el-input
            v-model="form.speciality"
            placeholder="请输入专业"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历：" prop="education">
          <el-select v-model="form.education">
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictValue.toString()"
              v-for="dict in dict.education"
              :key="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学位：" prop="degree">
          <el-select v-model="form.degree">
            <el-option
              :label="dict.dictLabel"
              :value="dict.dictValue.toString()"
              v-for="dict in dict.degree"
              :key="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="specialityTitle">
          <el-radio-group v-model="form.specialityTitle">
            <el-radio :label="1">第一学历</el-radio>
            <el-radio :label="2">最高学历</el-radio>
          </el-radio-group>
        </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 {
  getList,
  addList,
  deleteList,
  updataList,
  getListInfo,
} from "@/api/schoolMsg";
import { dictList } from "@/api/jcy";
export default {
  props: {
    //检查员id
    inspectorId: {
      type: Number,
    },
  },
  data() {
    return {
      dict: {},
      filelist: [],
      fileFrom: {},
      //上传附件
      showUpload: false,
      //dialog打开状态
      show: false,
      //dialog标题
      title: "",
      // 遮罩层
      loading: true,
      //表格
      tableData: [],
      //表单
      form: {
        id: null,
        inspectorId: null,
        begainTime: "",
        endTime: "",
        graduateSchool: "",
        department: "",
        speciality: "",
        education: "",
        degree: "",
        specialityTitle: 1,
        educationPath: "",
      },
      queryParams: {
        inspectorId: null,
      },
      //校验
      rules: {
        begainTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        graduateSchool: [
          { required: true, message: "请输入毕业院校", trigger: "blur" },
        ],
        department: [
          {
            required: true,
            message: "请输入系别",
            trigger: "blur",
          },
        ],
        degree: [
          {
            required: true,
            message: "请选择学位",
            trigger: "change",
          },
        ],
        speciality: [
          { required: true, message: "请输入专业", trigger: "blur" },
        ],
        education: [
          {
            required: true,
            message: "请输入学历",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.queryParams.inspectorId = this.inspectorId;
    this.form.inspectorId = this.inspectorId;
    this.getDictList("department,education,degree");
  },
  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 : "未知";
    },
    getDictList(typeList) {
      let query = {
        list: typeList,
      };
      dictList(query).then((res) => {
        if (res.status == 200) {
          for (let key in res.result) {
            this.dict[key] = res.result[key];
          }
          this.getList();
        }
      });
    },
    handleClose(done) {
      this.filelist = [];
      done();
    },
    /**文件上传提交 */
    fileSubmit() {
      if (this.filelist.length == 0) {
        this.$modal.msgError("请上传文件！");
      } else {
        this.fileFrom.degreePath = [];
        this.fileFrom.degreePathname = [];
        this.filelist.forEach((item) => {
          this.fileFrom.degreePath.push(item.url);
          this.fileFrom.degreePathname.push(item.name);
        });
        this.fileFrom.degreePath = this.fileFrom.degreePath.toString();
        this.fileFrom.degreePathname = this.fileFrom.degreePathname.toString();

        updataList(this.fileFrom).then((res) => {
          this.$modal.msgSuccess("修改成功");
          this.showUpload = false;
          this.filelist = [];
          this.getList();
        });
      }
    },
    /**打开上传附件 */
    uploadFile(index, row) {
      getListInfo(row.id).then((res) => {
        this.fileFrom = res.result;
        if (this.fileFrom.degreePath) {
          this.fileFrom.degreePath = this.fileFrom.degreePath.split(",");
          this.fileFrom.degreePathname =
            this.fileFrom.degreePathname.split(",");
          this.fileFrom.degreePath.forEach((item, index) => {
            this.filelist.push({
              name: this.fileFrom.degreePathname[index],
              url: item,
            });
          });
        }
        this.showUpload = true;
      });
    },
    /**新增 */
    openDialog() {
      this.reset();
      this.title = "新增教育背景";
      this.show = true;
    },
    /**表格数据 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then((res) => {
        this.tableData = res.result.records;
        this.loading = false;
      });
    },
    /**重置 */
    reset() {
      this.form = {
        id: null,
        inspectorId: this.inspectorId,
        begainTime: "",
        endTime: "",
        graduateSchool: "",
        department: "",
        speciality: "",
        education: "",
        degree: "",
        specialityTitle: 1,
        educationPath: "",
      };
      this.resetForm("form");
    },
    /**提交 */
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updataList(this.form).then((res) => {
              this.$modal.msgSuccess("修改成功");
              this.show = false;
              this.getList();
            });
          } else {
            addList(this.form).then((res) => {
              this.$modal.msgSuccess("新增成功");
              this.show = false;
              this.getList();
            });
          }
        } else {
          return false;
        }
      });
    },
    /**编辑 */
    handleEdit(index, row) {
      this.reset();
      getListInfo(row.id).then((res) => {
        this.title = "编辑教育背景";
        this.form = res.result;
        this.show = true;
      });
    },
    /**删除 */
    handleDelete(index, row) {
      const infoIds = row.id;
      this.$modal
        .confirm("确认删除该条数据项？")
        .then(function () {
          return deleteList(infoIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</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>
