<!-- 首页 -->
<template>
  <div class="home_row">
    <div ref="home_col__left" class="home_col__left">
      <a-carousel v-if="bannerList.length > 0" autoplay>
        <div v-for="(item, index) in bannerList" :key="index" class="img_box">
          <img
            :src="item.url"
            width="100%"
            height="100%"
            :alt="$t('WRONG_PICTURE_ADDERSS')"
          />
        </div>
      </a-carousel>
      <div v-else>
        <img
          src="@/assets/images/bannerModel.png"
          width="100%"
          height="100%"
          alt=""
        />
      </div>

      <div class="notice_box" :style="{ height: `calc(100% - ${height}px)` }">
        <a-tabs v-model="activeKey">
          <a-tab-pane key="1" :tab="$t('NOTICE_NOTICE')">
            <ul v-if="noticeList.length > 0">
              <li v-for="(item, index) in noticeList" :key="index">
                <a-row>
                  <a-col :span="20">
                    <div class="title_flex" @click="handEdit(item)">
                      <span class="icon_dot"></span>
                      <span>{{ item.msgTitle }}</span>
                    </div>
                  </a-col>
                  <a-col :span="4" style="text-align: right">
                    <span>{{ item.updateTime.slice(0, 10) }}</span>
                  </a-col>
                </a-row>
              </li>
            </ul>
            <a-empty v-else :image="simpleImage" style="margin: 32px auto" />
          </a-tab-pane>
        </a-tabs>
        <div class="notice_more" @click="handMore">
          <span>{{ $t("SEE_MORE") }}</span>
          <Icon type="icon-dir-f-circle-right" :size="16" />
        </div>
      </div>
    </div>
    <div class="home_col__right">
      <div class="most-used-container">
        <div class="title">{{ $t("RECENT_VISIT") }}</div>
        <ul v-if="mostUsed.length" class="most-used-content">
          <li
            v-for="(item, index) in mostUsed"
            v-show="index < 8"
            :key="index"
            class="most-used-item"
            @click="defaultLayout.goRoute(item)"
          >
            <Icon
              :type="item.icon ? item.icon : 'icon-cur-organization'"
              :size="16"
            />
            {{ $t(item.menuName) }}
          </li>
        </ul>
        <a-empty v-else :image="simpleImage" style="margin: 32px auto" />
      </div>
      <div class="my-collection">
        <div class="title">
          {{ $t("MY_COLLECTION") }}
        </div>
        <div class="my-collection-content">
          <template v-if="favoritesMenuList.length">
            <ul>
              <li
                v-for="(item, index) in favoritesMenuList"
                v-show="index < 8"
                :key="item.id"
                @click="defaultLayout.goRoute(item)"
              >
                <Icon
                  :type="item.icon ? item.icon : 'icon-cur-organization'"
                  :size="16"
                />
                {{ $t(item.menuName) }}
                <Icon
                  type="icon-ins-close-circle"
                  :size="16"
                  @click.stop="() => cancelCollect(item)"
                />
              </li>
            </ul>
            <div class="box_pagination">
              <a-pagination
                simple
                :current-page="page"
                :page-size="size"
                :total="total"
                @change="sizeChange"
              />
            </div>
          </template>
          <a-empty v-else :image="simpleImage" style="margin: 32px auto" />
        </div>
      </div>
      <div class="footer" :style="footerStyle" @click="handOpen" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Empty } from "ant-design-vue";
import { Icon } from "@mega-design/ui-vue";
import { fetchFileUrl } from "@/utils/file";
import ApiConstant from "@/api/ApiConstant";
import footerBg from "@/assets/images/lvzhou.png";

export default {
  components: { Icon },
  inject: ["defaultLayout"],
  data() {
    return {
      simpleImage: null,
      color: ["#005583", "#14CC8A", "#09B2EF", "#8B6FE6", "#F7A853", "#EE5253"],
      bannerList: [],
      activeKey: "1",
      noticeList: [],
      page: 1,
      size: 8,

      height: 0,
    };
  },
  computed: {
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
      favoritesMenu: (state) => state.account.favoritesMenu,
      mostUsed: (state) => state.account.mostUsed,
    }),
    total() {
      return (this.favoritesMenu || []).length;
    },
    favoritesMenuList() {
      return (this.favoritesMenu || []).filter((e, i) => {
        const index = (this.page - 1) * this.size;
        return i >= index && i < index + this.size;
      });
    },
    footerStyle() {
      const { FILE_SERVER, HOME_UNDER_IMG } = this.systemConfig || {};
      const backgroundImage =
        FILE_SERVER && HOME_UNDER_IMG ? FILE_SERVER + HOME_UNDER_IMG : footerBg;
      return {
        backgroundImage: `url(${backgroundImage})`,
      };
    },
  },
  created() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
    const arr = this.systemConfig?.HOME_PAGE_ROTATION_CHART
      ? this.systemConfig?.HOME_PAGE_ROTATION_CHART?.split(",")
      : [];
    arr.forEach((item) => {
      this.bannerList.push({
        url: fetchFileUrl(item, this),
      });
    });
    this.search();

    this.defaultLayout.getFacoriteMenu();
  },
  mounted() {
    const radio = 1412 / 335;
    const fn = () => {
      const dom = this.$refs.home_col__left;
      if (dom) {
        this.height = dom.offsetWidth / radio;
      }
    };
    this.$nextTick(() => {
      fn();
    });
    window.onresize = fn;
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    search() {
      const req = {
        page: 1,
        size: 10,
        type: "NOTICE",
      };
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/center/search-more`, {
          params: req,
        })
        .then((res) => {
          this.noticeList = res.data.data.records;
        });
    },
    sizeChange(val) {
      this.page = val;
    },
    cancelCollect(data) {
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("DELETE_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "exclamation-circle",
        onOk: () => {
          this.defaultLayout.toggleCollect(data, false);
        },
      });
    },
    handEdit(row) {
      this.$router.push({
        path: "/messageCenter/view",
        query: {
          id: row.id,
        },
      });
    },
    handOpen() {
      if (this.systemConfig?.HOME_UNDER_IMG_LINK) {
        window.open(`${this.systemConfig?.HOME_UNDER_IMG_LINK}`);
      } else {
        window.open("https://www.mega-oasis.com/");
      }
    },
    // 查看更多
    handMore() {
      this.$router.push({
        path: "/messageCenter",
        query: {
          type: "NOTICE",
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home_row {
  display: flex;
  height: calc(100vh - 50px - 44px - 12px);
  min-height: 600px;
}
.home_col__left {
  width: 75%;
  border-right: 12px solid #f0f2f5;
  .img_box {
    height: 295px;
    img {
      width: 100%;
      height: 295px;
    }
  }
  .notice_box {
    position: relative;
    border-top: 10px solid #f0f2f5;
    /deep/.ant-tabs {
      height: 100%;
      .ant-tabs-top-content {
        height: calc(100% - 40px);
        overflow-y: auto;
      }
    }
    ul {
      li {
        padding: 20px 30px 0 24px;
        color: #333;
        .title_flex {
          display: flex;
          align-items: center;
          width: 100%;
          cursor: pointer;
          font-weight: 400;
        }
        .icon_dot {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #006896;
          margin-right: 8px;
        }
      }
    }
    .notice_more {
      position: absolute;
      right: 30px;
      top: 10px;
      color: #006896;
      cursor: pointer;
      span {
        margin-right: 5px;
        font-weight: 200;
      }
    }
  }
}
.home_col__right {
  width: 25%;
  .title {
    font-weight: bold;
    font-size: 16px;
    padding: 24px 24px 12px;
  }
  .most-used-container {
    position: relative;
    height: 30%;
    .most-used-content {
      height: calc(100% - 72px);
      padding: 0 24px;
      overflow-y: auto;
    }
    .most-used-item {
      width: 48%;
      height: 36px;
      line-height: 36px;
      background: #f7f9fa;
      margin-top: 8px;
      padding-left: 20px;
      cursor: pointer;
      min-width: 160px;
      display: inline-block;
      &:nth-child(odd) {
        margin-right: 8px;
      }
      .ant-icon {
        margin-right: 8px;
      }
    }
  }
  .my-collection {
    position: relative;
    height: 42%;
    border-top: 1px solid #eeeff1;
    border-bottom: 12px solid #f0f2f5;
    &-content {
      position: relative;
      height: calc(100% - 60px);
      padding-left: 24px;
      & > ul {
        height: calc(100% - 40px);
        padding-right: 24px;
        overflow-y: auto;
        li {
          width: 48%;
          height: 36px;
          line-height: 36px;
          display: inline-block;
          background: #f7f9fa;
          margin-top: 8px;
          padding-left: 20px;
          cursor: pointer;
          min-width: 160px;
          i {
            margin-right: 8px;
          }
          i:last-child {
            float: right;
            line-height: 36px;
            margin-top: 2px;
            display: none;
          }
        }
        li:nth-child(odd) {
          margin-right: 8px;
        }
        li:hover {
          i:last-child {
            display: block;
          }
        }
      }
    }
  }
  .footer {
    height: 28%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

.box_pagination {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 0);
  /deep/.ant-pagination-simple-pager {
    display: none;
  }
  /deep/.ant-pagination-item-link {
    width: 28px !important;
    height: 28px !important;
    line-height: 26px !important;
    border: 1px solid #eeeff1 !important;
    font-weight: bold;
    border-radius: 50%;
  }
}
</style>
