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

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

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

interface Props {
  index: number;
  form: ExecutionAction;
  executionAction: DictValue[];
  alarmNotifyMethod: DictValue[];
  orgUsersList: UserPageItem[];
}

const props = defineProps<Props>();
const emit = defineEmits(['deleteClick']);
const dataSelectionRef = useTemplateRef('dataSelection');
const formRef = ref<FormInstance>();
const rules: Record<string, Rule[]> = {
  subType: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmNotifyMethod: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmContact: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmAlertContent: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmWaitTime: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  paramCode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  alarmAdjustmentValue: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};

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

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

const confirmClick = (value: DataSelectionItem) => {
  const { groupId, childGroupId, deviceId, parametersName, paramCode } = value;
  props.form.groupId = groupId;
  props.form.childGroupId = childGroupId;
  props.form.deviceId = deviceId;

  props.form.paramCode = paramCode;
  props.form.paramName = parametersName;

  dataSelectionRef.value?.hideView();
};
const addPerformAction = () => {
  props.form.alarmNotifyMethod = undefined;
  props.form.alarmContact = undefined;
  props.form.alarmAlertContent = undefined;
  props.form.alarmWaitTime = undefined;
  props.form.paramCode = '';
  props.form.alarmAdjustmentValue = '';
  props.form.paramName = '';
};

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

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

<template>
  <div>
    <AForm ref="formRef" :model="form" label-align="left" layout="vertical" :rules="rules">
      <ABadge>
        <template #count>
          <SvgIcon @click="deleteExecutionConditions" class="icon-delete" name="close-circle" />
        </template>
        <AFlex class="conditions-bgc" wrap="wrap">
          <AFormItem :label="t('alarmManage.performAction')" name="subType">
            <ASelect
              class="select-input select-right"
              v-model:value="form.subType"
              :options="executionAction"
              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
              :placeholder="t('common.plzSelect')"
              @change="addPerformAction"
            />
          </AFormItem>
          <AFormItem :label="t('alarmManage.notificationMethod')" name="alarmNotifyMethod" v-if="form.subType === '3'">
            <ASelect
              class="select-input select-right"
              v-model:value="form.alarmNotifyMethod"
              :options="alarmNotifyMethod"
              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
              :placeholder="$t('common.plzSelect')"
            />
          </AFormItem>
          <AFormItem :label="t('alarmManage.contactPerson')" name="alarmContact" v-if="form.subType === '3'">
            <ASelect
              class="select-input select-right"
              v-model:value="form.alarmContact"
              :options="orgUsersList"
              :field-names="{ label: 'userName', value: 'id' }"
              :placeholder="t('common.plzSelect')"
            />
          </AFormItem>
          <br />
          <AFormItem :label="t('alarmManage.alarmContent')" name="alarmAlertContent" v-if="form.subType === '3'">
            <AInput
              :placeholder="t('common.pleaseEnter')"
              style="width: 840px"
              v-model:value="form.alarmAlertContent"
              show-count
              :maxlength="32"
            />
          </AFormItem>
          <AFormItem :label="t('alarmManage.waitingtime')" name="alarmWaitTime" v-if="form.subType === '4'">
            <ATimePicker
              class="select-input select-right"
              v-model:value="form.alarmWaitTime"
              format="mm:ss"
              :allow-clear="false"
            />
          </AFormItem>
          <AFormItem :label="t('alarmManage.equipmentParameters')" name="paramCode" v-if="form.subType === '5'">
            <div @click="parameterSelection">
              <AFlex justify="space-between" align="center" class="div-style">
                <div v-if="form.paramCode">
                  {{ props.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('alarmManage.adjustmentValue')" name="alarmAdjustmentValue" v-if="form.subType === '5'">
            <AInput
              :placeholder="t('common.pleaseEnter')"
              class="select-input select-right"
              v-model:value="form.alarmAdjustmentValue"
            />
          </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,
      }"
      @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>
