<template>
  <div class="g-p20 g-mb-40">
    <!-- 待办任务 -->
    <div>
      <div class="g-title">待办任务</div>
      <div class="g-fx-j">
        <div class="left-box">
          <div
            class="left-box__item g-fx-j"
            @click="toDetails(index)"
            v-for="({ label, value, url }, index) in headList"
            :key="label"
          >
            <div>
              <div class="item-num">{{ orderObj[value] }}</div>
              <div class="item-text">{{ label }}</div>
            </div>
            <el-image style="width: 128px; height: 128px" :src="url" fit="cover" />
          </div>
        </div>
        <div class="right-box g-fx-j">
          <div>
            <div class="right-box__time">{{ nowTime }}</div>
            <div class="right-box__date">{{ nowWeek }}</div>
          </div>
          <el-button type="primary" class="right-box__btn">
            <el-icon><Calendar /></el-icon> <span>签到记录</span>
          </el-button>
        </div>
      </div>
    </div>
    <!-- 业务记录 -->
    <div style="margin: 40px"></div>
    <div>
      <div class="g-title g-mb-40">业务记录</div>
      <div class="g-fx-j record-head">
        <div class="g-fx">
          <div
            class="record-head__item"
            :class="{ 'record-head__item--active': isPitch == value }"
            @click="onPithTable(value)"
            v-for="{ label, value } in recordList"
            :key="value"
          >
            {{ label }}
            <span class="divider"></span>
          </div>
        </div>
        <el-button link type="primary" class="record-all">全部记录</el-button>
      </div>
      <!-- 表格部分 -->
      <div class="table">
        <el-table
          v-loading="table.loading"
          header-cell-class-name="table-head"
          row-class-name="table-row"
          :data="table.items"
          style="width: 100%"
          @cell-click="cellClick"
        >
          <template v-for="{ prop, label, slot } in tableConfig">
            <el-table-column :prop="prop" :label="label">
              <template v-if="slot" #default="e"> {{ e.row.address }}</template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import Img1 from '@/assets/img/paidan.png'
  import Img2 from '@/assets/img/jiedan.png'
  import Img3 from '@/assets/img/shenhe.png'
  import Img4 from '@/assets/img/weixiu.png'
  import { fetchTodoRepairList, fetchTodoTasks } from '@/api/repair'
  import { useRequest } from '@/utils/hooks'
  import { getMyWorkRepairList } from '@/api'
  const nowTime = ref('')
  const nowWeek = ref('')

  const tableConfig: any = [
    {
      label: '设备名称',
      prop: 'deviceName'
    },
    {
      label: '故障描述',
      prop: 'description'
    },
    {
      label: '报修时间',
      prop: 'firstTime'
    },
    {
      label: '派单时间',
      prop: 'secondTime'
    },
    {
      label: '派单人',
      prop: 'customer'
    }
  ]
  const headList = [
    {
      label: '待派单',
      value: 'waitAssign',
      url: Img1
    },
    {
      label: '待接单',
      value: 'waitAccept',
      url: Img2
    },
    {
      label: '待完成',
      value: 'repairing',
      url: Img3
    },
    {
      label: '待审核',
      value: 'waitAudit',
      url: Img4
    }
  ]
  const recordList = [
    {
      label: '我的报修',
      value: 0
    },
    {
      label: '我的派单',
      value: 1
    },
    {
      label: '我的维修',
      value: 2
    },
    {
      label: '我的审核',
      value: 3
    }
  ]

  onMounted(() => {
    getNowTime()
    getNowDate()
    getTodoTasks()
    table.getData()
  })
  const orderObj: any = ref({})
  const getTodoTasks = async () => {
    const data = await fetchTodoTasks()
    orderObj.value = data
  }
  const isPitch = ref(0)
  let pageObj: any = ref({
    MaxResultCount: 10,
    SkipCount: 1
  })
  const table = useRequest(() =>
    getMyWorkRepairList({
      Type: isPitch.value,
      MaxResultCount: pageObj.value.MaxResultCount,
      SkipCount: (pageObj.value.SkipCount - 1) * pageObj.value.MaxResultCount
    })
  )
  const cellClick = (row: any) => {
    router.push(`/order-center/my-order/details?orderId=${row.id}&faultType=${row.faultType}`)
  }
  const getNowTime = () => {
    nowTime.value = dayjs().format('HH:mm:ss')
    setInterval(() => {
      nowTime.value = dayjs().format('HH:mm:ss')
    }, 1000)
  }
  const getNowDate = () => {
    const date = dayjs().format('YYYY年M月D日')
    const week: string = dayjs().format('dddd')
    const obj: any = {
      Monday: '星期一',
      Tuesday: '星期二',
      Wednesday: '星期三',
      Thursday: '星期四',
      Friday: '星期五',
      Saturday: '星期六',
      Sunday: '星期六'
    }
    nowWeek.value = `${date} / ${obj[week]}`
  }
  const router = useRouter()
  const toDetails = (i: any) => {
    const arr = [
      '/order-center/my-order/send-orders',
      '/order-center/my-order/take-orders',
      '/order-center/my-order/completed',
      '/order-center/my-order/audit'
    ]
    router.push(arr[i])
  }
  const onPithTable = (e: number) => {
    isPitch.value = e
    table.getData()
  }
</script>

<style lang="less" scoped>
  .left-box {
    display: flex;
    width: calc(100% - 450px);
    &__item {
      margin-right: 20px;
      align-items: center;
      padding: 0 10px;
      padding-left: 40px;
      flex: 1;
      width: 270px;
      height: 140px;
      background: #ffffff;
      box-shadow: 0px 20px 46px 0px rgba(79, 96, 129, 0.19);
      border-radius: 15px;
      transition: 0.3s;
      cursor: pointer;
    }
    &__item:hover {
      transform: scale(1.03);
    }
    .item-num {
      font-size: 36px;
      line-height: 40px;
      font-weight: 400;
    }
    .item-text {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
  }
  .right-box {
    width: 450px;
    height: 140px;
    background-image: url(../../../assets/img/my-center1.png);
    padding: 40px 50px;
    align-items: center;
    &__time {
      font-size: 36px;
      font-weight: bold;
    }
    &__date {
      font-size: 15px;
      font-weight: 400;
      line-height: 20px;
    }
    &__btn {
      color: #fff;
      width: 120px;
      height: 40px;
      background: #597fda;
      border-radius: 20px;
      display: flex;
      align-items: center;
    }
  }
  .record-head {
    font-size: 14px;
    width: 100%;
    background-color: #eaf0fa;
    border-radius: 15px;
    height: 58px;
    line-height: 50px;

    &__item {
      width: 200px;
      height: 48px;
      color: #6f84b1;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
      position: relative;
      .divider {
        position: absolute;
        right: 2px;
        width: 1px;
        height: 20px;
        top: 50%;
        transform: translateY(-50%);
        background: #c7cfe1;
      }
    }
    &__item--active {
      background-image: url(../../../assets/img/my-order.png);
      background-size: 100% 100%;
      .divider {
        background: transparent;
      }
    }
    .record-all {
      margin-right: 40px;
      height: 35px;
      margin-top: 8px;
      color: #597fda;
      position: relative;
      &::after {
        content: '';
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        right: -18px;
        transform: translateY(-50%);
        background-image: url(../../../assets/icon/right.png);
        background-size: cover;
      }
    }

    .record-all:hover {
      color: #0851fb;
    }
  }
  .table {
    background-color: #fff;
    min-height: 100px;
    margin-top: -10px;
  }

  :deep(.table) {
    .table-head {
      height: 70px;
      font-size: 12px;
    }
    .table-row {
      height: 60px;
      font-weight: bold;
    }
  }
</style>
