<template>
  <div
    class="bg-filters"
    :style="{
      'border-bottom': showFlag ? 'none' : '',
      'padding-bottom': showFlag ? '8px' : '16px',
    }"
  >
    <div class="top-filter">
      <div class="left-slot">
        <slot name="left_action"></slot>
      </div>
      <div class="right-filter">
        <el-input
          v-model.trim="modelValue"
          :placeholder="placeholder"
          clearable
        >
          <template #append>
            <div
              class="append-btn"
              style="margin-top: 1px"
              @click="keywordAction"
            >
              <el-icon><Search /></el-icon>
            </div>
          </template>
        </el-input>
        <div
          v-if="options.length > 0"
          class="more-btn"
          :class="showFlag ? 'more-btn1' : ''"
        >
          <el-button type="default" class="more-filter" @click="moreFilter">
            高级搜索
            <el-icon
              v-if="!showFlag"
              style="
                font-weight: 900 !important;
                color: #404a62;
                margin-left: 8px;
              "
              ><ArrowUp
            /></el-icon>
            <el-icon
              v-else
              style="
                font-weight: 900 !important;
                color: #404a62;
                margin-left: 8px;
              "
              ><ArrowDown
            /></el-icon>
          </el-button>
        </div>
      </div>
    </div>
    <div v-if="showFlag" class="filter-group">
      <ul class="bg-flex-fs-c filters-list">
        <li
          v-for="(item, index) in options"
          :key="`opt_${index}`"
          class="bg-flex-fs-c"
        >
          <span v-if="item.label" class="filter-name">{{ item.label }}</span>
          <!-- 下拉选 select -->
          <el-select
            v-if="item.type === 'select'"
            v-model="filters[item.prop]"
            :placeholder="item.placeholder || '请选择'"
            :clearable="item.clearable !== false"
          >
            <el-option
              v-for="(v, i) in item.options"
              :key="`opt_${index}_v_${i}`"
              :label="v.label"
              :value="v.value"
            />
          </el-select>
          <!-- 年月日  daterange-->
          <el-date-picker
            v-else-if="item.type === 'daterange'"
            v-model="filters[item.prop]"
            type="daterange"
            start-placeholder="开始日期"
            range-separator="至"
            end-placeholder="结束日期"
            value-format="yyyy-MM-DD"
            :picker-options="{ disabledDate: item.disabledDate }"
            :clearable="item.clearable !== false"
          />
          <!-- 年月日时分秒  datetimerange  :shortcuts="shortcuts"（显示快捷键）-->
          <el-date-picker
            v-else-if="item.type === 'datetimerange'"
            v-model="filters[item.prop]"
            type="datetimerange"
            start-placeholder="开始时间"
            range-separator="至"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            :picker-options="{ disabledDate: item.disabledDate }"
            :clearable="item.clearable !== false"
            :shortcuts="item.shortcuts"
          />
          <!-- 单选 -->
          <el-cascader
            v-else-if="item.type === 'cascader'"
            v-model="filters[item.prop]"
            :options="item.options"
            :props="item.props"
            :placeholder="item.placeholder || '请选择'"
            collapse-tags
            collapse-tags-tooltip
          />
          <!-- 多选 -->
          <el-cascader
            v-else-if="item.type === 'collapse-cascader'"
            v-model="filters[item.prop]"
            :options="item.options"
            :props="{
              multiple: true,
            }"
            :placeholder="item.placeholder || '请选择'"
          />

          <el-input
            v-else
            v-model="filters[item.prop]"
            :placeholder="item.placeholder || '请输入'"
            :clearable="item.clearable !== false"
            prefix-icon="Search"
          >
          </el-input>
        </li>
      </ul>
      <div class="filters-action">
        <el-button type="primary" @click="searchAction"> 查询 </el-button>
        <el-button type="default" @click="resetAction"> 重置 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  defineProps,
  defineEmits,
  onBeforeMount,
  reactive,
  watch,
  ref,
  computed,
  toRefs,
  onMounted,
  nextTick,
} from "vue";
let props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  immediately: {
    type: Boolean,
    default: true,
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
});

let emits = defineEmits([
  "filters",
  "filtersChange",
  "keyword",
  "keywordChange",
]);
let filters = reactive({});
let state = reactive({
  showFlag: false,
  modelValue: "",
});

onBeforeMount(() => {
  if (props.immediately) {
    initFilters();
  }
});
onMounted(() => {
  if (props.immediately) {
    searchAction();
  }
});
watch(
  () => state.modelValue,
  (newValue) => {
    emits("keywordChange", newValue);
  }
);

watch(filters, (newVal) => {
  emits("filtersChange", newVal);
});

const initFilters = () => {
  props.options.forEach(({ type, prop, defaultValue }) => {
    let value = defaultValue || "";

    if ((type === "daterange" || type === "datetimerange") && value === "") {
      value = ["", ""];
    }

    if (type === "cascader" && value === "") {
      value = [];
    }

    filters[prop] = value;
  });
};
const keywordAction = () => {
  emits("keyword", state.modelValue, filters);
};

const resetAction = () => {
  initFilters();
  nextTick(() => {
    searchAction();
  });
};
const searchAction = () => {
  emits("filters", filters, state.modelValue);
};
const moreFilter = () => {
  state.showFlag = !state.showFlag;
};

const reset = () => {
  state.modelValue = "";
  resetAction();
};

defineExpose({ reset });

const { modelValue, showFlag } = toRefs(state);
</script>
<style lang="scss" scoped>
// 列表筛选
.bg-filters {
  width: 100%;
  padding: 16px;
  border-bottom: 1px solid #e6e9ef;

  .top-filter {
    width: 100%;
    display: flex;
    .left-slot {
      flex: 1;
    }
    .right-filter {
      width: 398px;
      justify-content: end;
      display: flex;
      :deep(.el-input-group__append) {
        padding: 0;
        border-radius: 0;
      }

      .el-input {
        width: 280px;
        height: 36px;
        .el-input-group__append {
          border-radius: 0 4px 4px 0;
          background-color: #f7f7f9;
          padding: 0;
          .append-btn {
            padding: 0 16px;
            cursor: pointer;
          }
        }
      }
      .more-btn {
        margin-left: 16px;
        width: 102px;
        box-sizing: border-box;
        border: 1px solid #e6e9ef;
        border-radius: 4px;
        height: 36px;
        .more-filter {
          width: 100px;
          border: none;
          height: 34px;
          padding: 10px 15px;
          line-height: 1;
          &:active,
          &:hover {
            background-color: #fff;
            color: #3759be;
          }
          &:focus {
            background-color: #fff;
          }
        }
      }
      .more-btn1 {
        height: 53px;
        border-bottom: 1px solid #fff;
        border-radius: 4px 4px 0 0;
        margin-bottom: -1px;
      }
    }
  }

  .filter-group {
    display: flex;
    align-items: flex-end;
    border-radius: 4px 0 4px 4px;
    width: 100%;
    border: 1px solid #e6e9ef;
    padding: 24px 16px 8px;
  }
  .filters-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    flex-wrap: wrap;
    li {
      margin: 0 48px 16px 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .filter-name {
        font-size: 14px;
        // font-weight: bolder;
        line-height: 20px;
        color: #202531;
        white-space: nowrap;
        margin-right: 8px;
        width: 90px;
        text-align: right;

        & + * {
          margin-left: 0;
        }
      }

      .el-input {
        width: 240px;
        height: 36px;
      }

      .el-select {
        width: 240px;
        height: 36px;
      }

      .el-range-editor {
        width: 320px;
        height: 36px;

        &.el-date-editor--datetimerange {
          width: 360px;
          height: 36px;
        }
      }
    }
  }

  .filters-action {
    flex-shrink: 0;
    padding-bottom: 16px;
  }
}
</style>
