<!-- *******************  单级/多级 选择  *******************  -->
<template>
  <view class="picker-box" :style="{ width: fieldsWidth }">
    <!-- <view class="u-flex u-row-between text-view" @click="openPicker">
			<view class="txt u-flex-1 text-title">{{text||''}}</view>
			<u-icon class="input-icon" color="#2272FF" :name="showPicker ? 'arrow-up' : 'arrow-down'"></u-icon>
		</view>
		<u-picker v-model="showPicker" range-key="label" @columnchange="columnchange" :mode="isNotMulti?'selector':'multiSelector'" @confirm="pickerConfirm" :range="settings"></u-picker> -->
    <view class="u-flex u-row-between picker-common">
      <!-- :mode="isNotMulti ? 'selector' : 'multiSelector'" 多选单选判断注释 -->
      <picker
        mode="selector"
        :value="index"
        range-key="label"
        :range="settings"
        :disabled="disabled"
        @click="showPicker = true"
        @change="pickerChange"
        class="txt u-flex-1"
      >
        <view>{{ text || '请选择' }}</view>
      </picker>
      <u-icon
        class="input-icon"
        color="#2272FF"
        :name="showPicker ? 'arrow-up' : 'arrow-down'"
      ></u-icon>
    </view>
    <!-- :default-selector='[0, 1]' -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import objMixin from './objMixin'
export default {
  name: 'XhPicker',
  components: {},
  mixins: [objMixin],
  props: {
    // 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
    defaultSelector: {
      type: Array,
      default() {
        return [0]
      },
    },
    // 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
    rangeKey: {
      type: String,
      default: 'label',
    },
    value: {
      type: String,
      default: '{}',
    },
    orderId: {
      type: Number,
      default: 0,
    },
    categoryId: {
      type: Number,
      default: 0,
    },
    specificationId: {
      type: String,
      default: '0',
    },
    orderServiceType: {
      type: String,
      default: '安装',
    },
  },
  filters: {},
  data() {
    return {
      isNotMulti: true,
      showPicker: false,
      settings: [],
      measure: [],
      index: '',
    }
  },
  computed: {
    text() {
      let val = ''
      if (this.value) {
        let data = JSON.parse(this.value)
        console.log("data", data)
        val = data[0].measureTypeName + '-' + data[0].measureName
      }
      return val
    },
    fieldsWidth() {
      return this.item.fieldsWidth ? this.item.fieldsWidth + 'rpx' : '100%'
    },
  },
  watch: {
    specificationId(val, oldVal) {
      this.initComponent()
    },
  },
  mounted() {
    this.isNotMulti = this.orderServiceType === '安装'
    this.initMeasure()
  },
  methods: {
    openPicker() {
      if (this.specificationId === '0') {
        this.$refs.uToast.show({
          title: '请先选择规格',
          type: 'error',
        })
        return
      }
      this.showPicker = true
    },
    initComponent() {
      if (this.isNotMulti) {
        this.initMeasure()
      } else {
        this.initSymptoms()
      }
    },
    initSymptoms() {
      // 初始化现象
    },
    initCause() {
      // 初始化原因
    },
    initMeasure() {
      // 初始化措施
      if (this.orderId) {
        let param = {
          orderId: this.orderId,
          categoryId: this.categoryId,
          specificationId: this.specificationId,
          orderServiceTypeText: this.orderServiceType,
        }
        this.$u.api.getMeasureV2(param).then((res) => {
          if (res.code == 200) {
            let result = []
            let measure = []
            for (let key in res.data) {
              res.data[key].measureExtendDtos.forEach(item => {
                measure.push(item)
                result.push({ id: item.measureId, label: item.measureName })
              })
            }
            this.measure = measure
            this.settings = result
          } else {
            console.log(res.message, '查询措施失败')
          }
        })
      }
    },

    pickerConfirm(data) {
      let result = []
      
      if (this.isMulti) {
        // 维修
      } else {
        // 安装
        result.push(this.measure[data[0]])
      }
      this.valueChange(JSON.stringify(result))
    },
    pickerChange(data) {
      this.showPicker = false
      this.index = data.detail.value

      let result = []
      result.push(this.measure[this.index])
      this.valueChange(JSON.stringify(result))
    },
    columnchange(data) {
      // // 树列改变时进行联动操作
      // const {column ,index} = data
      // let arr = [9,10,50]
      // this.settings.splice(column+1,1,arr)
    },
  },
}
</script>
<style lang="scss" scoped>
.picker-common {
  min-height: 35px;
  background-color: #f4f5f7;
  border-radius: 6px;
  color: #333333;
  padding-left: 10px;
  padding-right: 12px;
  width: 100%;
  height: 38px;
  .txt {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.text-view {
  background-color: #f4f5f7;
  border-radius: 12rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  height: 76rpx;
  .text-title {
    font-size: 26rpx;
    color: #333333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>
