<template>
  <div class="container">
    <el-row class="row-container">
      <el-col :span="4">
        <div class="grid-content">
          <div class="text p1 hhh">
            <div class="title">
              <span class="name">在建/筹备工程数</span>
              <span class="num">{{ proNum }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <div class="text p2 hhh">
            <div class="title">
              <span class="name">施工总人数</span>
              <span class="num">{{ personNum }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <div class="text p3 hhh">
            <div class="title" style="cursor: pointer" @click="handleSpecialPersonNum">
              <span class="name">特殊工种总人数</span>
              <span class="num">{{ specialPersonNum }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <div class="text p4 hhh">
            <div class="title">
              <span class="name">设备总数</span>
              <span class="num">{{ equipNum }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <div class="text p5 hhh">
            <div class="title" style="cursor: pointer" @click="handleSpecialEquipNum">
              <span class="name">特种设备总数</span>
              <span class="num">{{ specialEquipNum }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" style="float: left">
      <el-form-item label="工程名称">
        <el-select v-model="queryParams.proName" placeholder="请选择工程" clearable>
          <el-option v-for="dict in proOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" border>
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column label="工程名称" align="center" prop="proName" />
      <el-table-column label="工程状态" align="center" prop="proStatus" />
      <el-table-column label="施工总人数" align="center" prop="personNum" />
      <el-table-column label="特殊工种总人数" align="center" prop="specialPersonNum" />
      <el-table-column label="施工设备总数" align="center" prop="equipNum" />
      <el-table-column label="特种设备总数" align="center" prop="specialEquipNum" />
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleViewDetails(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 特殊工种总人数弹框 -->
    <el-dialog title="特殊工种总人数" :visible.sync="specialPersonNumDialogVisible" width="60%">
      <el-table :data="specialPersonNumList" style="overflow-x: auto">
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="indexContinuous(specialPersonNumQueryParams.pageNum, specialPersonNumQueryParams.pageSize)"
        />
        <el-table-column label="姓名" show-overflow-tooltip width="150" align="center" prop="consName" />
        <el-table-column label="岗位" width="150" align="center" prop="post" />
        <el-table-column label="特殊工种种类" width="150" align="center" prop="workType" />
        <el-table-column label="性别" width="60" align="center" prop="sex" />
        <el-table-column label="年龄" width="60" align="center" prop="age" />
        <el-table-column label="联系方式" width="120" align="center">
          <template slot-scope="scope">
            <!-- 检查是否存在身份证号 -->
            <span v-if="scope.row.phone">{{ hideSensitiveInfo(scope.row.phone) }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="籍贯" show-overflow-tooltip width="150" align="center" prop="natives" />
        <el-table-column label="身份证号码" width="160" align="center">
          <template slot-scope="scope">
            <!-- 检查是否存在身份证号 -->
            <span v-if="scope.row.idCard">{{ hideSensitiveInfo(scope.row.idCard) }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="民族" width="60" align="center" prop="nation" />
        <el-table-column label="家庭住址" show-overflow-tooltip width="150" align="center" prop="homeAddress" />
        <el-table-column label="现住址" show-overflow-tooltip width="150" align="center" prop="address" />
        <el-table-column label="人脸照片" align="center" prop="faceUrl">
          <template slot-scope="scope">
            <el-popover placement="right" title="" trigger="hover">
              <img
                :src="`${scope.row.facePath ? lookFaceFile() + scope.row.facePath : ''}`"
                :min-width="300"
                :height="300"
                alt="照片"
              />
              <img
                slot="reference"
                :src="`${scope.row.facePath ? lookFaceFile() + scope.row.facePath : ''}`"
                style="max-height: 50px; max-width: 50px"
                :alt="`${scope.row.facePath ? lookFaceFile() + scope.row.facePath : ''}`"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="审批状态" width="150" align="center" prop="status" />
      </el-table>

      <pagination
        v-show="specialPersonNumTotal > 0"
        :total="specialPersonNumTotal"
        :page.sync="specialPersonNumQueryParams.pageNum"
        :limit.sync="specialPersonNumQueryParams.pageSize"
        @pagination="getSpecialPersonNumList"
      />
    </el-dialog>

    <!-- 特种设备总数弹框 -->
    <el-dialog title="特种设备总数" :visible.sync="specialEquipNumDialogVisible" width="60%">
      <el-table :data="specialEquipNumList">
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="indexContinuous(specialEquipNumQueryParams.pageNum, specialEquipNumQueryParams.pageSize)"
        />
        <el-table-column label="工器具名称" align="center" prop="equipName" />
        <el-table-column label="型号" align="center" prop="model" />
        <el-table-column label="单位" align="center" prop="unit" />
        <el-table-column label="数量" align="center" prop="num" />
        <el-table-column label="设备类型" align="center" prop="equipType" />
        <el-table-column label="检测时间" align="center" prop="detectionTime" />
        <el-table-column label="是否强制检测检验" align="center" prop="isForceDetection" />
        <el-table-column label="下次检测时间" align="center" prop="nextDetectionTime" />
        <el-table-column label="入场时间" align="center" prop="admissionDate" />
      </el-table>

      <pagination
        v-show="specialEquipNumTotal > 0"
        :total="specialEquipNumTotal"
        :page.sync="specialEquipNumQueryParams.pageNum"
        :limit.sync="specialEquipNumQueryParams.pageSize"
        @pagination="getSpecialEquipNumList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getNum, getNumList, getSpecialPersonNumListApi, getSpecialEquipNumListApi } from '@/api/pro/outsourcingPro'
import { getProOptions } from '@/api/pro/subManagement/approval/personApproval'
import { indexContinuous, hideSensitiveInfo, lookFaceFile } from '@/utils/bonus'

export default {
  name: 'indexOwner',
  data() {
    return {
      loading: false,
      total: 0,
      list: [],
      proOptions: [],
      proNum: 0,
      personNum: 0,
      specialPersonNum: 0,
      equipNum: 0,
      specialEquipNum: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        proName: undefined,
      },
      // 特殊工种总人数弹框
      specialPersonNumDialogVisible: false,
      specialPersonNumList: [],
      // 特殊工种总人数查询参数
      specialPersonNumQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 特殊工种总人数查询总人数
      specialPersonNumTotal: 0,
      // 特种设备总人数弹框
      specialEquipNumDialogVisible: false,
      specialEquipNumList: [],
      // 特种设备总人数查询参数
      specialEquipNumQueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 特种设备总人数查询总人数
      specialEquipNumTotal: 0,
    }
  },
  created() {
    this.getProOptions()
    this.getNum()
    this.getList()
  },
  methods: {
    indexContinuous,
    hideSensitiveInfo,
    lookFaceFile,
    getProOptions() {
      getProOptions({}).then(response => {
        this.proOptions = response.data
      })
    },
    getNum() {
      const params = {
        consUuid: this.consId,
        proId: this.proId,
      }
      getNum(params).then(response => {
        this.proNum = response.proNum
        this.personNum = response.personNum
        this.specialPersonNum = response.specialPersonNum
        this.equipNum = response.equipNum
        this.specialEquipNum = response.specialEquipNum
        this.loading = false
      })
    },
    getList() {
      this.loading = true
      getNumList(this.queryParams).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams.proName = undefined
      this.handleQuery()
    },

    handleSpecialPersonNum() {
      this.getSpecialPersonNumList()
      this.specialPersonNumDialogVisible = true
    },

    // 获取特殊工种总人数列表
    getSpecialPersonNumList() {
      getSpecialPersonNumListApi(this.specialPersonNumQueryParams).then(response => {
        console.log(response, 'response')
        this.specialPersonNumList = response.rows
        this.specialPersonNumTotal = response.total
      })
    },
    handleSpecialEquipNum() {
      this.getSpecialEquipNumList()
      this.specialEquipNumDialogVisible = true
    },
    getSpecialEquipNumList() {
      getSpecialEquipNumListApi(this.specialEquipNumQueryParams).then(response => {
        console.log(response, 'response')
        this.specialEquipNumList = response.rows
        this.specialEquipNumTotal = response.total
      })
    },

    handleViewDetails(row) {
      if (row.isOutsource == 0) {
        this.$router.push({
          path: '/project/projectManagement/constructionPro',
          query: {
            proName: row.proName,
          },
        })
      }
      if (row.isOutsource == 1) {
        this.$router.push({
          path: '/project/projectManagement/outsourcingPro',
          query: {
            proName: row.proName,
          },
        })
      }
    },
  },
}
</script>

<style scoped lang="scss">
.el-row {
  width: 100%;
  height: 30%;
  margin-bottom: 20px;
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.text {
  width: 250px;
  height: 140px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  color: black;
  font-weight: bold;
  align-items: center;
}

.p1 {
  background: linear-gradient(to bottom, #e1f5d3, #fff);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: sans-serif;
}

.p2 {
  background: linear-gradient(to bottom, #d4e2fc, #fff);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: sans-serif;
}

.p3 {
  background: linear-gradient(to bottom, #d4e9f2, #fff);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: sans-serif;
}
.p4 {
  background: linear-gradient(to bottom, #eee2fb, #fff);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: sans-serif;
}

.p5 {
  background: linear-gradient(to bottom, #faf2e9, #fff);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: sans-serif;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: black;
}
.name {
  margin-top: -25px;
  margin-left: 15px;
  font-size: 20px;
}
.num {
  margin-top: 8%;
  margin-left: 15px;
  font-size: 30px;
}
.hhh {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}
</style>
