<template>
  <div>
    <co-cell
      @click.native="getSelect"
      class="co-field"
      :title="options.name"
      :icon="options.icon"
      :is-link="!options.state"
      :class="[{
        'is-required': options.required === true,
        'is-nolabel': !options.name
      }]">
      <span class="form-val" :class="{'placeholder': !options.value}" v-text="options.value || (options.placeholder || ('请选择' + options.name))"></span>
      <!--
      <div
        @click.stop="handleClear"
        class="co-field-clear"
        v-if="!options.disabled && !options.disableClear"
        v-show="options.value">
        <i class="coicon coicon-delete_fill"></i>
      </div>
      -->
      <span class="co-field-state" v-if="options.state" :class="['is-' + options.state]">
        <i class="coicon" :class="getFieldCls(options.state)"></i>
      </span>
      <div class="co-field-other">
        <slot></slot>
      </div>
    </co-cell>
    <cus-picker @confirm="pickerUpdate" :ref="'cusPicker' + iconIndex"></cus-picker>
    <co-datetime-picker
      v-if="!(options.inputType == 'select' || options.inputType == 'multi' || options.inputType == 'year')"
      :ref="'cusPickerDate' + iconIndex"
      :type="options.inputType"
      v-model="options.value || null"
      @confirm="pickerUpdate"
      >
    </co-datetime-picker>
  </div>
</template>
<script>

export default {
  name: 'cus-form-select',

  props: {
    iconIndex: String, // 标识
    options: {
      'type': Object,
      'default': {}
    }
  },

  methods: {
    getSelect() {
      if (this.options.inputType === 'select' || this.options.inputType === 'multi') {
        if (this.options.selectData) {
          this.openPicker(this.options.selectData);
        } else if (this.options.selectUrl) {
          // 数据字典 查询
        } else {
          // 其他
          this.$emit('');
        }
      } else if (this.options.inputType === 'year') {
        let date = new Date();
        let nowYear = date.getFullYear();
        let datas = [];
        for (let i = 0; i < 10; i++) {
          datas.push({
            'text': nowYear - i + 5,
            'value': nowYear - i + 5
          });
        }
        this.openPicker(datas);
      } else {
        // 时间选择
        this.$refs['cusPickerDate' + this.iconIndex].open();
      }
    },
    openPicker(datas) {
      this.$refs['cusPicker' + this.iconIndex].open({
        'datas': datas,
        'type': this.options.inputType,
        'selected': this.options.valueCode
      });
    },
    pickerUpdate(result) {
      this.$emit('input', result);
    },
    getFieldCls(state) {
      var iconNS = 'coicon';
      if (state === 'error') {
        return `${iconNS}-delete_fill`;
      } else if (state === 'warning') {
        return `${iconNS}-warning_fill`;
      } else if (state === 'success') {
        return `${iconNS}-success_fill`;
      }
      return '';
    }
  }
};
</script>
