<script setup lang="ts">
import { ref, useTemplateRef } from 'vue';

import DataSelection from '@/components/DataSelection.vue';
import SvgIcon from '@/components/SvgIcon.vue';
import { t } from '@/i18n';

import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import type { DataSelectionItem, DictValue, TriggerConditionItem } from '@/types';

interface Props {
  index: number;
  form: TriggerConditionItem;
  alarmCondition: DictValue[];
  alarmRepeatTime: DictValue[];
  alarmAlgOperator: DictValue[];
  alarmDeviceState: DictValue[];
}

const emit = defineEmits(['deleteClick']);
const dataSelectionRef = useTemplateRef('dataSelection');
const equipmentSelectionRef = useTemplateRef('equipmentSelection');
const formRef = ref<FormInstance>();

const props = defineProps<Props>();

const rules: Record<string, Rule[]> = {
  subType: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  paramCode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  deviceId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmAlgOperator: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmThreshold: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmDeviceState: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmScheduledTime: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmRepeatTime: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};

const deleteTriggerConditions = () => {
  emit('deleteClick', props.index);
};

const formRefSubmit = () => {
  return formRef.value?.validate() || Promise.resolve();
};

const formResetFields = () => {
  formRef.value?.resetFields();
};

const parameterSelection = () => {
  dataSelectionRef.value?.showView();
  dataSelectionRef.value?.addAllGatewayList(-1);
};

const equipmentParameterSelection = () => {
  equipmentSelectionRef.value?.showView();
  equipmentSelectionRef.value?.addAllGatewayList(-1);
};

const confirmClick = (value: DataSelectionItem) => {
  const { groupId, childGroupId, deviceId, parametersName: name, paramCode, selectType, deviceName } = value;
  props.form.groupId = groupId;
  props.form.childGroupId = childGroupId;
  props.form.deviceId = deviceId;
  if (selectType === 0) {
    props.form.paramCode = paramCode;
    props.form.paramName = name;
  }

  if (selectType === 1) {
    props.form.deviceName = deviceName;
  }
  equipmentSelectionRef.value?.hideView();
  dataSelectionRef.value?.hideView();
};

const addConditionType = () => {
  props.form.paramCode = '';
  props.form.paramName = '';
  props.form.deviceId = undefined;
  props.form.deviceName = undefined;
  props.form.alarmAlgOperator = undefined;
  props.form.alarmThreshold = undefined;
  props.form.alarmDeviceState = undefined;
  props.form.alarmScheduledTime = undefined;
  props.form.alarmRepeatTime = undefined;
};

defineExpose({
  formRefSubmit,
  formResetFields,
});
</script>

<template>
  <div>
    <AForm ref="formRef" class="trigger-modal" :model="form" label-align="left" layout="vertical" :rules="rules">
      <ABadge>
        <template #count>
          <SvgIcon @click="deleteTriggerConditions" class="icon-delete" name="close-circle" />
        </template>
        <AFlex class="conditions-bgc" wrap="wrap">
          <AFormItem :label="t('alarmManage.conditionType')" name="subType">
            <ASelect
              class="select-input select-right"
              v-model:value="form.subType"
              :options="alarmCondition"
              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
              :placeholder="$t('common.plzSelect')"
              @change="addConditionType"
            />
          </AFormItem>
          <AFormItem :label="t('alarmManage.equipmentParameters')" name="paramCode" v-if="form.subType == '0'">
            <div @click="parameterSelection">
              <AFlex justify="space-between" align="center" class="div-style">
                <div v-if="form.paramCode">
                  {{ form.paramName }}
                </div>
                <div class="div-style-text" v-else>{{ $t('common.plzSelect') }}</div>
                <div>
                  <SvgIcon class="icon-style" name="right" />
                </div>
              </AFlex>
            </div>
          </AFormItem>
          <AFormItem :label="t('navigation.device')" name="deviceId" v-if="form.subType === '1'">
            <div @click="equipmentParameterSelection">
              <AFlex justify="space-between" align="center" class="div-style">
                <div v-if="form.deviceId">
                  {{ form.deviceName }}
                </div>
                <div class="div-style-text" v-else>{{ $t('common.plzSelect') }}</div>

                <div>
                  <SvgIcon class="icon-style" name="right" />
                </div>
              </AFlex>
            </div>
          </AFormItem>
          <AFormItem :label="t('alarmManage.operator')" name="alarmAlgOperator" v-if="form.subType === '0'">
            <ASelect
              class="select-input select-right"
              v-model:value="form.alarmAlgOperator"
              :options="alarmAlgOperator"
              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
              :placeholder="$t('common.plzSelect')"
            />
          </AFormItem>
          <AFormItem :label="t('alarmManage.threshold')" name="alarmThreshold" v-if="form.subType === '0'">
            <AInput v-model:value="form.alarmThreshold" :placeholder="t('common.pleaseEnter')" class="select-input" />
          </AFormItem>
          <AFormItem :label="t('alarmManage.equipmentStatus')" name="alarmDeviceState" v-if="form.subType === '1'">
            <ASelect
              class="select-input"
              v-model:value="form.alarmDeviceState"
              :options="alarmDeviceState"
              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
              :placeholder="$t('common.plzSelect')"
            />
          </AFormItem>
          <AFormItem :label="t('alarmManage.specifiedTimePoint')" name="alarmScheduledTime" v-if="form.subType === '2'">
            <ATimePicker
              class="select-input select-right"
              v-model:value="form.alarmScheduledTime"
              format="HH:mm"
              :allow-clear="false"
            />
          </AFormItem>
          <AFormItem :label="t('common.rzpeat')" name="alarmRepeatTime" v-if="form.subType === '2'">
            <ASelect
              class="select-input"
              v-model:value="form.alarmRepeatTime"
              :options="alarmRepeatTime"
              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
              :placeholder="$t('common.plzSelect')"
            />
          </AFormItem>
        </AFlex>
      </ABadge>
    </AForm>
    <DataSelection
      ref="dataSelection"
      :select-type="0"
      :form="{
        groupId: form.groupId,
        childGroupId: form.childGroupId,
        deviceId: form.deviceId,
        paramCode: form.paramCode,
        paramName: form.paramName,
        deviceName: form.deviceName,
      }"
      @confirmClick="confirmClick"
    />
    <DataSelection
      ref="equipmentSelection"
      :select-type="1"
      :form="{
        groupId: form.groupId,
        childGroupId: form.childGroupId,
        deviceId: form.deviceId,
        paramCode: form.paramCode,
        paramName: form.paramName,
      }"
      @confirmClick="confirmClick"
    />
  </div>
</template>

<style lang="scss" scoped>
.div-style-text {
  color: #d9d9d9;
}

.icon-style {
  margin-top: 5px;
  color: rgb(0 0 0 / 25%);
}

.div-style {
  width: 192px;
  height: 32px;
  padding: 0 11px;
  margin-right: 24px;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 15%);
  border-radius: 4px;
}

.div-style:hover {
  border-color: var(--antd-color-primary-hover);
}

.icon-delete {
  top: 32px;
  right: 16px;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
}

.select-input {
  width: 192px;
}

.select-right {
  margin-right: 24px;
}

.conditions-bgc {
  width: 872px;
  padding: 16px;
  margin-top: 16px;
  background: #f5f7fa;
  border-radius: 4px;
}
</style>
