<!--轮播图 widget 配置面板-->
<template>
  <div>
    <!-- 编辑 -->
    <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>本界面配置轮播图展示的内容，具体轮播图的录入，请在 “门户后台”- “轮播图”菜单下维护。</span>
        </div>

        <a-form :model="formData" :rules="rules" ref="formRef" layout="vertical" :label-col="{ span: 24 }" 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="playInterval">
            <a-select ref="select" v-model:value="formData.config.playInterval" style="width: 100%">
              <a-select-option :value="1">1秒</a-select-option>
              <a-select-option :value="2">2秒</a-select-option>
              <a-select-option :value="3">3秒</a-select-option>
              <a-select-option :value="4">4秒</a-select-option>
              <a-select-option :value="5">5秒</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="轮播图内容标题是否展示" name="imageTitleDisplayFlag">
            <a-select ref="select" v-model:value="formData.config.imageTitleDisplayFlag" style="width: 100%">
              <a-select-option value="Y">展示</a-select-option>
              <a-select-option value="N">不展示</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="轮播图内容" name="selectSlideshowList">
            <plus-circle-outlined
              style="font-size: 24px; color: #1890ff; cursor: pointer; margin-bottom: 6px"
              @click="handleRotationSelectModal"
            />

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

            <div class="drag-list" v-else>
              <vue-draggable v-model="formData.selectSlideshowList" 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-opt-shanchu"
                      color="red"
                      @click="selectRemove(element)"
                    ></icon-font>
                  </div>
                </template>
              </vue-draggable>
            </div>
          </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>

    <!--轮播图选择弹窗-->
    <select-modal
      title="选择轮播图"
      type="rotation"
      v-model:visible="showRotationSelectModal"
      :check-list="checkList"
      v-if="showRotationSelectModal"
      @done="selectRotationDone"
    >
    </select-modal>
  </div>
</template>

<script setup name="RotationWidgetPanel">
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.CAROUSEL);
// 标题输入框dom
const titleInputRef = ref(null);
// 是否编辑标题
const titleEdit = ref(false);
// 是否显示轮播图选择弹窗
const showRotationSelectModal = ref(false);
// 选中的列表
const checkList = ref([]);
// 保存按钮加载状态
const saveLoading = ref(false);

// 表单数据
const formData = ref({
  selectSlideshowList: [],
  config: {
    borderLeft: '1px solid #e5e5e5',
    borderRight: '1px solid #e5e5e5',
    borderTop: '1px solid #e5e5e5',
    borderBottom: '1px solid #e5e5e5',
    showHeader: true,
    // 是否展示轮播图图片标题
    imageTitleDisplayFlag: 'N',
    // 播放间隔
    playInterval: 3
  }
});

/**
 * 验证是否选择轮播图
 * @param rule
 * @param value
 * @returns {Promise<void>}
 */
const checkSelectSlideshowList = async (rule, _) => {
  if (formData.value.selectSlideshowList.length === 0) {
    return Promise.reject(rule.message);
  }
  return Promise.resolve();
};

// 表单验证规则
const rules = ref({
  selectSlideshowList: [{ required: true, message: '请选择轮播图', validator: checkSelectSlideshowList, trigger: 'change' }]
});

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

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

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

/**
 * 点击显示弹窗
 */
const handleRotationSelectModal = () => {
  showRotationSelectModal.value = true;
};

/**
 * 选择轮播图弹框中选中的轮播图列表
 * @param selectList
 */
const selectRotationDone = selectList => {
  formData.value.selectSlideshowList = selectList;

  let _checkList = [];
  selectList.forEach(item => {
    _checkList.push(item.id);
  });
  checkList.value = _checkList;
};

/**
 * 移除
 * @param row
 */
const selectRemove = row => {
  let index = formData.value.selectSlideshowList.findIndex(item => item.id === row.id);
  if (index > -1) {
    formData.value.selectSlideshowList.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,
    selectSlideshowList: formData.value.selectSlideshowList,
    config: formData.value.config
  };

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

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.selectSlideshowList = param.selectSlideshowList;
  }
});

watch(
  () => formData.value.selectSlideshowList,
  () => {
    let _list = [];
    formData.value.selectSlideshowList.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>
