<template>
  <div @click.stop="open" class="inline mr-1">
    <slot></slot>
  </div>
  <ModalPanel
    :visible="visible"
    :width="800"
    :title="t('按钮弹窗配置')"
    :contentStyle="{ height: '550px' }"
    @submit="submit"
    @close="close"
  >
    <div class="p-4 h-full">
      <a-form layout="vertical" :model="formState" :labelCol="{ span: 12 }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="t('绑定弹窗')">
              <a-input
                :value="formState.bindModal ? t('已配置') : ''"
                :placeholder="t('点击进行弹窗绑定')"
                @click="handleModalConfig(3)"
              >
                <template #suffix>
                  <Icon icon="ant-design:ellipsis-outlined" />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('弹窗标题')">
              <a-input v-model:value="formState.title" :placeholder="t('请填写弹窗标题')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="弹窗入参配置">
              <a-input
                :value="formState.innerParams?.length ? t('已配置') : ''"
                :placeholder="t('点击进行参数配置')"
                @click="handleModalConfig(1)"
              >
                <template #suffix>
                  <Icon icon="ant-design:ellipsis-outlined" />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="弹窗出参配置">
              <a-input
                :value="formState.outParams?.length ? t('已配置') : ''"
                :placeholder="t('点击进行参数配置')"
                @click="handleModalConfig(2)"
              >
                <template #suffix>
                  <Icon icon="ant-design:ellipsis-outlined" />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="弹窗确定事件">
              <a-input
                :placeholder="t('点击配置脚本')"
                :value="configTxt(formState.confirm)"
                @click="showConfigModal('confirm')"
              >
                <template #addonAfter>
                  <Icon icon="ant-design:ellipsis-outlined" />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="弹窗取消事件">
              <a-input
                :placeholder="t('点击配置脚本')"
                :value="configTxt(formState.cancel)"
                @click="showConfigModal('cancel')"
              >
                <template #addonAfter>
                  <Icon icon="ant-design:ellipsis-outlined" />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="窗口打开事件">
              <a-input
                :placeholder="t('点击配置脚本')"
                :value="configTxt(formState.open)"
                @click="showConfigModal('open')"
              >
                <template #addonAfter>
                  <Icon icon="ant-design:ellipsis-outlined" />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="窗口关闭事件">
              <a-input
                :placeholder="t('点击配置脚本')"
                :value="configTxt(formState.close)"
                @click="showConfigModal('close')"
              >
                <template #addonAfter>
                  <Icon icon="ant-design:ellipsis-outlined" />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="弹窗宽度">
              <a-input-group compact>
                <a-input-number
                  v-model:value="formState.modalWidth"
                  :min="0"
                  :max="formState.modalWidthUnit == 'px' ? null : 100"
                  :placeholder="t('请设置弹窗宽度')"
                  style="width: calc(100% - 60px)"
                />
                <a-select
                  v-model:value="formState.modalWidthUnit"
                  style="width: 60px"
                  @change="
                    (val) => {
                      if (val == '%' && formState.modalWidth > 100) {
                        formState.modalWidth = 100;
                      }
                    }
                  "
                >
                  <a-select-option value="px">px</a-select-option>
                  <a-select-option value="%">%</a-select-option>
                </a-select>
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="弹窗高度">
              <a-input-group compact>
                <a-input-number
                  v-model:value="formState.modalHeight"
                  :min="0"
                  :max="formState.modalHeightUnit == 'px' ? null : 100"
                  :placeholder="t('请设置弹窗高度')"
                  style="width: calc(100% - 60px)"
                />
                <a-select
                  v-model:value="formState.modalHeightUnit"
                  style="width: 60px"
                  @change="
                    (val) => {
                      if (val == '%' && formState.modalHeight > 100) {
                        formState.modalHeight = 100;
                      }
                    }
                  "
                >
                  <a-select-option value="px">px</a-select-option>
                  <a-select-option value="%">%</a-select-option>
                </a-select>
              </a-input-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <ModalConfig
      v-if="modalConfigDia"
      v-model:modalConfigDia="modalConfigDia"
      v-model:list="formState.innerParams"
      :formJson="formJson || []"
      type="inner"
      from="table"
    />
    <ModalConfig
      v-if="modalOutConfigDia"
      v-model:modalConfigDia="modalOutConfigDia"
      v-model:list="formState.outParams"
      :formJson="formJson || []"
      type="out"
      from="table"
    />
    <ModalSelect
      v-if="modalSelectDia"
      v-model:multipleDialog="modalSelectDia"
      v-model:value="formState.bindModal"
      @submit="bindModalChange"
    />
    <FormScriptConfig @register="registerFormModal" @success="submitConfig" />
  </ModalPanel>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import ModalConfig from '/@/components/Designer/src/components/componentProperty/settings/ModalConfig.vue';
  import ModalSelect from '/@/components/Designer/src/components/componentProperty/settings/ModalSelect.vue';
  import { Icon } from '/@/components/Icon';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { getModalManage } from '/@/api/dataconfig/modalmanage';
  import { cloneDeep } from 'lodash-es';
  import { ModalPanel } from '/@/components/ModalPanel/index';
  import FormScriptConfig from './components/FormScriptConfig.vue';
  import { useModal } from '/@/components/Modal';
  const { t } = useI18n();

  const props = defineProps({
    modalData: Object,
    formJson: Array,
  });
  const emits = defineEmits(['update:modalData']);
  interface FormState {
    bindModal: string;
    innerParams: any;
    outParams: any;
    modalWidth: number;
    modalWidthUnit: string;
    modalHeight: number;
    modalHeightUnit: string;
    title: string;
    confirm: string;
    cancel: string;
    open: string;
    close: string;
  }
  let formState: any = ref({
    bindModal: '',
    innerParams: [],
    outParams: [],
    modalWidth: 900,
    modalWidthUnit: 'px',
    modalHeight: 500,
    modalHeightUnit: 'px',
    title: '',
    confirm: '',
    cancel: '',
    open: '',
    close: '',
  });
  const [registerFormModal, { openModal: openFormModal }] = useModal();
  const visible = ref<boolean>(false);
  const modalConfigDia = ref<boolean>(false);
  const modalOutConfigDia = ref<boolean>(false);
  const modalSelectDia = ref<boolean>(false);
  const jsType = ref();
  function open() {
    if (props.modalData) formState.value = cloneDeep(props.modalData) as FormState;
    visible.value = true;
  }
  const configTxt = (type) => {
    if (type) {
      return t('已配置');
    } else {
      return '';
    }
  };
  function showConfigModal(val) {
    jsType.value = val;
    openFormModal(true, {
      content: formState.value[jsType.value],
      formList: { list: props.formJson },
    });
  }
  function submitConfig(value) {
    formState.value[jsType.value] = value;
  }
  function bindModalChange(val) {
    getModalManage(val).then((res) => {
      if (res) {
        let json = JSON.parse(res.configJson);
        if (json.innerParams?.length <= 0) {
          formState.value.innerParams = json.innerParams;
        } else {
          let newParams: any = [];
          json.innerParams.forEach((o) => {
            let obj = formState.value.innerParams?.find((k) => {
              return k.name == o.name;
            });
            if (obj) {
              newParams.push(obj);
            } else {
              newParams.push(o);
            }
          });
          formState.value.innerParams = newParams;
        }
        if (json.outParams?.length <= 0) {
          formState.value.outParams = json.outParams;
        } else {
          let newParams: any = [];
          json.outParams.forEach((o) => {
            let obj = formState.value.outParams?.find((k) => {
              return k.name == o.name;
            });
            if (obj) {
              newParams.push({
                name: o.name,
                component: o.component,
                mainComponent: obj.mainComponent,
              });
            } else {
              newParams.push(o);
            }
          });
          formState.value.outParams = newParams;
        }
      }
    });
  }
  const handleModalConfig = (val) => {
    if (val == 1) modalConfigDia.value = true;
    else if (val == 2) modalOutConfigDia.value = true;
    else modalSelectDia.value = true;
  };

  function submit() {
    visible.value = false;
    emits('update:modalData', formState.value);
  }
  function close() {
    visible.value = false;
  }
</script>

<style lang="less" scoped>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentcolor;
    overflow: hidden;
  }
</style>
