<template>
  <div class="admin-home" v-loading="isLoading">
    <ai-card hideTitle>
      <div class="content">
        <p>“TEMU助手”是致力于为“拼多多跨境卖家中心”提供自动化服务的智能工具，可以提高TEMU平台的运营及管理效率，欢迎大家关注微信公众号“TEMU助手”，与我们沟通交流，共同创造最有助于卖家发展的助手功能，助力广大卖家，让中国货走向全世界~</p>
      </div>
    </ai-card>
    <div class="middle">
      <ai-card title="通知公告">
        <div class="list">
          <div class="item" v-for="(item, index) in noticeList" :key="index" @click="info = item, isShow = true">
            <div class="left">
              <el-tag size="small" effect="dark" :type="item.level === '0' ? '' : 'danger'">{{ item.level === '0' ? '一般' : '重要' }}</el-tag>
              <h2 :title="item.title">{{ item.title }}</h2>
            </div>
            <span>{{ item.createTime }}</span>
            <!-- <img src="../assets/images/right-b.png" /> -->
          </div>
          <AiEmpty v-if="!noticeList.length"></AiEmpty>
        </div>
      </ai-card>
      <ai-card title="更新记录">
        <div class="list">
          <div class="item" v-for="(item, index) in changeLogList" :key="index" @click="showInfo(item, index)">
            <div class="left">
              <el-tag v-if="version !== item.version && index === 0" size="small" effect="dark" type="danger" @click.stop="download(item.downloadUrl)">新版本下载</el-tag>
              <h2 :title="item.title">{{ item.title }}</h2>
            </div>
            <span>{{ item.createTime }}</span>
          </div>
          <AiEmpty v-if="!changeLogList.length"></AiEmpty>
        </div>
      </ai-card>
    </div>
    <ai-card title="TEMU助手功能概览">
      <template #right>
        <a href="https://www.yuque.com/liushiwei-f582m/kb/bmqqls0o5ybd6c8p?singleDoc" style="color: blue; font-size: 18px; text-decoration: underline;" target="_blank">在线帮助手册</a>
      </template>
      <div style="height: 1000px">
        <BiVueMindmap ref="bi-vue-mindmap" :isReadonly="true" :flatNodes="mindmapNodes" />
      </div>
    </ai-card>
    <AiDialog
      title="详情"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      customFooter
      :show-close="!isImportant"
      @close="info = {}, isShowDownload = false"
      width="690">
      <div class="news">
        <h2>{{ info.title }}</h2>
        <p>{{ info.content }}</p>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="read" type="primary" style="width: 140px" v-if="!info.version">{{ isImportant ? '我已阅读' : '关闭' }}</el-button>
        <el-button type="primary" style="width: 140px" v-if="info.version" @click="isShow = false">关闭</el-button>
      </div>
    </AiDialog>
  </div>
</template>

<script>
import BiVueMindmap from "bi-vue-mindmap";

  export default {
    name: 'AdminHome',
    components: {
      BiVueMindmap,
    },
    data () {
      return {
        noticeList: [],
        isLoading: false,
        isShow: false,
        info: {},
        changeLogList: [],
        isImportant: false,
        version: '',
        isShowDownload: false,
        mindmapNodes: [
          {
            id: "01",
            parentId: null,
            title: "TEMU助手"
          },
          {
            id: "0101",
            parentId: "01",
            title: "TEMU"
          },
          {
            id: "010101",
            parentId: "0101",
            title: "辅助运营"
          },
          {
            id: "01010101",
            parentId: "010101",
            title: "备货单管理",
            isFolded: true
          },
          {
            id: "0101010101",
            parentId: "01010101",
            title: "创建备货单：批量领取系统下的备货单"
          },
          {
            id: "0101010102",
            parentId: "01010101",
            title: "抢仓发货：同时操作多个店铺自动抢仓并创建发货单",
            resources: [{
              type: "VIDEO",
              url: "http://temu.jjcp52.com/dist/qiangcang.mp4"
            }]
          },
          {
            id: "0101010103",
            parentId: "01010101",
            title: "发货台管理：批量从“发货台”创建发货单"
          },
          {
            id: "0101010104",
            parentId: "01010101",
            title: "待装箱发货单：对应“备货单管理”->“发货单列表”，“待装箱发货”列表，支持导出"
          },
          {
            id: "0101010105",
            parentId: "01010101",
            title: "待收货发货单：对应“备货单管理”->“发货单列表”，“待仓库收货”列表，支持导出"
          },
          {
            id: "0101010106",
            parentId: "01010101",
            title: "已收货发货单：对应“备货单管理”->“发货单列表”，“已收货”列表，支持导出"
          },
          {
            id: "0101010107",
            parentId: "01010101",
            title: "普通备货单：对应“备货单管理”->“我的备货单”，“普通备货单”列表，支持导出、成本统计"
          },
          {
            id: "0101010108",
            parentId: "01010101",
            title: "紧急备货单：对应“备货单管理”->“我的备货单”，“紧急备货单”列表，支持导出、成本统计"
          },
          {
            id: "0101010109",
            parentId: "01010101",
            title: "商品条码管理：对应“备货单管理”->“商品条码管理”，支持导出，可用于自定义生成标签，提高贴标效率"
          },
          {
            id: "01010102",
            parentId: "010101",
            title: "商品管理",
            isFolded: true
          },
          {
            id: "0101010201",
            parentId: "01010102",
            title: "商品管理：对应“商品管理”->“商品列表”，支持导出，支持半托管"
          },
          {
            id: "0101010202",
            parentId: "01010102",
            title: "商品复制：店铺之间快速商品拷贝"
          },
          {
            id: "0101010203",
            parentId: "01010102",
            title: "查找买手：根据SKC查询买手名字"
          },
          {
            id: "0101010204",
            parentId: "01010102",
            title: "上新生命周期：对应“商品管理”->“上新生命周期管理”，支持导出未发布到站点、已下架的数据"
          },
          {
            id: "01010103",
            parentId: "010101",
            title: "库存管理",
            isFolded: true
          },
          {
            id: "0101010301",
            parentId: "01010103",
            title: "退货包裹管理：对应“库存管理”->“退货包裹管理”，支持导出"
          },
          {
            id: "0101010302",
            parentId: "01010103",
            title: "退货明细：对应“库存管理”->“退货明细”，支持导出"
          },
          {
            id: "01010104",
            parentId: "010101",
            title: "销售管理",
            isFolded: true
          },
          {
            id: "0101010401",
            parentId: "01010104",
            title: "成本管理：维护SKU的成本价格，用于成本、利润的计算和统计"
          },
          {
            id: "0101010402",
            parentId: "01010104",
            title: "销售管理：对应“销售管理”->“销售管理”，统计今日销量/销售额、今日利润/利润率、库存/在途库存，支持数据导出"
          },
          {
            id: "0101010403",
            parentId: "01010104",
            title: "销售统计：统计过去一段时间内，总体销售额/单量/成本/利润/利润率的统计，以及SKC/SKU维度的销售额/利润/单量的统计，支持导出"
          },
          {
            id: "0101010404",
            parentId: "01010104",
            title: "售罄看板：对应“销售管理”->“售罄看板”，支持导出"
          },
          {
            id: "0101010405",
            parentId: "01010104",
            title: "售后统计：对应“结算管理”->“售后管理”，计算预计扣款，白卖件数，支持导出"
          },
          {
            id: "0101010406",
            parentId: "01010104",
            title: "售后赔付统计：对应“结算管理”->“对账中心”->“扣款详情”，统计过去一段时间内店铺的扣款总金额/次数，支持导出"
          },
          {
            id: "0101010407",
            parentId: "01010104",
            title: "物流统计：对应“履约服务账单->明细->缴费记录”，以及“发货单列表->物流计费重核实”，统计一段时期内物流费用，以及货物重量，物流费用分布"
          },
          {
            id: "01010105",
            parentId: "010101",
            title: "其他",
            isFolded: true
          },
          {
            id: "0101010501",
            parentId: "01010105",
            title: "弹窗消息：支持一键已读所有店铺的弹窗消息"
          },
          {
            id: "0101010502",
            parentId: "01010105",
            title: "拒绝调价：辅助批量点击“我不接受”按钮，减轻工作量，避免遗漏",
            resources: [{
              type: "PIC",
              url: "http://temu.jjcp52.com/dist/refuse-price.png"
            }]
          },
          {
            id: "010102",
            parentId: "0101",
            title: "选品采集"
          },
          {
            id: "01010201",
            parentId: "010102",
            title: "商品采集：根据TEMU前端地址，采集商品信息到店铺草稿箱，减轻上品工作量",
            resources: [{
              type: "VIDEO",
              url: "http://temu.jjcp52.com/dist/xuanpin.mp4"
            }]
          },
          {
            id: "01010202",
            parentId: "010102",
            title: "速卖通采集：根据“速卖通”前端地址，采集商品信息到店铺草稿箱，减轻上品工作量"
          },
          {
            id: "01010203",
            parentId: "010102",
            title: "选品跟踪",
            isFolded: true
          },
          {
            id: "0101020301",
            parentId: "01010203",
            title: "店铺跟踪：跟踪指定店铺的销售趋势、价格趋势，采集跟卖。（暂时不可用）"
          },
          {
            id: "0101020302",
            parentId: "01010203",
            title: "关键字跟踪：根据筛选关键字，跟踪该关键字在TEMU前端搜索结果的销售趋势、价格趋势，采集跟卖"
          },
          {
            id: "0101020303",
            parentId: "01010203",
            title: "新品跟踪：跟踪TEMU前端“Best Sellers”->“Within last 7 days”的新品，采集跟卖"
          },
          {
            id: "0101020304",
            parentId: "01010203",
            title: "单品跟踪：根据TEMU前端地址，采集销售趋势、价格趋势"
          },
          {
            id: "0102",
            parentId: "01",
            title: "SHEIN(希音)"
          },
          {
            id: "010201",
            parentId: "0102",
            title: "辅助运营",
            isFolded: true
          },
          {
            id: "01020101",
            parentId: "010201",
            title: "成本管理：维护SKU的成本价格，用于成本、利润的计算和统计"
          },
          {
            id: "01020102",
            parentId: "010201",
            title: "销售管理：对应SHEIN商家后台“商品管理”->“备货信息（新）”，统计当天的销售额、销量、库存等信息，计算成本和利润"
          },
          {
            id: "01020103",
            parentId: "010201",
            title: "证书中心：对应SHEIN商家后台“商品管理”->“证书中心”，导出已驳回和待补充的证书列表，线下跟踪"
          },
          {
            id: "01020104",
            parentId: "010201",
            title: "商品复制：希音店铺间商品进行快速复制，节省上品时间"
          },
          {
            id: "01020105",
            parentId: "010201",
            title: "发货订单：对应SHEIN商家后台“订单管理”->“发货订单”，提供急采/备货订单的导出，同时带上成本价格，方便对账与结算"
          },
          {
            id: "01020106",
            parentId: "010201",
            title: "退货与报废单列表：对应SHEIN商家后台“质量管理”->“退货与报废单列表”，提供退货订单明细的导出，同时带上成本价格，方便对账与结算"
          },
          {
            id: "01020107",
            parentId: "010201",
            title: "商家账单统计：对应SHEIN商家后台“财务管理”->“商家账单”，统计一段时期内销售额、单量、成本、利润、利润率，SKC/SKU维度统计排名，支持导出"
          },
        ],
      }
    },

    created () {
      const devVersion = require('../manifest.development.json').version
      const prodVersion = require('../manifest.production.json').version
      this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
      console.log(this.version)
      this.getNoticeList()
      this.getChangelog()
      this.getMyNewestNotice()
      this.checkBindWx()
    },

    methods: {
      getNoticeList () {
        this.$http.post('/api/notice/page?size=20').then(res => {
          if (res.code === 0) {
            this.noticeList = res.data.records
          }
        })
      },

      showInfo (info, index) {
        if (index === 0) {
          this.isShowDownload = true
        }
        this.info = info
        console.log(this.info.version === this.version)
        this.isShow = true
      },

      download (url) {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('target', '_blank')
        link.setAttribute('download', `TEMU助手-${url}.zip`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
      checkBindWx() {
        this.$http.post(`/api/malluser/bindWxCount`).then(res => {
          if (res.code == 0) {
            if (res.data == 0) {
              this.$confirm('您尚未绑定微信消息推送，将不会收到消息通知，影响体验, 请前往绑定?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$router.push('message')
              })
            }
          }
        })
      },
      read () {
        if (this.isImportant) {
          this.$http.post('/api/notice/read').then(res => {
            if (res.code === 0) {
              this.isImportant = false
              this.isShow = false
            }
          })
        } else {
          this.isShow = false
        }
      },

      getMyNewestNotice () {
        this.$http.post('/api/notice/getMyNewestNotice').then(res => {
          if (res.code === 0) {
            if (res.data) {
              this.isImportant = true
              this.info = res.data
              this.isShow = true
            }
          }
        })
      },

      getChangelog () {
        this.$http.post('/api/changelog/page?size=100').then(res => {
          if (res.code === 0) {
            this.changeLogList = res.data.records
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin-home {
    padding: 20px 20px;

    .news {
      min-height: 250px;

      h2 {
        margin-bottom: 20px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #000;
      }

      span {
        display: block;
        margin-bottom: 20px;
        text-align: right;
        color: #999;
      }

      p {
        line-height: 1.5;
        margin-bottom: 14px;
        color: #333;
        font-size: 15px;
        white-space: pre-line;
      }
    }

    .content {
      p {
        line-height: 1.3;
        margin-bottom: 14px;
        color: #333;
        font-size: 14px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }


    .list {
      overflow: auto;
      padding-bottom: 20px;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 49px;
        cursor: pointer;
        color: #1f2635;
        transition: all .3s ease-in-out;
        border-bottom: 1px solid #f4f4f4;

        .left, .right {
          display: flex;
          align-items: center;
        }

        .left {
          max-width: 70%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          h2 {
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .el-tag {
            margin-right: 10px;
          }
        }

        & > span {
          color: #999;
        }

        &:hover {
          color: #1FBAD6;
        }
      }
    }

    .middle {
      display: flex;
      height: 400px;

      & > section {
        flex: 1;

        &:first-child {
          margin-right: 20px;
        }
      }
    }
  }
</style>
