<!-- @desc:日期组件  @auth:周兴  @time:2022/11/15 9:58 -->
<template>
  <div class="close-div-class">
    <DatePicker size="small" v-model="model" :readonly="readonly" :class="readonly ? 'readonly-input' : null"
                :transfer="transfer" :options="options"
                :clearable="false" :type="type"
                :editable="editable"
                separator="～"
                ref="datePicker" :open="openFlag"
                @dblclick.native.stop="copyValue()"
                :format="handleFormat"
                :placeholder="placeholderData" @on-change="onChange" @on-open-change="handleOpenDate"
                style="width: 100%">
    </DatePicker>
    <div v-if="clearableFlag">
      <div v-if="model && isFocus && !readonly && clearable" style="cursor: pointer">
        <Icon slot="prefix" type="iconfont iconfont icon-clear" @click.stop="clearAll"/>
      </div>
      <div v-else style="width: 16px;height: 16px">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DkDatePickerPop',
    inject: {
      prop: {
        type: String,
        default: null
      },
      dkFormItem: {
        type: Object,
        default: null
      }
    },
    props: {
      // 组件的值
      value: {
        type: [Date, String, Array],
        default: null
      },
      //只读
      readonly: {
        type: Boolean,
        default: false
      },
      //类型 date：时间 daterange：时间段 datetime:时间 ;year:年份;月份 ：month
      type: {
        type: String,
        default: 'date'
      },
      format: {
        type: String,
        default: null,
      },
      transfer: {
        type: Boolean,
        default: false
      },
      // 快捷方式
      shortCutFlag: {
        type: Boolean,
        default: false
      },
      //提示信息
      placeholder: {
        type: String,
        default: null
      },
      //是否显示清空按钮
      clearable: {
        type: Boolean,
        default: true
      },
      // 文本框是否可以输入，只在没有使用 slot 时有效
      editable: {
        type: Boolean,
        default: true
      },
      // 不显示清空以及留白
      clearableFlag: {
        type: Boolean,
        default: true
      },
    },
    data() {
      let self = this
      return {
        model: null,
        placeholderData: null,
        label: '',
        openFlag: null,
        options: self.getOptions(),
        settingLeft: null,          // 设置图标居左的位置
        isFocus: false,
      }
    },
    computed: {
      /**
       * @desc   : 处理数据格式
       * @author : 周兴
       * @date   : 2023/3/24 10:10
       */
      handleFormat() {
        if (!this.format) {
          if (this.type === 'datetime') {
            return 'yyyy-MM-dd HH:mm:ss'
          } else if (this.type === 'date') {
            return 'yyyy-MM-dd'
          } else if (this.type === 'year') {
            return 'yyyy'
          } else if (this.type === 'month') {
            return 'yyyy-MM'
          }
        }else{
          return this.format
        }
      },
    },
    watch: {
      model(n, o) {
        if (n) {
          // 清除提示信息
          this.clearErrMessage()
        }
        this.$emit('input', n)
      },
      value(n, o) {
        this.model = n
      },
      readonly(n, o) {
        // 给提示信息赋值
        this.setReadOnly(n)
      }
    },
    methods: {
      /**
       * @desc   : 复制单元格
       * @author : 周兴
       * @date   : 2022/6/9 9:31
       */
      copyValue() {
        if (this.$refs.datePicker && this.$refs.datePicker.$refs.input
          && this.$refs.datePicker.$refs.input.value) {
          let value = this.$refs.datePicker.$refs.input.value
          this.$message.success(vm.$t('copySuccess') + '：' + value)
          //创建一个input框
          const input = document.createElement('input')
          //将指定的DOM节点添加到body的末尾
          document.body.appendChild(input)
          //设置input框的value值为直播地址
          input.setAttribute('value', value)
          //选取文本域中的内容
          input.select()
          //copy的意思是拷贝当前选中内容到剪贴板
          //document.execCommand（）方法操纵可编辑内容区域的元素
          //返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
          if (document.execCommand('copy')) {
            document.execCommand('copy')
          }
          //删除这个节点
          document.body.removeChild(input)
        }
      },
      /**
       * @desc   : 清空数据
       * @author : 周兴
       * @date   : 2023/1/13 14:38
       */
      clearAll() {
        this.model = null
        this.$emit('on-change', null)
      },
      /**
       * @desc   : 清空数据
       * @author : 周兴
       * @date   : 2022/8/25 17:22
       */
      clear() {
        this.model = null
        this.$emit('on-change', null)
      },
      /**
       * @desc   : 获取相关信息
       * @author : 周兴
       * @date   : 2022/7/23 10:50
       */
      getOptions() {
        if (this.shortCutFlag) {
          let options = {}
          if (this.type === 'daterange') { // 日期范围
            options.shortcuts = [
              {
                // 本日
                text: vm.$t('today'),
                value() {
                  const end = new Date()
                  const start = new Date()
                  return [start, end]
                }
              },
              {
                // 昨天
                text: vm.$t('yesterday'),
                value() {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24)
                  end.setTime(end.getTime() - 3600 * 1000 * 24)
                  return [start, end]
                }
              },
              {
                // 近一周
                text: vm.$t('nearlyWeek'),
                value() {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                  return [start, end]
                }
              },
              {
                // 近一月
                text: vm.$t('nearlyMonth'),
                value() {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                  return [start, end]
                }
              },
              {
                // 近三月
                text: vm.$t('nearlythreeMonth'),
                value() {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                  return [start, end]
                }
              },
              {
                // 本月
                text: vm.$t('thisMonth'),
                value() {
                  const date = new Date()
                  return [date.getFirstDateStr(), date.getLastDateStr()]
                }
              },
              {
                // 上月
                text: vm.$t('beforeMonth'),
                value() {
                  const date = new Date()
                  let lastDate = date.addMonths(-1)
                  return [lastDate.getFirstDateStr(), lastDate.getLastDateStr()]
                }
              },
              {
                // 本季度
                text: vm.$t('thisQuarter'),
                value() {
                  const date = new Date()
                  let year = date.getFullYear()
                  let month = date.getMonth() + 1
                  const currQuarter = Math.floor((month % 3 === 0 ? (month / 3) : (month / 3 + 1)))
                  if(currQuarter === 1){ // 第一季度
                    return [new Date(year,0,1), new Date(year,2,31)]
                  }else if(currQuarter === 2){ // 第二季度
                    return [new Date(year,3,1), new Date(year,5,30)]
                  }else if(currQuarter === 3){ // 第三季度
                    return [new Date(year,6,1), new Date(year,8,30)]
                  } else{  // 第四季度
                    return [new Date(year,9,1), new Date(year,11,31)]
                  }
                }
              }
            ]
          } else if (this.type === 'datetimerange') { // 日时范围
            let now = new Date();
            let nowStr = now.toDateStr();
            options.shortcuts = [
              {
                // 本日
                text: vm.$t('today'),
                value() {
                  const end = new Date(nowStr + ' 23:59:59').toDateTimeStr();
                  const start = new Date(nowStr + ' 00:00:00').toDateTimeStr();
                  return [start, end]
                }
              },
              {
                // 昨天
                text: vm.$t('yesterday'),
                value() {
                  let yesterday = now.addDays(-1).toDateStr();
                  return [new Date(yesterday + ' 00:00:00').toDateTimeStr(), new Date(yesterday + ' 23:59:59').toDateTimeStr()];
                }
              },
              {
                // 近一周
                text: vm.$t('nearlyWeek'),
                value() {
                  return [new Date(now.addDays(-6).toDateStr() + ' 00:00:00').toDateTimeStr(), new Date(nowStr + ' 23:59:59').toDateTimeStr()];
                }
              },
              {
                // 近一月
                text: vm.$t('nearlyMonth'),
                value() {
                  return [new Date(now.addMonths(-1).toDateStr() + ' 00:00:00').toDateTimeStr(), new Date(nowStr + ' 23:59:59').toDateTimeStr()];
                }
              },
              {
                // 近三月
                text: vm.$t('nearlythreeMonth'),
                value() {
                  return [new Date(now.addMonths(-3).toDateStr() + ' 00:00:00').toDateTimeStr(), new Date(nowStr + ' 23:59:59').toDateTimeStr()];
                }
              },
              {
                // 本月
                text: vm.$t('thisMonth'),
                value() {
                  return [new Date(now.getFirstDateStr() + ' 00:00:00').toDateTimeStr(), new Date(now.getLastDateStr() + ' 23:59:59').toDateTimeStr()];
                }
              },
              {
                // 上月
                text: vm.$t('beforeMonth'),
                value() {
                  let beforeMonth = now.addMonths(-1);
                  return [new Date(beforeMonth.getFirstDateStr() + ' 00:00:00').toDateTimeStr(), new Date(beforeMonth.getLastDateStr() + ' 23:59:59').toDateTimeStr()];
                }
              },
              {
                // 本季度
                text: vm.$t('thisQuarter'),
                value() {
                  const date = new Date()
                  let year = date.getFullYear()
                  let month = date.getMonth() + 1
                  const currQuarter = Math.floor((month % 3 === 0 ? (month / 3) : (month / 3 + 1)))
                  if(currQuarter === 1){ // 第一季度
                    return [new Date(year,0,1,0,0,0), new Date(year,2,31,23,59,59)]
                  }else if(currQuarter === 2){ // 第二季度
                    return [new Date(year,3,1,0,0,0), new Date(year,5,30,23,59,59)]
                  }else if(currQuarter === 3){ // 第三季度
                    return [new Date(year,6,1,0,0,0), new Date(year,8,30,23,59,59)]
                  } else{  // 第四季度
                    return [new Date(year,9,1,0,0,0), new Date(year,11,31,23,59,59)]
                  }
                }
              }
            ]
          } else {
            options.shortcuts = [
              {
                // 本日
                text: vm.$t('today'),
                value() {
                  const date = new Date()
                  return date
                }
              },
              {
                // 明日
                text: vm.$t('tomorrow'),
                value() {
                  const date = new Date()
                  date.setTime(date.getTime() + 3600 * 1000 * 24)
                  return date
                }
              },
              {
                // 一周后
                text: vm.$t('nextWeek'),
                value() {
                  const date = new Date()
                  date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
                  return date
                }
              },
            ]
          }
          return options
        }
      },
      /**
       * @desc   : 控件只读时的处理
       * @author : 周兴
       * @date   : 2022/3/4 11:12
       */
      setReadOnly(value) {
        // 给提示信息赋值
        if (value) {
          this.placeholderData = null
          // 给输入框赋值灰色背景
        } else {
          if (!this.placeholder) {
            this.placeholderData = vm.$t('inputWords', { 'search-name': this.label })
          } else {
            this.placeholderData = this.placeholder
          }
        }
      },
      /**
       * @desc   : 聚焦事件
       * @author : 周兴
       * @date   : 2023/6/9 10:04
       */
      handleOpenDate(e) {
        if (e) {
          this.isFocus = true
        }
      },
      /**
       * @desc   : 失去焦点
       * @author : 周兴
       * @date   : 2023/6/9 10:47
       */
      handleBlur(e) {
        setTimeout(() => {
          this.isFocus = false
        }, 200)
      },
      /**
       * @desc   : 值改变事件
       * @author : 周兴
       * @date   : 2023/3/24 10:18
       */
      onChange(a, b) {
        /* 返回两个值，已经格式化后的日期，比如 2016-01-01，和当前的日期类型，比如 date */
        if (this.type == 'date') {
          if (this.$refs.datePicker) {
            // 需要处理下数据，不然手动输入的错误日期，显示还是会有问题
            this.$refs.datePicker.$refs.input.currentValue = a
          }
        }
        if (a) {
          this.$emit('onChange', this.model)
          this.$emit('on-change', a)
          this.$emit('input', new Date(a))
        } else {
          this.$emit('onChange', null)
          this.$emit('on-change', null)
          this.$emit('input', null)
        }
      },
      /**
       * @desc   : 提供给resize用，控制openFlag
       * @author : 周兴
       * @date   : 2023/4/13 14:51
       */
      setOpenFlag() {
        if (this.type == 'daterange') {
          this.openFlag = false
          setTimeout(() => {
            this.openFlag = null
          }, 300)
        }
      },
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.setOpenFlag)
      if (this.$refs.datePicker && this.$refs.datePicker.$refs.input
        && this.$refs.datePicker.$refs.input.$refs.input) {
        this.$refs.datePicker.$refs.input.$refs.input.removeEventListener('blur', this.handleBlur)
      }
    },
    mounted() {
      //监听窗口变化
      let self = this
      if (self.dkFormItem) {
        self.dkFormItem.setItems(self)   // 把当前组件赋值给formItem
      }
      window.addEventListener('resize', self.setOpenFlag)
      // 增加失焦事件 解决垃圾桶隐藏
      if ((!this.readonly && this.clearable) && this.$refs.datePicker && this.$refs.datePicker.$refs.input
        && this.$refs.datePicker.$refs.input.$refs.input) {
        this.$refs.datePicker.$refs.input.$refs.input.addEventListener('blur', this.handleBlur)
      }
    },
    created() {
      if (this.value instanceof Array) {
        this.model = [...this.value]
      } else {
        this.model = this.value
      }
      //获取名称
      let name = null
      if (!this.dkFormItem || !this.dkFormItem.label) {
        if (this.name) {
          // 给label赋值
          name = this.name
        } else {
          name = this.prop
        }
        // 获取国际化名称
        this.label = vm.$t(name)
      } else {
        this.label = this.dkFormItem.label
      }
      // 获取国际化名称
      this.label = vm.$t(name)
      // 给提示信息赋值
      this.setReadOnly(this.readonly)
    }
  }
</script>
<style scoped>

  /*只读颜色*/
  .readonly-input > /deep/ .ivu-input {
    background-color: #f3f3f3 !important;
  }

  /deep/ .ivu-input-suffix {
    z-index: 99;
  }

  /**暂时无用 修改条码规则**/
  /*/deep/ .ivu-date-picker {*/
  /*  width: calc(100% - 16px) !important;*/
  /*}*/

</style>
