<template>
  <div class="dashboard-container">
    <div class="bg-image" :style="{'background-image':'url(' + require('@/assets/images/slogan.jpg') + ')'}">
      <img style="width: 100%;" src="">
    </div>
    <el-row :gutter="20">
      <el-col :md="24" :lg="12">
        <el-card style="height: 340px;overflow: auto; margin-top: 20px;">
          <div class="title">
            <a href="javascript:void(0)" class="title-value" @click="goto('/c/enterprise/index')">企业注册申请</a>
            <el-button size="mini" type="primary" @click="doAuditAll1">一键审核通过</el-button>
          </div>
          <el-table ref="table1" :data="table1" row-key="id" style="margin-top: 5px;">
            <el-table-column :show-overflow-tooltip="true" prop="name" label="企业名称" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="auditState" label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.auditState==1? '未审核':scope.row.auditState==2? '已审核':scope.row.auditState==3? '不通过':'' }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="address" label="地址" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="applyDatetime" label="申请时间" align="center" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :md="24" :lg="12">
        <el-card style="height: 340px;overflow: auto; margin-top: 20px;">
          <div class="title">
            <a href="javascript:void(0)" class="title-value" @click="goto('/c/noticeMix/index')">矿山停产申请</a>
          </div>
          <el-table ref="table2" :data="table2" row-key="id" style="margin-top: 5px;">
            <el-table-column :show-overflow-tooltip="true" prop="mineName" label="矿山名称" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="enterpriseName" label="所属企业" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="createDatetime" label="申请时间" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="auditState" label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.auditState==1? '未审核':scope.row.auditState==2? '已审核':scope.row.auditState==3? '不通过':'' }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="" align="center">
              <template slot-scope="scope">
                <el-button @click="look2(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!-- <el-col :md="24" :lg="12">
        <el-card style="height: 340px;overflow: auto; margin-top: 20px;">
          <div class="title">
            <a href="javascript:void(0)" class="title-value" @click="goto('/c/underground/dangerousWork')">地下矿山最新危险作业</a>
            <el-button size="mini" type="primary" @click="doAuditAll3">一键审核通过</el-button>
          </div>
          <el-table ref="table3" :data="table3" row-key="id" style="margin-top: 5px;">
            <el-table-column :show-overflow-tooltip="true" prop="mineName" label="所属矿山" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="name" label="名称" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="workDate" label="作业时间" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="workState" label="作业状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.workState==1? '正常':scope.row.workState==2? '异常':'' }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="auditState" label="审核状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.auditState==1? '未审核':scope.row.auditState==2? '已审核':scope.row.auditState==3? '不通过':'' }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="" align="center">
              <template slot-scope="scope">
                <el-button @click="look3(scope.row.workUuid)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col> -->
      <el-col :md="24" :lg="12">
        <el-card style="height: 340px;overflow: auto; margin-top: 20px;">
          <div class="title">
            <a href="javascript:void(0)" class="title-value" @click="goto('/c/leader/scheduling')">地下矿山当日带班领导</a>
          </div>
          <el-table ref="table4" :data="table4" row-key="id" style="margin-top: 5px;">
            <el-table-column :show-overflow-tooltip="true" prop="mineName" label="所属矿山" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="staffName" label="带班领导" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="leaderClassesName" label="班次" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="x" label="已下井" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.x || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="beginTime" label="下井时间" align="center" />
            <el-table-column :show-overflow-tooltip="true" prop="endTime" label="上井时间" align="center" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!--弹窗-->
    <el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialogAuditAll1Show" :title="'确认一键'" width="580px">
      <div>
        <span>确认要将</span>
        <span style="font-weight: bold;">全部 未审核</span>
        <span>的企业申请</span>
        <span style="font-weight: bold;color: #67C23A;">一键审核通过</span>
        <span>吗？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogAuditAll1Show=false">取消</el-button>
        <el-button type="primary" @click="auditAll1Submit">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialogDetail2Show" :title="'停产申请'" width="640px">
      <el-form ref="dialogDetail2Form" :model="dialogDetail2Data" size="mini" label-width="180px" style="margin-right: 80px;">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="矿山名称：" prop="mineName">
              <span>{{ dialogDetail2Data.mineName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属企业：" prop="enterpriseName">
              <span>{{ dialogDetail2Data.enterpriseName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="申请时间：" prop="createDatetime">
              <span>{{ dialogDetail2Data.createDatetime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="停产说明：" prop="createDatetime">
              <span>{{ dialogDetail2Data.note }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件：" prop="filesPath">
              <el-link v-for="file in dialogDetail2Data._fileList" :key="file.url" @click="openFile(file)">{{ file.name }}</el-link>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-show="dialogDetail2Data.auditState==1" slot="footer" class="dialog-footer">
        <el-button type="error" @click="audit2(3)">审核不通过</el-button>
        <el-button type="primary" @click="audit2(2)">审核通过</el-button>
      </div>
    </el-dialog>
    <el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialogDetail3Show" :title="'危险作业备案变更清单'" width="960px">
      <el-form label-width="140px">
        <el-form-item label="排序方式：">
          <el-radio-group v-model="ddialogDetail3Reverse" size="mini">
            <el-radio-button :label="true">最新优先</el-radio-button>
            <el-radio-button :label="false">时间顺序</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-timeline :reverse="ddialogDetail3Reverse">
        <el-timeline-item v-for="(dialogDetail3DataItem,i) in dialogDetail3Data" :key="dialogDetail3DataItem.id" :color="dialogDetail3Data.length==i+1?'#67C23A':null" :timestamp="(i==0?'初次提交：':dialogDetail3Data.length==i+1?'最新变更：':'变更：')+dialogDetail3DataItem.createDatetime" placement="top">
          <el-card>
            <el-form :model="dialogDetail3DataItem" size="mini" label-width="120px" style="margin-right: 80px;">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="危险作业名称：" prop="name">
                    <span>{{ dialogDetail3DataItem.name }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="审核状态：" prop="auditState">
                    <span v-if="dialogDetail3DataItem.auditState==1">未审核</span>
                    <span v-if="dialogDetail3DataItem.auditState==2">审核通过</span>
                    <span v-if="dialogDetail3DataItem.auditState==3">审核不通过</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="作业时间：" prop="workDate">
                    <span>{{ dialogDetail3DataItem.workDate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态：" prop="workState">
                    <span v-if="dialogDetail3DataItem.workState==1">正常</span>
                    <span v-if="dialogDetail3DataItem.workState==2">异常</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="note">
                    <span>{{ dialogDetail3DataItem.note }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="文件：" prop="filesPath">
                    <div v-for="file in dialogDetail3DataItem._fileList" :key="file.url">
                      <el-link type="primary" @click="openFile(file)">{{ file.name }}</el-link>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="提交时间：" prop="createDatetime">
                    <span>{{ dialogDetail3DataItem.createDatetime }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="审核时间：" prop="auditDatetime">
                    <span>{{ dialogDetail3DataItem.auditDatetime }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="dialogDetail3DataItem.complaint" :span="24">
                  <el-form-item label="申诉说明：" prop="complaint">
                    <span>{{ dialogDetail3DataItem.complaint }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="dialogDetail3DataItem.complaint" :span="24">
                  <el-form-item label="申诉文件：" prop="complaintFilesPath">
                    <div v-for="file in dialogDetail3DataItem._complaintFileList" :key="file.url">
                      <el-link type="primary" @click="openFile(file)">{{ file.name }}</el-link>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col v-if="dialogDetail3DataItem.complaint" :span="24">
                  <el-form-item label="申诉时间：" prop="complaintDatetime">
                    <span>{{ dialogDetail3DataItem.complaintDatetime }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
    <el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialogAuditAll3Show" :title="'确认一键'" width="580px">
      <div>
        <span>确认要将</span>
        <span style="font-weight: bold;">全部矿山 未审核</span>
        <span>的危险作业</span>
        <span style="font-weight: bold;color: #67C23A;">一键审核通过</span>
        <span>吗？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogAuditAll3Show=false">取消</el-button>
        <el-button type="primary" @click="auditAll3Submit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import enterpriseApi from '@/api/kd/enterprise'
import mineStopApplyApi from '@/api/kd/mineStopApply'
import dangerousWorkApi from '@/api/kd/dangerousWork'
import leaderSchedulingApi from '@/api/kd/leaderScheduling'
import { parseTime } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  name: 'Home4Center',
  data() {
    return {
      table1: [],
      dialogAuditAll1Show: false,
      table2: [],
      dialogDetail2Show: false,
      dialogDetail2Data: {},
      table3: [],
      dialogAuditAll3Show: false,
      dialogDetail3Show: false,
      dialogDetail3Data: {},
      ddialogDetail3Reverse: true,
      table4: []
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ])
  },
  mounted() {
    // if (this.user.enterpriseId !== 0) { // 身份错误
    //   this.$router.replace('/dashboard')
    //   return
    // }
    this.reload1()
    this.reload2()
    this.reload3()
    this.reload4()
  },
  methods: {
    goto(url) {
      this.$router.push({ path: url })
    },
    reload1() {
      enterpriseApi.getPage({ auditState: 1, count: 100 }).then(response => {
        this.table1 = response.results
        if (this.table1.length < 10) {
          enterpriseApi.getPage({ auditState: 3 }).then(response2 => {
            this.table1 = [...this.table1, ...response2.results].slice(0, 10)
            if (this.table1.length < 10) {
              enterpriseApi.getPage({ auditState: 2 }).then(response3 => {
                this.table1 = [...this.table1, ...response3.results].slice(0, 10)
              })
            }
          })
        }
      })
    },
    reload2() {
      mineStopApplyApi.getPage({ auditState: 1, count: 100 }).then(response => {
        this.table2 = response.results
        if (this.table2.length < 10) {
          mineStopApplyApi.getPage({ auditState: 3 }).then(response2 => {
            this.table2 = [...this.table2, ...response2.results].slice(0, 10)
          })
        }
      })
    },
    reload3() {
      dangerousWorkApi.getPage({ hasEnable: true, auditState: 1, sorts: 'workDate', count: 100 }).then(response => {
        this.table3 = response.results
        if (this.table3.length < 10) {
          dangerousWorkApi.getPage({ hasEnable: true, auditState: 3, sorts: 'workDate' }).then(response2 => {
            this.table3 = [...this.table3, ...response2.results].slice(0, 10)
            if (this.table3.length < 10) {
              dangerousWorkApi.getPage({ hasEnable: true, auditState: 2, sorts: 'workDate' }).then(response3 => {
                this.table3 = [...this.table3, ...response3.results].slice(0, 10)
              })
            }
          })
        }
      })
    },
    reload4() {
      leaderSchedulingApi.getPage({ schedulingDate: parseTime(new Date(), '{y}-{m}-{d}'), count: 100 }).then(response => {
        this.table4 = response.results
      })
    },
    doAuditAll1() {
      this.dialogAuditAll1Show = true
    },
    auditAll1Submit() {
      enterpriseApi.auditAll({ auditState: 2 }).then(() => {
        this.$message.success('一键审核通过成功')
        this.dialogAuditAll1Show = false
        this.reload1()
      }).catch(() => {
        this.reload1()
      })
    },
    look2(rowData) {
      this.dialogDetail2Data = JSON.parse(JSON.stringify(rowData))
      if (this.dialogDetail2Data.filePath) {
        this.$set(this.dialogDetail2Data, '_fileList', JSON.parse(this.dialogDetail2Data.filePath))
      }
      this.dialogDetail2Show = true
    },
    audit2(auditState) {
      const auditParam = {
        id: this.dialogDetail2Data.id,
        auditState
      }
      mineStopApplyApi.audit(auditParam).then(() => {
        this.dialogDetail2Show = false
        this.dialogDetail2Data = {}
        this.$message.success('审核完成')
        this.reload2()
      }).catch(() => {
        this.reload2()
      })
    },
    doAuditAll3() {
      this.dialogAuditAll3Show = true
    },
    auditAll3Submit() {
      dangerousWorkApi.auditAll({ auditState: 2 }).then(() => {
        this.$message.success('一键审核通过成功')
        this.dialogAuditAll3Show = false
        this.reload3()
      }).catch(() => {
        this.reload3()
      })
    },
    look3(workUuid) {
      dangerousWorkApi.getByWorkUuid(workUuid).then(response => {
        this.dialogDetail3Data = response.results
        this.dialogDetail3Data.forEach(dw => {
          if (dw.filesPath) {
            dw._fileList = JSON.parse(dw.filesPath)
          }
          if (dw.complaintFilesPath) {
            dw._complaintFileList = JSON.parse(dw.complaintFilesPath)
          }
        })
        this.dialogDetail3Show = true
      }).catch(() => {
        this.reload3()
      })
    },
    openFile(file) {
      if (file.url) {
        window.open(this.baseApi + '/file' + file.url)
      } else if (file.response && file.response.result) {
        window.open(this.baseApi + '/file' + file.response.result)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    min-height: calc(100vh - 83px);
    .bg-image{
      background-repeat: no-repeat;
      background-size: cover;
      background-position-y: center;
      height: 170px;
    }
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-value{
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
</style>
