<template>
  <view class="task-completion-records">
    <view class="header">
      <view @click="showDatePicker">
        <text>{{ dateStr.year }} 年 </text>
        <text>{{ dateStr.month }} 月 </text>
      </view>
      <uv-icon v-if="dateStr.year" name="close-circle" color="#333" @click="clearDate" />
    </view>
    <view v-if="dataList.length" class="list-box">
      <view class="list-item" v-for="item in dataList" :key="item.id" @click="onDetail(item.id)">
        <view
          class="list-top"
          :class="item.realFlag == '1' || item.taskStatus == '4' ? 'disables' : ''"
        >
          <view class="time">
            <image
              v-if="item.realFlag == '1' || item.taskStatus == '4'"
              class="clock-icon"
              src="../../static/images/common/clock2.png"
            />
            <image v-else class="clock-icon" src="../../static/images/common/clock.png" />
            <text>{{ formatTime(item.createTime) }}</text>
          </view>
          <view
            class="reason"
            v-if="item.realFlag == '1' || item.taskStatus == '4'"
            @click.stop="showReason(item)"
          >
            <text>审核不通过</text>
            <image src="https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/wenhaoxiao1.png" />
          </view>
          <uv-icon
            name="arrow-right"
            :color="item.realFlag == '1' || item.taskStatus == '4' ? '#999999' : '#fff'"
            size="16"
          />
        </view>
        <view class="info">
          <view class="info-name">
            {{ item.taskTypeId }}
          </view>
          <view class="num"> +{{ item.score }}积分 </view>
        </view>
      </view>
    </view>
    <noData v-else />

    <uv-datetime-picker
      ref="datetimePicker"
      v-model="dateValue"
      mode="year-month"
      @confirm="dateConfirm"
    />

    <uv-popup ref="popup" mode="bottom" round="10">
      <view class="info">
        <view class="title">
          <text>拒绝原因</text>
          <u-icon name="close" color="#000" size="28" @click="popupClose"></u-icon>
        </view>
        <view class="cont">
          {{ reason }}
        </view>
        <view class="btn" @click="popupClose"> 关 闭 </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import formatTime from '@/utils/formatTime'
import { reactive, ref } from 'vue'
import { getTaskCompletionList } from '@/service/modules/getTask'
import { onReachBottom } from '@dcloudio/uni-app'
import noData from '@/components/noData/index.vue'

class Params {
  taskRuleId = ''
  total = -1
  current = 1
  size = 20
}
const params = ref(new Params())

const dataList = ref<any[]>([])
async function getList() {
  uni.showLoading({
    title: '加载中...'
  })
  let res = await getTaskCompletionList(params.value)
  if (res.data) {
    uni.hideLoading()
    params.value.total = res.data.total
    dataList.value = dataList.value.concat(res.data.records)
  }
}
getList()

// 底部
onReachBottom(() => {
  if (dataList.value.length === params.value.total) return
  params.value.current++
  getList()
})

const onDetail = (id: string) => {
  uni.navigateTo({
    url: `/pages/task/task-detail/index?id=${id}`
  })
}

const popup = ref()
const reason = ref('')
const showReason = (item: any) => {
  reason.value =
    item.approval_info ||
    item.report_one_approval_info ||
    item.report_drug_approval_info ||
    item.taskStatusInfo ||
    '暂无原因'

  popup.value.open()
}
const popupClose = () => popup.value.close()

// 日期选择
const datetimePicker = ref()
const dateValue = ref(Number(new Date()))
const showDatePicker = () => datetimePicker.value.open()

const dateStr = reactive({
  year: '',
  month: ''
})

const dateConfirm = (e: any) => {
  const date = dayjs(e.value).format('YYYY-MM')
  let arr = date.split('-')
  params.value = new Params()
  params.value.taskRuleId = date
  dateStr.year = arr[0]
  dateStr.month = arr[1]
  dataList.value = []
  getList()
}
const clearDate = () => {
  dateStr.year = ''
  dateStr.month = ''
  params.value = new Params()
  dataList.value = []
  getList()
}
</script>

<style lang="scss" scoped>
.task-completion-records {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 80rpx;
    background: #ffffff;
    border-bottom: 1rpx solid #f2f2f2;
    font-size: 30rpx;
    padding-right: 35rpx;
    text {
      margin-right: 20rpx;
    }
  }
  .list-box {
    margin-top: 80rpx;
    padding: 30rpx;
    background: #fafafa;
    .list-item {
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      height: 200rpx;
      background-color: #ffffff;

      .list-top {
        height: 80rpx;
        background-color: #6eb657;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        display: flex;
        padding: 0 30rpx;
        justify-content: space-between;
        align-items: center;
        .time {
          display: flex;
          align-items: center;
          image {
            width: 40rpx;
            height: 40rpx;
          }
          text {
            margin-left: 16rpx;
            color: #fff;
            font-size: 26rpx;
            font-weight: 500;
            line-height: 40rpx;
          }
        }
        .reason {
          color: #999999;
          font-size: 26rpx;
          display: flex;
          align-items: center;
          image {
            width: 24rpx;
            margin-left: 12rpx;
            height: 24rpx;
          }
        }
      }
      .disables {
        background-color: #f5f5f5;
        .time {
          text {
            color: #999;
          }
        }
      }
      .info {
        height: 120rpx;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info-name {
          color: #333;
          font-weight: 400;
          font-size: 32rpx;
        }
        .num {
          color: #6eb657;
          font-weight: 500;
          size: 30rpx;
        }
      }
    }
  }
}

.info {
  padding: 30rpx;
  position: relative;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60rpx;
    text {
      color: #000;
      font-weight: 600;
      font-size: 36rpx;
    }
  }
  .cont {
    min-height: 20vh;
    color: #666666;
    font-size: 30rpx;
    line-height: 42rpx;
    margin-bottom: 60rpx;
  }
  .btn {
    background-color: #f1f1f1;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    color: #333333;
    font-size: 30rpx;
    position: absolute;
    width: 700rpx;
    left: 25rpx;
    bottom: 50rpx;
  }
}
</style>
