<template>
  <PageLayout
    :hasOperationSlot="false"
    :searchConfig="searchConfig"
    :searchStyle="{
      padding: 0,
      margin: 0,
      borderBottom: '1px solid #DDD',
      borderRadius: 0,
    }"
    @search="search"
    @scroll-height="scrollHeight"
  >
    <template #search> </template>
    <template #right>
      <div
        class="overflow-y-auto overflow-x-hidden -mr-3"
        v-if="data.dataSource.length > 0"
        style="height: calc(100% - 52px)"
      >
        <div class="list-box">
          <div class="item" v-for="(item, index) in data.dataSource" :key="index">
            <div class="image"><img :src="item.backgroundUrl" /></div>

            <div class="main">
              {{ item.name }}
              <a-checkbox v-model:checked="item.checked" @change="handleCheck(item)" />
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <EmptyBox />
      </div>
      <div class="page-box">
        <a-pagination
          v-model:current="data.pagination.current"
          v-model:pageSize="data.pagination.pageSize"
          :total="data.pagination.total"
          show-less-items
          show-quick-jumper
          show-size-changer
          :show-total="(total) => t(`共 ${total} 条数据`)"
          @change="getList"
        />
      </div>
    </template>
  </PageLayout>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, watch } from 'vue';

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

  import { getRolePageList } from '/@/api/desktop';

  import { useI18n } from '/@/hooks/web/useI18n';
  const props = defineProps({
    checkedIds: { type: Array as PropType<String[]> },
  });
  const { t } = useI18n();
  const emit = defineEmits(['checked']);
  watch(
    () => props.checkedIds,
    () => {
      checkItems();
    },
    { deep: true },
  );
  const searchConfig = [
    {
      field: 'keyword',
      label: '',
      type: 'input',
      placeholder: t('请输入关键字'),
    },
  ];
  const { scrollHeight } = userTableScrollHeight();
  let data: {
    dataSource: Array<DesktopAuthPage>;
    renderKey: number;
    keyword: string;
    pagination: {
      current: number;
      total: number;
      pageSize: number;
    };
  } = reactive({
    dataSource: [],
    renderKey: 0,
    pagination: { current: 1, total: 0, pageSize: 8 },
    keyword: '',
  });
  onMounted(() => {
    data.pagination.current = 1;
    data.dataSource = [];
    getList();
  });
  async function getList() {
    let params = {
      limit: data.pagination.current,
      size: data.pagination.pageSize,
      keyword: data.keyword,
    };
    let res = await getRolePageList(params);
    data.dataSource = res.list;
    data.pagination.total = res.total;
    data.renderKey++;
    checkItems();
  }
  function checkItems() {
    data.dataSource.forEach((o) => {
      o.checked = false;
      if (props.checkedIds?.includes(o.id)) {
        o.checked = true;
      }
    });
  }
  function search(params?: any) {
    data.keyword = params.keyword;
    data.pagination.current = 1;
    data.dataSource = [];
    getList();
  }
  function handleCheck(item) {
    emit('checked', item);
  }
</script>
<style lang="less" scoped>
  .list-box {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;

    .item {
      position: relative;
      margin: 20px 20px 0 0;
      overflow: hidden;
      border-radius: 4px;
      width: 376px;
      height: 274px;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    .image {
      width: 100%;
      height: 224px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 16px;
      }
    }

    .main {
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      height: 50px;
      line-height: 14px;
      border-bottom: 1px solid #eee;
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
    }
  }

  .page-box {
    border-top: 1px solid rgb(238 238 238 / 93%);
    height: 52px;
    padding: 10px 0;
    text-align: right;
  }
</style>
