<template>
  <div class="search-form-container">
    <div style="padding: 0" v-for="(item) in props.searchFormParams.cols" :key="item.Field"
         class="search-item-container">
      <div v-if="item.Style==='RangeDate'" class="search-item-content">
        <span :style="{display: 'inline-block',width: item.labelWidth+'px',}">{{ item.title + ":" }}</span>
        <a-date-picker v-model:value="state.form[item.Field+'BT']"
                       size="small"
                       :style="{width: item.contentWidth+'px'}"
                       valueFormat="YYYY-MM-DD"
                       :allowClear="false"
                       :locale="pickLocal"/>
        <span>到</span>
        <a-date-picker v-model:value="state.form[item.Field+'ET']" size="small"
                       valueFormat="YYYY-MM-DD"
                       :allowClear="false"
                       :style="{width: item.contentWidth+'px'}"
                       :locale="pickLocal"/>
      </div>
      <div v-else-if="item.Style==='BeginDate'" class="search-item-content">
        <span :style="{display: 'inline-block',width: item.labelWidth+'px'}">{{ item.title + ":" }}</span>
        <a-date-picker v-model:value="state.form[item.Field]"
                       size="small"
                       valueFormat="YYYY-MM-DD"
                       :allowClear="false"
                       :style="{width: item.contentWidth+'px'}"
                       :locale="pickLocal"/>
        <span>到</span>
      </div>
      <div v-else-if="item.Style==='EndDate'" class="search-item-content">
        <a-date-picker v-model:value="state.form[item.Field]" size="small"
                       valueFormat="YYYY-MM-DD"
                       :allowClear="false"
                       :style="{width: item.contentWidth+'px'}"
                       :locale="pickLocal"/>
      </div>
      <div v-else-if="item.Style==='MultiComBox'" class="search-item-content">
        <span :style="{display: 'inline-block',width: item.labelWidth+'px',}">{{ item.title + ":" }}</span>
        <a-select
            v-model:value="state.form[item.Field]"
            mode="multiple"
            size="small"
            :style="{width: item.contentWidth+'px'}"
            allowClear
            :options="item.Option"
        ></a-select>
      </div>
      <div v-else-if="item.Style==='ComBox'" class="search-item-content">
        <span :style="{display: 'inline-block',width: item.labelWidth+'px',}">{{ item.title + ":" }}</span>
        <a-select
            :style="{width: item.contentWidth+'px'}"
            v-model:value="state.form[item.Field]"
            size="small"
            allowClear
            :options="item.Option"
        ></a-select>
      </div>
      <div v-else-if="item.Style==='CheckBox'" class="search-item-content">
        <span :style="{display: 'inline-block',width: item.labelWidth+'px',}">{{ item.title + ":" }}</span>
        <a-checkbox
            v-model:checked="state.form[item.Field]"
        ></a-checkbox>
      </div>
      <div v-else class="search-item-content">
        <span :style="{display: 'inline-block',width: item.labelWidth+'px',}">{{ item.title + ":" }}</span>
        <a-input
            size="small"
            allow-clear
            :style="{width: item.contentWidth+'px'}"
            v-model:value="state.form[item.Field]"
        ></a-input>
      </div>
    </div>
    <a-button type="primary" @click="load" style="margin-left: 5px">
      <template #icon>
        <i class="icon icon-search"> </i>
      </template>
      {{ $t("Formula.Common.Query") }}
    </a-button>
  </div>
</template>
<script setup lang="ts">
import {ref, reactive, computed, onBeforeMount, PropType} from "vue";
import zhCN from "ant-design-vue/es/date-picker/locale/zh_CN"
import enUS from "ant-design-vue/es/date-picker/locale/es_ES"
import type {Dayjs} from "dayjs";
import {useI18n} from "vue-i18n";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import "dayjs/locale/en";
import {ColInter, ItemType} from "@/utils/common-type";
import {cloneDeep} from "lodash-es"
import {checkNull} from "@/hooks/useCommonMethods";
const {locale} = useI18n();

const props = defineProps({
  searchFormParams: {
    type: Object as PropType<any>,
    default() {
      return {
        height: "100px",
        cols: [{}]
      }
    }
  }
})
const emits = defineEmits(["load"])

const state = reactive({
  form: {},
})
dayjs.locale(locale.value == "en" ? "en" : "zh-cn");
const pickLocal = computed(() => {
  const localMap = {
    ["zh"]: zhCN,
    ["en"]: enUS,
  };
  return localMap[locale.value == "en" ? "en" : "zh"];
})

const load = () => {
  const tempForm = cloneDeep(state.form)
  const cols = props.searchFormParams.cols
  for (let i = 0; i < cols.length; i++) {
    if (cols[i].Style === 'RangeDate') {
      tempForm[cols[i].Field + 'BT'] = tempForm[cols[i].Field + 'BT'] + "T00:00:00.124Z"
      tempForm[cols[i].Field + 'ET'] = tempForm[cols[i].Field + 'BT'] + "T23:59:59.124Z"
    }
    if (cols[i].Style === 'BeginDate') {
      tempForm[cols[i].Field] = tempForm[cols[i].Field] + "T00:00:00.124Z"
    }
    if (cols[i].Style === 'EndDate') {
      tempForm[cols[i].Field] = tempForm[cols[i].Field] + "T23:59:59.124Z"
    }
  }
  emits('load', tempForm)
}
const _initData = () => {
  const cols = props.searchFormParams.cols
  const dt = new Date();
  const y = dt.getFullYear();
  const m = (dt.getMonth() + 1 + "").padStart(2, "0");
  const d = (dt.getDate() + "").padStart(2, "0");
  for (let i = 0; i < cols.length; i++) {
    if (cols[i].Style === 'RangeDate') {
      state.form[cols[i].Field + 'BT'] = new Date().setDate(new Date().getDate() - (cols[i].filterDateBefore ? cols[i].filterDateBefore : 6));
      state.form[cols[i].Field + 'ET'] = `${y}-${m}-${d}`;
      state.form[cols[i].Field + 'BT'] = dayjs(state.form[cols[i].Field + 'BT']).format("YYYY-MM-DD")
      state.form[cols[i].Field + 'ET'] = dayjs(state.form[cols[i].Field + 'ET']).format("YYYY-MM-DD")
    } else if (cols[i].Style === 'BeginDate') {
      state.form[cols[i].Field] = new Date().setDate(new Date().getDate() - (cols[i].filterDateBefore ? cols[i].filterDateBefore : 6));
      state.form[cols[i].Field] = dayjs(state.form[cols[i].Field]).format("YYYY-MM-DD")
    } else if (cols[i].Style === 'EndDate') {
      state.form[cols[i].Field] = `${y}-${m}-${d}`;
      state.form[cols[i].Field] = dayjs(state.form[cols[i].Field]).format("YYYY-MM-DD")
    } else if (!checkNull(cols[i].defaultValue)) {
      state.form[cols[i].Field] = cols[i].defaultValue
    }
  }
}

onBeforeMount(() => {
  _initData()
  load()
})
</script>

<style scoped lang="less">
.search-form-container {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  flex-wrap: wrap;

  .search-item-container {
    display: flex;
    margin-left: 5px;
    height: 30px;

    .search-item-content {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}
</style>