<template>
  <div class="xd-select-week">
    <xd-select-list
      :default-value="listDefaultValue"
      :multiple="true"
      :list="uiList"
      placeholder="选择时间"
      @input="update"
      :size="size"
      v-model="form[keys['list']]"
      :collapse-tags="collapse"
      :style="{maxWidth: collapse ? '260px': '420px' }"
      :disabled="disabled"
    ></xd-select-list>
    <el-date-picker
      popper-class="xd-select-week__picker"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="update"
      align="left"
      value-format="timestamp"
      format="yyyy/MM/dd HH:mm:ss"
      v-model="form[`xdDate__${keys['start']}__${keys['end']}`]"
      :picker-options="pickerOptions"
      :size="size"
      :disabled="disabled"
    ></el-date-picker>
  </div>
</template>

<script>
  /**
   * @description 选择时间插件
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.io/#/zh-CN/component
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Object} defaultValue 已经选中数据  默认：{list: [], time: []}
   * @property {String} tip 提示文案  默认：'注意:开始和结束卡号段必须填写，并且开始卡号必须小于结束开号.'
   * @property {Object} keys 绑定v-model键值   默认：{ list: 'type', time: ['time_start', 'time_end']}
   * @property {Array|null} list 选择日期列表 （选填） 默认：null
   * @property {String} size 文本块显示大小  默认：medium  其值：medium / small / mini
   * @property {Boolean} collapse 是否折叠显示  默认：true
   *
   * @v-model [{"start_number": 20, "end_number": 23},{"start_number": 451202, "end_number": 4512300}]
   */

  import XdSelectList from "@/components/XdSelectList";
  export default {
    name: "XdSelectWeekTime",
    components: {
      XdSelectList
    },
    props: {
      defaultValue: {
        type: Object,
        default() {
          return {
            list: [],
            time: [],
          }
        },
      },
      keys: {
        type: Object,
        default() {
          return {
            list: 'type',
            time: ['time_start', 'time_end']
          }
        },
      },
      list: {
        type: Array | null,
        default: null
      },
      size: {type: String, default: 'medium'}, //medium / small / mini
      collapse: {
        type: Boolean,
        default: true,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      timeType: {
        type: Boolean,
        default: false //false=> 毫秒 true=>秒
      }
    },
    data(){
      return {
        listDefaultValue: '',
        timeDefaultValue: '',
        uiList: [],
        form: {},
        pickerOptions: {},

        testList: [
          {label: '日', value: 0},
          {label: "一", value: 1},
          {label: "二", value: 2},
          {label: "三", value: 3},
          {label: "四", value: 4},
          {label: "五", value: 5},
          {label: "六", value: 6}
        ]
      }
    },

    watch: {
      list() {
        this.init();
      },
      form: {
        handler() {
          this.update()
        },
        deep: true
      }
    },

    created() {
      this.init();
    },

    methods:{
      init() {
        if (this.list === null) this.uiList = this.$xdHelper.cloneDeep(this.testList);
        else this.uiList = this.$xdHelper.cloneDeep(this.list);
        this.setContent();
      },

      setContent() {
        let keyword = `xdDate__${this.keys['start']}__${this.keys['end']}`;
        if(!this.defaultValue['start'] && !this.defaultValue['end']) {
          this.$set(this.form, keyword, '');
        }
        else {
          this.$set(this.form, keyword, [this.defaultValue['start'], this.defaultValue['end']]);
        }

        this.$set(this.form, this.keys['list'], this.defaultValue['list']);
        this.listDefaultValue = this.defaultValue['list']
      },

      getParams() {
        let form = this.$xdHelper.cloneDeep(this.form);
        let temp = {};
        Object.keys(form).map(key => {
          //区间输入值
          if (/^(xdDate)(.*)$/.test(key)) {
            let range = key.split('__');
            if (form[key] && form[key].length > 0) {
              range.splice(0, 1);
              temp[range[0]] = form[key][0];
              temp[range[1]] = form[key][1];
              //时间毫秒转秒处理
              if (this.timeType) {
                temp[range[0]] = form[key][0] ? Math.floor(form[key][0] / 1000) : form[key][0];
                temp[range[1]] = form[key][1] ? Math.floor(form[key][1] / 1000) : form[key][1];
              }
            } else {
              range.splice(0, 1);
              temp[range[0]] = null;
              temp[range[1]] = null;
            }
          } else {
            if (this.$xdHelper.checkVarType(form[key]) === 'array' && this.dateFilter) {
              if (form[key].length > 0) {
                temp[key] = form[key];
              }
            } else {
              temp[key] = form[key];
            }

          }
        });
        if (this.dateFilter) return this.$xdHelper.deleteParamEmptyKey(temp);
        else return temp
      },

      update(){
        this.$emit('input', this.getParams());
      },
    }
  }
</script>

<style scoped lang="scss">
  .xd-select-week {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    & > * {
      margin-right: 10px;
      &:first-child {
        max-width: 420px;
      }
    }
  }

  @media screen and (max-width: 768px) and (orientation: portrait) {
     .xd-select-week {
       flex-direction: column;
       align-items: flex-start;

       .el-picker-panel {
        width: 100%;
       }

       & > * {
         margin-right: 0;
         margin-top: 10px;
         width: 100%;
         &:first-child {
           margin-top: 0;
         }
       }
     }
  }
</style>

<style lang="scss">
  @media screen and (max-width: 768px) and (orientation: portrait){
    .xd-select-week__picker {
      width: 96% !important;
      left: 2% !important;

      & .el-picker-panel__sidebar {
        display: none;
      }

      & .el-picker-panel__body {
        min-width: 100% !important;
        margin-left: 0 !important;

        & .el-picker-panel__content {
          & .el-date-range-picker__header {
            div {
              margin: 0;
            }
          }

          &.el-date-table {
            td,
            div {
              height: 20px;

              span {
                width: 20px;
                height: 20px;
                line-height: 20px;
              }
            }

          }
        }
      }
    }
  }


</style>
