<template>
  <view class="field-item">
    <view class="detail-l">
      <view class="required">
        <text v-show="item?.isMustfill === '1'">*</text>
      </view>
      <view class="label">{{ item?.taskFiledValue }}</view>
    </view>
    <view class="detail-r">{{ getVal() || '--' }}</view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  item: Object,
  detailInfo: Object,
  dictList: Object
})

const getVal = () => {
  if (!props.item) return

  const arr = ['51', '52', '53']
  // 拜访类任务
  if (arr.includes(props.item?.taskTypeId) && props?.item.taskFiledKey === 'temp24') {
    return props?.detailInfo?.wmTaskContent['temp24label']
  }
  const taskFiledKey = props?.item.taskFiledKey
  const value = props?.detailInfo?.wmTaskContent[props?.item.taskFiledKey]
  if (!value) return
  // 推广药品 选择执行包
  if (taskFiledKey === 'temp12' || taskFiledKey === 'temp32') {
    return value
  }
  // 药店调查-药店选择
  if (props?.item.taskTypeId === '18' && props?.item.taskFiledKey === 'temp3') {
    return value
  }
  const dictGroupName = props?.item?.dictGroupName
  if (dictGroupName) {
    if (!props?.dictList) return
    let currDict = props?.dictList[dictGroupName]
    const curr = currDict.find((item: any) => item.value === value)
    if (curr) return curr.label
  }
}
</script>

<style lang="scss" scoped>
.field-item {
  padding: 20rpx;
  color: #000;
  background-color: #fff;
  font-size: 28rpx;
  line-height: 50rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .detail-l {
    display: flex;
    .required {
      margin-right: 6rpx;
      text {
        color: red;
        width: 10rpx;
      }
    }
    .label {
      width: 150rpx;
    }
  }
  .detail-r {
    flex: 1;
    text-align: right;
  }
}
</style>
