<template>
  <div class="riskmanager-wrapper">
    <div class="tools-wrapper">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-input v-model="enterinfoByRisk" placeholder="请输入企业名称" />
        </el-col>
        <el-col :span="4">
          <el-button type="success" size="mini" @click="searchEnterInfo">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="success" size="mini" :disabled="loadingRiskTable" v-loading="loadingRiskTable" @click="exportRiskExcel">导出</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="isLoadingRiskEnter"
      :data="enterrisk"
      style="width: 100%"
    >
      <el-table-column
        label="企业名称"
        prop="companyName"
      />
      <el-table-column
        label="企业负责人"
        prop="companyChargePer"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope1">
          <div class="tools-risk-upload-wrapper">
            <el-button
              size="mini"
              type="primary"
              @click="showEnterRisk($event, scope1.$index, scope1.row)"
            >显示企业风险情况</el-button>
            <!-- <el-button
              size="mini"
              type="success"
              @click="importRisk($event, scope1.$index, scope1.row)"
            ></el-button> -->
            <!-- <div class="import-file-risk-wrapper" @click="importRisk">
              <label class="import-file-risk">
                导入
                <input :ref="`file${scope1.$index}`" multiple type="file" hidden @change="realImportRisk(scope1.$index, scope1.row)">
              </label>
            </div> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="currentPageDegree"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalElement"
      @size-change="handleSizeChangeRisk"
      @current-change="handleCurrentChangeRisk"
    />
  </div>
</template>

<script>
import axiosFile from '@/utils/requestfile.js'
import { getAllCompanyInfo } from '../../../api/industry.js'
import axios from 'axios'
export default {
  data() {
    return {
      // 企业信息
      enterinfoByRisk: '',
      // 企业风险
      enterrisk: [
      ],
      // 是否显示提示框
      isShowAlert: false,
      // 总的个数
      totalElement: 0,
      // 当前页码
      currentPage: 1,
      // 当前页的条数
      currentPageDegree: 10,
      // 当前是否在加载数据
      isLoadingRiskEnter: false,
      // 导出风险表格
      loadingRiskTable: false
    }
  },
  mounted() {
    this.initEnterInfoRisk()
  },
  methods: {
    // 初始化企业信息
    async initEnterInfoRisk(toPagination) {
      let replaceArray = []
      await getAllCompanyInfo({
        page: toPagination === undefined ? (this.currentPage - 1) : 0,
        size: this.currentPageDegree,
        companyName: this.enterinfoByRisk
      }).then(res => {
        this.totalElement = res.totalElements
        replaceArray = [...res.content]
        replaceArray = replaceArray.sort((a, b) => a.companyId - b.companyId)
        this.enterrisk = [...replaceArray]
      })
    },
    // 显示企业详细风险
    showEnterRisk(event, index, row) {
      console.log(event, index, row)
      // 跳转到企业风险情况页面
      this.$router.push(
        {
          path: '/security/riskmanager/showRisk/' + row.companyId + '&' + row.companyName
        }
      )
    },
    // 搜索企业信息
    searchEnterInfo() {
      this.initEnterInfoRisk('a')
    },
    // 导入风险弹出框
    importRisk($event, index, row) {
      if (this.isShowAlert === false) {
        $event.stopPropagation()
        $event.preventDefault()
        this.$alert('请先将文件另存为97-2003(xls)格式', '请注意', {
          confirmButtonText: '确定',
          callback: action => {
            console.log(action, 'helloworld')
            this.isShowAlert = true
            $event.target.click()
            setTimeout(() => {
              this.isShowAlert = false
            }, 0)
          }
        })
      }
    },
    // 导入风险文件
    realImportRisk(index, row) {
      console.log(index, row, '导入风险文件')
      // 调用提交按钮
      // const formdata = new FormData()
      console.log(this.$refs['file' + index].files, 'files')
      console.log(axiosFile, 'helloworld')
      const formdata = new FormData()
      formdata.append('companyId', row.companyId)
      for (let i = 0; i < this.$refs['file' + index].files.length; i++) {
        formdata.append('files', this.$refs['file' + index].files[i])
      }
      if (this.$refs['file' + index].files.length === 0) {
        return
      }
      console.log(this.$refs['file' + index].files, 'hellworld, to justify yourself believer and behavior')
      axiosFile({
        url: '/api/thRisk/importExcel',
        method: 'POST',
        data: formdata
      }).then(res => {
        this.$message({
          message: '上传成功',
          type: 'success'
        }, () => {
          this.$message.error('上传失败')
        })
      })
    },
    // 每页条数
    handleSizeChangeRisk(val) {
      this.currentPageDegree = val
    },
    // 当前页码改变
    handleCurrentChangeRisk(val) {
      // 去请求数据 改变data
      this.currentPage = val
      this.initEnterInfoRisk()
    },
    exportRiskExcel() {
      this.loadingRiskTable = true
      axios({
          url: process.env.VUE_APP_BASE_API + '/api/thRisk/download',
          method: 'get',
          responseType: 'blob',
          onDownloadProgress: (ProgressEvent) => {
            console.log(ProgressEvent, 'exportHDAnalyze exportHDAnalyze exportHDAnalyze')
            // this.loadingHDAnalyzeExcel = true
            this.loadingRiskTable = true
            if (this.loadingRiskTableTimer) {
              clearTimeout(this.loadingRiskTableTimer)
            } else {
              this.loadingRiskTableTimer = setTimeout(() => {
                this.loadingRiskTable = false
              }, 500)
            }
            // if (this.timerLoadingHDAnalyzeExcel) {
            //   clearTimeout(this.timerLoadingHDAnalyzeExcel)
            // } else {
            //   setTimeout(() => {
            //     this.loadingHDAnalyzeExcel = false
            //   }, 500)
            // }
          },
          // params: {
          //   startTime: parseTime(new Date(this.hdAnalyzeChosenDateRange[0]), '{y}-{m}-{d}'),
          //   endTime: parseTime(new Date(this.hdAnalyzeChosenDateRange[1]), '{y}-{m}-{d}')
          // }
        }).then(res => {
          console.dir(res, 'console')
          console.log(res, 'this.hdAnalyzeChosenDateRange  this.hdAnalyzeChosenDateRange')
          const url = window.URL.createObjectURL(new Blob([res.data]))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', decodeURI(res.headers['content-disposition'].split("''")[1]))
          document.body.appendChild(link)
          link.click()
          link.remove()
          window.URL.revokeObjectURL(link.href)
        })
    }
  }
}
</script>

<style lang="scss">
  .riskmanager-wrapper {
    padding: 20px;
    .tools-risk-upload-wrapper {
      display: flex;
      align-items: center;
      .import-file-risk-wrapper {
        display: inline-block;
        margin: 0 20px;
        .import-file-risk {
          color: white;
          border-radius: 3px;
          background-color: #1890ff;
          /* display: inline-block; */
          text-align: center;
          width: 56px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          &:hover {
            /* color: #46a6ff; */
            /* border-color: #badeff; */
            background-color: #46a6ff;
          }
        }
      }
    }
  }
</style>
