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

<template>
  <section :style="{'min-height':minHeight}" class="h-date">
    <section :style="{'min-height':minHeight}" :class="{'vue-1px-b':hasBorder}" class="date-border">
      <section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
      <section :style="{'flex':proportion[1] }" class="date-content">
        <input
          v-model="value" :disabled="disabled" :placeholder="dataPlaceholder" type="text"
          readonly
          @click="showDate">
        <!--<slot name="icon"/>-->
        <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>
export default {
  name: 'DateFiled',
  props: {
    value: {
      default: null,
      type: String | Date,
    },
    placeholder: {
      type: String,
      default: null,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    format: {
      default: 'YYYY-MM-DD',
      type: String,
    },
    minYear: {
      type: String,
      default: '1800',
    },
    maxYear: {
      type: String,
      default: '2500',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: '',
      required: true,
    },
    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: {
    minHeight () {
      if (this.$parent.itemHeight) {
        return this.$parent.itemHeight + 'px'
      } else {
        return this.itemHeight + 'px'
      }
    },
    selectIcon () {
      return this.rightIcon ? this.rightIcon : this.Icon
    },
    dataPlaceholder () {
      return this.placeholder ? this.placeholder : '请输入' + this.label
    },
    showClean () {
      let vm = this
      if (vm.clearable && (vm.value !== '' && vm.value !== undefined && vm.value !== null)) {
        return true
      } else {
        return !vm.showIcon
      }
    },

  },
  methods: {
    cleanValue () {
      this.$emit('input', null)
      this.$emit('clean', null)
    },
    showDate () {
      let vm = this
      if (!vm.disabled) {
        let date = new Date().format('yyyy-MM-dd')
        if (vm.value) {
          date = vm.value
        }
        vm.$vux.datetime.show({
          cancelText: '取消',
          confirmText: '确定',
          minYear: vm.minYear,
          maxYear: vm.maxYear,
          format: vm.format,
          value: date,
          onConfirm (val) {
            vm.$emit('input', val)
            vm.$emit('onSelect', val)
          },
        })
      }
    },
  },
}
</script>

<style lang="less">
  .h-date{
    width: 100%;
    display: flex;
    align-items: center;
    border: none;
    padding: 0 0 0 0.3rem;
    background-color: #fff;
    .date-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;
    }
    .date-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>
