<!--
  单元行加时间选择器
  @author: 张文
  @date: 2022-03-30
-->
<template>
  <div>
    <ty-cell
      v-model="showVal"
      :title="title || $tyLanguage.get('wms_project.pda.component.cellPopupDate.date','日期')"
      :is-edit="!disabled"
      :is-link="!disabled"
      :placeholder="placeholder"
      :required="required"
      :name="name"
      :border="border"
      @click="cellClick"
      @clear="$emit('clear')"
    />

    <ty-popup
      v-model="show"
      height="auto"
      :title="dateTitle || (title || $tyLanguage.get('wms_project.pda.component.cellPopupDate.date','日期'))"
    >

      <van-datetime-picker
        ref="date"
        v-model="dateValue"
        :type="type"
        :show-toolbar="false"
        :filter="filter"
        :min-hour="minHour"
        :max-hour="maxHour"
        :min-minute="minMinute"
        :max-minute="maxMinute"
        visible-item-count="3"
        @confirm="dateConfirm"
      />

      <template #button>
        <ty-button
          @click="confirm"
        >{{ $tyLanguage.get('wms_project.pda.common.confirm', '确定') }}</ty-button>
      </template>
    </ty-popup>
  </div>
</template>

<script>

export default {
  name: "tyCellPopupDate",
  props:{
    // 标题
    title: String,
    // 是否可禁用
    disabled:{
      type: Boolean,
      default: false
    },
    // 绑定的值
    value:{
      type: String,
      default: ''
    },
    // 占位提示
    placeholder:String,
    // 是否显示必填星号
    required: Boolean,
    // 表单提交时的键值
    name: String,
    // 是否显示下边框
    border: {
      type: Boolean,
      default: true
    },

    // 时间类型
    type:{
      type: String,
      default: 'date'
    },
    // 时间选择器弹出框标题
    dateTitle: String,
    // 时间回显的格式
    format: String,

    // type=time时生效
    minHour:{
      type: [String,Number],
      default: 0
    },
    maxHour:{
      type: [String,Number],
      default: 23
    },
    minMinute:{
      type: [String,Number],
      default: 0
    },
    maxMinute:{
      type: [String,Number],
      default: 59
    },
    // 选项过滤函数
    filter: {
      type: Function,
      default: (type, val) =>{
        return val
      }
    },

  },
  computed:{
    val:{
      get(){
        return this.value
      },
      set(v){
        this.$emit('input', v)
      }
    },
    showVal(){
      if (this.val){

        return this.$tyTimezone.UTCToTimezone({
          date: this.val,
          format: this.format || this.formatInit[this.formatType]
        })
      }

      return ''

    }
  },
  data() {
    return {
      show: false,
      dateValue:'',
      formatInit:{
        'date': 'yyyy-MM-dd',
        /*'year-month': 'yyyy-MM',
        'month-day': 'MM-dd',*/
        'datehour': 'yyyy-MM-dd hh',
        'datetime': 'yyyy-MM-dd hh:mm',
        time: 'hh:mm'
      },
      formatType: ''
    }
  },
  mounted() {
    if (!this.formatInit[this.type]){
      console.error('使用【时间选择组件】时，传入的type类型为组件不支持的类型，请修改！！！为保证组件的正常加载已默认将类型修改为【date】')
      this.formatType = 'date'
    }else {
      this.formatType = this.type
    }
  },
  methods: {
    // 行点击
    cellClick(){

      this.show = true

      if (this.formatType === 'time'){
        this.dateValue = this.showVal
        return
      }

      this.dateValue = this.showVal ? new Date(this.showVal) : new Date()
    },

    // 弹窗口确定按钮
    confirm(){
      this.$refs.date.getPicker().confirm()
    },
    // 获取当前选中的值
    dateConfirm(val){

      let v = val
      if (this.formatType === 'time'){
        v = this.$tyDate.format(new Date()) + ' ' + v + ':00'
      }else {
        v = this.$tyDate.format(val,this.formatInit[this.formatType])


        if (this.formatType === 'datehour'){
          v = v + ':00:00'
        }

        if (this.formatType === 'date'){
          v = v + ' 00:00:00'
        }
      }

      const date = this.$tyTimezone.timezoneToUTC({
        date: v
      })
      this.val = date


      this.$emit('confirm', date, v)
      this.show = false
    }
  }
}
</script>

<style scoped lang="less">

</style>
