<!--应用入口 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">
      <div class="describe">
        <span>本界面只配置界面展示的链接预览，具体链接的维护，请在 "门户后台" - "链接" 菜单进行链接URL的维护。</span>
      </div>

      <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 label="链接分类" name="selectCateList">
          <plus-circle-outlined
            style="font-size: 18px; color: #1890ff; cursor: pointer; margin-bottom: 6px; margin-top: 6px"
            @click="handleSelectModal"
          />

          <a-spin :spinning="detailLoading" style="position: absolute; left: 50%; top: 50%" />

          <a-empty v-if="formData.selectCateList.length === 0" />

          <div class="drag-list" v-else>
            <vue-draggable v-model="formData.selectCateList" item-key="id" :animation="300" handle=".sort-handle">
              <template #item="{ element }">
                <div class="drag-list-item">
                  <div class="sort-handle">
                    <drag-outlined />
                  </div>
                  <div class="drag-list-item-title text-ellipsis-1">{{ element.name }}</div>
                  <icon-font
                    font-size="24px"
                    type="class"
                    icon-class="icon-remove-circle-outlin"
                    color="red"
                    @click="selectRemove(element)"
                  ></icon-font>
                </div>
              </template>
            </vue-draggable>
          </div>
        </a-form-item>
        <a-form-item label="每行个数" name="span">
          <a-input-number v-model:value="formData.config.span" placeholder="请输入每行个数" style="width: 100%;"></a-input-number>
        </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>

    <!-- 分类选择弹窗-->
    <select-modal
      title="选择应用链接分类"
      type="applink"
      v-model:visible="showSelectModal"
      :check-list="checkList"
      v-if="showSelectModal"
      @done="selectDone"
    >
    </select-modal>
  </common-drawer>
</template>

<script setup name="AppEnterWidgetPanel">
import { inject, onMounted, ref, watch, defineAsyncComponent } from 'vue';
import VueDraggable from 'vuedraggable';
import { message } from 'ant-design-vue';
import { constant } from '@/views/portal/constant/constant';

const SelectModal = defineAsyncComponent(() => import('../components/select-modal.vue'));

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

const currentWidget = inject('currentWidget');
const designId = inject('designId');

// dom
const formRef = ref(null);

// 标题
const title = ref(constant.APPLICATION_ENTRANCE);
// 标题输入框dom
const titleInputRef = ref(null);
// 是否编辑标题
const titleEdit = ref(false);
// 表单
const formData = ref({
  selectCateList: [],
  config: {
    span: 4,
    borderLeft: '1px solid #e5e5e5',
    borderRight: '1px solid #e5e5e5',
    borderTop: '1px solid #e5e5e5',
    borderBottom: '1px solid #e5e5e5',
    showHeader: true,
  }
});
// 配置详情加载状态
const detailLoading = ref(false);
// 保存按钮加载状态
const saveLoading = ref(false);
// 是否显示分类选择弹窗
const showSelectModal = ref(false);
// 分类选择弹窗选中的分类
const checkList = ref([]);

/**
 * 检测选择的分类
 * @param rule
 * @param _
 * @returns {Promise<never>|Promise<void>}
 */
const checkSelectCateList = (rule, _) => {
  if (formData.value.selectCateList.length === 0) {
    return Promise.reject(rule.message);
  }
  return Promise.resolve();
};

// 验证规则
const rules = ref({
  selectCateList: [{ required: true, message: '请选择链接分类', validator: checkSelectCateList, trigger: 'change' }]
});

/**
 * 显示选择分类弹窗
 */
const handleSelectModal = () => {
  showSelectModal.value = true;
};

/**
 * 选择弹窗关闭
 */
const selectDone = selectList => {
  formData.value.selectCateList = selectList;
  let _checkList = [];
  selectList.forEach(item => {
    _checkList.push(item.id);
  });
  checkList.value = _checkList;
};

/**
 *  移除选择的分类
 * @param row
 */
const selectRemove = row => {
  let index = formData.value.selectCateList.findIndex(item => item.id === row.id);
  if (index > -1) {
    formData.value.selectCateList.splice(index, 1);
  }
};

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

  let widgetId = currentWidget.value.widget.id;
  let param = {
    elementId: widgetId,
    designId: designId.value,
    elementName: title.value,
    selectCateList: formData.value.selectCateList,
    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;
    formData.value.selectCateList = param.selectCateList;
  }
});

watch(
  () => formData.value.selectCateList,
  () => {
    let _list = [];
    formData.value.selectCateList.forEach(item => {
      _list.push(item.id);
    });
    checkList.value = _list;
  },
  { deep: true }
);
</script>

<style scoped lang="less">
.drag-list {
  border: 1px solid hsla(0, 0%, 60%, 0.2);
}

.drag-list-item {
  width: 100%;
  height: 55px;
  line-height: 55px;
  padding: 0 5px;
  display: flex;
  align-items: flex-start;
}

.drag-list-item + .drag-list-item {
  border-top: 1px solid hsla(0, 0%, 60%, 0.2);
}

.drag-list-item.sortable-chosen {
  background: hsla(0, 0%, 60%, 0.1);
}

.sort-handle {
  text-align: center;
  width: 45px;
  height: 100%;
  margin-right: 5px;
  padding-right: 5px;
  cursor: move;
  font-size: 16px;
  border-right: 1px solid hsla(0, 0%, 60%, 0.2);
}

.drag-list-item-title {
  flex: 1;
}

.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>
