<template>
  <!-- 新增编辑 -->
  <common-modal
    :width="1200"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    wrapClassName="project-modal"
    title="快捷入口自定义"
    :body-style="{ paddingBottom: '8px', height: '70vh' }"
    @update:visible="updateVisible"
    @ok="save"
    maxable
    @close="updateVisible(false)"
  >
    <div class="quick-title">首页快捷入口（9/9）：</div>
    <div class="quick-select-list">
      <div class="quick-select-item" v-for="(item, index) in selectAppLinkList" :key="item.appLinkId">
        <a-image
          v-if="item?.linkIconFileId && item.iconType == 1"
          :preview="false"
          style="width: 60px; height: 60px"
          :src="props.filePreviewUrl + item.linkIconFileId"
          fit="fill"
        />
        <i :class="'quick-item-icon iconfont ' + item.iconCode" v-if="item.iconType == 2"></i>
        <span class="quick-item-name">{{ item?.linkName }}</span>
        <close-circle-filled class="remove" @click="removeItem(index)" />
      </div>
    </div>
    <div class="quick-title" style="margin-top: 24px">
      <span>全部应用</span>
      <a-input
        v-model:value="searchText"
        placeholder="请输入关键词（回车搜索）"
        @pressEnter="searchClick"
        style="height: 36px; width: 300px"
      >
        <template #prefix>
          <icon-font iconClass="icon-opt-search"></icon-font>
        </template>
      </a-input>
    </div>
    <div class="quick-all">
      <div v-for="item in appList" :key="item.id" :class="['app-item', { 'app-item-bb': !(item.show && item?.appLinkList?.length) }]">
        <div class="app-item-header">
          <a-space style="cursor: pointer" @click="changeShow(item)">
            <img :src="filePreviewUrl + item.categoryIconFileId" alt="" class="app-item-header-icon" v-if="item.iconType == 1" />
            <i :class="'app-item-header-icon iconfont ' + item.iconCode" v-if="item.iconType == 2"></i>
            <span class="app-item-header-categoryName">{{ item.categoryName }}</span>
            <down-outlined class="title-down" v-if="item.show" />
            <right-outlined class="title-down" v-if="!item.show" />
          </a-space>
        </div>
        <div class="app-item-content" v-if="item.show && item?.appLinkList?.length">
          <div
            :class="[
              'app-item-content-item',
              { 'item-select': selectAppLinkList.find(s => s.appLinkId == cItem.appLinkId) },
              { 'disable-use': !cItem.canUseFlag }
            ]"
            v-for="cItem in item?.appLinkList"
            :key="cItem.id"
            @click="selectClick(cItem)"
          >
            <div class="app-item-box">
              <img :src="filePreviewUrl + cItem.linkIconFileId" alt="" class="app-item-content-img" v-if="cItem.iconType == 1" />
              <i :class="'app-item-content-img iconfont ' + cItem.iconCode" v-if="cItem.iconType == 2"></i>
              <div class="app-item-content-name">{{ cItem.linkName }}</div>
            </div>
            <img
              src="@/assets/portal/app-select.svg"
              alt=""
              class="item-select-img"
              v-if="selectAppLinkList.find(s => s.appLinkId == cItem.appLinkId)"
            />
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="updateVisible(false)" class="border-radius grey" type="link" :loading="loading">取消</a-button>
        <a-button type="primary" @click="save" class="border-radius" :loading="loading">确定</a-button>
      </a-space>
    </template>
  </common-modal>
</template>

<script setup name="CustomQuick">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue/es';
import { AppCenterApi } from '@/views/app/api/AppCenterApi';
import { deepClone, searchTree } from '@/utils/common/util';

const props = defineProps({
  visible: Boolean,
  currentUserAppLinkList: Array,
  filePreviewUrl: String
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);

const selectAppLinkList = ref([]);

const appList = ref([]);

const oldAppList = ref([]);

const searchText = ref('');

onMounted(async () => {
  selectAppLinkList.value = deepClone(props.currentUserAppLinkList);
  getUserConfigList();
});

const getUserConfigList = () => {
  AppCenterApi.getUserConfigList().then(res => {
    appList.value = setData(res.data);
    oldAppList.value = deepClone(appList.value);
  });
};

const setData = arr => {
  if (arr?.length) {
    arr.forEach(item => {
      item.id = item.categoryId;
      item.name = item.categoryName;
      item.show = true;
      if (item?.appLinkList?.length) {
        item.appLinkList.forEach(a => {
          a.id = a.appLinkId;
          a.name = a.linkName;
        });
      }
    });
  }
  return arr;
};

// 搜索点击
const searchClick = () => {
  const arr = searchTree(appList.value, oldAppList.value, searchText.value, 'appLinkList', 'id', 'name');
  const data = deepClone(arr.resultList);
  appList.value = setData(data);
};

const changeShow = item => {
  item.show = !item.show;
};

// 删除
const removeItem = index => {
  selectAppLinkList.value.splice(index, 1);
};

const selectClick = item => {
  if (!item.canUseFlag) return;
  const flag = selectAppLinkList.value.find(s => s.appLinkId == item.appLinkId);
  if (flag) {
    selectAppLinkList.value.splice(
      selectAppLinkList.value.findIndex(s => s.appLinkId === item.appLinkId),
      1
    );
  } else {
    selectAppLinkList.value.push(item);
  }
};

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = async () => {
  loading.value = true;
  AppCenterApi.updateUserConfigList({ currentUserAppLinkList: selectAppLinkList.value })
    .then(async result => {
      loading.value = false;
      message.success(result.message);
      updateVisible(false);
      emits('done');
    })
    .catch(() => {
      loading.value = false;
    });
};
</script>

<style scoped lang="less">
.quick-title {
  color: #60666b;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quick-select-list {
  padding-top: 16px;
  width: 100%;
  display: flex;
  height: 136px;
  overflow-x: auto;

  .quick-select-item {
    position: relative;
    width: 124px;
    padding: 8px 28px;
    border-radius: 4px;
    border: 1px solid rgba(197, 207, 209, 0.4);

    &:not(:last-child) {
      margin-right: 16px;
    }

    .quick-item-icon {
      font-size: 60px;
      line-height: 60px;
    }

    .quick-item-name {
      margin-top: 12px;
      display: block;
      text-align: center;
      color: #43505e;
      font-size: 16px;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .remove {
      font-size: 20px;
      color: red;
      position: absolute;
      top: -10px;
      right: -10px;
      cursor: pointer;
    }
  }
}

.quick-all {
  margin-top: 16px;
  width: 100%;
  height: calc(100% - 246px);
  overflow-y: auto;

  .app-item {
    &:not(:last-child) {
      margin-bottom: 16px;
      padding-bottom: 8px;
    }
    .app-item-header {
      .app-item-header-icon {
        font-size: 24px;
        line-height: 24px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }
      .app-item-header-categoryName {
        color: #60666b;
        font-size: 16px;
      }
      .title-down {
        color: #838a8f;
        margin-top: 6px;
      }
    }
    .app-item-content {
      margin-top: 16px;
      width: 100%;
      border-radius: 4px;
      display: flex;
      flex-wrap: wrap;

      .app-item-content-item {
        width: calc(100% / 5 - 24px);
        padding: 12px 16px;
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 8px;
        margin-right: 24px;
        margin-bottom: 16px;
        border: 1px solid #c5cfd166;
        position: relative;

        .item-select-img {
          position: absolute;
          top: -1px;
          right: 0;
        }

        .app-item-box {
          width: 100%;
          display: flex;
          align-items: center;
        }

        .app-item-content-img {
          font-size: 42px;
          line-height: 42px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          margin-right: 8px;
        }
        .app-item-content-name {
          flex: auto;
          color: #43505e;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .item-select {
        border: 1px solid #6f9ae7;
      }
    }
  }

  .app-item-bb {
    border-bottom: 1px solid rgba(197, 207, 209, 0.4);
  }
}
.disable-use {
  cursor: not-allowed !important;
  .app-item-content-name {
    color: #bfbfbf !important;
  }
}
</style>
