<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 @click="go('/notice/myNotices')" class="cursor-pointer">
              <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">{{ 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"
            v-if="getQrCode"
            style="width: 150px; height: 150px; margin: 50px auto"
          />
          <Empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
        </template>
        <CardMeta>
          <template #description>
            <p v-if="getContacts">联系人: {{ getContacts }}</p>
            <p v-if="getTel">联系电话: {{ getTel }}</p>
            <p v-if="getAddress">联系地址: {{ getAddress }} </p>
          </template>
        </CardMeta>
      </Card>
    </div>
    <Card v-else :bordered="false" :bodyStyle="{ padding: 0 }" v-bind="$attrs">
      <Skeleton active :paragraph="{ rows: 10 }" :loading="!tenantTop10">
        <Descriptions :column="1" title="租户消息量TOP10" v-if="tenantTop10.length">
          <template v-for="(item, index) in tenantTop10" :key="item.name">
            <DescriptionsItem>
              <span
                class="mr-2"
                style="
                  width: 1.25rem;
                  height: 1.25rem;
                  border: 1px solid;
                  color: #0b55f1;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
                :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%">
                <div
                  style="
                    width: 10rem;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                  "
                >
                  <Tooltip :title="item.name">
                    {{ item.name }}
                  </Tooltip>
                </div>

                <div class="flex w-7/10">
                  <Progress
                    :showInfo="false"
                    size="small"
                    style="width: 70%"
                    :percent="item.count / 10000"
                    :strokeWidth="12"
                    :strokeColor="
                      index === 0
                        ? '#ea5b42'
                        : index === 1
                        ? '#666'
                        : index === 2
                        ? '#e4751a'
                        : '#b5b6b6'
                    "
                  />
                  <span
                    class="ml-2"
                    :style="{ color: index === 0 ? '#EA5B42' : index === 2 ? '#E4751A' : '#666' }"
                  >
                    {{ item.count }}
                  </span>
                </div>
              </div>
            </DescriptionsItem>
          </template>
        </Descriptions>
        <Empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
      </Skeleton>
      <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,
    Progress,
    Skeleton,
    Tooltip,
    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,
      CardMeta: Card.Meta,
      AnchorLink: Anchor.Link,
      List,
      ListItem: List.Item,
      ListItemMeta: List.Item.Meta,
      Descriptions,
      DescriptionsItem: Descriptions.Item,
      Avatar,
      Time,
      BasicTable,
      Progress,
      Skeleton,
      Tooltip,
      Empty,
    },
    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)) {
          const res = await getTenantTop10();
          if (res) tenantTop10.value = res;
          else tenantTop10.value = [];
          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,
        Empty,
      };
    },
  });
</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>