<template>
  <div class="g-p20 main g-h">
    <base-search isShowDate :isShowIpt="false" @update-dateValue="dateValue1.arr = $event" @on-search="search"
      @reset="reset"></base-search>
    <div class="content g-br-10 g-bg-fff g-p20">
      <el-table v-loading="allData.loading" :data="allData.items" header-cell-class-name="table-head"
        row-class-name="table-row" style="width: 100%" @row-click="onRowClick">
        <el-table-column prop="date" label="报修内容 ">
          <template #default="{ row }">
            <div class="second">
              {{ row.description }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" width="200" label="报修人">
          <template #default="{ row }">
            <div class="three">
              {{ row.customer }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" width="200" label="维修时间">
          <template #default="{ row }">
            <div class="three">
              {{ row.time }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="300" prop="address1" label="报修状态">
          <template #default="{ row }">
            <div class="four-row">
              <div class="four"
                :class="{ 'wait-assign': row.state == 1, 'wait-accept': row.state == 2, 'in-repair': row.state == 3, 'wait-audit': row.state == 4, 'complete': row.state == 5 }">
                {{ stateCN[row.state] }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pro-pagination class="pagination" v-if="allData.data.totalCount" :total="allData.data.totalCount"
        :pageObj="pageObj"></pro-pagination>
    </div>
  </div>
</template>

<script setup lang="ts" name="维修记录">
import { getRepairListByDevice } from '@/api'
import { equipmentMaintainType } from '@/utils/constant'
const stateCN: any = equipmentMaintainType
const router = useRouter()
let pageObj = ref({
  MaxResultCount: 10,
  SkipCount: 0
})
let dateValue = reactive({
  arr: []
})
let dateValue1 = reactive({
  arr: []
})
const search = (v: any) => {
  dateValue.arr = dateValue1.arr
}

const allData = useRequest(
  () =>
    getRepairListByDevice({
      ...pageObj.value,
      DeviceId: useQuery('id'),
      startTime: dateValue.arr?.[0],
      endTime: dateValue.arr?.[1]
    }),
  false
)
watchEffect(() => {
  allData?.getData()
})
const onRowClick = (row: any) => {
  router.push(`/equipment-center/maintenance-record/details?orderId=${row.id}`)
}
const reset = () => {
  dateValue.arr = []
  pageObj.value = {
    MaxResultCount: 10,
    SkipCount: 0
  }
}
</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 {
    display: flex;
    justify-content: center;
  }

  .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;
  }

  .wait-assign {
    color: #EC615A;
    background: #FFDEDD;
  }

  .wait-accept {
    color: #CE75EC;
    background: #F9E2FD;
  }

  .wait-audit {
    color: #5571B4;
    background: #DCE3F1;
  }

  .in-repair {
    color: #FAE9E2;
    background: #D79671;
  }

  .complete {
    color: #3EC962;
    background: #D1F5DE;
  }


  .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>
