<template>
  <div class="g-p20 list">
    <div class="g-bg"></div>
    <base-search @on-search="onSearch" @clear="onClear"> </base-search>
    <div v-show="!isShowAllEquipment" v-loading="table.loading" style="min-height: calc(100vh - 200px)">
      <div class="g-card-title" v-for="item in table.data" :key="item.companyId">
        <div class="g-fx-j">
          <div>{{ item.companyName }}</div>
          <el-button link @click="toAllList(item)"
            >全部设备 <el-icon style="margin-left: 5px; color: #999"><ArrowRightBold /></el-icon
          ></el-button>
        </div>
        <el-divider />
        <div class="g-fx">
          <div class="left">
            <div class="left__head">
              <div class="item1 g-fx-y" v-for="{ label, value } in equipmentNum">
                <div>{{ label }}</div>
                <div>{{ item[value] }}</div>
              </div>
            </div>
            <el-divider />
            <div class="left__content">
              <div class="item2" v-for="{ label, value } in item2">
                <div>{{ label }}</div>
                <div>{{ value || 0 }}</div>
              </div>
            </div>
            <el-divider />
            <!-- charts -->
            <div class="left__footer">
              <div class="g-fx g-mt10">
                <div class="item2 no-border">
                  <div>本月报警</div>
                  <div>{{ item.nonthAlarmCount }}</div>
                </div>
                <div ref="lineChart2" class="schart"></div>
              </div>
              <div class="g-fx g-mt10">
                <div class="item2 no-border">
                  <div>本月工单</div>
                  <div>{{ item.monthRepairCount }}</div>
                </div>
                <div ref="lineChart" class="schart"></div>
              </div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="right">
            <el-table
              header-cell-class-name="table-head"
              row-class-name="table-row"
              :data="item.devices.splice(0, 5)"
              style="width: 100%"
              @cell-click="onCellClick"
            >
              <template v-for="{ prop, label, slot } in tableConfig">
                <el-table-column :prop="prop" :label="label"> </el-table-column>
              </template>
              <base-equipment-state prop="state" width="300"></base-equipment-state>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div v-show="isShowAllEquipment" class="g-card search g-p20">
      <el-table
        :data="search.items"
        header-cell-class-name="table-head"
        row-class-name="table-row"
        @cell-click="onCellClick"
        style="width: 100%"
      >
        <el-table-column prop="deviceName" label="设备名称"> </el-table-column>
        <el-table-column prop="deviceCode" label="设备编号" width="300"> </el-table-column>
        <el-table-column prop="companyName" label="所属公司"> </el-table-column>
        <el-table-column prop="workshop" label="班组"> </el-table-column>
        <el-table-column prop="time" label="上下线时间"> </el-table-column>
        <base-equipment-state prop="state"></base-equipment-state>
      </el-table>
      <pro-pagination
        class="g-pagination"
        :total="search.data.totalCount"
        v-show="search.items.length !== 0"
        :pageObj="pageObj"
      ></pro-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { fetchAuthorizeDevices, fetchAuthorizeDevicesByFilter } from '@/api/deviceAuthorize'
  import * as echarts from 'echarts'
  import { useRequest } from '@/utils/hooks'
  import router from '@/router'
  import { useSidebarStore } from '@/store/sidebar'
  import { equipmentType } from '@/utils/constant'

  let state: any = equipmentType
  const eqStateClass: any = ref({
    0: 'info',
    1: 'success',
    2: 'warning',
    4: 'error'
  })
  const equipmentNum = [
    {
      label: '在线设备',
      value: 'onlineCount'
    },
    {
      label: '离线设备',
      value: 'offlineCount'
    },
    {
      label: '报警设备',
      value: 'alarmCount'
    }
  ]
  const item2 = [
    {
      label: '即将维保',
      value: ''
    },
    {
      label: '寿命到期',
      value: ''
    },
    {
      label: '维修设备',
      value: ''
    }
  ]
  const tableConfig: any = [
    {
      label: '设备名称',
      prop: 'name'
    },
    {
      label: '设备编号',
      prop: 'code'
    },
    // {
    //   label: '班组',
    //   prop: 'description'
    // },
    {
      label: '上下线时间',
      prop: 'time'
    }
  ]
  let pageObj = ref({
    SkipCount: 1,
    MaxResultCount: 10
  })

  const provice = ref('')
  const isShowAllEquipment = ref(false)
  let lineChart: any = ref(null)
  let lineChart2: any = ref(null)
  onMounted(async () => {
    await table.getData()
    initChart()
  })
  const initChart = () => {
    if (lineChart.value) {
      table.data.forEach((item: any, i: number) => {
        const myChart = echarts.init(lineChart.value[i])
        const myChart2 = echarts.init(lineChart2.value[i])
        myChart.setOption(JSON.parse(item.monthRepairsOption))
        myChart2.setOption(JSON.parse(item.monthAlarmsOption))
      })
    }
  }
  const sidebar = useSidebarStore()

  const toAllList = (v: any) => {
    router.push(`/equipment-center/list/all-equipment?companyId=${v.companyId}`)
    // sidebar.setIsEquipment(true)
  }
  const table = useRequest(() => fetchAuthorizeDevices({ provice: '' }), false)
  const search = useRequest(
    () =>
      fetchAuthorizeDevicesByFilter({
        Filter: provice.value,
        MaxResultCount: pageObj.value.MaxResultCount,
        SkipCount: (pageObj.value.SkipCount - 1) * pageObj.value.MaxResultCount
      }),
    false
  )
  const onClear = () => {
    isShowAllEquipment.value = false
    table.getData()
  }
  watchEffect(() => {
    search?.getData()
  })
  const onSearch = (v: any) => {
    if (!v) return
    provice.value = v
    search.getData()
    isShowAllEquipment.value = true
    pageObj.value.MaxResultCount = 10
    pageObj.value.SkipCount = 1
  }
  const onCellClick = (v: any) => {
    // http://localhost:8080/#/equipment-center/european-gourd
    // sidebar.setEquipmentInfo(v)
    useToDetail(v.id || v.deviceId)
    // sidebar.setIsEquipment(true)
  }
</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;
    font-weight: 400;
    background: rgba(236, 97, 90, 0.2);
    color: #ec615a;
  }
  .point {
    width: 8px;
    height: 8px;
    background: #ec615a;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
  }

  .info {
    background: rgba(165, 168, 175, 0.2);
    color: #a5a8b0;
    .point {
      background: rgba(165, 168, 175, 1);
    }
  }
  .warning {
    background: #fcdcca;
    color: #d5a17d;
    .point {
      background: #d5a17d;
    }
  }
  .success {
    background: rgba(104, 200, 107, 0.2);
    color: #55b758;
    .point {
      background: rgba(104, 200, 107, 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;
  }
  .list {
    position: relative;
    margin-bottom: 40px;
    .divider {
      border-right: 1px solid #eee;
      margin-right: 35px;
      margin-left: 20px;
    }
    .left {
      width: 450px;
      min-height: 360px;
      margin-right: 20px;

      &__head,
      &__content {
        display: flex;
        justify-content: space-between;
      }
      &__footer {
        margin-top: 20px;
      }
      .item1 {
        width: 120px;
        height: 64px;
        border-radius: 10px;
        text-align: center;
        justify-content: space-between;
        padding: 10px 0;
        background: #597fda;
        line-height: 20px;
        color: #fff;
        div:first-child {
          font-weight: bold;
          font-size: 12px;
        }
        div:last-child {
          font-size: 24px;
        }
        &:nth-child(2) {
          background: #a6a8af;
        }
        &:nth-child(3) {
          background: #ec615a;
        }
      }
      .item2 {
        height: 64px;
        width: 120px;
        text-align: center;
        padding: 5px 0;
        line-height: 25px;
        border-right: 1px solid #eee;
        div:first-child {
          color: #999999;
          font-size: 12px;
        }
        div:last-child {
          font-size: 24px;
          font-weight: bold;
        }
      }
      .no-border {
        border: none;
      }
    }
    .right {
      width: calc(100% - 500px);
    }
  }
  :deep(.search) {
    padding-bottom: 70px;
    .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;
    }
  }
  :deep(.right) {
    .table-head {
      height: 70px;
      font-size: 12px;
    }
    .table-row {
      height: 60px;
      font-weight: bold;
    }
  }
  .schart {
    height: 60px;
    width: 300px;
  }
</style>
