<template>
  <div>
    <div>
      <el-table
        :data="tableData"
        :border="true"
        style="width: 100%"
        v-loading="loading"
      >
        <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="begainTime" label="开班结束时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.begainTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="traningName" label="培训名称"> </el-table-column>
        <el-table-column
          prop="traningUnit"
          label="培训组织单位"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="traningAddress" label="培训地点">
        </el-table-column>
        <el-table-column prop="narionalProvincialLevel" label="国家级/省级">
        </el-table-column>
        <el-table-column prop="classHour" label="学时"> </el-table-column>
        <el-table-column prop="courseType" label="课程类型">
          <template slot-scope="scope">
            {{ filterDict(scope.row.courseType, "courseType") }}
          </template>
        </el-table-column>
        <el-table-column prop="learningStyle" label="学习方式">
          <template slot-scope="scope">
            {{ filterDict(scope.row.learningStyle, "learningStyle") }}
          </template>
        </el-table-column>
        <el-table-column prop="traningResults" label="培训成绩">
        </el-table-column>
        <el-table-column
          prop="assessmentResults"
          label="考核结果"
          :formatter="
            (row, column, cellValue, index) => {
              return cellValue == 1
                ? '优秀'
                : cellValue == 2
                ? '合格'
                : cellValue == 3
                ? '不合格'
                : '';
            }
          "
        >
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.exportStatus == null">
              <button
                class="btnStyle"
                @click="handleUpdate(scope.$index, scope.row)"
                v-hasPermi="[
                  'inspector:global:trainEdit',
                  'inspector:global:trainEdit:s',
                ]"
              >
                编辑
              </button>
              <button
                class="btnStyle green"
                @click="handleDelete(scope.$index, scope.row)"
                v-hasPermi="[
                  'inspector:global:trainDel',
                  'inspector:global:trainDel:s',
                ]"
              >
                删除
              </button>
              <!-- <button
                class="btnStyle update"
                @click="handleEdit(scope.$index, scope.row)"
               
              >
                上传附件
              </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="155px"
        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="traningName">
          <el-input
            v-model="form.traningName"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="培训地点：" prop="traningAddress">
          <el-input
            v-model="form.traningAddress"
            placeholder="请输入地点"
          ></el-input>
        </el-form-item>
        <el-form-item label="培训班级别：" prop="narionalProvincialLevel">
          <el-select
            v-model="form.narionalProvincialLevel"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学时：" prop="classHour" class="input-units">
          <el-input
            v-model.number="form.classHour"
            placeholder="请输入学时"
          ></el-input>
          <div class="units-text">时</div>
        </el-form-item>
        <el-form-item label="培训组织单位：" prop="traningUnit">
          <el-input
            v-model="form.traningUnit"
            placeholder="请输入单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="培训成绩：" class="input-units">
          <el-input
            v-model.number="form.traningResults"
            placeholder="请输入成绩"
          ></el-input>
          <div class="units-text">分</div>
        </el-form-item>
        <el-form-item label="课程类型：" prop="courseType">
          <el-select v-model="form.courseType" placeholder="请选择">
            <el-option
              v-for="item in dict.courseType"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学习方式：" prop="learningStyle">
          <el-select v-model="form.learningStyle" placeholder="请选择">
            <el-option
              v-for="item in dict.learningStyle"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue.toString()"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核结果：">
          <el-radio-group v-model="form.assessmentResults">
            <el-radio
              v-for="item in radio"
              :key="item.label"
              :label="item.label"
              >{{ item.value }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传附件：" prop="assessmentFilename">
          <FileUpload v-model="list" :isShowTip="false">
            <el-button
              size="mini"
              type="primary"
              v-hasPermi="[
                'inspector:global:trainUpload',
                'inspector:global:trainUpload:s',
              ]"
              >上传培训情况附件</el-button
            >
          </FileUpload>
        </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="fileDiaglog"></fileDiaglog> -->
  </div>
</template>
<script>
import { exportExcel, dictList } from "@/api/jcy";
export default {
  data() {
    const unitName = (rule, value, callback) => {
      if (value.includes("辽宁省药品监督管理局")) {
        callback(new Error("不得输入辽宁省药品监督管理局等字样"));
      } else {
        callback();
      }
    };
    return {
      dict: {},
      list: [],
      //单选按钮
      radio: [
        {
          value: "优秀",
          label: 1,
        },
        {
          value: "合格",
          label: 2,
        },
        {
          value: "不合格",
          label: 3,
        },
      ],
      //区分修改和新增
      distinguish: "",
      options: [
        {
          value: "国家级",
          label: "0",
        },
        {
          value: "省级",
          label: "1",
        },
      ],
      loading: true,
      //弹出框的等待效果
      load1: true,
      show: false,
      tableData: [],
      form: {
        assessmentResults: 1,
        assessmentFilename: "",
        assessmentResultsUrl: "",
        begainTime: "",

        endTime: "",

        classHour: "",
        courseType: "",
        idCard: null,
        //检查员id
        inspectorId: null,
        learningStyle: "",
        narionalProvincialLevel: "",
        remark: "",
        traningAddress: "",
        traningName: "",
        traningResults: "",
        traningUnit: "",
      },
      rules: {
        begainTime: [
          { required: true, message: "请选择时间", trigger: "blur" },
        ],
        endTime: [{ required: true, message: "请选择时间", trigger: "blur" }],

        traningName: [
          { required: true, message: "培训名称不能为空", trigger: "blur" },
        ],

        traningAddress: [
          { required: true, message: "培训地点不能为空", trigger: "blur" },
        ],
        narionalProvincialLevel: [
          { required: true, message: "请选择培训班级别", trigger: "blur" },
        ],
        classHour: [
          { required: true, message: "学时不能为空", trigger: "blur" },
          {
            type: "number",
            message: "请输入数字类型的学时",
            trigger: "blur",
          },
        ],
        traningUnit: [
          {
            required: true,
            message: "培训组织单位不能为空",
            trigger: "blur",
          },
          { required: true, validator: unitName, trigger: "blur" },
        ],
        traningResults: [
          { required: true, message: "培训成绩不能为空", trigger: "blur" },
          {
            type: "number",
            message: "请输入数字类型的培训成绩",
            trigger: "blur",
          },
        ],
        courseType: [
          { required: true, message: "课程类型不能为空", trigger: "blur" },
        ],
        learningStyle: [
          { required: true, message: "学习方式不能为空", trigger: "blur" },
        ],
        // assessmentResults: [
        //   { required: true, message: "请选择考核结果", trigger: "change" },
        // ],
        assessmentFilename: [
          { required: true, message: "请选择附件", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    inspectorId: {
      type: Number,
      default: 0,
    },
  },
  components: {
    // fileDiaglog,
  },
  created() {
    //获取检查员的id并赋值
    this.form.inspectorId = this.inspectorId;
    this.getDictList("courseType,learningStyle");
  },
  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();
        }
      });
    },
    //获取培训详情列表
    async getList() {
      this.loading = true;
      let msg = await this.$api.training.listTraining({
        inspectorId: this.form.inspectorId,
      });
      if (msg.status == 200) this.loading = false;
      this.tableData = msg.result.records;
    },
    //重置
    reset() {
      this.form = {
        assessmentResults: 1,
        assessmentFilename: "",
        assessmentResultsUrl: "",
        begainTime: "",
        classHour: "",
        courseType: "",
        //检查员id
        inspectorId: this.inspectorId,
        learningStyle: "",
        narionalProvincialLevel: "",
        remark: "",
        traningAddress: "",
        traningName: "",
        traningResults: "",
        traningUnit: "",
      };
      this.list = [];
    },
    //新增
    async handleAdd() {
      this.distinguish = "新增";
      this.reset();
      this.show = true;
      this.load1 = false;
    },
    //编辑
    async handleUpdate(index, row) {
      this.reset();
      this.show = true;
      this.load1 = true;
      this.distinguish = "修改";
      //获取详情
      let msg1 = await this.$api.training.detailTraining(row.id);
      if (msg1.status == 200) this.load1 = false;
      this.form = msg1.result;
      if (msg1.result.assessmentResultsUrl && msg1.result.assessmentFilename) {
        let arr1 = [];
        let arr2 = [];
        arr1 = msg1.result.assessmentResultsUrl.split(",");
        arr2 = msg1.result.assessmentFilename.split(",");
        arr1.forEach((value, index) => {
          this.list.push({
            url: value,
            name: arr2[index],
          });
        });
      }
    },
    //弹窗的确认
    submit() {
      let arr1 = [];
      let arr2 = [];
      this.list.forEach((value, index) => {
        arr1.push(value.name);
        arr2.push(value.url);
      });
      this.form.assessmentFilename = arr1.join(",");
      this.form.assessmentResultsUrl = arr2.join(",");
      this.$refs.formName.validate(async (valid) => {
        if (valid) {
          if (this.distinguish === "新增") {
            let msg = await this.$api.training.addTraining(this.form);
            if (msg.status == 200) this.dialog();
          } else if (this.distinguish === "修改") {
            let msg = await this.$api.training.updateTraining(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.training.deleteTraining(row.id);
          if (msg1.status == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //上传附件
    async handleEdit(index, row) {
      this.$refs.fileDiaglog.open(row.id, "培训");
    },
    //导出
    async exportTrain() {
      let params = {
        value: 1,
        ids: this.inspectorId,
      };
      exportExcel(params).then((res) => {
        if (res.data.code == 200) {
          this.uploadFile(
            res.data.data.result.url,
            res.data.data.result.originalFilename
          );
        }
      });
    },
    //判断上午下午
    timerChange(e) {
      let timer = new Date(e);
      let hours = timer.getHours();
      if (hours < 12) {
        return "上午";
      } else {
        return "下午";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.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: 0 8px;
}
.update {
  background: #ebf5ff;
  border: 1px solid #a1cbf8;
  color: #0e7cf4;
}
.input-units {
  position: relative;
  .units-text {
    font-size: 13px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c4cc;
  }
}
</style>
