<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="transparent"
  ></u-navbar>
  <view class="fxx-container row">
    <view class="fxx-logo">
      <u-image
          mode="widthFix"
          width="400"
          height="161.37"
          :src="staticImage.fxxLogo"
      ></u-image>
    </view>
    <view class="fxx-content">
      <view class="content-image row">
        <u-image
            mode="widthFix"
            width="400"
            height="400"
            :src="staticImage.fxxDone"
        ></u-image>
      </view>
      <view class="content-main">
        <view class="main-title">{{name}}，恭喜您认证成为丰行侠！ 您的专属丰行侠ID为： </view>
        <view class="main-desc">{{id}}</view>
        <view class="main-ext">请立即开始您的丰行侠线索服务！</view>
      </view>
      <view class="row">
        <view class="done-btn ">
          <u-button
              type="primary"
              text="暂不"
              shape="circle"
              :custom-style="{
              color:'#AFB5BE',
              backgroundColor:'#FFFFFF',
              border:'2rpx solid #AFB5BE',
              fontSize:'36',
              fontWeight:'400',
              marginTop:'48rpx',
              width:'auto'
            }"
              @click="navTo('/pages/Index/index')"
          ></u-button>
        </view>
        <view class="done-btn col">
          <u-button
              type="primary"
              text="线索提交"
              shape="circle"
              :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              marginTop:'48rpx'
            }"
              @click="navTo('/pages/Line/index')"
          ></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {userExtends} from "@/api/user";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      list: [{
        name: '最新资讯'
      }, {
        name: '表彰评优'
      }, {
        name: '活动回顾'
      }],
      // 或者如下，也可以配置keyName参数修改对象键名
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      current: 1,
      id:"",
      name:'',
      title: '认证成功',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
        fxxLogo: imghost + '/fxx-logo.png',
        fxxDone: imghost + '/fxx-done.png',
        fxx1: imghost + '/fxx-1.png',
      },
      user: {
        avatar: imghost + '/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685,
      },
      isTop: false,
      lists: [
        {
          id: 1,
          thumb: imghost + '/new-1.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true
        }, {
          id: 2,
          thumb: imghost + '/new-2.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true
        }, {
          id: 3,
          thumb: imghost + '/new-3.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”111开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: false
        },
      ],
      size: {
        height: 500,
      }
    }
  },
  onLoad(option) {
    this.id = option.id;
    this.name = option.name;
  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
    listHeight() {
      let that = this;
      let height;
      let info = uni.createSelectorQuery().in(this).select('.subsection');
      info.boundingClientRect(function (data) {
        that.size.height = data.height;
      }).exec(function (res) {

      });
      // that.size.height = (api.navHeight().windowHeight - height);
    }
  },
  methods: {
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    checkSection(index) {
      this.current = index;
    },
    scrollToLower() {

    },
    sexChange(e){
      this.model1.userInfo.sex = e;
    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    getUserExtend() {
      userExtends().then((res) => {
        uni.setStorageSync('user', res.data);
        this.$store.commit('userInfo', res.data);
      });
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    this.listHeight();
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    let token = uni.getStorageSync('token');
    if (token) {
      this.getUserExtend();
    }
  },
}
</script>

<style lang="scss">
@import './components/done.scss';
</style>