<template>
  <div v-loading="loadingPage" class="pageSearch"
    :style="`margin-bottom: ${marginBottom}px;background-color: ${backgroundColor}`">
    <div class="box">
      <div class="flxbox">
        <div v-for="(item, index) in getArr" :key="index" class="item">
          <div class="label" v-if="item.label">{{ item.label }}</div>
          <!-- select -->
          <el-select v-if="item.showType === 'select'" v-model="searchObj[item.prop]" :multiple="item.multiple"
            :clearable="item.clearable" :filterable="item.filterable" :placeholder="item.placeholder" collapse-tags
            collapse-tags-tooltip :style="`width:${item.width ? item.width : '250px'}`">
            <el-option v-for="obj in getOptions[item.prop]" :key="obj.value" :label="obj.label" :value="obj.value" />
            <!-- <template v-else-if="!item.options"></template> -->
          </el-select>
          <el-radio-group v-if="item.showType === 'radio'" v-model="searchObj[item.prop]"
            :style="`width:${item.width ? item.width : '250px'}`">
            <el-radio v-for="obj in getOptions[item.prop]" :key="obj.value" :label="obj.value">
              {{ obj.label }}
            </el-radio>
          </el-radio-group>
          {{ searchObj[item.options] }}
          <MOSTY.DictTree v-if="item.showType === 'selectTree'" :zdbh="item.options" v-model="searchObj[item.prop]"
            :placeholder="item.placeholder" :style="`width:${item.width ? item.width : '250px'}`" />
          <!-- input -->
          <MOSTY.DictTree v-if="item.showType === 'zdlistTree'" v-model="searchObj[item.prop]" :zdlist="item.options"
            :placeholder="item.placeholder" :type="'array'" style="width: 250px" />
          <el-input v-else-if="item.showType === 'input'" class="input" v-model="searchObj[item.prop]"
            :clearable="item.clearable" :placeholder="item.placeholder"
            :style="`width:${item.width ? item.width : '250px'}`" @keyup.enter="inputEnter" />
          <!-- 日期段选择器 -->
          <el-date-picker v-else-if="item.showType === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
            unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" :disabledDate="disabledDate"
            value-format="YYYY-MM-DD" :style="`width:${item.width ? item.width : '250px'}`" />
          <el-date-picker v-else-if="item.showType === 'date'" v-model="searchObj[item.prop]" type="date"
            :placeholder="item.placeholder" :disabled-date="disabledDate" :shortcuts="item.shortcuts"
            value-format="YYYY-MM-DD">
          </el-date-picker>
          <el-date-picker v-else-if="item.showType === 'year'" v-model="searchObj[item.prop]" type="year"
            :placeholder="item.placeholder" :disabled-date="disabledDate" :shortcuts="item.shortcuts"
            value-format="YYYY" :style="`width:${item.width ? item.width : '250px'}`">
          </el-date-picker>
          <el-date-picker v-else-if="item.showType === 'month'" v-model="searchObj[item.prop]" type="month"
            :placeholder="item.placeholder" :disabled-date="disabledDate" :shortcuts="item.shortcuts"
            value-format="YYYY-MM" format="YYYY-MM" :style="`width:${item.width ? item.width : '250px'}`">

          </el-date-picker>
          <!-- checkbox -->
          <template v-else-if="item.showType === 'checkbox'">
            <el-checkbox v-if="item.showSelectAll" v-model="item.checkAll" :indeterminate="item.isIndeterminate"
              @change="(val) => {
                handleCheckAllChange(val, item);
              }
                ">全选</el-checkbox>
            <el-checkbox-group v-model="searchObj[item.prop]" @change="(val) => {
              handleCheckedCitiesChange(val, item);
            }
              ">
              <el-checkbox v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-checkbox>
            </el-checkbox-group>
          </template>
          <!-- 级联选择 -->
          <el-cascader v-else-if="item.showType === 'cascader'" @change="changeca" v-model="searchObj[item.prop]"
            :props="item.props" :show-all-levels="item.showAllLevels" :clearable="item.clearable"
            :options="getOptions[item.prop]" :placeholder="item.placeholder" />
          <!-- <div v-if="item.showType === 'cascader'">
        {{ item }}</div> -->
        </div>
        <slot name="searbox"></slot>
      </div>

      <div class="butBox">
        <slot name="lable"></slot>
        <el-button icon="search" v-if="props.Showsearch" type="primary" @click="submit">查询</el-button>
        <el-button icon="Refresh" v-if="props.Showreset" type="" @click="reset">重置</el-button>
        <slot name="default"> </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  watchEffect,
  nextTick,
  getCurrentInstance,
  toRefs
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
const props = defineProps({
  searchArr: {
    type: Array,
    default: () => {
      return [
        {
          showType: "select",
          prop: "selectKey",
          options: [
            {
              value: 1,
              label: "选择1"
            },
            {
              value: 2,
              label: "选择2"
            },
            {
              value: 3,
              label: "选择3"
            },
            {
              value: 4,
              label: "选择4"
            }
          ],
          defaultVal: "",
          onchange: false,
          label: "选择",
          dict: "" // 字典编码
        },
        {
          showType: "radio",
          prop: "selectKey",
          options: [
            {
              value: 1,
              label: "选择1"
            },
            {
              value: 2,
              label: "选择2"
            },
            {
              value: 3,
              label: "选择3"
            },
            {
              value: 4,
              label: "选择4"
            }
          ],
          defaultVal: "",
          onchange: false,
          label: "选择",
          dict: "" // 字典编码
        },

        {
          showType: "selectTree",
          prop: "selectKey",
          options: '',
          placeholder: '请选择'
        },
        {
          showType: "zdlistTree",
          prop: "selectKey",
          options: [],
          placeholder: '请选择'
        },

        {
          showType: "input",
          prop: "inputKey",
          defaultVal: "",
          label: "输入"
        },
        {
          showType: "daterange",
          prop: "daterangeKey",
          defaultVal: "",
          label: "输入"
        },
        {
          showType: "date",
          prop: "date",
          defaultVal: ""
        },
        {
          showType: "year",
          prop: "year",
          defaultVal: ""
        },
        {
          showType: "checkbox",
          prop: "checkboxKey1",
          options: [
            {
              value: 1,
              label: "选择1"
            },
            {
              value: 2,
              label: "选择2"
            },
            {
              value: 3,
              label: "选择3"
            },
            {
              value: 4,
              label: "选择4"
            }
          ]
        },
        {
          showType: "cascader",
          prop: "cascaderKey",
          label: "级联选择",
          checkStrictly: false //点击任意选中
        }
      ];
    }
  },
  marginBottom: {
    type: Number,
    default: 10
  },
  Showreset: {
    type: Boolean,
    default: true
  },
  Showsearch: {
    type: Boolean,
    default: true
  },
  backgroundColor: {
    type: String,
    default: "#fff"
  },
  // 是否在输入框回车时触发查询
  isEnterSubmit: {
    type: Boolean,
    default: false
  },
  noDisabledDate: {
    type: Boolean,
    default: false
  }
});
const { proxy } = getCurrentInstance();
let loadingPage = ref(false);
const emit = defineEmits(["submit", "reset",]);
// select 的一些默认配置
const selectDefault = {
  clearable: true, // 是否可以清空
  filterable: true, // 是否可以筛选
  multiple: false, // 是否多选
  placeholder: "请选择"
};
// 重新定义下拉框的选项
let getOptions = reactive({});
// input 的一些默认配置
const inputDefault = {
  clearable: true, // 是否可以清空
  placeholder: "请输入"
};
const shortcuts = [
  {
    text: "今天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
      return [start, end];
    }
  },
  {
    text: "昨天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
      return [start, end];
    }
  },
  {
    text: "最近7天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "最近30天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "最近90天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];
// daterange 的一些默认配置
const daterangeDefault = {
  rangeSeparator: "至",
  startPlaceholder: "开始日期",
  endPlaceholder: "结束日期",
  shortcuts: [], // 快捷选择
  defaultShortcuts: true // 是否显示快捷选择 如果要自定义快捷选择传入一个shortcuts就可以了
};
// date 的一些默认配置
const defaultDate = {
  clearable: true, // 是否可以清空
  placeholder: "请输入",
  shortcuts: [], // 快捷选择
  defaultShortcuts: true // 是否显示快捷选择 如果要自定义快捷选择传入一个shortcuts就可以了
};
const dateShortcuts = [
  {
    text: "今天",
    value: new Date()
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    }
  },
  {
    text: "7天前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    }
  },
  {
    text: "30天前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
      return date;
    }
  },
  {
    text: "90天前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);
      return date;
    }
  }
];
// 设置不可选的日期
const disabledDate = (time) => {
  if (props.noDisabledDate) return false
  return time.getTime() > Date.now();
};
// checkbox 的一些默认配置
const defaultCheckbox = reactive({
  defaultVal: [],
  checkAll: false, // 全选的值
  isIndeterminate: false, // 控制全选按钮样式
  showSelectAll: true // 是否显示全选
});
// 全选复选框的选中与不选中
const handleCheckAllChange = (val, obj) => {
  searchObj[obj.prop] = val ? obj.checkboxValueArr : [];
  obj.isIndeterminate = false;
};
// 单个复选框的选中与不选中
const handleCheckedCitiesChange = (value, obj) => {
  const checkedCount = value.length;
  obj.checkAll = checkedCount === obj.checkboxValueArr.length;
  obj.isIndeterminate =
    checkedCount > 0 && checkedCount < obj.checkboxValueArr.length;
};
// cascader 的一些默认配置
let defaultCascader = {
  filterable: true, // 是否可以搜索
  clearable: true, // 是否可以清空
  placeholder: "请选择",
  checkStrictly: true, // 控制是否父子联动（是否可以选择任意节点）
  showAllLevels: false, // 是否显示完整路径
  lazy: true, // 是否懒加载 当设置为false时就要传入options
  portUrl: "", // 这里必须写 接口地址
  props: {
    label: "label",
    value: "value",
    children: "children"
  },
  options: []
};
// 在懒加载状态下cascader 的props的一些配置
const cascaderLazyProps = reactive({
  value: "value",
  label: "label",
  lazy: true,
  lazyLoad(node, resolve) {
    // 这里要根据实际情况修改
    const { level } = node;
    let options = [];
    switch (level) {
      case 0:
        options = [
          {
            value: 1,
            label: "选择1",
            leaf: false // 表示有下一级 必须有这个表示 不然获取不到值
          },
          {
            value: 2,
            label: "选择2",
            leaf: false // 表示有下一级
          },
          {
            value: 3,
            label: "选择3",
            leaf: false // 表示有下一级
          },
          {
            value: 4,
            label: "选择4",
            leaf: true // 表示没有下一级了
          }
        ];
        break;
      case 1:
        options = [
          {
            value: 11,
            label: "选择1_1",
            leaf: true // 表示没有下一级了
          },
          {
            value: 21,
            label: "选择2_1",
            leaf: true // 表示没有下一级了
          },
          {
            value: 31,
            label: "选择3_1",
            leaf: true // 表示没有下一级了
          },
          {
            value: 41,
            label: "选择4_1",
            leaf: true // 表示没有下一级了
          }
        ];
    }
    resolve(options);
    // let url = "./svc/user/getUsers?deptId=" + node.value;
    // me.$http.get(url).then(function (res) {
    //   resolve(res.data.list);
    // });
  }
});

// 级联框选择
function changeca(v) {
}

let searchObj = reactive({});
// 获取到传过来的参数
let getArr = reactive([]);
const submit = () => {
  emit("submit", searchObj);
};
const inputEnter = () => {
  if (props.isEnterSubmit) {
    emit("submit", searchObj);
  }
}
const reset = () => {
  getArr.forEach((item) => {
    searchObj[item.prop] = item.defaultVal;
  });
  emit("reset", true);
  emit("submit", searchObj);
};

const reset_form = () => {
  getArr.forEach((item) => {
    searchObj[item.prop] = item.defaultVal;
  });
};


watchEffect(() => {
  loadingPage.value = true;
  getArr = JSON.parse(JSON.stringify(props.searchArr));
  getArr = getArr.map((item) => {
    switch (item.showType) {
      case "select":
        item = { ...selectDefault, ...item };
        item.options = reactive(item.options);
        getOptions[item.prop] = item.options;
        break;
      case "radio":
        item = { ...selectDefault, ...item };
        item.options = reactive(item.options);
        getOptions[item.prop] = item.options;
        break;
      case "input":
        item = { ...inputDefault, ...item };
        break;
      case "daterange":
        item = { ...daterangeDefault, ...item };
        if (item.defaultShortcuts) {
          item.shortcuts = shortcuts;
        }
        break;
      case "date":
        item = { ...defaultDate, ...item };
        if (item.defaultShortcuts) {
          item.shortcuts = dateShortcuts;
        }
        break;
      case "checkbox":
        item = reactive({ ...defaultCheckbox, ...item });
        item.checkboxValueArr = item.options.map((obj) => {
          return obj.value;
        });
        break;
      case "cascader":
        item = { ...defaultCascader, ...item };
        if (item.lazy) {
          cascaderLazyProps.checkStrictly = item.checkStrictly;
          item.props = { ...cascaderLazyProps, ...(item.props || {}) };
          delete item.options;
        } else {
          item.props = {
            ...defaultCascader.props,
            ...(item.props || {}),
            ...{ checkStrictly: item.checkStrictly }
          };
          getOptions[item.prop] = reactive(item.options);
        }
        break;
    }
    loadingPage.value = false;
    searchObj[item.prop] = item.defaultVal;
    return item;
  });
});

defineExpose({ reset_form })

</script>

<style lang="scss" scoped>
.butBox {
  flex: 1;
  width: 200px;
  display: flex;
  justify-content: flex-end;
}

.pageSearch {
  // padding: 0 10px;

  .box {
    display: flex;
    justify-content: space-between;
    // flex-wrap: wrap;

    .flxbox {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      display: flex;
      margin-right: 20px;
      margin-bottom: 10px;
    }

    .label {
      color: black;
      margin: auto;
      margin-right: 5px;
      text-wrap: nowrap;
    }
  }
}

.el-icon {
  color: #fff !important;
}

.el-button {
  span>i {
    color: #fff !important;
  }
}
</style>
