<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="10">
          <el-button type="success" size="mini" @click="searchEnterInfo">搜索</el-button>
        </el-col>
        <el-col :span="8">
          <div class="import-file-security-wrapper">
            <label class="import-file-security">
              导入
              <input ref="filesecurity" type="file" hidden @change="realImportSecurityFile">
            </label>
          </div>
        </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>
          </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'
export default {
  data() {
    return {
      // 企业信息
      enterinfoByRisk: '',
      // 企业风险
      enterrisk: [
      ],
      // 是否显示提示框
      isShowAlert: false,
      // 总的个数
      totalElement: 0,
      // 当前页码
      currentPage: 1,
      // 当前页的条数
      currentPageDegree: 10,
      // 当前是否在加载数据
      isLoadingRiskEnter: false
    }
  },
  mounted() {
    this.initEnterInfoRisk()
  },
  methods: {
    // 初始化企业信息
    async initEnterInfoRisk() {
      let replaceArray = []
      await getAllCompanyInfo({
        page: this.currentPage - 1,
        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/cerl/editcerl/' + row.companyId + '&' + row.companyName
        }
      )
    },
    // 搜索企业信息
    searchEnterInfo() {
      this.initEnterInfoRisk()
    },
    // 导入风险弹出框
    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()
    },
    // 真正导入安全检查文件
    realImportSecurityFile() {
      if (this.$refs['filesecurity'].files.length > 0) {
        // console.log(this.$refs['filesecurity'])
        this.isLoadingRiskEnter = true
        const formData = new FormData()
        formData.append('file', this.$refs['filesecurity'].files[0])
        axiosFile({
          url: '/api/thCompanyEntityResponseList/batchImportCERL',
          method: 'POST',
          data: formData
        }).then(res => {
          this.$message({
            message: '上传成功',
            type: 'success'
          })
          this.isLoadingRiskEnter = false
        }, () => {
          this.$message.error('上传失败')
          this.isLoadingRiskEnter = false
        })
      }
    }
  }
}
</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;
          }
        }
      }
    }
  }
  .import-file-security-wrapper {
    display: inline-block;
    margin: 0 20px;
    .import-file-security {
      color:white;
      border-radius: 3px;
      background-color: 3px;
      background-color: #1890ff;
      text-align: center;
      width: 56px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      &:hover {
        background-color: #46a6ff;
      }
    }
  }
</style>
