<template>
  <t-dialog
    v-model:visible="dialogVisible"
    placement="center"
    @Close="closeDialog"
  >
    <template #header>
      <p>{{ option.title }}</p>
    </template>
    <template #footer>
      <div class="cust-filterdialog-submit">
        <t-button
          @Click="submit(option.value)"
          class="custom_button_back_border"
        >
          {{ $t('Customized.submit') }}
        </t-button>
      </div>
    </template>
    <div class="cust-filterdialog-content">
      <div v-show="props.option.value !== 'ts'">
        <t-input-number
          theme="normal"
          v-model="inputV.min"
          :placeholder="
            option.value !== 'oldsr'
              ? $t('TableList.min')
              : $t('TableList.MinUnit')
          "
          align="center"
        ></t-input-number>
      </div>
      <div v-show="option.value === 'ts'" class="custom-chose-date-time">
        <div class="custom-chose-date-time_tips">
          <div class="label">{{ $t('TableList.filtertimetiplabel') }}</div>
          <div class="value">{{ $t('TableList.filtertimetipvalue') }}</div>
        </div>
        <div class="custom-chose-date-box">
          <div class="label">{{ $t('TableList.filterDate') }}</div>
          <t-date-picker
            v-model:value="CurDate"
            :placeholder="$t('TableList.Seletdate')"
            :popupProps="{
              overlayClassName: 'custom_chose_date_popup',
            }"
            clearable
            allow-input
          />
        </div>
        <div class="custom-chose-time-box">
          <div class="label">{{ $t('TableList.filterTime') }}</div>
          <t-time-picker
            v-model="time1"
            :popupProps="{
              overlayClassName: 'custom_chose_time_popup',
            }"
            allow-input
            clearable
            @Change="onTimeChange"
            :placeholder="$t('TableList.filterTimeCom')"
          />
          &nbsp;-&nbsp;
          <t-time-picker
            v-model="time2"
            allow-input
            :popupProps="{
              overlayClassName: 'custom_chose_time_popup',
            }"
            clearable
            @Change="onTimeChange2"
            :placeholder="$t('TableList.filterTimeCom')"
          />
        </div>
      </div>
      <div
        class="cust-filterdialog-input-Splitline"
        v-show="option.value !== 'ts'"
      >
        &nbsp;-&nbsp;
      </div>
      <div v-show="option.value !== 'ts'">
        <t-input-number
          theme="normal"
          v-model="inputV.max"
          :placeholder="
            option.value !== 'oldsr'
              ? i18n.t('TableList.max')
              : i18n.t('TableList.MaxUnit')
          "
          align="center"
        ></t-input-number>
      </div>
    </div>
  </t-dialog>
</template>

<script lang="ts" setup>
import { MessagePlugin } from 'tdesign-vue-next';
import { useI18n } from 'vue-i18n';
const props = defineProps({
  visible: Boolean,
  option: Object as any,
});
const emit = defineEmits(['update:visible']);
const dialogVisible = ref(false);
// input最大值最小值-number类型
const inputV = reactive({
  min: null,
  max: null,
});
// 日期选择
const CurDate = ref('');
// 具体时间的选择
const time1 = ref('');
const time2 = ref('');
const choseTime = ref([0, 0]);
// 记录上次的筛选条件
const hisfilter = reactive({
  oldtokenNumStr: {
    min: null,
    max: null,
  },
  vn: {
    min: null,
    max: null,
  },
  up: {
    min: null,
    max: null,
  },
  oldsr: {
    min: null,
    max: null,
  },
});
const i18n = useI18n();
watch(
  () => props.visible,
  (v) => {
    dialogVisible.value = v;
    if (v && props.option && props.option.value !== 'ts') {
      // 监听打开事件,将对应的筛选条件放入input
      inputV.min = hisfilter[props.option.value].min;
      inputV.max = hisfilter[props.option.value].max;
    }
  }
);
const closeDialog = () => {
  emit('update:visible', {
    visible: false,
    value: {
      type: 'close',
    },
  });
};
const submit = (value) => {
  if (value !== 'ts') {
    if (!inputV.min || !inputV.max) {
      MessagePlugin.closeAll();
      MessagePlugin.warning(i18n.t('MessagePlugin.fillcompletely'));
      return;
    } else if (inputV.min > inputV.max) {
      MessagePlugin.closeAll();
      MessagePlugin.warning(i18n.t('MessagePlugin.maximumCannot'));
      return;
    }
    // 提交前记录本次筛选条件
    hisfilter[props.option.value].min = inputV.min;
    hisfilter[props.option.value].max = inputV.max;
    emit('update:visible', {
      visible: false,
      value: {
        type: 'filter-self',
        min: inputV.min,
        max: inputV.max,
        filterName: props.option.title,
        filtervalue: props.option.value,
      },
    });
  } else {
    // 时间周期的选择
    if (choseTime.value[0] == 0 || choseTime.value[1] == 0) {
      // 时间戳有一个为0就不能请求
      MessagePlugin.closeAll();
      MessagePlugin.warning(i18n.t('MessagePlugin.selectTime'));
    } else if (
      choseTime.value[1] - choseTime.value[0] > 1000 * 60 * 60 ||
      choseTime.value[0] - choseTime.value[1] > 1000 * 60 * 60
    ) {
      MessagePlugin.closeAll();
      MessagePlugin.warning(i18n.t('MessagePlugin.timehour'));
    } else if (
      typeof choseTime.value[0] !== 'number' ||
      typeof choseTime.value[1] !== 'number'
    ) {
      MessagePlugin.closeAll();
      MessagePlugin.warning(i18n.t('MessagePlugin.selectTime'));
    } else {
      // 通过
      emit('update:visible', {
        visible: false,
        value: {
          type: 'filter-time',
          from: choseTime.value[0],
          to: choseTime.value[1],
        },
      });
    }
  }
};
// 具体时分秒-1
const onTimeChange = (value) => {
  if (CurDate.value && value) {
    // 拼接日期并转换为时间戳
    let date = new Date(CurDate.value + ' ' + time1.value);
    choseTime.value[0] = date.valueOf();
  }
};
// 2
const onTimeChange2 = (value) => {
  if (CurDate.value && value) {
    // 拼接日期并转换为时间戳
    let date = new Date(CurDate.value + ' ' + time2.value);
    choseTime.value[1] = date.valueOf();
  }
};
</script>

<style lang="less" scoped>
@import '@/style/flex.less';

// 隐藏时间选择组件的部分按钮
.custom_chose_time_popup {
  .t-time-picker__panel-section-footer {
    :nth-child(2) {
      display: none;
    }
  }
}
.custom_chose_date_popup {
  .t-jumper {
    display: flex;
  }
}
.cust-filterdialog-content {
  .dja();
  margin-bottom: 16px;
  .cust-filterdialog-input-Splitline {
    width: 50px;
    .dja();
  }
  .custom-chose-date-time {
    .custom-chose-date-time_tips {
      .dj();
      flex-direction: column;
      font-weight: bold;
      font-size: 16px;
      .label {
        white-space: nowrap;
      }
    }
  }
  .custom-chose-date-box {
    margin: 16px 0;
    font-weight: bold;
    .dja(space-between, center);
  }
  .custom-chose-time-box {
    .dja();
    font-weight: bold;
    .t-time-picker {
      width: 120px;
      .dja(space-between, center);
      .t-input__wrap {
        width: 100%;
      }
    }
  }
}
.cust-filterdialog-submit {
  .dja();
  .t-button {
    width: 100px;
  }
}
.t-date-range-picker__panel-content-wrapper {
  .t-jumper {
    display: flex;
  }
}
</style>
