<template>
  <div class="bbsl-common-page">
    <div ref="contentPanel" class="bbsl-table-content">
      <div ref="btnPanel" class="bbsl-btn-content">
        <el-button icon="el-icon-upload2" type="warning" @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="exportTime"
          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="exportTime"
          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="exportTime">
              <el-date-picker
                v-model="querys.exportTime"
                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-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'}],
        exportTime: [
          {required: true, message: '请选择导出截止日期', trigger: 'change'}
        ]
      },
      saveLoading: false,
      tableData: [],
      showExport: false,
      queryParam: {
        pageBean: {pageSize: 20, page: 1, total: 0},

        sorter: [{direction: 'DESC', property: 'exportTime'}]
      },
      querys: {orgId: '', exportTime: ''},
      orgList: [],
      loading: false
    }
  },
  created() {
    this.loadData(1)
    this.getDict()
  },
  mounted() {},
  methods: {
    async getDict() {
      let res = await api.getOrgPage({isPage: -1})
      this.orgList = res.rows
    },
    // 获取list
    async loadData(page) {
      console.log(2)
      if (page) {
        this.queryParam.pageBean.page = page
      }

      this.loading = true
      this.tableData = []

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

        this.loading = false
      })
    },

    exportFile() {
      this.showExport = true
    },
    handleSaves() {
      this.$refs.exprotForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          try {
            let querys = JSON.parse(JSON.stringify(this.querys))
            querys.orgName = this.orgList.filter(item => {
              return item.id == querys.orgId
            })[0].name
            equSysMenu.export(querys, res => {
              if (res) {
                this.$message.success('数据导出成功')
                this.loadData(1)
              }

              this.showExport = false
            })
          } finally {
            this.saveLoading = fasle
          }
        }
      })
    }
  }
}
</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>
