<template>
  <div class="g-p20" style="margin-bottom: 40px">
    <div class="g-title"></div>
    <div class="g-fx-j">
      <div class="g-fx">
        <div v-for="(el, i) in titleList" class="head-item g-fx" :key="i">
          <div>
            <div :class="[`color${i + 1}`]" class="text1">{{ el.label }}</div>
            <div :class="[`color${i + 1}`]" class="text2">{{ allData.data[el.value] || 0 }}</div>
          </div>
          <div class="line" v-if="i === 2 || i === 5"></div>
        </div>
      </div>
      <base-search @reset="iptValue = ''" @on-search="search" class="g-ml-20 search"></base-search>
    </div>
    <div class="g-card g-p30 g-pb-50">
      <div class="table">
        <el-table
          v-loading="allData.loading"
          header-cell-class-name="table-head"
          row-class-name="table-row"
          tooltip-effect
          :data="setTableData"
          @row-click="toDetail"
        >
          <el-table-column prop="name" label="设备名称"> </el-table-column>
          <el-table-column prop="code" label="设备编号"> </el-table-column>
          <el-table-column prop="workshopName" :filter-method="filterHandler" :filters="filterArr" label="班组">
          </el-table-column>
          <el-table-column prop="time" label="上下线时间"> </el-table-column>
          <!-- <el-table-column
            prop="state"
            label="设备状态"
            :filter-method="filterState"
            :filters="[
              { text: '设备离线', value: '0' },
              { text: '运行正常', value: '1' },
              { text: '预警', value: '2' },
              { text: '报警', value: '4' }
            ]"
            width="200"
          >
            <template #default="{ row }">
              <div>
                <div
                  class="state"
                  :class="{ success: row.state == 1, info: row.state == 0 }"
                  v-if="row.alertVariables.length == 0"
                >
                  {{ equipmentType1[row.state] }}
                  <div class="point"></div>
                </div>
                <div class="state error" v-else>
                  <div class="point"></div>

                  {{ row.alertVariables[row.alertVariables.length - 1].name }}
                </div>
              </div>
            </template>
          </el-table-column> -->
          <base-equipment-state
            :filter-method="filterState"
            prop="state"
            :filters="[
              { text: '设备离线', value: '0' },
              { text: '运行正常', value: '1' },
              { text: '预警', value: '2' },
              { text: '报警', value: '4' }
            ]"
            width="200"
          ></base-equipment-state>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { getAuthorizeDevicesByCompany } from '@/api/deviceAuthorize'
  import { useRequest } from '@/utils/hooks'
  import { equipmentType } from '@/utils/constant'
  import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
  import { uniqWith } from 'lodash'
  import PinYin from 'pinyin-match'
  import { useToDetail } from '@/utils/hooks'
  const equipmentType1: any = ref({ ...equipmentType })
  const companyId = useQuery('companyId')
  const dataObj: any = ref({
    MaxResultCount: 10,
    SkipCount: 1
  })
  const titleList = [
    {
      label: '在线设备',
      value: 'onlineCount'
    },
    {
      label: '离线设备',
      value: 'offlineCount'
    },
    {
      label: '报警设备',
      value: 'alarmCount'
    },
    {
      label: '即将维保',
      value: 'planCount'
    },
    {
      label: '寿命到期',
      value: 'lifeCount'
    },
    {
      label: '维修设备',
      value: 'repairCount'
    },
    {
      label: '本月报警',
      value: 'monthAlarmCount'
    },
    {
      label: '本月工单',
      value: 'monthRepairCount'
    }
  ]
  onMounted(async () => {
    await allData.getData()
  })
  let iptValue = ref('')
  const search = (v: any) => {
    iptValue.value = v
    const arr: any = allData
  }
  const keyword = ref('')
  const setTableData = computed(() => {
    let arr: any[] = allData.data.workshops?.map((item: any) => {
      item.devices.forEach((el: any) => {
        el.workshopName = item.workshopName
      })
      return item.devices
    })
    if (iptValue.value) {
      arr = arr?.flat().filter((item) => {
        return PinYin.match(item.name, iptValue.value)
      })
      return arr
    } else {
      return arr?.flat()
    }
  })
  const filterArr = computed(() => {
    const arr: [] = allData.data.workshops?.map((item: any) => ({
      text: item.workshopName,
      value: item.workshopName
    }))
    return arr
  })
  const allData = useRequest(() => getAuthorizeDevicesByCompany({ companyId, keyword: keyword.value }))

  const filterHandler = (value: string, row: any, column: TableColumnCtx<any>) => {
    const property = column['property']
    return row[property] === value
  }
  const filterState = (value: string, row: any, column: TableColumnCtx<any>) => {
    const property = column['property']
    return +row[property] === +value
  }
  const toDetail = (row: any) => {
    useToDetail(row.id, row.type)
  }
</script>

<style lang="less" scoped>
  .state {
    width: 90px;
    height: 26px;
    line-height: 26px;
    border-radius: 7px;
    position: relative;
    padding-left: 10px;
    padding-right: 15px;
    text-align: left;
  }
  .point {
    width: 8px;
    height: 8px;
    background: #ec615a;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
  }
  .success {
    background: rgba(104, 200, 107, 0.2);
    color: #68c86b;
    .point {
      background: rgba(104, 200, 107, 1);
    }
  }
  .info {
    background: rgba(165, 168, 175, 0.2);
    color: #a5a8b0;
    .point {
      background: rgba(165, 168, 175, 1);
    }
  }
  .error {
    width: 150px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
    background: rgba(236, 97, 90, 0.2);
    color: #ec615a;
  }
  .table {
    margin-bottom: 20px;
  }
  .search {
    order: 5;
  }
  .head-item {
    text-align: center;
    margin: 0 15px;
    line-height: 25px;
    .text1 {
      color: #999;
      font-size: 12px;
    }
    .text2 {
      color: #000;
      font-size: 18px;
      font-weight: 500;
    }
    .color1 {
      color: #597fda;
    }
    .color2 {
      color: #a6a8af;
    }
    .color3 {
      color: #ec615a;
    }
    .line {
      height: 70%;
      width: 2px;
      box-sizing: border-box;
      background-color: #eee;
      margin: auto 10px;
      margin-left: 30px;
    }
  }
  :deep(.el-table) {
    .table-head {
      background: #f6f6f6;
      .cell {
        color: #333;
      }
    }
    .table-head {
      height: 40px;
      font-size: 12px;
    }
    .table-row {
      color: #333;
      .el-table__cell {
        padding: 16px 0;
      }
    }
    .el-icon {
      width: 20px;
      height: 20px;
      font-size: 16px;
      font-weight: bold;
    }
    .fs-16 {
      font-size: 18px;
    }
  }
</style>
