<template>
  <view class="task-detail">
    <!-- 分享的图片展示 -->
    <image
      v-if="isShareImg"
      mode="widthFix"
      class="poster-img"
      :src="detailInfo?.taskInfo?.shareImgUrl"
    />
    <!-- 正常任务 -->
    <view class="field-box" v-else-if="configList?.length">
      <template v-for="item in configList" :key="item.id">
        <!-- 文本展示类型 -->
        <textCom
          v-if="textArr.includes(item.taskFiledType)"
          :item="item"
          :detailInfo="detailInfo"
        />
        <!-- 下拉选择 -->
        <selectCom
          v-if="item.taskFiledType == 'domain' || item.taskFiledType == 'select'"
          :item="item"
          :detailInfo="detailInfo"
          :dictList="dictList"
        />
        <!-- 图片类型 -->
        <template v-if="item.taskFiledType == 'img' || item.taskFiledType == 'sign'">
          <view class="line" />
          <imgCom :item="item" :detailInfo="detailInfo" />
        </template>
        <!-- 长文本 -->
        <template v-if="item.taskFiledType == 'longtext'">
          <view class="line" />
          <longtextCom :item="item" :detailInfo="detailInfo" />
        </template>
        <!-- 树形选择 -->
      </template>
    </view>
    <!-- 转发类任务 -->
    <view v-if="shareIdArr.includes(taskTypeId)">
      <shareCom :detailInfo="detailInfo" :ercodeUrl="ercodeUrl" />
    </view>
    <!-- 拜访类任务 -->
    <view v-if="visitIdArr.includes(taskTypeId)">
      <visitCom :signInfoDetail="signInfoDetail" />
    </view>

    <view class="review-btn botton-content" v-if="showBtn">
      <view class="review-form">
        <uv-form
          labelPosition="left"
          :model="reviewForm"
          :rules="reviewFormRules"
          ref="reviewFormRef"
          labelWidth="80"
        >
          <uv-form-item label="审核说明" prop="taskStatusInfo" borderBottom required>
            <uv-textarea
              v-model="reviewForm.taskStatusInfo"
              placeholder="请输入审核说明"
              height="48"
            ></uv-textarea>
          </uv-form-item>
        </uv-form>
      </view>
      <view class="btn">
        <view class="cancel" @click="reviewFn('4')">拒绝</view>
        <view class="confirm" @click="reviewFn('3')">通过</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  getTaskInfoByIdApi,
  getTaskContentConfigByTaskTypeIdApi,
  getH5TaskContentConfigByTaskTypeIdApi,
  getSignInfoByTaskIdApi,
  getQrCodeByUrlApi
} from '@/service/modules/getTask'
import { approvalTaskApi, approvalReportApi } from '@/service/modules/taskAudit'

import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'

import textCom from '@/pages/task/task-detail/components/textCom.vue'
import selectCom from '@/pages/task/task-detail/components/selectCom.vue'
import imgCom from '@/pages/task/task-detail/components/imgCom.vue'
import longtextCom from '@/pages/task/task-detail/components/longtextCom.vue'
import visitCom from '@/pages/task/task-detail/components/visitCom.vue'
import shareCom from '@/pages/task/task-detail/components/shareCom.vue'

import { useReview } from '@/store/review'
import { useLoginStore } from '@/store/login'

const loginStore = useLoginStore()
let userInfo: any = loginStore.currentUserInfo
const roles: number[] = userInfo.roles

const reviewStore = useReview()
// 文本展示类型
const textArr = [
  'area',
  'text',
  'inputautoselect',
  'map',
  'datetime',
  'datatimerange',
  'number',
  'money',
  'tree'
]
// 转发分享类任务类型id
const shareIdArr = ['8', '9', '10', '11']
// 二维码
const ercodeUrl = ref()

// 拜访类任务类型id
const visitIdArr = ['5', '6', '33']
const detailId = ref()
const currentInfo = ref()
const currentType = ref()
const currentReportId = ref()
const showBtn = ref(false)
onLoad((e) => {
  currentType.value = e?.type
  currentReportId.value = e?.reportId
  const info = reviewStore.currentInfo
  if (info) {
    currentInfo.value = JSON.parse(info)
  }
  reviewStore.setCurrentInfo('')

  if (e?.show === 'true') {
    if (roles.includes(currentInfo.value.checkState.roleId)) {
      showBtn.value = true
    }

    if ((roles.includes(40) || roles.includes(42)) && currentInfo.value.checkState.roleId == -1) {
      showBtn.value = true
    }
    if (roles.includes(39) && currentInfo.value.checkState.nextNodeId == -1) {
      showBtn.value = false
    }
  }

  if (e?.id) {
    detailId.value = e.id
    getTaskDetail()
  }
})

const detailInfo = ref()
const taskTypeId = ref()
const isShareImg = ref(false)
const getTaskDetail = async () => {
  const res = await getTaskInfoByIdApi(detailId.value)
  const data = res.data
  detailInfo.value = data

  taskTypeId.value = data.taskType
  // 分享类型的任务id
  const shareTypeArr = ['7', '8', '9', '10', '11']
  // 任务类型是分享的
  if (shareTypeArr.includes(data.taskType)) {
    if (data.taskInfo.shareImgUrl) {
      isShareImg.value = true
    } else {
      // 分享类型为文章
      const articleIdArr = ['9', '10']
      let type = articleIdArr.includes(data.taskType) ? 'article' : ''
      getErrCode(data.shareId, type)
    }
  } else {
    // 拜访类型的任务id
    const arr = ['5', '6', '33']
    if (arr.includes(data.taskType)) {
      getSignInfoByTaskId()
    } else {
      getTaskContentConfigByTaskTypeId()
    }
  }
}

const signInfoDetail = ref()
// 拜访类型，获取拜访的列表
const getSignInfoByTaskId = async () => {
  const res = await getSignInfoByTaskIdApi({ id: detailId.value })
  if (res.code === 0) {
    signInfoDetail.value = res.data
  }
}

const configList = ref()
const dictList = ref()
const getTaskContentConfigByTaskTypeId = async () => {
  let res
  // #ifdef  MP-WEIXIN
  res = await getTaskContentConfigByTaskTypeIdApi(taskTypeId.value)
  // #endif
  // #ifdef  H5
  res = await getH5TaskContentConfigByTaskTypeIdApi(taskTypeId.value)
  // #endif
  if (res.code === 0) {
    let data = res.data
    let keys = Object.keys(data)
    if (keys.includes('config')) {
      configList.value = data.config
      dictList.value = data.dict
    } else {
      configList.value = data[taskTypeId.value].config
      dictList.value = data[taskTypeId.value].dict
    }
    configList?.value.forEach((item: any) => {
      item.taskFiledType = item.taskFiledType.trim()
    })
  }
}

const getErrCode = async (shareId: string, type: string) => {
  let shareUrl = `${
    import.meta.env.VITE_APP_URL
  }/h5/#/pages/artile/detail?type=${type}&id=${shareId}`
  const res = await getQrCodeByUrlApi(shareUrl)
  if (res.code === 0) {
    ercodeUrl.value = import.meta.env.VITE_APP_URL + res.data.data.url
  }
}

// 审核提交
// 审核相关
const reviewFormRef = ref()
const reviewForm = reactive({
  taskStatusInfo: ''
})
const reviewFormRules = reactive({
  taskStatusInfo: {
    type: 'string',
    required: true,
    message: '请输入审核说明',
    trigger: ['blur', 'change']
  }
})

const reviewFn = (flag: string) => {
  reviewFormRef.value
    .validate()
    .then(async () => {
      let obj: any = {}
      let res
      if (currentType.value === '1') {
        obj = {
          id: detailId.value,
          taskStatus: flag,
          taskStatusInfo: reviewForm.taskStatusInfo,
          nodeId: currentInfo.value?.checkState.curNodeId
        }
        res = await approvalTaskApi(obj)
      } else if (currentType.value === '2') {
        obj = {
          id: currentReportId.value,
          taskIds: detailId.value,
          approvalOpinion: flag == '3' ? '1' : '2',
          approvalInfo: reviewForm.taskStatusInfo,
          taskStatusInfo: reviewForm.taskStatusInfo,
          nodeId: currentInfo.value?.checkState.nextNodeId
        }
        if (roles.includes(42)) {
          obj.nodeId = 8
        }
        // 40 商务组
        if (roles.includes(40)) {
          obj.nodeId = 9
        }
        res = await approvalReportApi(obj)
      }

      if (res.code === 0) {
        uni.showToast({
          title: '审核成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }
    })
    .catch((err: any) => {
      console.log('err', err)
    })
}
</script>

<style lang="scss" scoped>
.task-detail {
  background: #f2f2f2;
  min-height: 100vh;
  box-sizing: border-box;
  .poster-img {
    padding: 20rpx;
    width: 710rpx;
  }
  .line {
    width: 100%;
    height: 20rpx;
    background: #f4f4f4;
  }
}

.botton-content {
  margin: 20rpx 0;
  padding: 30rpx 46rpx 54rpx;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 160rpx;
  border-radius: 12rpx;
}

.btn {
  display: flex;
  justify-content: space-between;

  view {
    font-weight: 400;
    box-sizing: border-box;
    font-size: 32rpx;
    line-height: 45rpx;
    border-radius: 8rpx;
    height: 72rpx;
    width: 290rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cancel {
    border: 2rpx solid #c7c7c7;
    color: #111;
  }
  .confirm {
    background-color: #6eb657;
    color: #ffffff;
  }
}
.review-form {
  margin-bottom: 54rpx;
}
</style>
