<template>
  <page-view has-bread has-card>
    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
      <filter-search-item label="名称">
        <a-input v-model="filter.name" placeholder="请输入" allow-clear />
      </filter-search-item>
      <filter-search-item label="展示位置">
        <a-select v-model="filter.scope" :options="scopeOption" placeholder="请选择" allow-clear />
      </filter-search-item>
      <filter-search-item label="浏览用户">
        <RoleSelect ref="roleRef" v-model="filter.permission" :max-tag-count="2" style="height: 32px" />
      </filter-search-item>
      <filter-search-item label="状态">
        <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
      </filter-search-item>
    </filter-search>
    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
      <template #tool>
        <icon-button v-permission="['operation-banner-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
      </template>
      <a-table-column data-index="cover" title="图片" :width="220">
        <template #cell="{ record }">
          <a-image style="margin: 8px" :src="record.cover" :width="180" :height="80" fit="fill" />
        </template>
      </a-table-column>
      <filter-table-column title="名称" data-index="name" :width="200" />
      <enum-table-column title="展示位置" :option="scopeOption" data-index="scope" :width="120" />
      <filter-table-column title="权重" data-index="weight" :width="80" />
      <filter-table-column title="浏览用户" data-index="permission" :width="220">
        <template #default="{ record }">{{ formatRole(record.permission) }}</template>
      </filter-table-column>
      <enum-table-column title="类型" :option="typeOption" data-index="type" :width="80" />
      <date-table-column data-index="created_at" title="创建时间" :width="100" split />
      <enum-table-column title="状态" :option="statusOption" data-index="status" :width="80" />
      <space-table-column
        v-if="usePermission().checkPermission(['operation-banner-edit', 'operation-banner-delete'])"
        :width="120"
        data-index="operations"
        title="操作"
      >
        <template #default="{ record }">
          <a-link
            v-permission="['operation-banner-edit']"
            class="link-hover"
            :hoverable="false"
            @click="onChange(record, Number(!record.status))"
          >
            {{ formatStatus(Number(!record.status)) }}
          </a-link>
          <a-link v-permission="['operation-banner-edit']" :hoverable="false" class="link-hover" @click="onUpdate(record)">编辑</a-link>
          <a-link v-permission="['operation-banner-delete']" :hoverable="false" class="link-hover" @click="onDelete(record)">删除</a-link>
        </template>
      </space-table-column>
    </filter-table>
  </page-view>
</template>

<script lang="ts" setup>
  import { ref, onMounted, createVNode } from 'vue';

  import useLoading from '@/hooks/loading';
  import useBannerApi from '@/http/bannner';
  import { AnyObject, AttributeData } from '@/types/global';
  import { createModalVNode, createSelectionFormItemVNode } from '@/utils/createVNode';
  import { cloneDeep, find } from 'lodash';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import FormBasicContent from '@/views/operation/banner/components/form-basic-content.vue';
  import FormListContent from '@/views/operation/banner/components/form-list-content.vue';
  import FormPageContent from '@/views/operation/banner/components/form-page-content.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
  import { TableData } from '@arco-design/web-vue';
  import usePermission from '@/hooks/permission';
  import DateTableColumn from '@/components/filter/date-table-column.vue';
  import { promiseToBoolean } from '@/utils';
  import RoleSelect from '@/views/operation/banner/components/role-select.vue';

  const { scopeOption, typeOption, statusOption, get, changeStatus, create, update, destroy } = useBannerApi;

  const { loading, setLoading } = useLoading(false);
  const filter = ref({ name: '', scope: '', permission: [], status: '' });
  const tableRef = ref();
  const roleRef = ref();

  // const formatPermission = (permisson) => {};

  const formatRole = (role: string[]) => roleRef.value?.formatRole(role);
  // role
  //   .map((item) => find(roleOption, { value: item })?.label || '')
  //   .filter((item) => item.length !== 0)
  //   .join('、');

  const formatStatus = (status: number) => find(statusOption, { value: status })?.label || '未知';

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    return get({ ...filter.value, ...params, sortBy: 'weight', sortType: 'desc' }).finally(() => setLoading(false));
  };

  const onSearch = () => tableRef.value?.onPageChange(1);

  const onReset = () => {
    filter.value = { name: '', scope: '', permission: [], status: '' };
    onSearch();
  };

  onMounted(() => onReset());

  const getTemplateComponent = (type: number) => {
    if (type === 3) {
      return FormListContent;
    }
    if (type === 4) {
      return FormPageContent;
    }

    return FormBasicContent;
  };

  const onShowModal = (title: string, template: any, templateProp: any) => {
    const formRef = ref();

    createModalVNode(() => createVNode(template, { ref: formRef, ...templateProp }), {
      title,
      titleAlign: 'center',
      width: 'auto',
      onBeforeOk: () => formRef.value?.onSubmit(),
      onOk: () => tableRef.value?.onFetch(),
    });
  };

  const onCreate = () => {
    const type = ref<number>(1);
    const show = ref(false);
    const options = [
      { value: 1, label: '普通或外链' },
      { value: 3, label: '交互' },
      { value: 4, label: '自定义H5页面' },
    ];

    createModalVNode(() => createSelectionFormItemVNode(type, options, { label: '类型', rowClass: 'mb-0' }), {
      title: '新增',
      onOk: () => {
        show.value = true;
      },
      onClose: () => {
        if (show.value) {
          onShowModal('新增Banner', getTemplateComponent(type.value), { http: (value: AttributeData) => create(value) });
        }
      },
    });
  };

  const onUpdate = (row: TableData) =>
    onShowModal('编辑Banner', getTemplateComponent(row.type), {
      init: cloneDeep(row),
      http: (value: AttributeData) => update(row.id, value),
    });

  const onChange = (row: TableData, status: number) =>
    createModalVNode(`${find(statusOption, { value: status })?.label}轮播图：${row.name}`, {
      title: '状态变更',
      onBeforeOk: () => promiseToBoolean(changeStatus(row.id, { status })),
      onOk: () => {
        row.status = status;
      },
    });

  const onDelete = (row: TableData) =>
    createModalVNode(`删除轮播图：${row.name}`, {
      title: '删除操作',
      onBeforeOk: () => promiseToBoolean(destroy(row.id)),
      onOk: () => tableRef.value?.onFetch(),
    });
</script>

<style scoped></style>