<template>
  <PageLayout
    layout-class="!pl-0 "
    :hasOperationSlot="false"
    :searchConfig="searchConfig"
    :searchStyle="{
      borderBottom: '1px solid #DDD',
      margin: 0,
      borderRadius: 0,
    }"
    @search="search"
    @scroll-height="scrollHeight"
  >
    <template #search> </template>
    <template #right>
      <div v-if="data.dataSource.length > 0">
        <a-radio-group v-model:value="data.checked" style="width: 100%" @change="handleChange">
          <a-row
            :gutter="20"
            class="list-box"
            :style="{ overflowY: 'auto', maxHeight: tableOptions.scrollHeight + 70 + 'px' }"
            :key="data.renderKey"
          >
            <a-col :span="6" class="item" v-for="(item, index) in data.dataSource" :key="index">
              <div class="image relative">
                <a-image
                  width="100%"
                  height="100%"
                  :src="item.backgroundUrl"
                  :preview="false"
                  fallback="data:image/png;base64,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"
                />
                <div color="processing" v-if="data.checked === item.id" class="homeposit"
                  >默认首页</div
                >
              </div>

              <div class="main"> {{ item.name }} <a-radio :value="item.id" /> </div>
            </a-col>
          </a-row>
        </a-radio-group>
        <!-- <div class="page-box">
          <a-pagination
            v-model:current="data.pagination.current"
            :pageSize="data.pagination.pageSize"
            :total="data.pagination.total"
            show-less-items
            @change="getList"
          />
        </div> -->
      </div>
      <div v-else>
        <EmptyBox />
      </div>
    </template>
  </PageLayout>
</template>
<script lang="ts" setup>
  import { onMounted, reactive } from 'vue';

  import { DesktopPageModel } from '/@/api/desktop/model';
  import { PageLayout, EmptyBox } from '/@/components/ModalPanel';
  import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { getRolePrivateHome, setPrivateHome } from '/@/api/system/role';
  import { notification } from 'ant-design-vue';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { useUserStore } from '/@/store/modules/user';

  const { t } = useI18n();

  const searchConfig = [
    {
      field: 'keyword',
      label: t('关键字'),
      type: 'input',
    },
  ];
  const { tableOptions, scrollHeight } = userTableScrollHeight();
  let data: {
    dataSource: Array<DesktopPageModel>;
    renderKey: number;
    keyword: string;
    checked: string;
    // pagination: {
    //   current: number;
    //   total: number;
    //   pageSize: number;
    // };
  } = reactive({
    dataSource: [],
    renderKey: 0,
    //pagination: { current: 1, total: 0, pageSize: 8 },
    keyword: '',
    checked: '',
  });

  const userStore = useUserStore();
  const userInfo = userStore.getUserInfo;
  onMounted(async () => {
    //data.pagination.current = 1;
    data.dataSource = [];
    await getList();
    setFirstHome();
    let idx = data.dataSource.findIndex((o) => o.id == data.checked);
    if (idx < 0) {
      let obj = data.dataSource.find((o) => o.isFirst == 1);
      if (obj) {
        await handleChange({ target: { value: obj.id } }, false);
        setFirstHome();
      }
    }
  });
  async function getList() {
    let params = {
      //limit: data.pagination.current,
      //size: data.pagination.pageSize,
      keyword: data.keyword,
    };
    let res = await getRolePrivateHome(params);
    data.dataSource = res;

    // data.pagination.total = res.total;
    data.renderKey++;
  }

  function search(params?: any) {
    data.keyword = params.keyword;
    // data.pagination.current = 1;
    data.dataSource = [];
    getList();
  }
  function setFirstHome() {
    data.checked = userInfo.desktopSchema.id;
  }
  async function handleChange(v, showMsg = true) {
    try {
      await setPrivateHome({ desktopId: v.target.value });
      if (showMsg) {
        notification.success({
          message: t('提示'),
          description: t('修改首页成功'),
        });
      }
      const permissionStore = usePermissionStore();
      await permissionStore.changePermissionCode();
    } catch (error) {
      if (showMsg) {
        notification.error({
          message: t('提示'),
          description: t('修改首页失败'),
          onClose: () => {
            setFirstHome();
          },
        });
      } else {
        setFirstHome();
      }
    }
  }
</script>
<style lang="less" scoped>
  .list-box {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 10px 0 !important;

    .ant-row {
      margin: 0 !important;
    }

    .item {
      position: relative;
      margin-bottom: 20px;
      overflow: hidden;
      border-radius: 4px;
    }

    .image {
      width: 100%;
      height: 224px;
      border-radius: 16px;
    }

    .main {
      font-size: 14px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 50px;
      border-bottom: 1px solid #eee;
      padding-bottom: 12px;
    }

    .homeposit {
      width: 90px;
      height: 35px;
      line-height: 35px;
      background: #dcedff;
      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
      border-radius: 0 16px;
      color: @primary-color;
      font-size: 12px;
      text-align: center;
      font-weight: bold;
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .page-box {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  :deep(.ant-image) {
    img {
      border-radius: 16px;
    }
  }

  :deep(.ant-radio-inner) {
    border-color: #c3c8cf;
  }

  :deep(.ant-radio-checked .ant-radio-inner) {
    background: @primary-color;

    &::after {
      background: #fff;
    }
  }
</style>
