<template>
  <div>
    <div v-if="!isAdmin(role)">
      <div>
        <template v-for="item in helpDoc" :key="item.title">
          <AnchorLink v-bind="item" />
        </template>
      </div>
      <Card
        :tab-list="tabListTitle"
        v-bind="$attrs"
        :bordered="false"
        :bodyStyle="{ padding: 0 }"
        :headStyle="{ padding: 0 }"
      >
        <List item-layout="horizontal" :dataSource="dataSource">
          <template #renderItem="{ item }">
            <ListItem>
              <ListItemMeta>
                <template #avatar>
                  <Avatar
                    :src="item.user.avatar ?? 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640'"
                    size="large"
                  />
                </template>
                <template #description>
                  <span
                    class="cursor-pointer noticeTitle"
                    @click="go('/stationnotification/mynotification')"
                    >{{ item.sysNotice.title }}
                  </span>
                </template>
                <template #title>
                  <span>{{ item.sysNotice.senderName }}</span>
                </template>
              </ListItemMeta>
              <template #extra>
                <Time :value="item.sysNotice.senderDate" />
              </template>
            </ListItem>
          </template>
        </List>
      </Card>
      <Card title="联系我们" :bordered="false" v-bind="$attrs" :headStyle="{ padding: 0 }">
        <template #cover>
          <img :src="getQrCode" alt="" style="width: 150px; height: 150px; margin: 50px auto" />
        </template>
        <CardMeta>
          <template #description>
            <p>联系人: {{ getContacts }}</p>
            <p>联系电话: {{ getTel }}</p>
            <p>联系地址: {{ getAddress }} </p>
          </template>
        </CardMeta>
      </Card>
    </div>

    <Card v-else :bordered="false" :bodyStyle="{ padding: 0 }" v-bind="$attrs">
      <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px" class="mb-2">
        租户消息量TOP10</h1
      >
      <Empty v-if="!tenantTop10.length" />
      <Descriptions :column="1">
        <template v-for="(item, index) in tenantTop10" :key="item.name">
          <DescriptionsItem>
            <span
              style="
                width: 1.25rem;
                height: 1.25rem;
                border: 1px solid;
                color: #0b55f1;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 13px;
              "
              :style="{
                color:
                  index === 0
                    ? '#f0a16e'
                    : index === 1
                    ? '#868585'
                    : index === 2
                    ? '#e78739'
                    : '#4e84f5',
                backgroundColor:
                  index === 0 ? '#FAD672' : index === 1 ? '#CBCAC9' : index === 2 ? '#F1B889' : '',
                borderColor:
                  index === 0
                    ? '#fdee7d'
                    : index === 1
                    ? '#e6e6e5'
                    : index === 2
                    ? '#f8c296'
                    : '#0b55f1;',
              }"
              >{{ index + 1 }}</span
            >
            <div class="flex justify-between" style="width: 100%; margin-left: 0.625rem">
              <span>
                {{ item.name }}
              </span>
              <span :style="{ color: index === 0 ? '#EA5B42' : index === 2 ? '#E4751A' : '#666' }">
                {{ item.count }}
              </span>
            </div>
          </DescriptionsItem>
        </template>
      </Descriptions>
      <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
        本月即将过期租户</h1
      >
      <BasicTable @register="registerTable" />
    </Card>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, onMounted } from 'vue';
  import { Card, Anchor, List, Avatar, Descriptions, Empty } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import { getEnterPriseDetail } from '/@/api/oem';
  import { notifyMyGetrPageApi } from '/@/api/stationnotification/stationnotifyApi';
  import { Time } from '/@/components/Time';
  import { useGo } from '/@/hooks/web/usePage';
  import { BasicTable, useTable } from '/@/components/Table';
  import { isAdmin } from '/@/enums/roleEnum';
  import { getTenantExpireTimeList, getTenantTop10 } from '/@/api/dashboard';
  export default defineComponent({
    components: {
      Card,
      Empty,
      CardMeta: Card.Meta,
      AnchorLink: Anchor.Link,
      List,
      ListItem: List.Item,
      ListItemMeta: List.Item.Meta,
      Descriptions,
      DescriptionsItem: Descriptions.Item,
      Avatar,
      Time,
      BasicTable,
    },
    props: {
      role: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      // 通知数据
      const dataSource = ref([]);
      const go = useGo();

      const helpDoc = ref([
        {
          title: '如何接入设备?',
          href: '',
        },
        {
          title: '什么是设备配置?',
          href: '',
        },
        {
          title: '云组态模板如何使用?',
          href: '',
        },
        {
          title: '查看全部>>',
          href: '',
        },
      ]);

      const activeKey = ref('tab1');
      const tabListTitle = [
        {
          key: 'tab1',
          tab: '我的通知',
        },
      ];

      const [registerTable] = useTable({
        api: getTenantExpireTimeList,
        showIndexColumn: false,
        useSearchForm: false,
        bordered: true,
        columns: [
          {
            title: '租户名称',
            dataIndex: 'name',
            width: 120,
          },
          {
            title: '过期时间',
            dataIndex: 'tenantExpireTime',
            width: 120,
          },
        ],
        canResize: false,
        maxHeight: 500,
        resizeHeightOffset: 200,
        pagination: {
          showSizeChanger: false,
          showQuickJumper: false,
          showTotal: () => false,
        },
      });

      const userStore = useUserStore();
      const getContacts = computed(() => {
        return userStore.enterPriseInfo?.contacts;
      });
      const getAddress = computed(() => {
        return userStore.enterPriseInfo?.address;
      });
      const getTel = computed(() => {
        return userStore.enterPriseInfo?.tel;
      });
      const getQrCode = computed(() => {
        return userStore.enterPriseInfo?.qrCode;
      });
      const tenantTop10 = ref<{ name: string; count: number }[]>([]);
      onMounted(async () => {
        if (isAdmin(props.role)) {
          tenantTop10.value = await getTenantTop10();
          return;
        }
        const notice = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
        const res = await getEnterPriseDetail();
        dataSource.value = notice.items;
        userStore.setEnterPriseInfo(res);
      });

      return {
        activeKey,
        tabListTitle,
        helpDoc,
        getQrCode,
        getContacts,
        getAddress,
        getTel,
        dataSource,
        tenantTop10,
        go,
        registerTable,
        isAdmin,
      };
    },
  });
</script>

<style scoped>
  .noticeTitle:hover {
    border-bottom: 1px solid #ccc;
  }
  :deep.ant-anchor-link-active > .ant-anchor-link-title {
    color: #666;
  }
  :deep.ant-pagination-prev {
    display: none;
  }
  :deep.ant-pagination-next {
    display: none;
  }
</style>