<template>
  <view class="reportTask-box">
    <view class="top">
      <view class="top-flet">
        <text style="font-size: 28rpx; font-weight: 400">待完成</text>
        <view style="align-self: flex-end">
          <text style="font-size: 56rpx; font-weight: 500">7</text>
          <text style="font-size: 28rpx; font-weight: 400">个</text>
        </view>
      </view>
      <view class="top-rigth">
        <view
          v-for="value in topRigthList"
          :key="value.name"
          class="top-rigth-item"
        >
          <view>{{ value.name }}</view>
          <view>{{ value.value }}</view>
        </view>
      </view>
    </view>
    <view class="nav">
      <view class="nav-title">
        <text>档案待办预警</text>
        <wd-icon
          name="help-circle"
          size="22px"
          style="transform: translateY(4rpx); margin-left: 16rpx"
        ></wd-icon>
      </view>
      <view class="nav-item">
        <view
          v-for="value in navList"
          :key="value.content"
          class="nav-item-item"
          :class="{ 'nav-item-item-active': navListActive === value.content }"
          @click="() => (navListActive = value.content)"
        >
          <text class="nav-item-item-number">{{ value.number }}</text>
          <text class="nav-item-item-content">{{ value.content }}</text>
        </view>
      </view>
    </view>
    <view class="table">
      <view class="table-title">
        <view class="table-title-left">查阅任务</view>
        <view class="table-title-rigth">
          <text
            v-for="value in tableTitleRigthItemList"
            :key="value"
            :class="{
              'table-title-rigth-item-active':
                tableTitleRigthItemActive === value,
            }"
            @click="() => (tableTitleRigthItemActive = value)"
          >
            {{ value }}
          </text>
        </view>
      </view>
      <view class="table-list">
        <view class="custom-table">
          <view class="table-header">
            <view class="table-cell">任务</view>
            <view class="table-cell">2天内</view>
            <view class="table-cell">本月已阅</view>
            <view class="table-cell">本月可阅</view>
          </view>
          <view
            v-for="(item, index) in dataList"
            :key="index"
            class="table-row"
          >
            <view class="table-cell">{{ item.name }}</view>
            <view class="table-cell-item">{{ item.table2 }}</view>
            <view class="table-cell-item">{{ item.table3 }}</view>
            <view
              class="table-cell-item"
              :class="{ 'table-cell-item-active': item.name !== '总数' }"
              >{{ item.table4 }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <view class="tabledescription">
      <view v-for="(item, index) in tabledescription" :key="index">{{
        item
      }}</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const topRigthList = ref([
  {
    name: '可授权',
    value: '2个',
  },
  {
    name: '已授权',
    value: '8个',
  },
  {
    name: '已完成',
    value: '6个',
  },
])
const navList = ref([
  {
    content: '证件',
    number: '2',
  },
  {
    content: '过滤器',
    number: '12',
  },
  {
    content: '灭火器',
    number: '12',
  },
  {
    content: '防护用品',
    number: '12',
  },
  {
    content: '急救箱',
    number: '12',
  },
])
const navListActive = ref('证件')
const tableTitleRigthItemActive = ref('本周')
const tableTitleRigthItemList = ref(['本周', '本月'])
const dataList = reactive([
  {
    name: '班前任务',
    table2: 5,
    table3: 0,
    table4: 48,
  },
  {
    name: '班组日志',
    table2: 5,
    table3: 0,
    table4: 48,
  },
  {
    name: '授权任务',
    table2: 5,
    table3: 0,
    table4: 48,
  },
  {
    name: '新增任务',
    table2: 5,
    table3: 0,
    table4: 48,
  },
  {
    name: '总数',
    table2: 12,
    table3: 0,
    table4: 114,
  },
])
const tabledescription = ref([
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
  '2 天内：昨天和今天完成的任务数。',
  '本月已阅：对本月完成任务的查阅数量。',
  '本月可阅：本月实际已完成任务。',
])
</script>
<style lang="scss" scoped>
.reportTask-box {
  width: 100%;
  height: 100%;
  // border-radius: 12rpx;
  // padding-top: 20rpx;
  box-sizing: border-box;
  .top {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
    width: 100%;
    height: 224rpx;
    .top-flet {
      width: 260rpx;
      height: 100%;
      background-color: #215acd;
      border-radius: 14rpx;
      box-sizing: border-box;
      padding: 32rpx;
      color: #fff;
      display: flex;
      justify-content: space-between;
    }
    .top-rigth {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20rpx;
      box-sizing: border-box;
      .top-rigth-item {
        flex: 1;
        background-color: #e8f3ff;
        border-radius: 14rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 10rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #31373d;
      }
    }
  }
  .nav {
    width: 100%;
    height: 180rpx;
    // border: 1px solid red;
    margin-top: 48rpx;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .nav-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #31373d;
      // margin-left: ;
    }
    .nav-item {
      width: 100%;
      height: 128rpx;
      display: flex;
      justify-content: space-between;
      // border: 1px solid red;
      .nav-item-item {
        flex: 1;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .nav-item-item-number {
          font-size: 36rpx;
          font-weight: 600;
          color: #31373d;
        }
        .nav-item-item-content {
          font-size: 24rpx;
          font-weight: 400;
          color: #646465;
        }
      }
      .nav-item-item-active {
        .nav-item-item-number {
          color: #215acd;
        }
        .nav-item-item-content {
          color: #215acd;
        }
      }
    }
  }
  .table {
    width: 100%;
    height: 648rpx;
    // background-color: red;
    // border: 1px solid #007bff;
    margin-top: 40rpx;
    .table-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 18rpx;
      .table-title-left {
        font-size: 36rpx;
        font-weight: 500;
        color: #31373d;
      }
      .table-title-rigth {
        width: 210rpx;
        height: 64rpx;
        // border: 1px solid red;
        box-sizing: border-box;
        padding: 14rpx 20rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #31373d;
        display: flex;
        justify-content: space-between;
        .table-title-rigth-item-active {
          color: #3c65c0;
        }
      }
    }
    .table-list {
      width: 100%;
      overflow-x: hidden;
      .custom-table {
        width: 100%;
        border-radius: 16rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        .table-header {
          display: flex;
          background-color: #e1e5ec;
          // border-bottom: 1px solid #ebeef5;
          .table-cell {
            flex: 1;
            padding: 24rpx 20rpx;
            text-align: center;
            font-size: 28rpx;
            font-weight: 500;
            color: #31373d;
          }
        }
        .table-row {
          display: flex;
          background-color: #e1e5ec;
          &:nth-child(even) {
            background-color: #f0f1f6;
          }
          .table-cell {
            flex: 1;
            padding: 24rpx 20rpx;
            text-align: center;
            font-size: 26rpx;
            color: #303133;
          }
          .table-cell-item {
            flex: 1;
            padding: 24rpx 20rpx;
            text-align: center;
            font-size: 26rpx;
            font-weight: 600;
            color: #303133;
          }
          .table-cell-item-active {
            color: #215acd;
            text-decoration: underline #215acd;
          }
        }
      }
    }
  }
  .tabledescription {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #31373d;
  }
}
</style>
