<template>
  <view class="cv-picker">
    <picker
      class="cv-picker-item"
      @change="bindPickerChange"
      @cancel="bindPickerCancel"
      :range="localArr"
      :value="localIndex"
      range-key="text"
      @click="changeIconTop"
    >
      <view class="cv-picker-item-text" v-if="localIndex != null">{{ localArr[localIndex].text }}</view>
      <view class="cv-picker-item-placeholder" v-else>{{ placeholder }}</view>
    </picker>
  </view>
</template>

<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvPicker1',
  emits: ['input', 'update:modelValue'],
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    modelValue: {
      type: [Number, String],
      default: ''
    },
    dataType: {
      type: String,
      default: 'value'
    },
    //选项数组
    dataLists: {
      type: [Array, String],
      default: []
    },
    //数据类型value的名称
    dataValue: {
      type: String,
      default: 'value'
    },
    //数据类型text的名称
    dataText: {
      type: String,
      default: 'label'
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      localVal: '',
      // 当前数组
      localArr: [],
      // 当前选中下标
      localIndex: null,
      localDataType: 'text',
      localDataValue: 'value',
      localDataText: 'label',
      iconTop: false,
      pickerLists: []
    };
  },
  watch: {
    dataLists: {
      handler(newValue) {
        this.localArr = this.itemsSortOut();
        this._dealValue();
      },
      deep: true
    },
    value(newVal) {
      this.localVal = newVal;
      this._dealValue();
    },
    modelValue(newVal) {
      this.localVal = newVal;
      this._dealValue();
    }
  },
  created() {
    this.localVal = this.doValueGet();
    console.log(this.localVal);
    this.localArr = this.itemsSortOut();
    this._dealValue();
  },
  methods: {
    doValueGet() {
      if (this.value === '') return this.modelValue;
      if (this.modelValue === '') return this.value;
      return this.value;
    },
    /**
     * 处理-循环数组数据
     */
    _dealDataList(dataLists) {
      dataLists = dataLists || this.dataLists;
      let newArr = [];
      //判断 dataLists 是否有length属性，有则是数组，没有则不是
      if (dataLists.length) {
        // 判断是否一维数组
        if (typeof dataLists[0] != 'object') {
          for (let i in dataLists) {
            newArr.push({
              text: dataLists[i],
              value: i.toString()
            });
          }
        } else {
          newArr = dataLists;
        }
      }
      return newArr;
    },
    /**
     * 处理-选中
     */
    _dealValue() {
      this.localDataType = this.dataType != 'text' ? 'value' : 'text';
      //默认Value
      let tempArr = this.localArr;
      let localIndex = null;
      for (let index = 0; index < tempArr.length; index++) {
        if (this.localDataType == 'text' && this.localVal == tempArr[index].text) {
          localIndex = index;
        } else if (this.localDataType == 'value' && this.localVal == tempArr[index].value) {
          localIndex = index;
        }
      }
      this.localIndex = localIndex;
    },
    itemsSortOut() {
      let original = [];
      original = this.dataLists || [];

      if (typeof original == 'string') {
        original = JSON.parse(original);
      }
      original = this._dealDataList(original);
      //整理数据
      let tempArr = [];
      let dataValue = this.dataValue ? this.dataValue : 'value';
      let dataText = this.dataText ? this.dataText : 'text';
      let i = 0;
      for (i in original) {
        let data = original[i];
        if (typeof data[dataValue] == 'number') {
          data[dataValue] = data[dataValue].toString();
        }
        tempArr.push({
          value: data[dataValue],
          text: data[dataText]
        });
      }
      return tempArr;
    },
    bindPickerChange: function (e) {
      let localIndex = e.detail.value;

      this.localIndex = localIndex;
      const rowData = this.localArr[localIndex];
      if (this.localDataType == 'text') {
        this.localVal = rowData.text;
      } else {
        this.localVal = rowData.value;
      }
      this.iconTop = false;
      console.log(this.localVal);
      this.$emit('input', this.localVal);
      this.$emit('update:modelValue', this.localVal);
    },
    bindPickerCancel() {
      this.iconTop = false;
    },
    changeIconTop() {
      this.iconTop = true;
    }
  }
};
</script>

<style>
.cv-picker {
  min-height: 35px;
  display: flex;
  flex: 1;
}
.cv-picker-item {
  height: 35px;
  line-height: 35px;
  float: left;
  margin-right: 10px;
  width: 100%;
  font-size: 15px;
}
.cv-picker-item-placeholder {
  color: grey;
}
</style>
