<template>
  <div class="main">
    <div class="tabBox">
      <div :class="selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'" v-for="(item, index) in tabList"
        :key="index" @click="handleChangeTab(item.value)">
        {{ item.label }}
      </div>
    </div>

    <div class="contentList">
      <div class="contentItem" v-for="(item, index) in messageList" :key="index" @click="handleGoDetail(item)">
        <div class="left">
          <!-- <div class="title">{{ item.NOTICEINFO_TITLE || "" }}</div> -->
          <div class="title">{{ item.title || "" }}</div>
          <!-- <div class="content">{{ item.NOTICEINFO_CONTENT || "" }}</div> -->
          <div class="descBox">
            <span class="name">{{ item.author || "-" }}</span>
            <span class="time">{{ item.publishTime || "-" }}</span>
          </div>
        </div>
        <div class="right">
          <image class="leftIcon" :src="item.coverImg
            ? item.coverImg
            : 'https://eshangtech.com/ShopICO/no-picture.png'
            " />
        </div>
      </div>
      <div v-if="!(messageList && messageList.length > 0)">
        <no-data text="暂无内容" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import NoData from "../../components/noData.vue";
export default {
  data() {
    return {
      tabList: [],
      selectTab: 0,
      messageList: [],
    };
  },
  components: {
    NoData,
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  onLoad() {
    //   拿到tab的数据
    this.handleGetTabList();
    // this.handleGetHighwayHeadlines()
    this.$utils.addUserBehaviorNew();
  },
  methods: {
    //   改变选中
    handleChangeTab(value) {
      this.selectTab = value;
      this.handleGetHighwayHeadlines();
    },
    //   拿到tab的数据
    async handleGetTabList() {
      const data = await this.$api.$get(
        "/EShangApiMain/FrameWork/GetFieldEnumTree",
        { FieldExplainField: "NOTICEINFO_TYPE" }
      );
      let list = this.$utils.wrapTreeNode(data.Result_Data.List);
      let res = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.children && item.children.length > 0) {
            item.children.forEach((subItem) => {
              res.push(subItem);
            });
          }
        });
      }
      res.unshift({
        label: "全部",
        value: "all",
      });
      this.tabList = res;
      console.log("tabList", res);
      if (res && res.length > 0) {
        this.selectTab = res[0].value;
      }
      // this.handleGetHighwayHeadlines();
      this.handleGetHighwayHeadlines();
    },
    // 拿到消息列表
    async handleGetHighwayHeadlines() {
      console.log("this.user", this.user);
      let req = {
        SearchParameter: {
          NOTICEINFO_TYPES: this.selectTab === "all" ? "" : this.selectTab,
          PROVINCE_CODE: this.user.PROVINCE_CODE || "530000",
          NOTICEINFO_STATE: 1,
        },
        PageIndex: 1,
        PageSize: 999999,
      };
      const data = await this.$api.$post(
        "/EShangApiMain/Notice/GetNOTICEINFOList",
        req
      );
      console.log("handleGetHighwayHeadlines", data);
      let list = data.Result_Data.List;
      if (list && list.length > 0) {
        this.messageList = list;
      } else {
        this.messageList = [];
      }

      // this.messageList.push({
      //   NOTICEINFO_TITLE: "最新放假通知：调休2天，免费8天！",
      //   messageType: "official",
      // });

      console.log("this.messageList", this.messageList);
    },
    // 跳转查看高速头条详情
    handleGoDetail(obj) {
      console.log("obj", obj);
      if (obj.messageType === "official") {
        uni.navigateTo({
          url: "/pages/highwayHeadlines/minprogress",
        });
      } else {
        uni.navigateTo({
          // url: `/pages/highwayHeadlines/detail?id=${obj.NOTICEINFO_ID}`,
          url: `/pages/highwayHeadlines/detail?id=${obj.id}`,
        });
      }
    },

    // 高速头条播报
    async handleGetHighwayHeadlines() {
      let start = `${this.$moment
        .now()
        .set("month", -1)
        .format("YYYY-MM-DD")} 00:00:00`;
      let end = `${this.$moment.now().format("YYYY-MM-DD")} 23:59:59`;
      let params = {
        startQueryTime: start, // 开始时间
        endQueryTime: end, // 结束时间
      };
      let time = Math.ceil(new Date().getTime() / 1000);

      let req = {
        app_id: "530000301",
        biz_content: JSON.stringify(params),
        charset: "UTF-8",
        pid: "530000301",
        service: "trawe.eats.etc",
        utc_timestamp: time,
        version: "1.0",
        sign_type: "RSA2",
      };
      let signText = `app_id=${req.app_id}&biz_content=${req.biz_content}&charset=UTF-8&pid=${req.app_id}&service=trawe.eats.etc&utc_timestamp=${req.utc_timestamp}&version=1.0`;
      console.log("handleGetHighwayHeadlines", req);
      console.log("signText", signText);

      // 签名
      const sign = await new Promise((resolve, reject) => {
        uni.request({
          url: "https://admin.es.eshangtech.com/prod-api/RSA/sign",
          method: "POST",
          data: {
            originalText: signText,
            privateKey:
              "MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCtIkIJLbZYI9NvTRkRbqtjJ73gkAUJZBJw88Z+O8prX2HXMTIedmZZxTwbfM5kGpl9VmS0CY8QL0DnDsgHO8QnSDpN1jiqTD9lk1evycuF7ujmlOk/cJ5x2cLPn9rPIrQn1lxp9mBiO1m9vsrNOze/kx7wRyif/+hvn5Q9KtNEMy0K8oOE5vktnjkk1AhhXrTii9eIjOrO3pRgh9cFA9kqQpvD14CImD7tdCgyntKcYAB7rlin6a2N0yH9JJINjOyOiyHufP8sR7pb9VYXVYXukOCItdC9QQluQhSdyC/3BfZD5zV1A+X7pUle7dDLGG6aSZyCibg16siFIEX94KYfAgMBAAECggEAcP5uwrbGzvdywq06sxnbWTdSwQC9iMd7EaTH4xL6pOD3Zg6Be0givGvxMq9dtA94JUkBKE8kw5dTcHlBKxdiiZCmHK63BM4GgjCLhfrZjWvDLNn68KB7iCpq7j6R+6XWljlczvsxJGs/woqGqTMAy1MlWgPXC7Vk6ZTolpMglt0IJOzPtgJ66qU2CtNRjowkXSCHDO2RCjkmYcjU6W+eCvi9cXIXhLv5yra1PE0KOxn3NiEFwgGUXpu8LKqxuUfGLuHljoLxWV8EEfwZaWB6Wy1DHMMgxhKrO3xEmdMEqtvJmF98LRSYiJerkExY8Gdx8bkLPjlCLYKW4JVuPmyYgQKBgQD8l0lLtB94MQMib0t8RzqlbKcczTAkicjSms3/P4kwh50GC8OqwjJB75n4yQyDPgsjms/SnRMq1zjgm+MHSC4snpLCcvKFYLnvrslWGu/2lyUTwEwdUdQe1ILG4Y9NXKWg4zXpKfJ2Rz/cqw6bHGYhQWZ62AXQgiz+W7cIPrsHsQKBgQCveHGHF0WqtYAmrW7nf04PKmcJ5U2briYCWOtWJE5Mo5BYxsGLX6vI53DMNQ42hFk0ye61VNfcazAoGI3mM4+j6R9k3ek8EtkBYBro5eeoBtB7TMTJagQqzBLz316mJBsFmw3TiC9BzYhs3tKJnVxpfqXoqsyu2ZA6VG5Y/gXOzwKBgCbejPvmUvVm7WmOINqWB3NPXgPzm1X0EgA+rDZ8K3tZUxOMGeccDSnSWipLne5QTNyExThOzZVJG0qNEombVOeu2zyq/aECunoktnzWllim96CrdcsJPZAk+Z7rNOcdu6sfa7teph4HZs9pT00VOK4jZ0a+GV71uUDHEkplhNhxAoGAMDOi5BxFe/595KIR7C/xboMUaQh/iDuPn2dzxmcUx0LLPUfkFPhEBV1mhAIzFFDI/JJYK6HR5m/fe7Q7DritRbaddCTtlB4NVK5k1gOJ3oN4s9ZD3Jxt5p/GuQ1sP7F9Zs3QP4KSkL34MwgGx9zdbPFofACnV4TWdN+KrJGjYMsCgYAE0CMM7rYHGY3Vt3/WZZJ+DPlKE6Q+uvFDomtsB1IavCeEJyjBP9+GhBHat86aA3mCFjf4emj1or7OEgPc0gCMtKBG6m10CrzLjzdWnOTveqWVUW/FS2gf17cIO5/FK/4KmAjH/QN24KXm395Qu8C0UFfgA66yysakJFkvXVBiPg==",
          },
          header: {
            "content-type": "application/json",
          },
          success(res) {
            console.log("resresresresresresres", res);
            resolve(res.data.data);
          },
        });
      });
      console.log("sign", sign);

      req.sign = sign;

      // 推文数据
      const tweetsData = await new Promise((resolve, reject) => {
        uni.request({
          url: `https://sxgzh.etclife.cn/etc/api/v1/gzh/point/tweets`,
          method: "POST",
          data: req,
          header: {
            "content-type": "application/x-www-form-urlencoded",
          },
          success(res) {
            console.log(
              "resresresresresresresresres",
              res.data.response.data.data.tweets
            );
            resolve(res.data.response.data.data.tweets);
          },
        });
      });

      console.log("tweetsData", tweetsData);
      if (tweetsData && tweetsData.length > 0) {
        this.messageList = tweetsData;
      } else {
        this.messageList = [];
      }
    },
  },
};
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;

  .tabBox {
    width: 100%;
    box-sizing: border-box;
    padding: 22rpx 40rpx 22rpx;
    overflow-x: auto;
    display: flex;
    border-bottom: 1px solid #f6f6f6;

    .tabItem {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #716f69;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      display: inline-block;
      margin-right: 56rpx;
      white-space: nowrap;
    }

    .tabItem:nth-last-child(1) {
      margin-right: 0;
    }

    .selectTabItem {
      color: #130f05;
      position: relative;
    }

    .selectTabItem::after {
      content: "";
      width: 2rem;
      height: 6rpx;
      background: #ba922f;
      position: absolute;
      bottom: -22rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .tabBox::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari 和 Opera */
  }

  .contentList {
    width: 100%;
    height: calc(100vh - 50px);
    overflow-y: auto;

    .contentItem {
      width: 100%;
      box-sizing: border-box;
      padding: 32rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f6f6f6;

      .left {
        width: calc(100% - 260rpx);
        height: 220rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
          width: 100%;
          display: -webkit-box;
          /* 使用弹性盒模型 */
          -webkit-box-orient: vertical;
          /* 垂直排列 */
          overflow: hidden;
          /* 超出部分隐藏 */
          -webkit-line-clamp: 3;
          /* 限制最多显示3行文本 */
          text-overflow: ellipsis;
          /* 超出部分用省略号显示 */
        }

        .content {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #716f69;
          line-height: 32rpx;
          text-align: justify;
          font-style: normal;
          width: 100%;
          display: -webkit-box;
          /* 使用弹性盒模型 */
          -webkit-box-orient: vertical;
          /* 垂直排列 */
          overflow: hidden;
          /* 超出部分隐藏 */
          -webkit-line-clamp: 2;
          /* 限制最多显示3行文本 */
          text-overflow: ellipsis;
          /* 超出部分用省略号显示 */
        }

        .descBox {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12rpx;

          .name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }

          .time {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716f69;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }

      .right {
        width: 220rpx;
        height: 220rpx;
        margin-left: 40rpx;
        border-radius: 16rpx;
        overflow: hidden;

        .leftIcon {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>