<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">
              <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">
              <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">
      <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>

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

<script>
import { getNum, getNumList } from '@/api/pro/outsourcingPro'
import { getProOptions } from '@/api/pro/subManagement/approval/personApproval'
import { indexContinuous } 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
      }
    }
  },
  created() {
    this.getProOptions()
    this.getNum()
    this.getList()
  },
  methods: {
    indexContinuous,
    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()
    }
  }
}
</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>

