<template>
  <div class="g-p20 main g-h">
    <base-search @on-search="search" @reset="reset"></base-search>
    <div class="content g-br-10 g-bg-fff g-p20">
      <el-table
        :data="allData.items"
        v-loading="allData.loading"
        header-cell-class-name="table-head"
        row-class-name="table-row"
        style="width: 100%"
      >
        <el-table-column prop="date" label="维保类型" width="180">
          <template #default="{ row }">
            <div class="first">
              {{ row.planType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="维保内容">
          <template #default="{ row }">
            <div class="second">
              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" width="200" label="下次维保时间">
          <template #default="{ row }">
            <div class="three">
              {{ row.formatTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="400" prop="address1" label="维保状态">
          <template #default="{ row }">
            <div class="four-row">
              <el-button v-if="row.canDealWith" :loading="upkeep.loading && row.id === upkeepId" @click="onKeep(row)"
                >维保</el-button
              >
              <div class="four" :class="{ success: row.statusType == 1, info: row.statusType == 3 }">
                {{ row.planStatus }}
              </div>
              <!-- <div v-if="row.address1 == 1" class="four">已停止</div>
              <div v-if="row.address1 == 2" class="four" :class="{ success: row.address1 == 2 }">执行中</div>
              <div v-if="row.address1 == 3" class="four" :class="{ info: row.address1 == 3 }">未执行</div> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pro-pagination
        v-if="allData.data.totalCount"
        class="pagination"
        :pageObj="pageObj"
        :total="allData.data.totalCount"
      ></pro-pagination>
    </div>
  </div>
</template>

<script setup lang="ts" name="维保计划">
  import { dealWithPlan, getMaintenancePlans } from '@/api'
  import { ElMessage, ElMessageBox } from 'element-plus'

  let pageObj = ref({
    MaxResultCount: 10,
    SkipCount: 1
  })

  let iptValue = ref('')
  const allData = useRequest(() =>
    getMaintenancePlans({
      MaxResultCount: pageObj.value.MaxResultCount,
      SkipCount: (pageObj.value.SkipCount - 1) * pageObj.value.MaxResultCount,
      DeviceId: useQuery('id'),
      KeyWord: iptValue.value
    })
  )
  let upkeepId = ref('')
  const upkeep = useRequest(() => dealWithPlan(upkeepId.value))
  const onKeep = (item: any) => {
    ElMessageBox.confirm(`确定要对【${item.name}】进行维保吗?`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      upkeepId.value = item.id
      await upkeep.getData()
      ElMessage.success('操作成功')
    })
  }
  watchEffect(() => {
    allData?.getData()
  })
  const search = (v: any) => {
    iptValue.value = v
    if (!v) {
      allData?.getData()
    }
  }
  const reset = () => {
    pageObj.value = {
      MaxResultCount: 10,
      SkipCount: 1
    }
    iptValue.value = ''
  }
</script>

<style lang="less" scoped>
  .main {
    background: #c8cfdf;
  }
  .content {
    min-height: calc(100vh - 200px);
    padding-bottom: 100px;
    position: relative;
    .first {
      width: 63px;
      height: 20px;
      background: #a6a9af;
      border-bottom-left-radius: 10px;
      border-top-right-radius: 10px;
      font-size: 12px;
      color: #fff;
      text-align: center;
    }
    .second {
      font-weight: bold;
    }
    .three {
      color: #7d7d86;
    }
    .four-row {
      position: relative;
      .el-button {
        position: absolute;
        width: 80px;
        height: 26px;
        border: 1px solid #597fda;
        color: #597fda;
        border-radius: 10px;
        left: 10px;
        top: 0%;
      }
    }
    .four {
      width: 80px;
      height: 26px;
      background: rgba(236, 97, 90, 0.2);
      border-radius: 7px;
      color: #ec615a;
      line-height: 26px;
      font-size: 12px;
      margin: 0 auto;
    }
    .success {
      color: #55b758;
      background: rgba(104, 200, 107, 0.2);
    }
    .info {
      color: #999999;
      background: rgba(rgba(153, 153, 153, 0.2));
    }
    .pagination {
      position: absolute;
      bottom: 20px;
      right: 30px;
    }
  }
  :deep(.content) {
    .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>
