<template>
  <view class="task-detail">
    <view class="detail">
      <view class="cell-row">
        <view class="cell-row-box">
          <text class="cell-title">执行包名称</text>
          <text class="cell-desc">{{ taskDetail?.packageName }}</text>
        </view>
      </view>
      <view class="cell-row">
        <view class="cell-row-box">
          <text class="cell-title">需求人数</text>
          <text class="cell-desc">{{ taskDetail?.userNum }}</text>
        </view>
      </view>
      <view v-if="taskDetail?.packageType1 === '1'" class="cell-row">
        <view class="cell-row-box">
          <text class="cell-title">执行包值</text>
          <text class="cell-desc">{{ taskDetail?.score }}</text>
        </view>
      </view>
      <view v-else class="cell-row">
        <view class="cell-row-box">
          <text class="cell-title">预计积分值</text>
          <text class="cell-desc">{{ taskDetail?.score }}</text>
        </view>
      </view>
      <view v-if="taskDetail?.packageType1 != '1'" class="cell-row">
        <view class="cell-row-box">
          <text class="cell-title">任务个数</text>
          <text class="cell-desc">{{ taskDetail?.taskNum }}</text>
        </view>
      </view>
      <view class="cell-row">
        <view class="cell-row-box">
          <text class="cell-title">起止日期</text>
          <text class="cell-desc">{{ taskDetail?.termDate }}</text>
        </view>
      </view>
      <view class="cell-row">
        <view class="cell-row-box">
          <text class="cell-title">发包企业</text>
          <text class="cell-desc">{{ taskDetail?.packageEntName }}</text>
        </view>
      </view>
      <view class="cell-row">
        <view class="cell-row-box">
          <text class="cell-title">发布日期</text>
          <text class="cell-desc">{{ taskDetail?.createTime }}</text>
        </view>
      </view>
      <view v-show="taskDetail?.exportFlag === '1'" class="cell-row">
        <uv-button @click="exportFn()" :customStyle="customBtnStyle">导出报告</uv-button>
      </view>
    </view>
    <view class="rules" v-if="rulesList?.length > 0">
      <view class="rules-con">
        <view class="r-title">任务完成情况:</view>
        <view class="table">
          <uni-table border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="center">任务大类</uni-th>
              <uni-th align="center">任务类型</uni-th>
              <uni-th align="center" width="80">拆解个数</uni-th>
              <uni-th align="center" width="80">完成个数</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="(item, index) in rulesList" :key="index">
              <uni-td align="center">{{ item.baseId }}</uni-td>
              <uni-td align="center">{{ item.taskTypeName }}</uni-td>
              <uni-td align="center">{{ item.qty }}</uni-td>
              <uni-td align="center">{{ item.count }}</uni-td>
            </uni-tr>
          </uni-table>
        </view>
      </view>
    </view>
    <view class="btn" v-if="taskDetail?.receiveFlag">
      <uv-button
        shape="circle"
        :disabled="disabled"
        :text="disabled ? '领取成功' : '领取执行包'"
        :customStyle="customStyle"
        @click="getTaskClick"
      />
    </view>
    <!-- 导出 -->
    <uv-modal ref="exportModal" title="报告导出" showCancelButton>
      <view class="slot-content email-input">
        <uv-input placeholder="请输入邮箱" border="surround" w v-model="emailValue" />
      </view>
      <template v-slot:confirmButton>
        <view class="export-btns">
          <button class="export-btn cancel" @click="exportModalCancel">取消</button>
          <button class="export-btn confirm" @click="exportModalConfirm">确定</button>
        </view>
      </template>
    </uv-modal>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import {
  receivePackage,
  getScorePackageInfoById,
  exportZbInfoFormWeiNewApi,
  getPkgTaskDetailsApi
} from '@/service/modules/getTask'

import { validateEmail } from '@/utils/index'

const id = ref()
onLoad((e) => {
  id.value = e?.id
  getDetail()
  getRules()
})

const taskDetail = ref()

async function getDetail() {
  let res = await getScorePackageInfoById(id.value)
  if (res.code === 0) {
    taskDetail.value = res.data
  }
}
const rulesList = ref()
async function getRules() {
  let res = await getPkgTaskDetailsApi({
    pkgId: id.value
  })

  if (res.code === 0) {
    rulesList.value = res.data
  }
}
const disabled = ref(false)
// 领取执行包
async function getTaskClick() {
  uni.showLoading()
  const res = await receivePackage(id.value)
  if (res.code === 0) {
    uni.hideLoading()
    uni.showToast({
      title: '领取成功',
      icon: 'none'
    })
    disabled.value = true
  }
}

const customStyle = {
  background: '#6eb657',
  color: '#ffffff'
}

const customBtnStyle = {
  background: '#3fa3f1',
  color: '#ffffff',
  marginBottom: '30rpx'
}

const exportModal = ref()
const exportFn = () => {
  exportModal.value.open()
}

const emailValue = ref('')
const exportModalCancel = () => {
  emailValue.value = ''
  exportModal.value.close()
}
const exportModalConfirm = async () => {
  if (!validateEmail(emailValue.value)) {
    return uni.showToast({
      title: '请输入正确的邮箱',
      icon: 'none',
      duration: 1200
    })
  }
  if (id.value) {
    const res = await exportZbInfoFormWeiNewApi({
      id: id.value,
      email: emailValue.value
    })
    if (res.code === 1) {
      uni.showToast({
        title: res.msg || '导出失败，请联系管理员',
        icon: 'none'
      })
    }
    if (res.code === 0) {
      uni.showToast({
        title: '报告将发送至您的邮箱，请注意查收',
        icon: 'none'
      })
    }
    exportModalCancel()
  }
}
</script>

<style lang="scss" scoped>
.task-detail {
  background: #f2f2f2;
  .detail {
    .cell-row {
      background: #ffffff;
      padding: 0 56rpx 0 66rpx;
      .cell-row-box {
        border-bottom: 1rpx solid #e2e2e2;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32rpx 0;
        &::before {
          content: '*';
          position: absolute;
          left: -15px;
          font-size: 14px;
          color: #fa3534;
          height: 9px;
          line-height: 1;
        }
        .cell-title {
          font-size: 30rpx;
        }
        .cell-desc {
          font-size: 30rpx;
          color: #898989;
        }
      }
      &:last-child {
        .cell-row-box {
          border-bottom: none;
        }
      }
    }
  }
  .rules {
    padding-bottom: 150rpx;
    margin-top: 20rpx;
    background: #ffffff;
    .rules-con {
      .r-title {
        padding: 22rpx 60rpx;
        margin-bottom: 10rpx;
      }
      .table {
        padding: 0 20rpx;
      }
    }
  }
  .btn {
    box-shadow: 0px 0px 8rpx 0px rgba(193, 193, 193, 0.5);
    padding: 28rpx 16rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
}
.email-input {
  width: 100%;
}

.export-btns {
  display: flex;
  justify-content: space-between;

  .export-btn {
    border: none;
    background: none;
    font-size: 32rpx;
  }
  .cancel {
    color: #666;
  }
  .confirm {
    color: #6eb657;
  }
}
</style>
