<template>
  <div class="search">
    <div class="top" v-if="searchOptions.length">
      <div class="top-left">
        <template v-for="item in searchOptions" :key="item.key">
          <!-- 输入框  @change="handleChange"-->
          <div class="item">
            <span class="label"> {{ item.label }}</span>
            <div class="select" v-if="item.type == 'select'">
              <a-select
                :dropdown-match-select-width="false"
                v-model:value="formData[item.key]"
                allow-clear
                :max-tag-count="2"
                :placeholder="item.label"
                :mode="item.mode ? item.mode : 'combobox'"
              >
                <a-select-option
                  :value="option.value"
                  v-for="option in item.options"
                  :key="option.value"
                >
                  {{ option.label }}
                </a-select-option>
              </a-select>
            </div>
            <!-- 日期选择框 -->
            <div class="date-picker" v-if="item.type == 'datePick'">
              <a-range-picker
                :show-time="{ format: 'HH:mm:ss' }"
                value-format="YYYY-MM-DD HH:mm:ss"
                v-model:value="formData[item.key]"
                @change="$emit('onSearch', formData)"
              />
            </div>
            <!-- 日期选择框 date-->
            <div class="date-picker" v-if="item.type == 'datePick1'">
              <a-range-picker :locale="locale"
                v-model:value="formData[item.key]"
                value-format="YYYY-MM-DD"
                :picker="datePicker"
                @openChange="handleOpenChange"
                @change="handleChange(item.key)" />
            </div>
            <!-- 输入框 -->
            <div class="input" v-if="item.type == 'input'">
              <a-input
                v-model:value="formData[item.key]"
                :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
                :disabled="item.disabled"
              >
              </a-input>
            </div>
            <!-- 插槽  -->
            <div class="slot" v-if="item.type == 'slot'">
              <slot :name="item.slotName" v-bind="item"></slot>
            </div>
          </div>
        </template>
      </div>

      <!-- <div :class="[searchOptions.length > 4 ? 'top-right-column' : 'top-right']"> -->
      <div class="top-right">
        <!-- <a-button class="ant-btn-search" @click="changeData">
          <template #icon>
            <i class="iconfont icon-sousu btn-close" />
          </template>
          查询
        </a-button>
        <a-button class="ant-btn-reset" @click="clearData">
          <template #icon>
            <i class="iconfont icon-chongzhi btn-close" />
          </template>
          重置
        </a-button> -->
      </div>
    </div>
    <div class="bottom">
      <div style="display: flex" v-if="btnOptionList.length">
        <div v-for="(item, i) in btnOptionList" :key="i" class="button">
          <a-button
            :class="'btn-' + item.type"
            type="primary"
            @click="handelClick(item.type)"
            :disabled="item.disabled ? item.disabled : false"
          >
            {{ item.label }}
          </a-button>
        </div>
      </div>

      <slot name="searchboxSlot"></slot>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'


import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' 
dayjs.locale('zh-cn')

export default {
  name: 'SearchBox',
  components: {},
  props: {
    datePicker: { type: String, default: ()=> { return "date" }},
    titleOption: {
      type: Object,
      default: () => {
        return {
          title: '',
          info: ''
        }
      }
    },
    btnOptionList: {
      type: Array,
      default: () => {
        return []
      }
    },
    searchOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
    fieldList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      showTableDropMenu: false,
      clearFlag: false,
      selectField: [],
      formData: {},
      options: [],
      searchList: []
    }
  },
  watch: {
    searchOptions: {
      handler(n) {
        // this.formData = {}
        // n.forEach((item) => {
        //   // this.$set(this.formData, item.key, item.value)
        // })
      },
      immediate: true,
      deep: true
    },
    datePicker: {
      handler(newVal) {
        // 临时：处理 statisticalAnalysis.vue 中设置日期选择模式时，时间区间的默认值修正
        // key = 'time' 只在 statisticalAnalysis.vue 中设置生效
        const key = 'time';
        if (!this.formData[key]) {
          // 今天的日期
          const date = new Date();
          const dtNow = date.toISOString().split('T')[0];
          //  7天前
          date.setDate(date.getDate() - 7);
          const dtStart = date.toISOString().split('T')[0];
          this.formData[key] = [dtStart, dtNow]
        }
        this.handleChange(key)
      },
      immediate: true,
    }
  },
  mounted() {
    this.selectField = this.fieldList.map((i) => i.value)
  },
  methods: {
    clear(date) {
      if (date.length == 0) {
        this.$emit('onSearch', this.formData)
      }
    },

    changeData() {
      this.clearFlag = false
      this.$emit('onSearch', this.formData)
    },
    clearData() {
      this.clearFlag = true
      this.formData = {}
      this.$emit('onSearch', this.formData)
    },
    reseatFormData() {
      this.formData = {}
    },
    handelClick(type) {
      this.$emit('operateForm', type)
    },

    handleChange(key) {
      if (this.formData[key] && this.formData[key][0]) {
        if (this.datePicker == "week") {
          this.formData[key][0] = dayjs(this.formData[key][0]).startOf('week').format('YYYY-MM-DD')
        } else if (this.datePicker == "month") {
          this.formData[key][0] = dayjs(this.formData[key][0]).startOf('month').format('YYYY-MM-DD')
        } else if (this.datePicker == "quarter") {
          this.formData[key][0] = dayjs(this.formData[key][0]).startOf('quarter').format('YYYY-MM-DD')
        } else if (this.datePicker == "year") {
          this.formData[key][0] = dayjs(this.formData[key][0]).startOf('year').format('YYYY-MM-DD')
        }
      }
      if (this.formData[key] && this.formData[key][1]) {
        if (this.datePicker == "week") {
          this.formData[key][1] = dayjs(this.formData[key][1]).endOf('week').format('YYYY-MM-DD')
        } else if (this.datePicker == "month") {
          this.formData[key][1] = dayjs(this.formData[key][1]).endOf('month').format('YYYY-MM-DD')
        } else if (this.datePicker == "quarter") {
          this.formData[key][1] = dayjs(this.formData[key][1]).endOf('quarter').format('YYYY-MM-DD')
        } else if (this.datePicker == "year") {
          this.formData[key][1] = dayjs(this.formData[key][1]).endOf('year').format('YYYY-MM-DD')
        }
      }
      this.$emit("onSearch", this.formData);
    },
    // pressEnter() {
    //   this.$emit("onSearch", this.formData);
    // },

    handleOpenChange() {
      if (open) {
        // 延迟执行以确保 DOM 已渲染
        setTimeout(() => {
          const cells = document.querySelectorAll('.ant-picker-cell');
 
          cells.forEach((cell) => {
            const title = cell.getAttribute('title');
            const innerDiv = cell.querySelector('.ant-picker-cell-inner');
        
            if (title && innerDiv) {
              // if (title.includes('Q1')) {
              //   innerDiv.textContent = '第一季度';
              // } else if (title.includes('Q2')) {
              //   innerDiv.textContent = '第二季度';
              // } else if (title.includes('Q3')) {
              //   innerDiv.textContent = '第三季度';
              // } else if (title.includes('Q4')) {
              //   innerDiv.textContent = '第四季度';
              // }
            }
          });
        }, 100);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 输入框自动填充后的背景改色
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: var(--theme-text-default);
  transition: background-color 500s ease-out 0.5s;
}
:deep(.anticon) {
  color: var(--theme-text-default) !important;
}

.search {
  // height:70px;
  color: #fff;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
  .page-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 5px;
    color: var(--theme-text-default);
    .line {
      width: 3px;
      height: 20px;
      background-color: var(--theme-btn3);
      border-radius: 1px;
    }
    .title-text {
      font-size: 18px;
      margin-left: 10px;
    }
    .iconfont {
      margin-left: 10px;
      font-size: 20px;
      color: var(--theme-text3);
    }
  }

  .top {
    display: flex;
    // align-items: center;
    justify-content: space-between;
    border-bottom: 1.5px solid var(--theme-bg);

    .input {
      border-radius: 8px;
      display: flex;
      width: 145px;
      height: 35px;
      align-items: center;
    }

    .date-picker {
      width: 360px;

      .ant-picker {
        background: transparent;
        border: 1px solid #00b9d0;
        .ant-picker-input > input {
          color: #fff !important;
        }
      }
    }

    .ant-select,
    .ant-calendar-picker,
    .ant-input {
      width: 100%;
    }

    :deep(.ant-select-selection--single .ant-select-selection__rendered) {
      height: 35px !important;
      line-height: 35px !important;
    }

    .label {
      // width: 65px;
      flex: 1;  /* 占满剩余空间 */
      text-align: right;  /* 文字右对齐 */
      white-space: nowrap;  /* 防止换行 */
      margin-right: 10px;  /* 右侧间隔10px */
      color: var(--theme-text-default);
    }
    .top-right,
    .top-right-column {
      .ant-btn {
        border-radius: 8px !important;
        color: var(--theme-text2) !important;
        font-weight: 700;
        font-size: 14px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        height: 35px !important;
        line-height: 35px !important;
        padding: 7px 10px !important;
        border: none;

        &.ant-btn-reset {
          background-color: var(--theme-btn3) !important;
        }
        &.ant-btn-search {
          background-color: var(--theme-btn1) !important;
        }

        .iconfont {
          color: #fff;
          font-size: 18px;
          margin-right: 15px;
          cursor: pointer;
          margin-right: 8px !important;
        }
      }
    }
    .top-right {
      // width: 10%;
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      .ant-btn {
        &.ant-btn-reset {
          margin-left: 10px !important;
        }
      }
    }
    .top-right-column {
      display: block;
      .ant-btn {
        &.ant-btn-reset {
          margin-top: 10px !important;
        }
      }
    }

    .top-left {
      // width: 1200px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .item {
        display: flex;
        align-items: center;
        // margin-bottom: 15px;
        margin-right: 20px;
      }
    }
  }
  .bottom {
    // display: flex;
    // margin-top: 20px;
    // margin-bottom: 20px;
    // justify-content: space-between;
    // align-items: center;
    .button {
      // margin-left: 10px;
    }
  }
}



// :deep(.ant-picker-cell-inner) {
//    width: 75px !important;
//  }

//  /* 深度穿透修改季度/月份/日期面板里面的宽度 */
// :deep(.ant-picker-dropdown .ant-picker-cell-inner) {
//   width: 100px !important; /* 你想要的宽度 */
// }
/* 方法1：匹配任意hash类名 */
// :deep(.ant-picker-dropdown .ant-picker-quarter-panel .ant-picker-cell-inner) {
//   width: 100px !important;
//   min-width: 100px !important;
// }

// /* 方法2：如果上面不生效,提高特异性 */
// :deep(.ant-picker-dropdown div.ant-picker-quarter-panel .ant-picker-cell-inner) {
//   width: 100px !important;
//   min-width: 100px !important;
// }

// /* 方法3：双重类名提高权重 */
// :deep(.ant-picker-dropdown .ant-picker-quarter-panel .ant-picker-cell.ant-picker-cell-inner) {
//   width: 100px !important;
//   min-width: 100px !important;
// }
// /* 放到全局样式文件(如 global.css 或 App.vue 中不加 scoped) */
// .ant-picker-dropdown .ant-picker-quarter-panel .ant-picker-cell-inner {
//   width: 100px !important;
//   min-width: 100px !important;
// }

/* 或者使用 :global 逃逸 scoped */
:global(.ant-picker-dropdown .ant-picker-quarter-panel .ant-picker-cell-inner) {
  width: 50px !important;
  min-width: 50px !important;
}

</style>
