<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">{{ detailInfo?.wmTaskContent[item?.taskFiledKey] || '--' }}</view>
  </view>
</template>

<script setup lang="ts">
defineProps({
  item: Object,
  detailInfo: Object
})
</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>
