<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';

import { useRequest } from '@/hooks/request';
import { useViewVisible } from '@/hooks/view-visible';
import { t } from '@/i18n';
import { getDeviceGroupList, getDeviceListSimple, queryDevicesList } from '@/api';

import type { DataSelection, DeviceGroup, DeviceParams, DevicesListItem } from '@/types';

interface Props {
  form: DataSelection;
  selectType: number;
}

const props = defineProps<Props>();
const { handleRequest } = useRequest();
const { visible, showView, hideView } = useViewVisible();
const emit = defineEmits(['confirmClick']);
const oneDeviceGroup = ref<DeviceGroup[]>([]);
const twoDeviceGroup = ref<DeviceGroup[]>([]);
const equipmentList = ref<DevicesListItem[]>([]);
const parametersList = ref<DeviceParams[]>([]);
const gradeOne = ref<number | undefined>(undefined);
const gradeTwo = ref<number | undefined>(undefined);
const equipmentId = ref<number | undefined>(undefined);
const equipmentName = ref<string>('');
const parametersId = ref<number | undefined>(undefined);
const parametersCode = ref<string>('');
const parametersName = ref<string>('');

const addAllGatewayList = (value: number) => {
  handleRequest(async () => {
    const data = await getDeviceGroupList({
      parentId: value,
    });

    if (value === -1) {
      oneDeviceGroup.value = data;
      if (data.length) {
        if (props.form.groupId) {
          gradeOne.value = props.form.groupId;
          addAllGatewayList(props.form.groupId);
        } else {
          gradeOne.value = data[0].id;
          addAllGatewayList(data[0].id);
        }
      } else {
        twoDeviceGroup.value = [];
        gradeTwo.value = undefined;
      }
    } else {
      twoDeviceGroup.value = data;
      if (data.length) {
        if (props.form.childGroupId) {
          if (twoDeviceGroup.value.some((item) => item.id === props.form.childGroupId)) {
            gradeTwo.value = props.form.childGroupId;
            getEquipmentList(props.form.childGroupId);
          } else {
            gradeTwo.value = data[0].id;
            getEquipmentList(data[0].id);
          }
        } else {
          gradeTwo.value = data[0].id;
          getEquipmentList(data[0].id);
        }
      } else {
        parametersList.value = [];
        equipmentId.value = undefined;
        equipmentName.value = '';
      }
    }
  });
};

const getEquipmentList = (id: number) => {
  handleRequest(async () => {
    const { records } = await queryDevicesList({
      pageIndex: 1,
      pageSize: 99999,
      groupId: id,
    });
    equipmentList.value = records;
    if (records.length) {
      if (props.form.deviceId) {
        if (equipmentList.value.some((item) => item.id === props.form.deviceId)) {
          equipmentId.value = props.form.deviceId;
          records.forEach((item) => {
            if (item.id === props.form.deviceId) {
              equipmentName.value = item.deviceName;
            }
          });
          getParameters(props.form.deviceId);
        } else {
          equipmentId.value = records[0].id;
          equipmentName.value = records[0].deviceName;
          getParameters(records[0].id);
        }
      } else {
        equipmentId.value = records[0].id;
        equipmentName.value = records[0].deviceName;
        getParameters(records[0].id);
      }
    } else {
      parametersList.value = [];
      parametersId.value = undefined;
      parametersCode.value = '';
      parametersName.value = '';
    }
  });
};

const getParameters = (id: number) => {
  handleRequest(async () => {
    parametersList.value = await getDeviceListSimple(id);
    if (parametersList.value.length) {
      if (props.form.paramCode) {
        if (parametersList.value.some((item) => item.deviceParamCode === props.form.paramCode)) {
          parametersList.value.forEach((item) => {
            if (item.deviceParamCode === props.form.paramCode) {
              parametersId.value = item.id;
              parametersCode.value = item.deviceParamCode;
              parametersName.value = item.deviceParamName;
            }
          });
        } else {
          parametersId.value = parametersList.value[0].id;
          parametersCode.value = parametersList.value[0].deviceParamCode;
          parametersName.value = parametersList.value[0].deviceParamName;
        }
      } else {
        parametersId.value = parametersList.value[0].id;
        parametersCode.value = parametersList.value[0].deviceParamCode;
        parametersName.value = parametersList.value[0].deviceParamName;
      }
    }
  });
};

const addParameters = (id: number, index: number) => {
  if (index === 1) {
    gradeOne.value = id;
    addAllGatewayList(id);
  } else if (index === 2) {
    gradeTwo.value = id;
    getEquipmentList(id);
  }
};

const chooseEquipment = (item: DevicesListItem) => {
  equipmentId.value = item.id;
  equipmentName.value = item.deviceName;
  getParameters(item.id);
};

const chooseParameters = (item: DeviceParams) => {
  parametersId.value = item.id;
  parametersCode.value = item.deviceParamCode;
  parametersName.value = item.deviceParamName;
};

const okConfirm = () => {
  if (props.selectType === 0) {
    if (!parametersId.value) {
      return message.warning(t('alarmManage.parameterNotSelected'));
    }
  } else if (props.selectType === 1) {
    if (!equipmentId.value) {
      return message.warning(t('alarmManage.deviceNotSelected'));
    }
  }

  emit('confirmClick', {
    groupId: gradeOne.value,
    childGroupId: gradeTwo.value,
    deviceId: equipmentId.value,
    deviceName: equipmentName.value,
    parametersName: parametersName.value,
    paramCode: parametersCode.value,
    selectType: props.selectType,
  });
};
defineExpose({
  showView,
  hideView,
  addAllGatewayList,
});
</script>

<template>
  <div>
    <AModal
      v-model:open="visible"
      :title="selectType === 0 ? t('createDevice.selectParameters') : t('alarmManage.selectEquipment')"
      @ok="okConfirm"
      :centered="true"
      :width="selectType === 0 ? 1070 : 814"
    >
      <AFlex class="parameters-content">
        <div class="content-div">
          <AFlex align="center" class="content-div-top">
            <div class="content-div-top-text">{{ $t('alarmManage.equipmentGroup1') }}</div>
          </AFlex>
          <div class="content-div-content">
            <AFlex class="no-data" justify="center" align="center" v-if="!oneDeviceGroup.length">{{
              $t('common.noData')
            }}</AFlex>
            <div v-else v-for="item in oneDeviceGroup" :key="item.id">
              <div @click="addParameters(item.id, 1)">
                <AFlex
                  justify="space-between"
                  align="center"
                  :class="gradeOne === item.id ? 'parameters-dev-bgd' : 'parameters-dev'"
                >
                  <div class="parameters-text">{{ item.groupName }}</div>
                  <div v-if="gradeOne === item.id">
                    <SvgIcon class="icon-style" name="right" />
                  </div>
                </AFlex>
              </div>
            </div>
          </div>
        </div>
        <div class="content-div border-radius">
          <AFlex align="center" class="content-div-top">
            <div class="content-div-top-text">{{ $t('alarmManage.equipmentGroup2') }}</div>
          </AFlex>
          <div class="content-div-content">
            <AFlex class="no-data" justify="center" align="center" v-if="!twoDeviceGroup.length">{{
              $t('common.noData')
            }}</AFlex>
            <div v-else v-for="item in twoDeviceGroup" :key="item.id">
              <div @click="addParameters(item.id, 2)">
                <AFlex
                  justify="space-between"
                  align="center"
                  :class="gradeTwo === item.id ? 'parameters-dev-bgd' : 'parameters-dev'"
                >
                  <div class="parameters-text">{{ item.groupName }}</div>
                  <div v-if="gradeTwo === item.id">
                    <SvgIcon class="icon-style" name="right" />
                  </div>
                </AFlex>
              </div>
            </div>
          </div>
        </div>
        <div :class="selectType === 0 ? 'content-div border-radius' : 'content-div border-radius border-right'">
          <AFlex align="center" class="content-div-top">
            <div class="content-div-top-text">{{ $t('alarmManage.subordinateEquipment') }}</div>
          </AFlex>
          <div class="content-div-content">
            <AFlex class="no-data" justify="center" align="center" v-if="!equipmentList.length">{{
              $t('common.noData')
            }}</AFlex>
            <div v-else v-for="item in equipmentList" :key="item.id">
              <div @click="chooseEquipment(item)">
                <AFlex
                  justify="space-between"
                  align="center"
                  :class="equipmentId === item.id ? 'parameters-dev-bgd' : 'parameters-dev'"
                >
                  <div class="parameters-text">{{ item.deviceName }}</div>
                  <div v-if="equipmentId === item.id && selectType === 0">
                    <SvgIcon class="icon-style" name="right" />
                  </div>
                </AFlex>
              </div>
            </div>
          </div>
        </div>
        <div v-if="selectType === 0" class="content-div border-radius border-right">
          <AFlex align="center" class="content-div-top">
            <div class="content-div-top-text">{{ $t('createDevice.parameters') }}</div>
          </AFlex>
          <div class="content-div-content">
            <AFlex class="no-data" justify="center" align="center" v-if="!parametersList.length">{{
              $t('common.noData')
            }}</AFlex>
            <div v-else v-for="item in parametersList" :key="item.id">
              <div @click="chooseParameters(item)">
                <AFlex
                  justify="space-between"
                  align="center"
                  :class="parametersId === item.id ? 'parameters-dev-bgd' : 'parameters-dev'"
                >
                  <div class="parameters-text">{{ item.deviceParamName }}</div>
                </AFlex>
              </div>
            </div>
          </div>
        </div>
      </AFlex>
    </AModal>
  </div>
</template>

<style lang="scss" scoped>
.no-data {
  height: 100%;
  color: rgb(0 0 0 / 65%);
}

.parameters-text {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: rgb(0 0 0 / 65%);
  text-align: left;
}

.icon-style {
  margin-top: 5px;
  color: #8c94a8;
}

.parameters-dev {
  width: 100%;
  height: 48px;
  padding: 0 12px 0 16px;
  margin-top: 8px;
  cursor: pointer;
  background: #fff;
  border-radius: 4px;
}

.parameters-dev-bgd {
  width: 100%;
  height: 48px;
  padding: 0 12px 0 16px;
  margin-top: 8px;
  cursor: pointer;
  background: rgb(50 186 192 / 15%);
  border-radius: 4px;
}

.content-div-content {
  height: 375px;
  padding: 0 8px;
  overflow: hidden;
  overflow: hidden auto; /* 隐藏水平滚动条 */ /* 只显示垂直滚动条 */
}

.content-div-top-text {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  text-align: left;
}

.content-div-top {
  height: 56px;
  padding-left: 24px;
  background: #f5f6f7;
  border-radius: 4px 0 0;
}

.content-div {
  width: 256px;
  height: 436px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.border-radius {
  border-radius: 0;
}

.border-right {
  border-right: 1px solid #e4e7ed;
  border-radius: 0 4px 4px 0;
}

.parameters-content {
  height: 470px;
  padding-top: 16px;
}
</style>
