<template>
  <view class="field-item">
    <view class="detail-title">
      <view class="required">
        <text v-show="item?.isMustfill === '1'">*</text>
      </view>
      <view class="label">{{ item?.taskFiledValue }}</view>
    </view>
    <view class="detail-cont">
      <uv-textarea
        v-model="getVal"
        :maxlength="item?.taskFiledMaxsize"
        disabled
        count
        border="none"
        placeholder="请输入内容"
        class="textarea-box"
      ></uv-textarea>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  item: Object,
  detailInfo: Object
})

const getVal = computed(() => {
  if (!props.item) return
  const str = props?.detailInfo?.wmTaskContent[props.item.taskFiledKey]
  return str || '--'
})
</script>

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

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