<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>
</template>

<script setup lang="ts">
import {
  getTaskInfoByIdApi,
  getTaskContentConfigByTaskTypeIdApi,
  getH5TaskContentConfigByTaskTypeIdApi,
  getSignInfoByTaskIdApi,
  getQrCodeByUrlApi
} from '@/service/modules/getTask'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import textCom from './components/textCom.vue'
import selectCom from './components/selectCom.vue'
import imgCom from './components/imgCom.vue'
import longtextCom from './components/longtextCom.vue'
import visitCom from './components/visitCom.vue'
import shareCom from './components/shareCom.vue'

// 文本展示类型
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()

onLoad((e) => {
  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
  getTaskContentConfigByTaskTypeId()
  // 分享类型的任务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']
  //   getTaskContentConfigByTaskTypeId()
  //   // 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
  }
}
</script>

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