/**
* @Author think
* @Date 2020-07-30 09:34
*/

<template>
  <section :style="{'min-height':minHeight}" class="h-select">
    <section :style="{'min-height':minHeight}" :class="{'vue-1px-b':hasBorder}" class="select-border">
      <section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
      <section :style="{'flex':proportion[1] }" class="select-content">
        <input
          v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" type="text"
          readonly
          @click="showSelect">
        <input v-model="value" type="text" hidden>
        <i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
        <!--<slot name="icon"/>-->
        <img v-if="!showClean" :src="selectIcon" class="icon" >
      </section>
    </section>
  </section>
</template>

<script>
import VueSelect from './index'
export default {
  name: 'SelectFiled',
  props: {
    value: {
      default: null,
      type: Number | String,
    },
    placeholder: {
      type: String,
      default: null,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    dataArray: {
      type: Array,
      default: () => [],
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    valueKey: {
      type: String,
      default: 'code',
    },
    valueName: {
      type: String,
      default: 'code_name',
    },
    code: {
      type: String,
      default: 'code',
    },
    object: {
      type: Object,
      default: () => {},
    },
    label: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
      default: false,
    },
    proportion: {
      // name/content 横向面积比例
      type: Array,
      default: () => [1, 2],
    },
    itemHeight: {
      type: Number,
      default: 45,
    },
    hasBorder: {
      type: Boolean,
      default: true,
    },
    showIcon: {
      type: Boolean,
      default: true,
    },
    rightIcon: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      Icon: require('./right-gray@2x.png'),
    }
  },
  computed: {
    codeName () {
      let vm = this
      let name
      if (vm.multiple) {
        name = []
        if (Array.isArray(vm.value)) {
          vm.dataArray.forEach((selectItem, listIndex, listArray) => {
            vm.value.forEach((index, item, array) => {
              if (selectItem[vm.valueKey] === item) {
                name.push(selectItem[vm.valueName])
              }
            })
          })
        } else {
          console.error('multiple select value must be Array')
        }
      } else {
        vm.dataArray.forEach((selectItem, listIndex, listArray) => {
          // eslint-disable-next-line eqeqeq
          if (selectItem[vm.valueKey] == vm.value) {
            name = selectItem[vm.valueName]
          }
        })
      }
      return name
    },
    showClean () {
      let vm = this
      if (vm.clearable && (vm.value !== '' && vm.value !== undefined && vm.value !== null)) {
        return true
      } else {
        return !vm.showIcon
      }
    },
    minHeight () {
      if (this.$parent.itemHeight) {
        return this.$parent.itemHeight + 'px'
      } else {
        return this.itemHeight + 'px'
      }
    },
    selectIcon () {
      return this.rightIcon ? this.rightIcon : this.Icon
    },
    selectPlaceholder () {
      return this.placeholder ? this.placeholder : '请选择' + this.label
    },
  },
  methods: {
    selectCall (v1, v2, v3) {
      let vm = this
      if (!vm.multiple) {
        this.$emit('input', v2[vm.code])
        this.$emit('onSelect', v1, v2, v3)
      } else {
        this.$emit('input', v1)
        this.$emit('onSelect', v1, v2)
      }
    },
    cleanValue () {
      this.$emit('input', null)
      this.$emit('clean', null)
    },
    showSelect () {
      let vm = this
      if (!vm.disabled) {
        let list = []
        vm.dataArray.forEach((date, index, array) => {
          list.push({
            value: date[vm.valueKey],
            name: date[vm.valueName],
            parent: date.parent,
          })
        })
        VueSelect.show({
          list: list,
          callBack: vm.selectCall,
          code: vm.code,
          object: vm.object || {},
          multiple: vm.multiple,
        })
      }
    },
  },
}
</script>

<style lang="less">
  .h-select{
    width: 100%;
    display: flex;
    align-items: center;
    border: none;
    padding: 0 0 0 0.3rem;
    background-color: #fff;
    .select-border{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 0.3rem 0 0;
      min-height: 45px;
    }
    .name{
      line-height: 0.5rem;
      font-size: 14px;
      color: #333;
    }
    .required {
      display: flex;
      align-items: center;
    }
    .required::after {
      content: '*';
      color: #D24E4E;
      //height: 0.16rem;
      padding-top: 0.08rem;
      margin-left: 0.05rem;
    }
    .select-content{
      height: 100%;
      width: 100%;
      font-size: 14px;
      color: #666;
      display: flex;
      align-items: center;
      input{
        font-size: 14px;
        color: #666;
        line-height: 0.4rem;
        width: 100%;
        text-align: right;
        border: none;
      }
      .icon{
        height: 0.25rem;
        margin-left: 4px
      }
    }
  }
</style>
