<template>
  <div>
    <TitleBox titleText="单位装备配置" @handleMore="handleMore" style="margin-bottom: 10px" />
    <div>
      <el-table
        class="table-sty"
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center', fontSize: '13px' }"
        :cell-style="{ textAlign: 'center', fontSize: '13px' }"
        max-height="310"
        stripe
      >
        <!-- 序号 -->
        <el-table-column type="index" label="序号" width="50" />
  
        <!-- 单位名称 -->
        <el-table-column prop="deptName" label="单位名称" min-width="110" />
  
        <!-- 装备价值 -->
        <el-table-column prop="totalValue" label="装备价值（万元）" width="90">
          <template slot-scope="scope">
            <span class="num num-color">
              {{ scope.row.totalValue || 0 }}
            </span>
          </template>
        </el-table-column>
  
        <!-- 装备数量（台） -->
        <el-table-column label="装备数量（台）">
          <el-table-column prop="totalEquipmentQuantity" label="总数" width="70">
            <template slot-scope="scope">
              <span class="num num-color">
                {{ scope.row.totalEquipmentQuantity }}
              </span>
            </template>
          </el-table-column>
  
          <el-table-column prop="lineNum" label="线路" width="65">
            <template slot-scope="scope">
              <span class="num">{{ scope.row.lineNum }}</span>
            </template>
          </el-table-column>
  
          <el-table-column prop="substationNum" label="变电" width="65">
            <template slot-scope="scope">
              <span class="num">{{ scope.row.substationNum }}</span>
            </template>
          </el-table-column>
  
          <el-table-column prop="cableNum" label="电缆" width="65">
            <template slot-scope="scope">
              <span class="num">{{ scope.row.cableNum }}</span>
            </template>
          </el-table-column>
        </el-table-column>
  
        <!-- 配置率 -->
        <el-table-column label="配置率">
          <el-table-column prop="configRate" label="总数" width="70">
            <template slot-scope="scope">
              <span class="num num-color">
                {{ scope.row.configRate }}
              </span>
            </template>
          </el-table-column>
  
          <el-table-column prop="valueA" label="线路" width="65">
            <template slot-scope="scope">
              <span class="num">
                {{ scope.row.valueA }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="valueB" label="变电" width="65">
            <template slot-scope="scope">
              <span class="num">
                {{ scope.row.valueB }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="valueC" label="电缆" width="65">
            <template slot-scope="scope">
              <span class="num">
                {{ scope.row.valueC }}
              </span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <!-- 单位装备配置 -->
    <UnitEquipConfig ref="unitEquipConfig" />
  </div>
</template>

<script>
import { getUnitEquipmentConfigurationApi } from '@/api/wsScreen/index'
import TitleBox from '../TitleBox'
import UnitEquipConfig from '@/views/home/components/provincial/Dialog/UnitEquipConfig'

export default {
  name: 'Center1',
  components: {
    TitleBox,
    UnitEquipConfig
  },
  data() {
    return {
      tableData: [],
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    async getList() {
      try {
        const res = await getUnitEquipmentConfigurationApi()
        console.log('🚀 ~ getList ~ res:', res)
        if (!res.data) return
        this.tableData = res.data || []
        if (this.tableData.length > 5) this.tableData = this.tableData.slice(0, 5)
      } catch (error) {
        console.log('🚀 ~ getList ~ error:', error)
      }
    },
    handleMore() {
      this.$refs.unitEquipConfig.openDialog()
    },
  },
}
</script>

<style lang="scss" scoped>
.num {
  font-family: OPPOSans;
  font-size: 14px;
}
.num-color {
  color: #2cbab2;
}

.table-sty ::v-deep .el-table__cell {
  padding: 7px 0;
}
</style>
