<template>
  <div class="table-content">
    <table align="center">
      <thead>
        <tr>
          <th v-for="item in editTestCellTableTHeadConfig" :key="item">
            <a-tooltip v-if="item === '参数值'">
              <template #title>当自定义为entityType,应输入DEVICE</template>
              <QuestionCircleOutlined :style="{ fontSize: '14px', marginLeft: '5px' }" />
            </a-tooltip>
            {{ item }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableTestArray.content" :key="index">
          <td>
            <Select :disabled="true" v-model:value="item.key" :options="selectOptions" />
          </td>
          <td style="width: 10.5vw">
            <a-input
              v-if="item.key === TableDefaultTypeEnum.SCOPE"
              placeholder="请输入"
              v-model:value="item.value"
            />
            <a-tree-select
              v-else-if="item.key === TableDefaultTypeEnum.ORGANIZATIONID"
              v-model:value="item.value"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择组织"
              allow-clear
              tree-default-expand-all
              :tree-data="treeData"
              @change="handleOrgnationChange(item)"
            />
            <Select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              v-else-if="item.key === TableDefaultTypeEnum.ENTITYID"
              v-model:value="item.value"
              placeholder="请选择"
              :options="entityOptions"
              allowClear
            />
            <Select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              v-else-if="item.key === TableDefaultTypeEnum.KEYS"
              v-model:value="item.value"
              placeholder="请选择"
              :options="attributeOptions"
              mode="multiple"
              allowClear
            />
            <div v-else-if="item.key === TableDefaultTypeEnum.DATERANGE">
              <a-button disabled type="primary">{{
                (item.value as any)?.split(',').at(-2)
              }}</a-button>
              <span>~</span>
              <a-button disabled type="primary">{{
                (item.value as any)?.split(',').at(-1)
              }}</a-button>
            </div>
            <Select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              v-else-if="item.key === TableDefaultTypeEnum.AGG"
              v-model:value="item.value"
              @change="onHandleAgg"
              placeholder="请选择"
              :options="aggOptions"
              allowClear
            />
            <Select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              v-else-if="
                item.key === TableDefaultTypeEnum.INTERVAL && item.value !== AggregateDataEnum.NONE
              "
              v-model:value="item.value"
              placeholder="请选择"
              :options="intervalOptions"
              allowClear
            />
            <Select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode;
                }
              "
              v-else
              v-model:value="item.value"
              placeholder="请选择"
              :options="valueOptions"
              allowClear
              @change="handleValueChange(item)"
            />
          </td>
          <td>
            <a-input
              v-if="item.key === TableDefaultTypeEnum.SCOPE"
              placeholder="请输入"
              v-model:value="item.keyValue"
            />
            <a-range-picker
              v-else-if="item.key == TableDefaultTypeEnum.DATERANGE"
              style="width: 10vw"
              v-model:value="item.dateValue"
              :disabled-date="disabledDate"
              :show-time="{
                format: 'HH:mm:ss',
                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
              }"
              @calendarChange="calendarPriceRangeChange"
              @change="changePriceRangeDate"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="['开始日期', '结束日期']"
              clearable
            />
            <a-input-number
              v-else-if="item.value == AggregateDataEnum.NONE"
              v-model:value="item.limit"
              :min="7"
              :max="50000"
            />
            <a-input v-else disabled placeholder="请输入" v-model:value="item.keyValue" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts" setup name="editCellTable">
  import { reactive, ref, onMounted } from 'vue';
  import { Select } from 'ant-design-vue';
  import { findDictItemByCode } from '/@/api/system/dict';
  import { useApi } from '../../../hooks/useApi';
  import { useUtils } from '../../../hooks/useUtils';
  import { cloneDeep } from 'lodash-es';
  import { tableItems, selectType } from '../../../config/types';
  import { editTestCellTableTHeadConfig } from '../../../config/config';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import moment from 'moment';
  import { AggregateDataEnum } from '/@/views/report/config/timeConfig';
  import { getPacketIntervalByRange } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
  import { uniqBy } from 'lodash';
  import { TableDefaultTypeEnum } from '../../../config/enum';

  const props = defineProps({
    method: {
      type: String,
    },
    token: {
      type: String,
    },
  });

  onMounted(async () => {
    aggOptions.value = [
      { label: '最小值', value: AggregateDataEnum.MIN },
      { label: '最大值', value: AggregateDataEnum.MAX },
      { label: '平均值', value: AggregateDataEnum.AVG },
      { label: '求和', value: AggregateDataEnum.SUM },
      { label: '计数', value: AggregateDataEnum.COUNT },
      { label: '空', value: AggregateDataEnum.NONE },
    ];
    const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' });
    selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
    selectOptions.value.push({
      label: '自定义',
      value: 'scope',
    });
    if (props.method === '2')
      selectOptions.value = selectOptions.value.filter(
        (f) => f.value !== TableDefaultTypeEnum.SCOPE
      );
  });

  const { isOtherHttp } = useUtils();

  const selectOptions = ref<selectType[]>([]);

  const valueOptions = ref<selectType[]>([]);

  const entityOptions = ref<selectType[]>([]);

  const attributeOptions = ref<selectType[]>([]);

  const aggOptions = ref<selectType[]>([]);

  const intervalOptions = ref<selectType[]>([]);

  const treeData = ref([]);

  const tableTestArray = reactive<{
    content: tableItems[];
  }>({
    content: [
      {
        key: undefined,
        value: undefined,
        keyValue: null,
        limit: 7,
        editDisabled: false,
        dateValue: null,
      },
    ],
  });

  const onHandleAgg = (e) => {
    if (e === AggregateDataEnum.NONE) {
      tableTestArray.content = tableTestArray.content.filter(
        (item) => item.key !== TableDefaultTypeEnum.INTERVAL
      );
      tableTestArray.content.forEach((it) => {
        if (it.key === TableDefaultTypeEnum.AGG && it.value === AggregateDataEnum.NONE) {
          it.limit = 7;
        }
      });
    } else {
      tableTestArray.content.push({
        key: 'interval',
        value: '',
      });
      tableTestArray.content = uniqBy(tableTestArray.content, 'key');
    }
  };

  const selectPriceDate = ref('');

  const calendarPriceRangeChange = (date) => {
    selectPriceDate.value = date[0];
    intervalOptions.value = getPacketIntervalByRange(date) as any;
  };

  const changePriceRangeDate = () => {
    selectPriceDate.value = '';
  };

  //时间跨度小于一年
  const offsetDays = 86400000 * 365;
  const disabledDate = (current) => {
    if (selectPriceDate.value) {
      let selectV = moment(selectPriceDate.value, 'YYYY-MM-DD').valueOf();
      return (
        current > moment(new Date(selectV + offsetDays), 'YYYY-MM-DD') ||
        current < moment(new Date(selectV - offsetDays), 'YYYY-MM-DD')
      );
    } else {
      return false;
    }
  };

  //设置数据
  const setTableArray = (data) => {
    const list = cloneDeep(data);
    list?.forEach((it) => {
      if (it?.value === TableDefaultTypeEnum.ENTITYTYPE) it.keyValue = TableDefaultTypeEnum.DEVICE;
      if (it.key === TableDefaultTypeEnum.KEYS) it.value = [];
    });
    if (Array.isArray(list)) (tableTestArray.content = list) && getApi(list);
  };

  //获取组织和产品
  const getApi = (list) => {
    list?.forEach(async (it) => {
      if (it.key === TableDefaultTypeEnum.DEVICEPROFILEID) {
        const { options } = await useApi(it.key, props.token);
        valueOptions.value = options;
      } else if (it.key === TableDefaultTypeEnum.ORGANIZATIONID) {
        const { options } = await useApi(it.key, props.token);
        treeData.value = options as any;
      }
    });
  };

  //组织Select改变
  const handleOrgnationChange = async (e) => {
    let deviceProfileId = '';
    tableTestArray.content.forEach((f: any) => {
      if (f.key === TableDefaultTypeEnum.ENTITYID) {
        f.value = null;
      }
      if (f.key === TableDefaultTypeEnum.DEVICEPROFILEID) deviceProfileId = f.value;
    });
    getEntityOptions(e.value, deviceProfileId);
  };

  //设备Select改变
  const getEntityOptions = async (organizationId: string, deviceProfileId?: string) => {
    const res = await isOtherHttp('api/yt/device/list', props.token, {
      organizationId,
      deviceProfileId,
    });
    entityOptions.value = res.map((item) => ({
      label: item.alias || item.name,
      value: item.tbDeviceId,
    }));
  };

  //属性Select改变
  const getAttributeOptions = async (params) => {
    const { deviceProfileId, dataType } = params;
    const res = await isOtherHttp(`api/yt/device/attributes/${deviceProfileId}`, props.token, {
      dataType,
    });
    if (Object.keys(res).length === 0) return (attributeOptions.value.length = 0);
    attributeOptions.value = res?.map((item) => ({ label: item.name, value: item.identifier }));
  };

  //产品Select改变
  const handleValueChange = (e) => {
    let organizationId = '';
    if (e.key === TableDefaultTypeEnum.DEVICEPROFILEID) {
      tableTestArray.content.forEach((f: any) => {
        if (f.key === TableDefaultTypeEnum.KEYS) {
          f.value = [];
        }
        if (f.key === TableDefaultTypeEnum.ORGANIZATIONID) organizationId = f.value;
        if (f.key === TableDefaultTypeEnum.ENTITYID) f.value = null;
      });
      if (e.value) {
        getAttributeOptions({ deviceProfileId: e.value });
      }
      if (organizationId !== '') {
        getEntityOptions(organizationId, e.value);
      }
    }
  };

  //获取数据
  const getValue = () => {
    return tableTestArray.content;
  };

  defineExpose({
    getValue,
    setTableArray,
  });
</script>

<style scoped lang="less">
  @import '../../SimpleRequest/common/commonTestTable.less';
</style>