<template>
  <BasicModal
    v-bind="$attrs"
    destroy-on-close
    @register="registerModal"
    :title="t('首页授权')"
    width="1200px"
    :fixedHeight="true"
    @ok="handleSubmit"
  >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" :tab="t('首页列表')">
        <div class="h-full" v-if="activeKey == '1'"
          ><HomeList @checked="handleChange" :checkedIds="checkedIds"
        /></div>
      </a-tab-pane>
      <a-tab-pane key="2" :tab="t('已选首页')">
        <div>
          <PageLayout
            :hasOperationSlot="false"
            :hasSearchSlot="false"
            @scroll-height="scrollHeight"
          >
            <template #right>
              <div v-if="dataSource.length > 0">
                <a-row
                  :gutter="16"
                  class="list-box"
                  :style="{ overflowY: 'auto', maxHeight: tableOptions.scrollHeight + 70 + 'px' }"
                >
                  <a-col :span="6" class="item" v-for="(item, index) in dataSource" :key="index">
                    <div class="image"><img :src="item.backgroundUrl" /></div>

                    <div class="main">
                      <a-checkbox v-model:checked="item.checked" @change="handleChecked(item)">{{
                        item.name
                      }}</a-checkbox>
                    </div>
                  </a-col>
                </a-row>
              </div>
              <div v-else>
                <EmptyBox />
              </div>
            </template>
          </PageLayout>
        </div>
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>
<script lang="tsx" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import HomeList from './HomeList.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageLayout, EmptyBox } from '/@/components/ModalPanel';
  import { addRoleHomeAuth, getRoleHomeAuth } from '/@/api/system/role';
  import { useI18n } from '/@/hooks/web/useI18n';
  import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';

  import { DesktopAuthPage } from '/@/api/desktop/model';

  const { t } = useI18n();
  const activeKey = ref('1');
  const emit = defineEmits(['success', 'register']);
  const { tableOptions, scrollHeight } = userTableScrollHeight();

  const dataSource = ref<DesktopAuthPage[]>([]);
  const { notification } = useMessage();
  const checkedIds = ref<string[]>([]);
  const rowId = ref();

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    activeKey.value = '1';
    rowId.value = data.id;
    let res = await getRoleHomeAuth(data.id);
    dataSource.value = [];
    checkedIds.value = [];
    if (res) {
      res.forEach((o) => {
        o.checked = true;
        dataSource.value.push(o);
        checkedIds.value.push(o.id);
      });
    }
  });

  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true });
      let ids: string[] = [];
      dataSource.value.forEach((o) => {
        ids.push(o.id);
      });
      await addRoleHomeAuth(rowId.value, ids);
      notification.success({
        message: t('首页授权成功'),
        description: t('成功'),
      }); //提示消息

      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  function handleChange(v) {
    if (v.checked) {
      let obj = dataSource.value.find((o) => {
        return o.id == v.id;
      });
      if (!obj) {
        dataSource.value.push(v);
      }
    } else {
      let idx = dataSource.value.findIndex((o) => {
        return o.id == v.id;
      });
      if (idx >= 0) {
        dataSource.value.splice(idx, 1);
      }
    }
  }
  function handleChecked(v) {
    if (!v.checked) {
      let idx = dataSource.value.findIndex((o) => {
        return o.id == v.id;
      });
      if (idx >= 0) {
        dataSource.value.splice(idx, 1);
      }
      checkedIds.value = [];
      dataSource.value.forEach((o) => {
        checkedIds.value.push(o.id);
      });
    }
  }
</script>
<style lang="less" scoped>
  .ant-tabs {
    padding: 0 16px;
    height: 100%;

    :deep(.ant-tabs-nav) {
      height: 50px;
      margin-bottom: 0;

      &::before {
        border-bottom: 1px solid #ddd;
      }
    }

    :deep(.ant-tabs-content) {
      height: calc(100% - 52px);
    }
  }

  .list-box {
    display: flex;
    flex-wrap: wrap;
    margin: 10px -8px;

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

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

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

      img {
        width: 100%;
        height: 100%;
      }
    }

    .main {
      font-size: 12px;
      text-align: center;
      line-height: 40px;
    }
  }
</style>
