<template>
  <div>
    <Card title="帮助文档" v-if="!isAdmin(role)">
      <div>
        <template v-for="item in helpDoc" :key="item.title">
          <AnchorLink v-bind="item" />
        </template>
      </div>
      <Card
        v-if="!isAdmin(role)"
        :tab-list="tabListTitle"
        v-bind="$attrs"
        :active-tab-key="activeKey"
        :bordered="false"
        @tabChange="onTabChange"
        :bodyStyle="{ padding: 0 }"
      >
        <div v-if="activeKey === 'tab1'">
          <List item-layout="horizontal" :dataSource="dataSource">
            <template #renderItem="{ item }">
              <ListItem>
                <ListItemMeta>
                  <template #avatar>
                    <Avatar
                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    />
                  </template>
                  <template #description>
                    <span
                      class="cursor-pointer noticeTitle"
                      @click="go('/stationnotification/mynotification')"
                      >{{ item.sysNotice.title }}
                    </span>
                  </template>
                  <template #title>
                    <span>{{ item.user.realName }}</span>
                  </template>
                </ListItemMeta>
                <template #extra>
                  <Time :value="item.sysNotice.senderDate" />
                </template>
              </ListItem>
            </template>
          </List>
          <Card hoverable title="联系我们" :bordered="false">
            <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>
    </Card>

    <Card v-if="isAdmin(role)">
      <Descriptions title="租户消息量TOP10" :column="1">
        <template v-for="(item, index) in 10" :key="index">
          <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 ? '#fed36a' : index === 1 ? '#CBCAC9' : index === 2 ? '#F1B889' : '',
                borderColor:
                  index === 0
                    ? '#fdee7d'
                    : index === 1
                    ? '#e6e6e5'
                    : index === 2
                    ? '#f8c296'
                    : '#0b55f1;',
              }"
              >{{ index + 1 }}</span
            >兰州天兆猪业</DescriptionsItem
          >
        </template>
      </Descriptions>
    </Card>
    <BasicTable @register="registerTable" v-if="isAdmin(role)" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, onMounted } from 'vue';
  import {
    Card,
    AnchorLink,
    List,
    ListItem,
    ListItemMeta,
    Avatar,
    CardMeta,
    Descriptions,
    DescriptionsItem,
  } 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 { columns } from './props';
  import { isAdmin } from '/@/enums/roleEnum';
  export default defineComponent({
    components: {
      Card,
      AnchorLink,
      List,
      ListItem,
      ListItemMeta,
      Avatar,
      Time,
      CardMeta,
      BasicTable,
      Descriptions,
      DescriptionsItem,
    },
    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 onTabChange = (key) => {
        activeKey.value = key;
      };
      const [registerTable] = useTable({
        title: '本月即将过期租户',
        showIndexColumn: false,
        useSearchForm: false,
        columns,
      });

      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;
      });
      onMounted(async () => {
        if (isAdmin(props.role)) return;
        const res = await getEnterPriseDetail();
        const notice = await notifyMyGetrPageApi({ page: 1, pageSize: 5 });
        userStore.setEnterPriseInfo(res);
        dataSource.value = notice.items;
      });

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

<style lang="less" scoped>
  .noticeTitle:hover {
    border-bottom: 1px solid #ccc;
  }
</style>