<template>
  <view>
    <!-- 导航栏 -->
    <u-navbar back-icon-color="#ffffff" :border-bottom="false" title-color="#ffffff" :background="{ background: '#378264' }">
      <view class="flex-1 text-center text-white text-32rpx">消息</view>
       <!-- #ifndef  MP-WEIXIN -->
      <view slot="right" class="pr-base">
        <u-icon name="kefu-ermai" color="#ffffff" size="48" @tap="$u.route(`/pages/web_view/index?url=${service}`)"></u-icon>
      </view>
       <!-- #endif -->
      <!-- #ifdef  MP-WEIXIN -->
      <button slot="right" class="pr-base cu-btn" open-type="contact" hover-class="none">
         <u-icon name="kefu-ermai" color="#ffffff" size="48" ></u-icon>
      </button>
      <!-- #endif -->
    </u-navbar>
    <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
      <block v-for="(item, index) in dataList" :key="index">
        <!-- 订单消息 -->
        <block v-if="item.type == 1">
          <view @tap="jump(item.jump_type, item.jump_link)" class="w-710rpx bg-white rounded-xs m-auto mt-base text-lg text-txBase">
            <view class="p-base border-b border-txBorder">{{ item.title }}</view>
            <view class="px-base pt-base">{{ item.content }}</view>
            <!-- <view class="px-base">合计：99.99元</view> -->
            <view class="px-base">姓名：{{ item.ext.consignee_name }}</view>
            <view class="px-base">电话：{{ item.ext.consignee_telephone }}</view>
            <view class="px-base">地址：{{ item.ext.consignee_address }}</view>
            <view class="flex mt-base items-center justify-between p-base border-t border-txBorder">
              <view v-if="item.has_read">已确认</view>
              <view @tap.stop="confirm(item.id)" v-else class="w-180rpx h-66rpx leading-66rpx bg-bgSubtitle text-white text-center rounded-lg"
                >确认
              </view>

              <view class="text-txGray">{{ item.created_at }}</view>
            </view>
          </view>
        </block>
        <!-- 公告 -->
        <block v-if="item.type == 0">
          <view @tap="jump(item.jump_type, item.jump_link)" class="w-710rpx bg-white rounded-xs m-auto mt-base text-lg text-txBase">
            <view class="p-base border-b border-txBorder">{{ item.title }}</view>
            <view class="p-base">{{ item.content }}</view>
            <view class="text-txGray p-base text-right border-t border-txBorder">{{ item.created_at }}</view>
          </view>
        </block>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      // service:process.env.VUE_APP_SERVICE,
      downOption: {
        auto: true,
      },
      upOption: {
        page: {
          size: 20,
        },
        noMoreSize: 1,
      },
      dataList: [], //获取到的数据
    };
  },
  onShow() {
    this.getRead();
  },
  computed: {
    service(){
      const clien = process.env.VUE_APP_SERVICE
      const user = this.$store.getters.user ?? {}
      const phone = user?.phone
      const name = user?.nickname ?? phone ?? '访客'
      return `${clien}?u_cust_name=${name}&u_cust_phone=${phone}&u_cust_id=${phone}`
    },
    height() {
      const { windowHeight, statusBarHeight } = this.$u.sys();
      return windowHeight - statusBarHeight - 44 + 'px';
    },
  },
  methods: {
    downCallback() {
      this.dataList = [];
      this.mescroll.resetUpScroll();
    },
    async upCallback(page) {
      this.loadData(page);
    },
    loadData(page) {
      this.$api
        .get(`/v1/messages`, {
          params: {
            page: page.num,
            per_page: page.size,
          },
        })
        .then((res) => {
          this.mescroll.endSuccess(res.data.length);
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        })
        .catch((err) => {
          this.mescroll.endErr();
        });
    },
    //一键消息已读
  async  getRead() {
     await this.$api.post('/v1/messages/batch-read');
     await this.$store.dispatch('user/getNewsNum');
    },
    //确认消息
    async confirm(id) {
      try {
        let resDate = await this.$api.post(
          `/v1/messages/read/${id}`,
          {},
          {
            custom: {
              loading: true,
            },
          },
        );
        let Index = this.dataList.findIndex((item) => {
          return item.id == id;
        });
        this.dataList[Index].has_read = true;
       await this.$store.dispatch('user/getNewsNum');
      } catch (err) {}
    },
    //跳转页面
    jump(type, url) {
      if (type == 1 && url) {
        uni.navigateTo({
          url: url,
        });
      } else if (type == 2 && url) {
        uni.navigateTo({
          url: '/pages/web_view/index?url=' + url,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom-bg {
  width: 100%;
  height: 300rpx;
  text-align: center;
  background: $u-type-primary;
  clip-path: ellipse(140% 100% at 50% 0%);
}
</style>
