<!--应用入口 widget 配置面板-->
<template>
  <common-drawer :width="800" :visible="true" @close="close" :mask="true" :mask-closable="true" :isShowTab="false">
    <template #title>
      <template v-if="titleEdit">
        <a-input
          v-focus
          type="text"
          v-model:value="title"
          @blur="editTitle"
          @keydown.enter="editTitle"
          autofocus="autofocus"
          ref="titleInputRef"
        />
      </template>
      <template v-else>
        <span style="cursor: pointer" @click="titleClick">{{ title }}</span>
        <span style="padding-left: 5px; cursor: pointer" @click="titleClick"><edit-outlined /></span>
      </template>
    </template>

    <div class="main">
      <a-form :model="formData" :rules="rules" ref="formRef" :label-col="{ span: 4 }" autocomplete="off">
        <a-form-item label="是否显示头部">
          <a-select ref="select" v-model:value="formData.config.showHeader" style="width: 100%">
            <a-select-option :value="true">是</a-select-option>
            <a-select-option :value="false">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="左边框样式">
          <a-input v-model:value="formData.config.borderLeft" placeholder="请输入左边框样式"></a-input>
        </a-form-item>
        <a-form-item label="右边框样式">
          <a-input v-model:value="formData.config.borderRight" placeholder="请输入右边框样式"></a-input>
        </a-form-item>
        <a-form-item label="上边框样式">
          <a-input v-model:value="formData.config.borderTop" placeholder="请输入上边框样式"></a-input>
        </a-form-item>
        <a-form-item label="下边框样式">
          <a-input v-model:value="formData.config.borderBottom" placeholder="请输入下边框样式"></a-input>
        </a-form-item>
        <a-form-item class="saveBtn" label=" " :label-col="{ span: 4 }">
          <a-button :loading="saveLoading" type="primary" html-type="submit" @click="save">保存</a-button>
        </a-form-item>
      </a-form>
    </div>
  </common-drawer>
</template>

<script setup name="CommonWidgetPanel">
import { inject, onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';

const emits = defineEmits(['close', 'updateWidget']);

const currentWidget = inject('currentWidget');

const designId = inject('designId');

// dom
const formRef = ref(null);

// 标题
const title = ref();
// 标题输入框dom
const titleInputRef = ref(null);
// 是否编辑标题
const titleEdit = ref(false);
// 表单
const formData = ref({
  config: {
    borderLeft: '1px solid #e5e5e5',
    borderRight: '1px solid #e5e5e5',
    borderTop: '1px solid #e5e5e5',
    borderBottom: '1px solid #e5e5e5',
    showHeader: true
  }
});
// 保存按钮加载状态
const saveLoading = ref(false);

// 验证规则
const rules = ref({});

/**
 * 保存
 */
const save = async () => {
  await formRef.value.validate();

  let widgetId = currentWidget.value.widget.id;
  let param = {
    elementId: widgetId,
    designId: designId.value,
    elementName: title.value,
    config: formData.value.config
  };

  currentWidget.value.widget.param = param;
  saveLoading.value = true;
  message.success('操作成功');
  saveLoading.value = false;
  emits('updateWidget', widgetId);
  close();
};

/**
 * 修改标题
 */
const editTitle = () => {
  // 关闭标题编辑框
  titleEdit.value = false;
};

// 标题点击
const titleClick = () => {
  titleEdit.value = true;
};

/**
 * 关闭
 */
const close = () => {
  emits('close', false);
};

onMounted(() => {
  let componentName = currentWidget.value.widget.componentName;
  if (componentName) {
    title.value = componentName;
  }

  if (currentWidget.value.widget?.param) {
    const { param } = currentWidget.value.widget;
    title.value = param.elementName;
    formData.value.config = param.config;
  }
});
</script>

<style scoped lang="less">
.saveBtn {
  :deep(.ant-form-item-label > label::after) {
    content: '';
  }
}

:deep(.ant-drawer-mask) {
  background-color: rgba(255, 255, 255, 0);
}

.describe {
  margin-bottom: 16px;
  background: #fffbe6;
  padding: 4px 16px;
  text-align: center;
  color: #60666b;
  border-radius: 4px;
}
</style>
