<template>
  <view class="inspection-execution">
    <!-- 当天任务执行情况 -->
    <view class="daily-task-card">
      <text class="daily-task-title">当天任务执行情况</text>
      <!-- 站级任务明细 -->
      <view class="task-details" v-if="dataStation.length > 0">
        <view class="task-detail-item">
          <text class="task-label">站级任务明细</text>
        </view>
        <view v-for="item in dataStation" :key="item.taskCode">
          <view class="task-info">
            <text>{{ item.taskName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每日{{ item.ruleTypeNum }}次</text>
            <text>完成状况：{{ `${item.notStartedCount}/${item.inProgressCount}/${item.completedCount}` }}</text>
          </view>
          <statistic-table v-if="item.checkLargeScreenInspectionExecuteItemDtoList.length > 0" :columns="tableColumns"
            :data="item.checkLargeScreenInspectionExecuteItemDtoList">
            <template #column-completionPercentage="{ row, index }">
              <view class="progress-container">
                <u-line-progress :percentage="row.completionPercentage" :showText="false"
                  :activeColor="getProgressColor(row.completionPercentage)" height="20rpx"
                  width="200rpx"></u-line-progress>
                <text class="progress-text">{{ row.completionPercentage }}%</text>
              </view>
            </template>
          </statistic-table>
        </view>
      </view>

      <!-- 科级任务明细 -->
      <view class="task-details" v-if="dataDepartment.length > 0">
        <view class="task-detail-item">
          <text class="task-label">科级任务明细</text>
        </view>
        <view v-for="item in dataDepartment" :key="item.taskCode">
          <view class="task-info">
            <text>{{ item.taskName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每日{{ item.ruleTypeNum }}次</text>
            <text v-if="!isKeZhang">完成状况：{{ `${item.notStartedCount}/${item.inProgressCount}/${item.completedCount}` }}</text>
          </view>
          <statistic-table v-if="item.checkLargeScreenInspectionExecuteItemDtoList.length > 0" :columns="tableColumns"
            :data="item.checkLargeScreenInspectionExecuteItemDtoList">
            <template #column-completionPercentage="{ row, index }">
              <view class="progress-container">
                <u-line-progress :percentage="row.completionPercentage" :showText="false"
                  :activeColor="getProgressColor(row.completionPercentage)" height="20rpx"
                  width="200rpx"></u-line-progress>
                <text class="progress-text">{{ row.completionPercentage }}%</text>
              </view>
            </template>
          </statistic-table>
        </view>
      </view>

      <!-- 班组任务明细 -->
      <view class="task-details" v-if="dataTeam.length > 0">
        <view class="task-detail-item">
          <text class="task-label">班组任务明细</text>
        </view>
        <view v-for="item in dataTeam" :key="item.taskCode">
          <view class="task-info">
            <text>{{ item.taskName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每日{{ item.ruleTypeNum }}次</text>
            <text v-if="!isBanZuZhang">完成状况：{{ `${item.notStartedCount}/${item.inProgressCount}/${item.completedCount}` }}</text>
          </view>
          <statistic-table v-if="item.checkLargeScreenInspectionExecuteItemDtoList.length > 0" :columns="tableColumns"
            :data="item.checkLargeScreenInspectionExecuteItemDtoList">
            <template #column-completionPercentage="{ row, index }">
              <view class="progress-container">
                <u-line-progress :percentage="row.completionPercentage" :showText="false"
                  :activeColor="getProgressColor(row.completionPercentage)" height="20rpx"
                  width="200rpx"></u-line-progress>
                <text class="progress-text">{{ row.completionPercentage }}%</text>
              </view>
            </template>
          </statistic-table>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import { checkedLevelEnums } from "@/utils/enums.js"
import { getExecutionStatusTotal } from '@/api/inspectionStatistics/inspectionStatistics'
export default {
  data() {
    return {
      tableColumns: [
        { title: '姓名', props: 'userName' },
        { title: '今日完成比例', props: 'completionPercentage', slot: true },
        { title: '整改单数', props: 'rectificationOrderCount' },
        { title: '不合格项数', props: 'unqualifiedProjectCount' },
      ],
      // 站级任务明细数据
      dataStation: [],
      // 科级任务明细数据
      dataDepartment: [],
      // 班组任务明细数据
      dataTeam: []
    }
  },
  computed: {
    // 班组长
    isBanZuZhang() {
      let roles = this.$store.state.user.roles;
      return roles && roles.includes('banzuzhang')
    },
    isKeZhang(){
      let roles = this.$store.state.user.roles;
      return roles && roles.includes('kezhang')
    }
  },
  mounted() {
    this.loadExecutionStatusData();
  },
  methods: {
    // 根据完成比例返回对应的颜色
    getProgressColor(percentage) {
      if (percentage >= 100) {
        return '#2B7BFF'; // 大于等于100%时使用蓝色
      } else if (percentage > 0 && percentage < 100) {
        return '#03AF43'; // 0-100%之间使用绿色
      } else {
        return '#E40808'; // 0%时使用红色
      }
    },

    // 加载执行状态数据
    async loadExecutionStatusData() {
      try {
        console.log('开始请求getExecutionStatusTotal接口...');
        const response = await getExecutionStatusTotal();
        console.log('getExecutionStatusTotal接口返回结果:', response);

        if (response && response.code === 200) {
          console.log('接口数据详情:', response.data);
          this.dataStation = response.data.filter(item => item.checkLevel === checkedLevelEnums.STATION_LEVEL)
          this.dataDepartment = response.data.filter(item => item.checkLevel === checkedLevelEnums.DEPARTMENT_LEVEL)
          this.dataTeam = response.data.filter(item => item.checkLevel === checkedLevelEnums.TEAM_LEVEL)

          console.log(this.dataTeam, "this.dataTeam")
        } else {
          console.log('接口返回异常:', response);
        }
      } catch (error) {
        console.error('请求getExecutionStatusTotal接口失败:', error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.inspection-execution {
  .daily-task-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    .daily-task-title {
      display: block;
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .task-details:not(:last-child) {
      margin-bottom: 20rpx;
    }

    .task-details {

      .task-info {
        color: #4873E3;
        font-size: 27rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
      }

      .task-detail-item {
        flex: 1;
        text-align: left;
        height: 50rpx;
        padding-left: 10rpx;
        line-height: 50rpx;
        border-radius: 8rpx;

        background: linear-gradient(to right, #4873E3, #fff);

        .task-label {
          font-size: 27rpx;
          color: #fff;
          font-weight: 500;
        }


      }

      .progress-container {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .progress-text {
          font-size: 24rpx;
          color: #4873E3;
          font-weight: 500;
          min-width: 60rpx;
        }
      }
    }
  }
}
</style>