<template>
  <div class="HuoQingList">
    <div class="searchDiv">
      <n-input-group>
        <div class="search-input">
          <n-input v-model:value="searchValue" placeholder="请输入火情名称" />
        </div>
        <n-button type="primary" class="search-button" @click="searchDataList">
          <SearchOutlined :style="{ fontSize: '30px' }" />
        </n-button>
      </n-input-group>
    </div>
    <div class="buttonDiv">
      <div>
        <Button :dataStyle="dataStyle" @click="props.chartConfig.status.hide = true" />
        <span class="buttonDivSpan1"> 火情列表 </span>
      </div>
      <div>
        <span class="buttonDivSpan2"> 共{{ dataList.length }}条火情 </span>
        <n-button quaternary>
          <Icon
            icon="bi:chevron-down"
            :style="{
              fontSize: option.dataStyle.buttonRightIconSize + 'px',
              color: option.dataStyle.buttonRightIconColor,
            }"
          />
        </n-button>
      </div>
    </div>
    <div class="listDiv">
      <div class="liDiv" v-for="item in dataList" :key="item.key" @click="clickBtn(item)">
        <Xinxi :item="item" :dataStyle="option.dataStyle" />
      </div>
    </div>
  </div>
  <div class="leftTopDiv">
    <LeftTop />
  </div>
  <div class="leftBottomDiv">
    <LeftBottom />
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref, onMounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import Icon from '@/components/Icon/Icon.vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
  import dayjs from 'dayjs';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';
  import Button from './svg/button.vue';
  import Xinxi from './svg/xinxi.vue';
  import LeftTop from './svg/leftTop.vue';
  import LeftBottom from './svg/leftBottom.vue';

  const chartEditStore = useChartEditStore();

  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h } = toRefs(props.chartConfig.attr);

  const option = reactive({
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
  });

  // 变换组件宽度
  watch(
    () => w.value,
    () => {
      option.dataStyle.listWidth = w.value - option.dataStyle.listPaddingLeft * 2;
      option.dataStyle.listHeight = 105 * (option.dataStyle.listWidth / 356);
      option.dataStyle.searchInputWidth = (option.dataStyle.listWidth * 303) / 360;
      option.dataStyle.searchButtonWidth = (option.dataStyle.listWidth * 57) / 360;
      option.dataStyle.searchDivHeight = (option.dataStyle.searchButtonWidth * 37) / 57;
      option.dataStyle.buttonDivHeight = option.dataStyle.searchDivHeight;
    },
    {
      immediate: true,
    },
  );
  // 排序
  watch(
    () => option.dataStyle.sortOrder,
    () => {
      sort();
    },
    {
      immediate: true,
      deep: true,
    },
  );

  // 排序
  function sort() {
    if (option.dataStyle.sortOrder == '0') {
      option.dataset = option.dataset.sort((a, b) => dayjs(a.time).diff(dayjs(b.time)));
      option.dataset = option.dataset.map((item, index) => {
        return {
          ...item,
          backColor: getLinearGradientColor(item),
        };
      });
    }
    if (option.dataStyle.sortOrder == '1') {
      option.dataset = option.dataset.sort((a, b) => dayjs(b.time).diff(dayjs(a.time)));
      option.dataset = option.dataset.map((item, index) => {
        return {
          ...item,
          backColor: getLinearGradientColor(item),
        };
      });
    }
  }

  function getLinearGradientColor(item) {
    const matchedElement = option.dataStyle.backColorList.find((element) =>
      item[element.label].includes(element.value),
    );
    return matchedElement ? matchedElement.color : '#FA521E';
  }

  // 搜索
  const searchValue = ref('');
  const dataList: any = ref(option.dataset);

  function searchDataList() {
    if (searchValue.value.trim()) {
      dataList.value = option.dataset.filter((item) => {
        return item.title.includes(searchValue.value);
      });
    } else {
      dataList.value = option.dataset;
    }
  }

  const clickBtn = (item) => {
    // 显示弹窗
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'click',
      item,
    );

    // 更新详情弹窗信息
    let bindEvents = props.chartConfig.events.interactConfigEvents;
    for (let i = 0; i < bindEvents.length; i++) {
      for (let j = 0; j < bindEvents[i].movementList.length; j++) {
        EventBus.emit(bindEvents[i].movementList[j].elementId[0] + 'dataupdate', item);
      }
    }
  };

  onMounted(() => {
    // 组件通信
    const sql = props.chartConfig.request?.requestSQLContent?.sql;
    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
      props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id });
      // 数据callback处理（预览时触发）
      useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
        option.dataset = resData;
      });
    });
  });

  // 数据callback处理（预览时触发）
  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
    option.dataset = resData;
  });
</script>

<style lang="scss" scoped>
  .HuoQingList {
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
  }

  .searchDiv {
    padding-top: v-bind('`${option.dataStyle.searchPaddingTop}px`');
    padding-left: v-bind('`${option.dataStyle.searchPaddingLeft}px`');
    padding-right: v-bind('`${option.dataStyle.searchPaddingLeft}px`');
  }

  ::v-deep .search-input {
    background-image: url('./svg/searchInput.svg');
    width: v-bind('`${option.dataStyle.searchInputWidth}px`');
    height: v-bind('`${option.dataStyle.searchDivHeight}px`');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  ::v-deep .search-button {
    width: v-bind('`${option.dataStyle.searchButtonWidth}px`');
    height: v-bind('`${option.dataStyle.searchDivHeight}px`');
  }

  ::v-deep .n-input {
    background: #ffffff00;
  }

  .buttonDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: v-bind('`${option.dataStyle.buttonDivHeight}px`');
    margin-top: v-bind('`${option.dataStyle.buttonPaddingTop}px`');
    padding-left: v-bind('`${option.dataStyle.buttonPaddingLeft}px`');
    padding-right: v-bind('`${option.dataStyle.buttonPaddingLeft}px`');

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    div {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .buttonDivSpan1 {
        margin-left: 10px;
        font-size: v-bind('`${option.dataStyle.buttonLeftFontSize}px`');
        color: v-bind('`${option.dataStyle.buttonLeftFontColor}`');
      }

      .buttonDivSpan2 {
        font-size: v-bind('`${option.dataStyle.buttonRightFontSize}px`');
        color: v-bind('`${option.dataStyle.buttonRightFontColor}`');
      }
    }
  }

  .listDiv {
    overflow: auto;
    height: v-bind(
      '`${h - option.dataStyle.searchPaddingTop - option.dataStyle.searchDivHeight - option.dataStyle.buttonPaddingTop - option.dataStyle.buttonDivHeight - option.dataStyle.listMarginTop - option.dataStyle.listMarginBottom}px`'
    );
    margin-top: v-bind('`${option.dataStyle.listMarginTop}px`');
    margin-bottom: v-bind('`${option.dataStyle.listMarginBottom}px`');
    margin-left: v-bind('`${option.dataStyle.listPaddingLeft}px`');
    margin-right: v-bind('`${option.dataStyle.listPaddingLeft}px`');
  }

  .listDiv::-webkit-scrollbar {
    display: none;
  }

  .listDiv {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .liDiv {
    margin-bottom: v-bind('`${option.dataStyle.listbottom}px`');
  }

  .leftTopDiv {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .leftBottomDiv {
    position: absolute;
    bottom: 0px;
    left: 0px;
  }
</style>
