<template>
  <div v-for="(item, index) in render" :key="item.type">
    <div
      :class="['event-box', index == render.length - 1 ? '!mb-0' : '']"
      v-if="item.comp.includes(select.type)"
    >
      <div class="event-title">{{ item.name }}</div>
      <div>
        <a-row type="flex" align="middle">
          <a-col :span="6">
            <span>{{ t('配置脚本') }}</span>
          </a-col>
          <a-col :span="17" :offset="1">
            <a-input
              :placeholder="t('点击配置脚本')"
              :value="configTxt(item.type)"
              @click="showConfigModal(item.type)"
            >
              <template #addonAfter>
                <Icon icon="ant-design:ellipsis-outlined" />
              </template>
            </a-input>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
  <ScriptConfig @register="registerModal" @success="submitConfig" :disabled="disabled" />
</template>

<script lang="ts" setup>
  import { Icon } from '/@/components/Icon';
  import { useModal } from '/@/components/Modal';
  import ScriptConfig from './ScriptConfig.vue';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { inject, ref, unref } from 'vue';
  const { t } = useI18n();
  defineProps({
    disabled: { type: Boolean, default: false },
  });
  const select = inject('selectWidget', ref<any>({}));
  const render = [
    {
      name: t('选择事件'),
      type: 'select',
      comp: ['tree'],
    },
    {
      name: t('加载事件'),
      type: 'load',
      comp: ['tree'],
    },
    // {
    //   name: t('刷新事件'),
    //   type: 'refresh',
    //   comp: ['tree'],
    // },
    {
      name: t('查询事件'),
      type: 'search',
      comp: ['list'],
    },
  ];
  const [registerModal, { openModal }] = useModal();

  const showConfigModal = (val) => {
    openModal(true, {
      type: val,
      content: unref(select).options?.events ? unref(select).options.events[val] : '',
    });
  };

  const configTxt = (type) => {
    if (unref(select).options?.events && unref(select).options?.events[type]) {
      return t('已配置');
    } else {
      return '';
    }
  };
  const submitConfig = (type, value) => {
    if (unref(select).options?.events) {
      unref(select).options.events[type] = value;
    } else {
      unref(select).options.events = {
        [type]: value,
      };
    }
  };
</script>

<style lang="less" scoped>
  .event-box {
    margin-bottom: 12px;
    border: 1px solid #ddd;
    padding: 8px 10px;
    border-radius: 4px;
  }

  .event-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
  }
</style>
