<template>
  <div>
    <BaseDialog
      :width="dialogWidth"
      :isShow.sync="isImportDialog"
      title="导入学员"
      @submit="confirmImport"
      @close="close"
      confirmName="确认导入"
    >
      <div class="content" v-loading="loading">
        <input
          id="importData"
          type="file"
          ref="importData"
          style="display: none"
          accept=".xlsx, .xls"
          @change="handleImport"
        />
        <div v-if="!tableData.length">
          <el-button type="primary" size="medium" @click="clickHandleImport"
            >导入学员</el-button
          >
          <div class="down" @click="downloadTemplate">下载导入模板</div>
        </div>
        <div v-else id="tableList">
          <div class="headerNavTool">
            <div class="leftIndexText">
              全部 <span style="color: #1890ff">{{ total }}</span> 人； 正确
              <span style="color: #1890ff">1</span> 人； 错误
              <span style="color: #dd201b">1</span> 人；
            </div>
            <div class="rightBtnBox">
              <el-button size="medium" @click="clickHandleImport" type="primary"
                >继续导入</el-button
              >
              <el-button
                size="medium"
                @click="handleDelete(null)"
                type="primary"
                >批量删除</el-button
              >
            </div>
          </div>
          <el-table
            ref="tableList"
            :loading="loading"
            :data="tableData"
            style="width: 100%"
            max-height="500"
            fit
            border
            :header-cell-style="{
              'text-align': 'center',
              'background-color': '#eee',
              color: '#333',
              fontSize: '14px',
            }"
            :cell-style="{
              'text-align': 'center',
            }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              fixed="left"
            ></el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="50 "
            ></el-table-column>
            <el-table-column prop="staffName" label="姓名" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.staffName"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="idCard" label="身份证号" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.idCard"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="telephone" label="手机号码" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.telephone"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="degree" label="学历" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.degree" placeholder="请选择">
                  <el-option
                    v-for="item in degreeTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="companyName" label="所属公司" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.companyName"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="subjectId" label="科目" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.subjectName" placeholder="请选择">
                  <el-option
                    v-for="item in scope.row.courseSubjectList"
                    :key="item.value"
                    :label="item.subjectName"
                    :value="item.subjectName"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="year" label="年份" width="150">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.year"
                  type="year"
                  placeholder="选择年"
                  value-format="yyyy"
                  style="width: 100px"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </BaseDialog>
  </div>
</template>
      
<script>
export default {
  props: {
    api: {
      type: Function,
      default: () => {},
    },
    id: {
      type: String,
      default: "",
    },
    degreeTypeList: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      ruleForm: {},
      isImportDialog: false,
      dialogWidth: "400px",
      loading: false, //当前表单加载是否加载动画
      multipleSelection: [],
      tableData: [],
      goodsItem: {},
      total: 0,
    };
  },
  watch: {
    tableData(val) {
      this.dialogWidth = this.tableData.length > 0 ? "900px" : "400px";
    },
  },
  mounted() {},

  methods: {
    openBoxs(row) {
      this.isImportDialog = true;
      this.goodsItem = JSON.parse(JSON.stringify(row));
      this.tableData = [];
    },
    clickHandleImport() {
      this.$refs.importData.click();
    },
    // 确认导入操作
    confirmImport(row) {
      console.log("确认导入操作");
      this.tableData.forEach(item => {
        item.courseSubjectList = item.courseSubjectList?.filter(i => item.subjectName == i.subjectName)
      })
      this.$emit("handle-import-data", this.tableData);
      this.isImportDialog = false;
    },
    // 下载导入模版
    downloadTemplate() {
      let str = "oss/images/file/20240516/1715831007066.xlsx";
      this.$methodsTools.exportData(str, false)
    },
    // 导入操作
    handleImport(e) {
      this.loading = true;
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      const type = file.name.toLowerCase().split(".").splice(-1);
      const fileType = ["xlsx", "xls"].some((item) => item == type);
      if (!fileType) {
        this.$message.error("上传格式需为：.xlsx/.xls");
        e.target.value = "";
        return;
      }
      let formData = new FormData();
      formData.append("file", file);
      if (this.goodsItem.goodsType && this.goodsItem.goodsType != 10) {
        formData.append("goodsId", this.goodsItem.goodsId);
      } else {
        formData.append("configId", this.goodsItem.configId);
      }
      this.$api
        .importStudent(formData)
        .then((res) => {
          if (!res.rows.length) {
            this.$message.warning("未检测到导入数据，请检查导入文件");
            return;
          }
          const data = res.rows;
          if (this.tableData && this.tableData.length > 0) {
            this.tableData = this.tableData.concat(data);
          } else {
            this.tableData = data;
          }
          var obj = {};
          let arrs = this.tableData;
          for (let i = 0; i < arrs.length; i++) {
            if (!obj[arrs[i].idCard]) {
              obj[arrs[i].idCard] = true;
            } else {
              arrs.splice(i, 1);
              i--;
            }
          }
          this.total = res.total;
          this.$message.success("导入成功！");
        })
        .finally(() => {
          e.target.value = "";
          this.loading = false;
        });
    },
    handleDelete(row) {
      if (!this.multipleSelection.length && !row) {
        this.$message.warning("请勾选需要删除的选项");
        return;
      }
      this.$confirm(
        row
          ? `确定删除此内容？内容删除后将无法恢复！`
          : `此操作将永久删除所勾选的${this.multipleSelection.length}条数据, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          const ids = row
            ? [row.idCard]
            : this.multipleSelection.map((item) => item.idCard);
          console.log(ids, "ids");
          this.tableData = this.tableData.filter(
            (item) => !ids.includes(item.idCard)
          );
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    //多选操作回调
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    close() {},
  },
};
</script>
      
<style lang="scss" scoped>
#tableList {
  padding: 16px 16px 16px;
  border-radius: 8px;
  box-shadow: 0px 0px 9px 1px rgba(28, 41, 90, 0.1);
  background: #ffffff;
  .headerNavTool {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -16px;
    .rightBtnBox {
      display: flex;
      align-items: center;
    }
  }
}
.content {
  font-size: 14px !important;
  text-align: center;

  .down {
    margin: 10px;
    color: dodgerblue;
    text-decoration: underline;
    &:hover {
      text-decoration: underline;
      // border-bottom: 1px solid #3498db;
    }
    cursor: pointer;
  }
}
</style>
      