<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import "./rightSearchBox.less";
import weather from "@/assets/ai/weather.png";
import traffic from "@/assets/ai/traffic.png";
import heat from "@/assets/ai/heat.png";
import comeForm from "@/assets/ai/comeForm.png";
import businessTrade from "@/assets/ai/businessTrade.png";
import weaearlyWarningther from "@/assets/ai/earlyWarning.png";
import deleteIcon from "@/assets/ai/deleteIcon.png";
import selectWeather from "@/assets/ai/selectWeather.png";
import selectTraffic from "@/assets/ai/selectTraffic.png";
import selectHeat from "@/assets/ai/selectHeat.png";
import selectEarlyWarning from "@/assets/ai/selectEarlyWarning.png";
import selectComeForm from "@/assets/ai/selectComeForm.png";
import selectBusinessTrade from "@/assets/ai/selectBusinessTrade.png";
import selectDeleteIcon from "@/assets/ai/selectDeleteIcon.png";
import busyIcon from "@/assets/ai/busyIcon.png";
import selectBusy from "@/assets/ai/selectBusy.png";

import { getFieldEnumTree } from "../service";
import { ElMessage } from "element-plus";

// 是否展开筛选图标
const isShowFilterIconList = ref<boolean>(false);
// 当前选中的筛选数据
let selectFilterList = ref<string>();
// 筛选列表
const filterList: any = reactive<any>([
  { label: "天气情况", value: "1", src: weather, selectScr: selectWeather },
  { label: "实时交通", value: "2", src: traffic, selectScr: selectTraffic },
  { label: "营收热力", value: "3", src: heat, selectScr: selectHeat },
  { label: "车辆归属", value: "4", src: comeForm, selectScr: selectComeForm },
  {
    label: "经营业态",
    value: "5",
    src: businessTrade,
    selectScr: selectBusinessTrade,
  },
  {
    label: "预警类型",
    value: "6",
    src: weaearlyWarningther,
    selectScr: selectEarlyWarning,
  },
  { label: "即时指挥", value: "8", src: busyIcon, selectScr: selectBusy },
  { label: "附近服务区", value: "99", src: busyIcon, selectScr: selectBusy },
  { label: "清空", value: "7", src: deleteIcon, selectScr: selectDeleteIcon },
]);
// 显示筛选列表的查询表单
const showSearchForm = ref<boolean>(false);
// 表单的数据
const form = reactive({
  BUSINESS_TRADE: [],
});
// 经营业态数据
let businessTradeList = reactive([]);
// 选择的经营业态
let selectBusinessTradeList = reactive<any>([]);
// 经营业态的对象枚举
let selectBusinessTradeIdsObj = ref<any>();
// 省份信息
const baseInfoObj = ref<any>();
// 是否屏蔽掉watch
let isNoWatch: boolean = false;

let saveData = localStorage.getItem("baseInfoObj");
if (saveData) {
  baseInfoObj.value = JSON.parse(saveData);
}

// 点击展开筛选图标的方法
const showFilterList = () => {
  isShowFilterIconList.value = !isShowFilterIconList.value;
};
// 列表的展开点击事件
const handleClickFilter = (value: string) => {
  emit("handleHiddenSuspended");
  if (value === "7") {
    selectFilterList.value = "";
    filterList.forEach((item: any) => {
      item.isSelect = false;
    });
    emit("handleDeleteSelect");
  } else {
    // 经营业态 和 预警类型只能同时存在一个
    if (value === "5") {
      if (selectFilterList.value) {
        // selectFilterList.value已经有点击了 预警类型 那么要去掉6
        if (selectFilterList.value.indexOf("6") !== -1) {
          selectFilterList.value = selectFilterList.value.replace("6", "");
          nextTick(() => {
            filterList.filter((item: any) => item.value === "6")[0].isSelect =
              false;
          });
        }
      }
    } else if (value === "6") {
      if (selectFilterList.value) {
        // selectFilterList.value已经有点击了 经营业态 那么要去掉5
        if (selectFilterList.value.indexOf("5") !== -1) {
          selectFilterList.value = selectFilterList.value.replace("5", "");
          nextTick(() => {
            filterList.filter((item: any) => item.value === "5")[0].isSelect =
              false;
          });
        }
      }
    }

    // 经营业态的查询需要加上经营业态
    if (
      value === "5" &&
      !(form.BUSINESS_TRADE && form.BUSINESS_TRADE.length > 0)
    ) {
      ElMessage({
        message: "请先选择需要查询的经营业态！",
        type: "warning",
      });
      handleShowMoreFormBox();
      return;
    }

    // 车辆归属地的查询需要有选中的服务区
    if (value === "4" && !props.currentServerPartDetail) {
      ElMessage({
        message: "请先选择服务区！",
        type: "warning",
      });
      return;
    }
    console.log("selectFilterList.value", selectFilterList.value);
    if (value === "99") {
      emit("handleNearServiceList"); 
    }

    if (selectFilterList.value) {
      if (selectFilterList.value.indexOf(value) === -1) {
        selectFilterList.value += `,${value}`;
      } else {
        let list: any = selectFilterList.value.split(",");
        console.log("list", list);
        console.log("value", value);
        let newStr: string = "";
        if (list && list.length > 0) {
          list.forEach((item: any) => {
            if (item !== value) {
              if (newStr) {
                newStr += `,${item}`;
              } else {
                newStr = item;
              }
            }
          });
        }
        selectFilterList.value = newStr;
      }
      nextTick(() => {
        let obj: any = filterList.filter((item: any) => item.value === value);
        if (obj[0].isSelect) {
          obj[0].isSelect = false;
        } else {
          obj[0].isSelect = true;
        }
      });
    } else {
      selectFilterList.value = value;
      nextTick(() => {
        let obj: any = filterList.filter((item: any) => item.value === value);
        obj[0].isSelect = true;
      });
    }
  }
};

// 显示筛选列表的内容
const handleShowMoreFormBox = () => {
  if (!isShowFilterIconList.value) {
    isShowFilterIconList.value = true;
  }
  showSearchForm.value = true;
};

// 关闭搜索表单
const handleColseSearchBox = () => {
  console.log("1");
  nextTick(() => {
    showSearchForm.value = false;
  });
};

// 请求经营业态的方法
const handleGetBUSINESS_TRADE = async () => {
  const data = await getFieldEnumTree({
    FieldExplainField: "BusinessTradeIds",
  });
  console.log("dasdkaskldas", data);
  businessTradeList = data;

  let BusinessTradeIdsObj: any = {};
  if (data && data.length > 0) {
    data.forEach((item: any) => {
      BusinessTradeIdsObj[item.value] = item.label;
      if (item.children && item.children.length > 0) {
        item.children.forEach((subItem: any) => {
          BusinessTradeIdsObj[subItem.value] = subItem.label;
        });
      }
    });
  }

  nextTick(() => {
    selectBusinessTradeIdsObj.value = BusinessTradeIdsObj;
    console.log("selectBusinessTradeIdsObj", selectBusinessTradeIdsObj.value);
  });
};

// 根据传入的值 改变选中的内容 且不会被watch监听到
const handleChangeFilterNoWatch = (id?: string) => {
  console.log("handleChangeFilterNoWatch", id);

  isNoWatch = true;
  selectFilterList.value = id;
  nextTick(() => {
    isNoWatch = false;
  });
};

onMounted(() => {
  handleGetBUSINESS_TRADE();
});

// 传入的方法
const emit = defineEmits<{
  (e: "handleChangeMapShow", nowSelect: any, onlyChange: boolean): void; // 根据selectFilterList.value的选中 来对地图进行不同的操作
  (e: "handleDeleteSelect"): void; // 清除选中的效果
  (e: "handleHiddenSuspended"): void; // 悬浮框的清除方法
  (e: "handleNearServiceList"): void; // 附近的服务区
}>();

// 传入的数据
const props = defineProps<{
  currentServerPartDetail: any;
}>();

watch(
  () => selectFilterList.value,
  (newVal, oldVal) => {
    emit("handleChangeMapShow", newVal, isNoWatch);
  },
  { deep: true }
);

// 暴露数据和方法
defineExpose({
  form: form,
  selectBusinessTradeIdsObj: selectBusinessTradeIdsObj,
  selectFilterList: selectFilterList,
  handleChangeFilterNoWatch: handleChangeFilterNoWatch,
});
</script>
<template>
  <div style="display: flex; width: 100%">
    <div class="moreSelectBox">
      <div
        :class="showSearchForm ? 'selectFormBox' : 'selectBox'"
        v-if="isShowFilterIconList"
        @click="handleShowMoreFormBox"
      >
        <img
          v-if="!showSearchForm"
          class="selectBoxDefaultIcon"
          src="@/assets/ai/retract.png"
        />
        <div v-if="showSearchForm" style="display: flex; width: 100%">
          <div style="width: 220px">
            <el-form :model="form" label-width="auto">
              <el-form-item
                class="BUSINESS_TRADEBox"
                label-position="top"
                label="经营业态"
                prop="BUSINESS_TRADE"
              >
                <el-tree-select
                  v-model="form.BUSINESS_TRADE"
                  :data="businessTradeList"
                  placeholder="请选择经营业态"
                  :props="{
                    label: 'label',
                    children: 'children',
                  }"
                  clearable
                  filterable
                  default-expand-all
                  multiple
                  show-checkbox
                />
              </el-form-item>
            </el-form>

            <div style="width: 100%; display: flex; justify-content: flex-end">
              <el-button type="primary" @click="handleClickFilter('5')"
                >查询</el-button
              >
            </div>
          </div>
          <img
            class="closeIcon"
            src="@/assets/ai/retract.png"
            @click="handleColseSearchBox"
          />
        </div>
      </div>
    </div>
    <div class="rightSearchMain">
      <div class="defaultIconBox" @click="showFilterList">
        <img class="defaultIcon" src="@/assets/ai/filterIcon.png" />
      </div>
      <div class="otherList" v-if="isShowFilterIconList">
        <div
          class="otherItem"
          v-for="(item, index) in filterList"
          :key="index"
          @click="handleClickFilter(item.value)"
        >
          <el-popover :title="item.label" placement="left">
            <template #reference>
              <img
                class="otherIcon"
                :src="item.isSelect ? item.selectScr : item.src"
              />
            </template>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>
