<template>
  <view class="reportUser-box">
    <view class="datepicker">
      <view class="datepicker-left">
        <wd-icon name="caret-left-small" size="36rpx"></wd-icon>
        <text class="datepicker-text">11.03-11.09</text>
        <wd-icon name="caret-right-small" size="36rpx"></wd-icon>
      </view>
      <view class="datepicker-right">
        <text
          class="datepicker-right-text"
          :class="{ 'datepicker-right-text-active': item === datepicker }"
          v-for="item in datepickerlist"
          :key="item"
          @click="datepicker = item"
          >{{ item }}</text
        >
      </view>
    </view>
    <view class="nav">
      <view class="nav-title">
        <text>个人指标</text>
      </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="handlenavClick(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="taskreport">
      <view class="taskreport-title">
        <text>任务评估报表</text>
      </view>
      <barchart />
    </view>
    <view class="table">
      <view class="table-title">
        <view class="table-title-left">总分：20分</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">分数</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">
              <text>{{ item.score.total }}</text>
              <text style="color: #4e5969">{{ item.score.thisweek }}</text>
            </view>
            <view class="table-cell-item">
              <text
                >{{ item.thisweek.total }}
                <wd-icon
                  :name="item.thisweek.icon"
                  size="20px"
                  :style="
                    item.thisweek.icon === 'arrow-thin-up'
                      ? ' color: #215ACD;'
                      : item.thisweek.icon === 'arrow-thin-down'
                        ? ' color: #EB5E12;'
                        : item.thisweek.icon === 'remove'
                          ? ' color: #BBBDBF;'
                          : ''
                  "
                ></wd-icon>
              </text>
              <text style="color: #4e5969">{{ item.thisweek.thisweek }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="taskreport">
      <view class="taskreport-title">
        <text>趋势分析</text>
      </view>
      <linechart />
    </view>
    <view class="bnt">查 看 更 多 人 员</view>
    <bottomPopup v-model:bottomshow="bottomshow" />
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import bottomPopup from './popup/bottompopup.vue'
import linechart from './charts/linechart.vue'
import barchart from './charts/barchart.vue'
const bottomshow = ref(false)
const datepickerlist = ref(['按周', '按月'])
const datepicker = ref('按周')
const navList = ref([
  {
    content: '任务数',
    number: '10',
  },
  {
    content: '完成率(%)',
    number: '100.00',
  },
  {
    content: '逾期数',
    number: '0',
  },
  {
    content: '逾期率(%)',
    number: '0.00',
  },
])
const navListActive = ref('任务数')
const dataList = reactive([
  {
    name: '完成率',
    score: {
      total: 20,
      thisweek: '上周 16',
    },
    thisweek: {
      total: '100.00%',
      thisweek: '周五 95.55%',
      icon: 'arrow-thin-up',
    },
  },
  {
    name: '任务得分',
    score: {
      total: 20,
      thisweek: '上周 16',
    },
    thisweek: {
      total: '100.00%',
      thisweek: '周五 95.55%',
      icon: 'arrow-thin-down',
    },
  },
  {
    name: '已阅比例',
    score: {
      total: 20,
      thisweek: '上周 16',
    },
    thisweek: {
      total: '100.00%',
      thisweek: '周五 95.55%',
      icon: 'remove',
    },
  },
  {
    name: '授权点评率',
    score: {
      total: 20,
      thisweek: '上周 16',
    },
    thisweek: {
      total: '100.00%',
      thisweek: '周五 95.55%',
      icon: 'remove',
    },
  },
])
const handlenavClick = (content) => {
  navListActive.value = content
  if (content === '逾期数') {
    bottomshow.value = true
  }
}
</script>
<style lang="scss" scoped>
.reportUser-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  // gap: 64rpx;
  .datepicker {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border: 1px solid red;
    .datepicker-left {
      display: flex;
      // justify-content: center;
      align-items: center;
    }
    .datepicker-right {
      //   width: 160rpx;
      //   height: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fafafa;
      gap: 20rpx;
      padding: 10rpx;
      box-sizing: border-box;
      //   padding: 10rpx 20rpx;
      font-size: 28rpx;
      font-weight: 400;
      border-radius: 10rpx;

      .datepicker-right-text {
        padding: 14rpx;
        // padding: 10rpx 20rpx;
        // border-radius: 10rpx;
      }
      .datepicker-right-text-active {
        border-radius: 10rpx;
        background-color: #ffffff;
        color: #3c65c0;
      }
    }
    .datepicker-text {
      font-weight: 500;
      font-size: 36rpx;
      // color: #fff;
    }
  }
  .nav {
    width: 100%;
    height: 180rpx;
    // border: 1px solid red;
    margin-top: 32rpx;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32rpx;
    .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;
        }
      }
    }
  }
  .taskreport {
    width: 100%;
    // height: 600rpx;
    margin-top: 64rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48rpx;
    .taskreport-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #31373d;
      // margin-left: ;
    }
  }
  .table {
    width: 100%;
    margin-top: 64rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48rpx;
    .table-title {
      // margin-bottom: 30rpx;
      .table-title-left {
        font-size: 36rpx;
        font-weight: 500;
        color: #31373d;
      }
    }
    .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: left;
            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: left;
            font-size: 26rpx;
            color: #303133;
          }
          .table-cell-item {
            flex: 1;
            padding: 24rpx 20rpx;
            text-align: left;
            font-size: 26rpx;
            font-weight: 600;
            color: #303133;
            display: flex;
            flex-direction: column;
            gap: 14rpx;
            // justify-content: flex-start;
            // align-items: center;
          }
        }
      }
    }
  }
  .bnt {
    width: 100%;
    height: 80rpx;
    background-color: #215acd;
    border-radius: 14rpx;
    margin-top: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #fff;
  }
}
</style>
