<template>
  <view class="card-list">
    <view class="base-info">
      <view class="title"> 任务类型： {{ getName(item.taskType) }} {{ props.index + 1 }}</view>
      <view class="info">
        <view>任务积分：{{ item.score }}</view>
        <view>代表姓名：{{ item.taskUserName }}</view>
      </view>
      <view class="title">任务详情: </view>
    </view>
    <view class="task-detail">
      <!-- 正常任务 -->
      <view class="field-box" v-if="item.config?.length">
        <template v-for="iten in item.config" :key="iten.id">
          <!-- 文本展示类型 -->
          <textCom v-if="textArr.includes(iten.taskFiledType)" :item="iten" :detailInfo="item" />
          <!-- 下拉选择 -->
          <selectCom
            v-if="iten.taskFiledType == 'domain' || iten.taskFiledType == 'select'"
            :item="iten"
            :hideLine="true"
            :detailInfo="item"
            :dictList="item.dict"
          />
          <!-- 图片类型 -->
          <template v-if="iten.taskFiledType == 'img' || iten.taskFiledType == 'sign'">
            <imgCom :item="iten" :detailInfo="item" />
          </template>
          <!-- 长文本 -->
          <template v-if="iten.taskFiledType == 'longtext'">
            <longtextCom :item="iten" :detailInfo="item" />
          </template>
          <!-- 树形选择 -->
        </template>
      </view>
      <!-- 转发类任务  -->
      <view v-if="shareIdArr.includes(item.taskType)">
        <shareCom :detailInfo="item" :ercodeUrl="ercodeUrl" />
      </view>
      <!-- 拜访类任务 -->
      <view v-if="visitIdArr.includes(item.taskType)">
        <visitCom :signInfoDetail="item.wmUserSignList" />
      </view>
    </view>
    <view class="btn">
      <view class="cancel" @click="reviewFn(0)">拒绝</view>
      <view class="confirm" @click="reviewFn(1)">通过</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { 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'

const props = defineProps(['item', 'index', 'taskList'])
const emit = defineEmits(['reviewFn'])

// 文本展示类型
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']

function getName(taskType: any) {
  let curr = props.taskList?.find((item: any) => item.id == taskType)
  if (curr) return curr.taskTypeName
}

const reviewFn = (type: number) => {
  emit('reviewFn', type, props.index)
}
</script>

<style lang="scss" scoped>
.card-list {
  margin-bottom: 30rpx;
  background: #fff;

  .base-info {
    view {
      line-height: 50rpx;
    }
    background-color: #fff;
    padding: 20rpx;
    padding-bottom: 0;
    .title {
      font-size: 32rpx;
      color: #000;
      font-weight: 800;
      margin: 18rpx;
    }
  }

  .task-detail {
    box-sizing: border-box;
    .poster-img {
      padding: 20rpx;
      width: 710rpx;
    }
    .line {
      width: 100%;
      height: 20rpx;
      background: #f4f4f4;
    }
  }
}
.btn {
  margin-top: 20rpx;
  padding: 0 20rpx;
  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;
  }
}
</style>
