<template>
  <div class="bbsl-common-page">
    <div ref="contentPanel" class="bbsl-table-content">
      <div ref="btnPanel" class="bbsl-btn-content">
        <!-- <el-upload
          ref="upload"
          :auto-upload="false"
          :file-list="fileList"
          :http-request="upLoadFile"
          :on-change="e => handleChange(e, fileList)"
          :show-file-list="false"
          accept="."
          action="no"
          class="avatar-uploader"
        >
          <el-button
            icon="el-icon-download"
            style="margin-right: 10px;"
            type="primary"
            >导入
          </el-button>
        </el-upload> -->
        <el-button icon="el-icon-upload2" type="primary" @click="exportFile"
          >导入
        </el-button>
      </div>
      <el-table
        ref="multipleSelection"
        v-loading="loading"
        :cell-style="{'text-align': 'center'}"
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :max-height="tableMaxHeight"
        :style="{width: '100%'}"
        size="mini"
        @row-dblclick="handleDbClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="55"
        ></el-table-column>

        <el-table-column
          label="导入单位"
          min-width="120"
          prop="orgName"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="上报截止日期"
          min-width="120"
          prop="expirationTime"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          label="导入状态"
          min-width="120"
          prop="status"
          show-overflow-tooltip
        >
          <template v-slot="{row}">
            {{ row.status == '0' ? '失败' : '成功' }}
          </template>
        </el-table-column>

        <el-table-column
          label="创建时间"
          min-width="120"
          prop="importTime"
          show-overflow-tooltip
          sortable="custom"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        ref="paginationPanel"
        :current-page="queryParam.pageBean.page"
        :page-size="queryParam.pageBean.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        :total="total"
        align="right"
        background
        class="bbsl-pagination"
        layout="prev, pager, next,total, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="showExport" title="导入数据">
      <el-form
        ref="exprotForm"
        :model="querys"
        :rules="rules"
        label-position="top"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="导入单位" prop="orgId">
              <el-select
                v-model="querys.orgId"
                filterable
                placeholder="请选择导入单位"
                style="width: 100%;"
              >
                <el-option
                  v-for="(item, i) in orgList"
                  :key="i"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上报截止日期" prop="expirationTime">
              <el-date-picker
                v-model="querys.expirationTime"
                placeholder="请选择上报截止日期"
                style="width: 100%;"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="文件导入" prop="file">
            <el-upload
              ref="upload"
              :auto-upload="false"
              :file-list="fileList"
              :limit="1"
              :on-change="e => handleChange(e, fileList)"
              accept="."
              action="no"
              class="avatar-uploader"
            >
              <el-button
                icon="el-icon-download"
                size="small"
                style="margin-right: 10px;"
                >选择文件
              </el-button>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" type="primary" @click="handleSaves">
          确 认
        </el-button>
        <el-button @click="showExport = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import equSysMenu from '@/api/examination/dataMerging.js'
import {TableMixin} from '@/mixins/tableMixin'
import * as api from '@/api/systemInterface.js'

export default {
  name: 'dataMerging',

  mixins: [TableMixin],
  data() {
    return {
      rules: {
        orgId: [{required: true, message: '请选择导入单位', trigger: 'change'}],
        expirationTime: [
          {required: true, message: '请选择导入截止日期', trigger: 'change'}
        ],
        file: [{required: true, message: '请选择导入文件', trigger: 'change'}]
      },
      saveLoading: false,
      tableData: [],
      showExport: false,
      queryParam: {
        pageBean: {pageSize: 20, page: 1, total: 0},

        sorter: [{direction: 'DESC', property: 'expirationTime'}]
      },
      querys: {orgId: '', expirationTime: '', file: ''},
      orgList: [],
      loading: false,
      fileList: []
    }
  },
  created() {
    this.getDict()
  },
  mounted() {},
  methods: {
    handleSaves() {
      console.log(this.querys)

      this.$refs.exprotForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          try {
            this.querys.orgName = this.orgList.filter(item => {
              return item.id == this.querys.orgId
            })[0].name
            let formData = new FormData()
            for (let key in this.querys) {
              if (key == 'file') {
                formData.append(key, this.querys[key])
              } else {
                formData.append(key, this.querys[key])
              }
            }

            equSysMenu.importExcel(formData, res => {
              if (res) {
                this.$message.success('数据导入成功')
                this.loadData(1)
              }

              this.showExport = false
            })
          } finally {
            this.saveLoading = false
          }
        }
      })
    },
    async getDict() {
      let res = await api.getOrgPage({isPage: -1})
      this.orgList = res.rows
    },
    exportFile() {
      this.showExport = true
    },
    // 获取list
    async loadData(page) {
      console.log(2)
      if (page) {
        this.queryParam.pageBean.page = page
      }

      this.loading = true
      this.tableData = []

      await equSysMenu.getImport(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows

        this.loading = false
      })
    },

    relatedJobs(val) {
      this.$refs.relatedJobs.add(val)
    },

    //导入
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
      if (
        file.raw.name.split('.')[1] == 'xlsx' ||
        file.raw.name.split('.')[1] == 'xls' ||
        file.raw.name.split('.')[1] == 'xlsm'
      ) {
        console.log(111111, file)

        this.querys.file = file.raw
      } else {
        this.$message.warning('请上传xls,xlsx,xlsm格式文件！')
        fileList.splice(0)
      }
    }
    // //自定义上传方法（覆盖默认上传行为）
    // upLoadFile(file) {
    //   let formData = new FormData()
    //   formData.append('file', file)
    //   equSysMenu.importExcel(formData, res => {
    //     if (res.state) {
    //       this.$notify({
    //         type: 'success',
    //         message: '导入成功',
    //         duration: 2000
    //       })
    //       this.loadData(1)()
    //     } else {
    //       this.$notify({
    //         type: 'error',
    //         message: res.message,
    //         duration: 2000,
    //         offset: 80
    //       })
    //       this.loadData(1)
    //     }
    //   })
    // }
  }
}
</script>
<style lang="scss" scoped>
.type-tag {
  margin: 0 2px;
}

.common-tree-container {
  height: calc(100% - 70px);
  margin-top: 0.52083vw;
  padding: 1.04167vw 1.04167vw;
  background-color: #fff;
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0px 0px 0.625vw 0 rgba(92, 102, 83, 0.2);
}

a {
  text-decoration: none;
  color: #ffffff;
}

.title {
  width: 100%;
  margin-bottom: 10px;

  i {
    color: #1289fe;
    font-size: 25px;
  }

  span {
    font-size: 25px;
  }
}

::v-deep .el-tree {
  border: none;
}

.avatar-uploader {
  display: inline-block;
  margin-left: 10px;
}

::v-deep .el-tree-node__content {
  padding: 5px 0;
}
</style>
