<!-- *******************  输入框  *******************  -->
<template>
  <view>
    <view class="list u-flex item-row-between">
      <view class="item-title">
        <image
          class="item-image"
          :src="mixingImage"
          v-if="item.required"
        ></image>
        <view class="u-m-r-20">{{ item.fieldsTitle }}</view>
        <view class="u-m-r-20 w-error-color" v-show="item.subtitle">{{
          item.subtitle
        }}</view>
      </view>
      <view class="location-name" @click="toMaterialPage">
        <text class="arrow-text">{{ arrowText }}</text>
        <u-icon name="arrow-right" color="#2979ff" size="30"></u-icon>
      </view>
    </view>
    <!-- <view class="u-flex-1 location">{{valueTxt || '正在获取中...'}}</view> -->
  </view>
</template>

<script>
import arrMixin from './arrMixin'
export default {
  name: 'XhInput', // 新建 input
  components: {},
  mixins: [arrMixin],
  props: {
    placeholder: {
      type: String,
      default: '请输入',
    },
    orderId: {
      type: String,
      default: '请输入',
    },
  },
  data() {
    return {
      maxlength: 140,
    }
  },
  computed: {
    mixingImage() {
      return process.uniEnv.qn_base_url + 'mixing.png'
    },
    arrowText() {
      if (this.$u.test.isEmpty(this.dataValue)) return '请选择'
      if (this.item.fieldsName == 'materialList') {
        let hasMate = false
        var newData = this.dataValue.find((item) => {
          if (!this.$u.test.isEmpty(item.useLength)) {
            hasMate = true
            return item.useLength != '0'
          }
        })

        if (hasMate && this.$u.test.isEmpty(newData)) return '请选择'
      }
      return '已选择'
    },
  },
  watch: {},
  mounted() {},
  methods: {
    toMaterialPage() {
      if (this.disabled) return
      let self = this
      uni.navigateTo({
        url:
          'pages/order/material?orderId=' +
          this.orderId +
          '&fieldName=' +
          this.item.fieldsName,
        // 接口调用成功的回调函数，即跳转到B页面 test.vue 后的回调函数
        success: function(res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('showMaterialData', self.dataValue)
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.required {
  padding-right: 10rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #fa3534;
}
.item-image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}
.item-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item-title {
    display: flex;
    font-size: 26rpx;
    color: #333333;
    align-items: center;
  }
  .location-name {
    color: #2272ff;
    text-align: right;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    .arrow-text {
      margin-right: 6rpx;
    }
  }
}

.location {
  background: #f4f5f7;
  padding: 10rpx 20rpx;
  border-radius: 12rpx;
}
</style>
