<template>
  <view class="p-2 bg-white rounded-md">
    <view class="flex justify-between items-center">
      <!-- 提交人和时间信息 -->
      <view class="text-gray-400 text-xs">
        <text class="mr-4" v-if="deliverData.submitMemberName">{{ deliverData.submitMemberName }}</text>
        <text v-if="deliverData.submitTime"> {{ dayjs(+deliverData.submitTime).format('MM-DD HH:mm') }}</text>
      </view>
    </view>

    <!-- 提交的链接信息 -->
    <DeliverLink :link="deliverData.details[0]" v-if="deliverData.details && deliverData.details[0]" />

    <!-- 审核人 标题 -->
    <view class="text-gray-400 flex justify-between mt-3">
      <text>审核</text>
    </view>

    <!-- 审核人 列表 -->
    <view v-if="deliverData.checkerList">
      <!-- 遍历审核人信息 -->
      <template v-for="item in deliverData.checkerList">
        <!-- 我 -->
        <template v-if="item.isMine === 1">
          <view class="mt-2 text-sm flex justify-between" v-show="item.status > 0 && isRepeatCheck === 0">
            <view>
              <view class="font-semibold">{{ item.checkerName }}</view>
              <view class="text-xs text-gray-400">{{ item.remark }}</view>
              <view class="text-xs text-gray-400" v-if="+item.checkTime > 0">{{ dayjs(+item.checkTime).format('MM-DD HH:mm') }}</view>
            </view>

            <view class="time-box" v-if="item.checkDuration">
              <view class="relative">
                <view class="initial-duration bg-yellow-400" :style="{width: item.initialPercent + '%'}"></view>
                <text class="absolute duration-value">默认值：{{ deliverData.initialDuration / 3600000 }}小时</text>
              </view>
              <view class="relative">
                <view class="duration bg-blue-400" :style="{width: item.currPercent + '%'}"></view>
                <text class="absolute duration-value">工作量时长：{{ deliverData.duration / 3600000 }}小时</text>
              </view>
              <view class="relative">
                <view class="check-duration bg-green-400" :style="{width: item.checkPercent + '%'}"></view>
                <text class="absolute duration-value">确认工作：{{ item.checkDuration / 3600000 }}小时</text>
              </view>
            </view>

            <!-- 自己是审核人 且审核过 当前审核人的审核状态并展示得分情况 -->
            <view class="text-xs">
              <view class="mb-1">
                <text v-if="item.status === 1" class="text-green-600"> 已通过 </text>
                <text v-else-if="item.status === 2" class="text-red-600"> 已驳回 </text>
              </view>

              <view class="text-yellow-500 font-medium text-base">{{ item.score }}</view>

              <!-- <view class="text-blue-500" @click="repeatCheck(1)">重新审核</view> -->
            </view>
          </view>

          <view v-if="item.status === null || item.status === 0 || isRepeatCheck === 1">
            <!-- <view v-if="isRepeatCheck === 1" class="text-blue-500 text-right" @click="repeatCheck(0)">取消重新审核</view> -->

            <view class="mt-3" style="border-bottom: 1px solid #D1D5DB;" @click="collapsed = !collapsed">
              <view class="flex justify-between">
                <view class="mr-1 text-sm flex items-center">
                  <view class="mr-2">确认工作</view>

                  <view class="flex flex-wrap">
                    <u-button style="width: 45px;" :type="checkedIndex === 0 ? 'primary' : 'default'" size="mini" class="my-1 ml-0 mr-2" @click="handleSelectTime(0)">
                      半小时
                    </u-button>
                    <u-button style="width: 45px;" :type="checkedIndex === 1 ? 'primary' : 'default'" size="mini" class="my-1 ml-0 mr-2" @click="handleSelectTime(1)">
                      1小时
                    </u-button>
                    <u-button style="width: 45px;" :type="checkedIndex === 2 ? 'primary' : 'default'" size="mini" class="my-1 ml-0 mr-2" @click="handleSelectTime(2)">
                      2小时
                    </u-button>
                  </view>
                </view>

                <!-- 时长 -->
                <view class="flex items-center justify-end flex-1 text-sm">
                  <u-input v-model="checkDuration" type="text" placeholder="工作量时长" class="input" style="text-align: right;"></u-input>
                  小时
                </view>
              </view>
            </view>

            <view class="mt-3 flex justify-between items-center">
              <view>交付物质量</view>

              <view class="flex justify-end items-center">
                <u-number-box v-model="score" size="30" :max="100" :min="0" :step="1"></u-number-box>
                <view class="w-20 ml-2">
                  <u-slider v-model="score" active-color="#34D399" :max="100" :min="0" :step="1"></u-slider>
                </view>
              </view>
            </view>

            <view class="mt-3 relative">
              <u-input class="h-20" v-model="commit" type="textarea" placeholder="鼓励一下小伙伴" :border="true" :auto-height="true" />

              <view class="absolute border border-solid border-gray-300 rounded-md text-center text-base word-btn" @click="showWords = !showWords">常</view>
            </view>

            <view class="common-list" v-if="showWords">
              <view v-for="item in words" class="px-2 leading-12 word-item" @click="commit = item">
                {{ item }}
              </view>
            </view>

            <view class="mt-4 flex justify-center items-center">
              <u-button class="mx-4" type="primary" @click="handleSubmit(1)">
                通过
              </u-button>
              <u-button class="mx-4" type="error" @click="handleSubmit(2)">
                驳回
              </u-button>
            </view>
          </view>
        </template>
      </template>

      <template v-for="item in deliverData.checkerList">
        <!-- 不是我 -->
        <template v-if="item.isMine !== 1">
          <view class="mt-2 text-sm flex justify-between">
            <view>
              <view class="font-semibold">{{ item.checkerName }}</view>
              <view class="text-xs text-gray-400">{{ item.remark }}</view>
              <view class="text-xs text-gray-400" v-if="+item.checkTime > 0">{{ dayjs(+item.checkTime).format('MM-DD HH:mm') }}</view>
            </view>

            <view class="time-box" v-if="item.checkDuration">
              <view class="relative">
                <view class="initial-duration bg-yellow-400" :style="{width: item.initialPercent + '%'}"></view>
                <text class="absolute duration-value">默认值：{{ deliverData.initialDuration / 3600000 }}小时</text>
              </view>
              <view class="relative">
                <view class="duration bg-blue-400" :style="{width: item.currPercent + '%'}"></view>
                <text class="absolute duration-value">工作量时长：{{ deliverData.duration / 3600000 }}小时</text>
              </view>
              <view class="relative">
                <view class="check-duration bg-green-400" :style="{width: item.checkPercent + '%'}"></view>
                <text class="absolute duration-value">确认工作：{{ item.checkDuration / 3600000 }}小时</text>
              </view>
            </view>

            <!-- 不是自己 显示审核状态 -->
            <view class="text-xs">
              <text v-if="item.status === 1" class="text-green-600"> 已通过 </text>
              <text v-else-if="item.status === 2" class="text-red-600"> 已驳回 </text>
              <text v-else class="text-gray-400"> 待审核 </text>
            </view>
          </view>
        </template>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, inject, computed, watch } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { quickWords } from '@/config/deliver';

const props = defineProps({
  deliverData: { type: Object, default: {} },
  task: { default: {}, type: Object },
  url: { type: String, default: '' }
});

const store = useStore();

const projectId = computed(() => store.getters['project/projectId']);
const roleId = computed(() => store.state.role.roleId);
const projectIdStorage = uni.$storage.getStorageSync('projectId');
const roleIdStorage = uni.$storage.getStorageSync('roleId');

const words = computed(() => quickWords['RESOLVE']); // 快捷用语

const delivers = inject('deliver');
const deliverData = computed(() => (Object.keys(props.deliverData).length ? props.deliverData : delivers.value));
const tasks = inject('task');
const task = computed(() => (Object.keys(props.task).length ? props.task : tasks.value));

const checkDuration = ref(2); // 工作量时长
const checkedIndex = ref(2); // 默认选中
const score = ref(100); // 评分
const commit = ref(''); // 提交的信息
let maxDuration = ref(null);
const showWords = ref(false); // 是否显示常用语
const isRepeatCheck = ref(0); // 是否重新审核

const emits = defineEmits(['submit-end']);

if (Object.keys(deliverData.value).length) {
  checkDuration.value = Number(deliverData.value.duration) / 3600000; // 工作量时长
  checkedIndex.value = checkDuration.value == 0.5 ? 0 : checkDuration.value == 1 ? 1 : checkDuration.value == 2 ? 2 : -1;

  handleDataRender(deliverData.value);
}

watch(deliverData, () => {
  checkDuration.value = Number(deliverData.value.duration) / 3600000; // 工作量时长
  checkedIndex.value = checkDuration.value == 0.5 ? 0 : checkDuration.value == 1 ? 1 : checkDuration.value == 2 ? 2 : -1;

  handleDataRender(deliverData.value);
})

// 选择工作量时长
function handleSelectTime(data) {
  checkedIndex.value = data;
  checkDuration.value = data === 0 ? 0.5 : data === 1 ? 1 : 2;
}

// 处理审核记录数据
async function handleDataRender(data) {
  maxDuration.value = deliverData.value.initialDuration > deliverData.value.duration ? deliverData.value.initialDuration : deliverData.value.duration;

  data.checkerList.forEach(item => {
    if (item.checkDuration) {
      maxDuration.value = maxDuration.value > item.checkDuration ? maxDuration.value : item.checkDuration;

      if (maxDuration.value == deliverData.value.initialDuration) {
        item.initialPercent = 100;
        item.currPercent = Math.floor(deliverData.value.duration / deliverData.value.initialDuration * 100);
        item.checkPercent = Math.floor(item.checkDuration / deliverData.value.initialDuration * 100);
      } else if (maxDuration.value == deliverData.value.duration) {
        item.currPercent = 100;
        item.initialPercent =  Math.floor(deliverData.value.initialDuration / deliverData.value.duration * 100);
        item.checkPercent = Math.floor(item.checkDuration / deliverData.value.duration * 100);
      } else if (maxDuration.value == item.checkDuration) {
        item.checkPercent = 100;
        item.initialPercent = Math.floor(deliverData.value.initialDuration / item.checkDuration * 100);
        item.currPercent = Math.floor(deliverData.value.duration / item.checkDuration * 100);
      }
    }
  })

  return data;
}

/**
 * 提交评审信息
 * 提交成功后隐藏modal 重置表单控件
 * 给父组件信息 更新值
 * @param {string} mode 'RESOLVE'|'REJECT'
 */
async function handleSubmit(mode) {
  try {
    const deliverRecordId = deliverData.value.deliverRecordId;
    const param = {
      projectId: projectId.value || projectIdStorage,
      roleId: roleId.value || roleIdStorage,
      deliverRecordId,
      type: mode,
      remark: commit.value,
      score: score.value,
      checkDuration: checkDuration.value * 3600000,
      msgId: task.value.msgId,
    };

    await uni.$u.api.checkDeliver(param, props.url);
    handleHide(); // 隐藏 + 重置
    uni.$ui.showToast('审核信息提交成功');
    // 通知父组件评审成功 更新信息
    emits('submit-end', param);
  } catch (error) {
    console.error('error: ', error);
    uni.$ui.showToast('审核信息提交失败, 请稍后重试');
  }
}

// 重置
function handleHide() {
  score.value = 100;
  commit.value = '';
}

// 重新审核
function repeatCheck(data) {
  isRepeatCheck.value = data;
}
</script>

<style scoped lang="scss">
  .word-btn {
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    line-height: 28px;
  }

  .word-item {
    border-bottom: 1px solid #E5E7EB;
  }

  .time-box {
    width: 120px;

    view {
      height: 15px;
      border-radius: 2px;
      margin: 2px 0;
    }

    .duration-value {
      height: 15px;
      line-height: 15px;
      font-size: 12px;
      top: 0;
      left: 0;
    }
  }
</style>
