<template>
  <div class="g-p20 life">
    <div class="g-bg"></div>
    <div class="g-fx">
      <pro-select type="1" placeholder="全部公司"></pro-select>
      <base-search class="g-ml-20"></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="allData.items"
        >
          <el-table-column type="expand" column-key="id">
            <template #default="{ row }">
              <div class="placeholder-box">
                <div class="placeholder-box__item" v-for="(item, index) in row.maintenancePlans" :key="index">
                  <div class="item-line"></div>
                  <div class="item-line2" :class="{ 'last-line2': index === row.maintenancePlans.length - 1 }"></div>
                  <div class="g-fx">
                    <div class="item-plan">{{ item.planType }}</div>
                    <div class="item-name" style="min-width: 150px">{{ item.name }}</div>
                    <div class="item-life" style="min-width: 150px">
                      <span>下次维保时间</span>
                      <span class="g-ml-20">{{ item.formatTime }}</span>
                    </div>
                    <div
                      class="item-status"
                      :class="{
                        'info-box': item.statusType == 0,
                        'success-box': item.statusType == 1,
                        'error-box': item.statusType == 2
                      }"
                    >
                      {{ item.planStatus }}
                    </div>
                    <el-button
                      v-if="item.canDealWith"
                      class="item-btn"
                      plain
                      type="primary"
                      size="small"
                      @click="onPlan(item)"
                      >维保</el-button
                    >
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="250" label="所属公司">
            <template #default="{ row }">
              <div class="ml-15">{{ row.companyName }}</div>
            </template>
          </el-table-column>
          <el-table-column width="200" label="设备名称">
            <template #default="{ row }">
              <div>
                <div>{{ row.deviceName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="设备编号">
            <template #default="{ row }">
              <div>
                <div>{{ row.deviceCode }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="420" label="班组">
            <template #default="{ row }">
              <div>
                <div>{{ row.workshopName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="100" label="未执行">
            <template #default="{ row }">
              <div class="item-num info">{{ row.unExecutionCount }}</div>
            </template>
          </el-table-column>
          <el-table-column width="100" label="执行中">
            <template #default="{ row }">
              <div class="item-num success">{{ row.inExecutionCount }}</div>
            </template>
          </el-table-column>
          <el-table-column width="100" label="已停止">
            <template #default="{ row }">
              <div class="item-num error">{{ row.stopedCount }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pro-pagination class="g-pagination" v-if="allData.items.length !== 0" :pageObj="pageObj"></pro-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { dealWithPlan, getMaintenancePlanAllList } from '@/api'
  import { fetchEquipmentLifes } from '@/api/equipmentLife'
  import { getRepairForAllDevices } from '@/api/repair'
  import { useRequest } from '@/utils/hooks'
  import { ElMessage, ElMessageBox } from 'element-plus'
  const isCheck = ref(false)
  const pageObj: any = ref({
    MaxResultCount: 10,
    SkipCount: 1
  })
  onMounted(async () => {
    await allData.getData()
    allData.items.forEach((element: any) => {
      element.isCheck = false
    })
  })

  const allData = useRequest(() =>
    getMaintenancePlanAllList({
      MaxResultCount: pageObj.value.MaxResultCount,
      SkipCount: (pageObj.value.SkipCount - 1) * pageObj.value.MaxResultCount
    })
  )
  const onPlan = (row: any) => {
    ElMessageBox.confirm(`确定要对【${row.name}】进行维保吗 ?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await dealWithPlan(row.id)
      ElMessage.success('操作成功')
      allData.getData()
    })
  }
</script>

<style lang="less" scoped>
  .life {
    position: relative;

    .first {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      .ml-15 {
        margin-left: 15px;
      }
    }
    .check-box {
      width: 20px;
      height: 20px;
      background: #f2f5f9;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #b0bed4;
      &--active {
        color: #fff;
        background: #5f7cd6;
      }
    }
    .second {
      height: 260px;
      width: 200px;
    }
  }
  .placeholder-box {
    min-height: 260px;
    background: #f2f5f9;
    padding-left: 350px;
    &__item {
      height: 60px;
      line-height: 60px;
      position: relative;

      .item-name {
        font-weight: bold;
        color: #333;
      }
      .item-life {
        color: #7d7d86;
        margin-left: 95px;
        margin-right: 20px;
        font-size: 12px;
      }
      .item-btn {
        margin: auto 50px;
        width: 80px;
        height: 30px;
        border-radius: 10px;
      }
    }
    .item-line {
      position: absolute;
      left: -30px;
      top: 50%;
      transform: translateY(-50%);
      height: 2px;
      width: 30px;
      background: #efefef;
    }
    .item-line2 {
      position: absolute;
      left: -30px;
      top: 0%;
      height: 61px;
      width: 2px;
      background: #efefef;
    }
    .last-line2 {
      height: 31px;
    }
  }
  .item-num {
    width: 60px;
    height: 20px;
    background: #597fda;
    border-radius: 7px;
    text-align: center;
    color: #fff;
  }
  .item-plan {
    width: 63px;
    height: 20px;
    background: #a6a9af;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    line-height: 20px;
    margin: auto 0;
    margin-right: 20px;
    color: #fff;
    text-align: center;
    font-size: 12px;
  }
  .item-status {
    width: 80px;
    height: 26px;
    line-height: 26px;
    border-radius: 7px;
    text-align: center;
    margin: auto 55px;
  }
  .table {
    margin-bottom: 20px;
  }
  :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;
    }
  }
  .info {
    background: #a6a9af;
  }
  .success {
    background: #6ad28c;
  }
  .error {
    background: #ec615a;
  }
  .info-box {
    background: rgba(153, 153, 153, 0.2);
    color: #999999;
  }
  .success-box {
    background: rgba(106, 210, 140, 0.2);
    color: #55b758;
  }
  .error-box {
    background: rgba(236, 97, 90, 0.2);

    color: #ec615a;
  }
</style>
