<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="数据导入" width="740px" top="1vh">
      <div class="title">模板下载</div>
      <el-button style="margin-top: 10px" size="small" type="primary"
        @click="exportExcel(new Date().getTime().toString())">模板下载</el-button>
      <div style="color: red; margin-top: 10px">
        导入的时候请勿修改模版表单各列栏目名称
      </div>

      <el-upload style="margin-top: 10px" drag :action="action" :data="{
        table_name: tableName,
        course_id: course_id ? course_id : '',
        ...tableData
        }" :headers="{
          Authorization: `Bearer ${getToken()}`,
        }" :on-success="uploadSuccess" :on-error="uploadFail"
        :file-list="fileList">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
      </el-upload>

      <div class="title" style="margin-top: 10px;">数据预览</div>
      <Table :height="350" :data="tableList" :columns="table" style="margin-top: 10px;"></Table>
      <div style="font-size: 12px;zoom: 0.8;">总共数据：{{ tableList.length }}条</div>
      <el-button type="primary" size="small" style="margin-top: 10px;" @click="imports">确认导入</el-button>
    </el-dialog>
  </div>
</template>

<script>
  import * as XLSX from "xlsx";
  import {
    saveAs
  } from "file-saver";
  import {
    getToken
  } from "@/utils/auth";
  import {
    imports
  } from "@/api/system/baseForm";
  import {
    realTableShow
  } from "@/api/system/customForm";
  import request from '@/utils/request'
  export default {
    props: {
      formInfo: {
        type: Array,
        default: () => [],
      },
      tableName: String,
      course_id: String,

    },
    data() {
      return {
        action: `${process.env.VUE_APP_BASE_API}/api/admin/base-form/excel-show`,
        import_action: '',
        dialogVisible: false,
        // 多个键值对，目前keep_status
        tableData: {},
        headers: [],
        tableList: [],
        table: [],
        fileList:[]
      };
    },
    methods: {
      getToken,
      show() {
        this.dialogVisible = true;
      },
      hidden() {
        this.dialogVisible = false;
      },
      // 获取表头
      async getHeaders() {
        const res = await realTableShow({
          table_name: this.tableName
        })
        let b = [];
        for (let key in res) {
          if (!this.base.isNull(res[key])) {
            b.push({
              key: key,
              title: res[key]
            });
          }
        }
        //  课表
        if (this.tableName === 'course_contents') {
          b.push({
            key: '',
            title: '老师简介'
          });
          b.map(item => {
            if (item.key === 'teacher_id') {
              item.key = 'teacher_name'
            }
          })
        }
        // 考勤
        if (this.tableName === 'course_keeps') {
          b.map(item => {
            if (item.key === 'user_id') {
              item.key = 'user_name'
            }
            if(item.key==='status'){
              item.key = 'status_name'
            }
          })
        }

        this.table = this.headers = b
      },
      //上传
      uploadFail(err) {
        console.log(err);
        this.$message({
          message: "上传失败",
          type: "error",
        });
      },
      uploadSuccess(response,file,fileList) {
        if(this.tableName==='course_keeps'){
          response.map(item=>{
            console.log("item",item)
            item.status_name = item.status===1?'正常':'缺勤'
          })
        }
        this.tableList = response;
        this.fileList = fileList
        this.$message({
          message: `上传成功`,
          type: "success",
        });
      },

      exportExcel(sheetName) {
        const data = [this.headers.map((header) => header.title)];
        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.aoa_to_sheet(data);
        XLSX.utils.book_append_sheet(wb, ws, sheetName);
        const wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        saveAs(
          new Blob([wbout], {
            type: "application/octet-stream"
          }),
          `${sheetName}.xlsx`
        );
      },

      imports() {
        request({
          method: "post",
          url: this.import_action,
          data: {
            table_name: this.tableName,
            course_id: this.course_id ? this.course_id : '',
            data: this.tableList
          }
        }).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: `成功导入${res.total}条`
          })
          this.hidden();
          this.$emit('refresh')
        })

      }
    },
    computed: {},
    watch: {
      formInfo(newVal) {
        if (newVal && newVal instanceof Array) {
          this.table = this.headers = newVal.map((i) => {
            return {
              key: i.field,
              title: i.name,
            };
          });
        }
      },
      dialogVisible(newval) {
        console.log("newval", newval, this.tableName)
        if (newval) {
          let changeTableName = this.tableName.replace('_', '-')
          this.action = `${process.env.VUE_APP_BASE_API}/api/admin/${changeTableName}/excel-show`
          this.import_action = `/api/admin/${changeTableName}/import`
          this.getHeaders()
          console.log("action", this.action, this.import_action)
        } else {
          this.tableList = []
          this.table = []
          this.headers = []
          this.tableData = []
          this.fileList = []
        }
      }
    },
  };
</script>

<style scoped lang="scss">
  .title {
    font-size: 15px;
    font-weight: 600;

    padding: 8px 4px;
    position: relative;

    &::before {
      content: '';
      width: 4px;
      background: $primaryColor;

      position: absolute;
      top: 8px;
      bottom: 8px;
      left: -8px;
    }
  }
</style>
