<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.sysNotice.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">
      <Empty v-if="!tenantTop10.length" />
      <div style="width: 100%; height: 390px" ref="top10Ref"></div>
      <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, 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';
  import { useECharts } from '/@/hooks/web/useECharts';
  export default defineComponent({
    components: {
      Card,
      Empty,
      CardMeta: Card.Meta,
      AnchorLink: Anchor.Link,
      List,
      ListItem: List.Item,
      ListItemMeta: List.Item.Meta,
      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 }[]>([]);
      const top10Ref = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(top10Ref as Ref<HTMLDivElement>);
      onMounted(async () => {
        if (isAdmin(props.role)) {
          tenantTop10.value = await getTenantTop10();
          const tenantName = tenantTop10.value.map((item) => item.name);
          const tenantCount = tenantTop10.value.map((item) => item.count);
          setOptions({
            xAxis: {},
            title: {
              text: '租户消息量TOP10',
            },
            yAxis: {
              type: 'category',
              data: tenantName,
              inverse: true,
            },
            grid: {
              containLabel: true,
              left: '0%',
            },
            series: [
              {
                type: 'bar',
                data: tenantCount,
                label: {
                  show: true,
                  position: 'right',
                },
              },
            ],
          });
          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,
        top10Ref,
      };
    },
  });
</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>