<template>
  <div>
    <a-row type="flex" align="middle">
      <a-col :span="8">
        <span>{{ t('列表样式配置') }}</span>
      </a-col>
      <a-col :span="15" :offset="1">
        <a-input
          :placeholder="t('点击配置列表样式')"
          :value="props.select.options.listStyle ? t('已配置') : t('点击配置列表样式')"
          @click="showConfigModal()"
        >
          <template #addonAfter>
            <Icon icon="ant-design:ellipsis-outlined" />
          </template>
        </a-input>
      </a-col>
    </a-row>
  </div>
  <ListSettingConfig @register="registerModal" @success="submitConfig" :disabled="disabled" />
</template>

<script lang="ts" setup>
  import { Icon } from '/@/components/Icon';
  import { useModal } from '/@/components/Modal';
  import ListSettingConfig from './settings/ListSettingConfig.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const props = defineProps({
    select: { type: Object, default: {} },
    widgetForm: { type: Object, default: {} },
    disabled: { type: Boolean, default: false },
  });
  const [registerModal, { openModal }] = useModal();

  const showConfigModal = () => {
    openModal(true, {
      content: props.select.options.listStyle,
      list: props.widgetForm?.list,
    });
  };

  const submitConfig = (value) => {
    props.select.options.listStyle = value;
  };
</script>

<style lang="less" scoped>
  .event-box {
    margin-bottom: 25px;
  }

  .event-title {
    margin: 5px 0 10px 10px;
    font-size: 14px;
    line-height: 16px;
    padding-left: 6px;
    border-left: 6px solid #5e95ff;
  }

  :deep(.ant-input-group .ant-input) {
    color: #999;
  }
</style>
