<template>
  <div class="service-notice" v-if="pageShow">
    <h2>办理须知</h2>
    <div class="service-content">
      <u-parse :imageProp="imageProp" className="articalContent" :html="content"/>
      <!-- <div v-html="content" class="articalContent"></div> -->
      <!-- <u-parse className="articalContent" :html="content"></u-parse> -->
    </div>
    <div class="service-btn" v-if="processType != 2" @click="toSubmit">我已阅读并同意</div>
    <AiLogin ref="login"></AiLogin>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  data() {
    return {
      content: '',
      imageProp: {
        mode: 'widthFix',
        padding: 0,
        lazyLoad: false,
        domain: '',
      },
      id: '',
      title: '',
      pageShow: false,
      processType: '',
    }
  },
  computed: {
    ...mapState(['global', 'user', 'token']),
  },
  onLoad(query) {
    this.id = query.id
    this.getInfo(query.id)
  },

  methods: {
    getInfo(id) {
      this.$loading()
      this.$instance
      .post(`/app/approval-process-def/info-id?id=${id}`, null, {
        withoutToken: true,
      })
      .then((res) => {
        if (res.code === 0) {
          this.title = res.data.processName
          this.content = res.data.needToKnow
          this.processType = res.data.processType
          uni.setNavigationBarTitle({
            title: res.data.processName,
          })
          this.pageShow = true
          this.$hideLoading()
        }
      })
    },

    handleGoto(url, type) {
      if (type) {
        //判断是否需要登录
        if (this.token) {
          //判断是否登录
          if (type == 'token') {
            this.$linkTo(url)
          }
          if (type == 'idNumber') {
            if (this.user.status == 0) {
              if (!this.user.phone) {
                //判断已经绑定手机
                this.$linkTo('/pages/phone/bingPhoneNumber?from=auth')
              } else {
                this.$linkTo('/mods/AppAuth/AppAuth')
              }
            } else {
              this.$linkTo(url)
            }
          }
        } else {
          // this.$getUserProfile().then((v) => {
          //   this.$autoLogin(v.userInfo).then(() => {
          //     this.handleGoto(url, type)
          //   })
          // })
          this.login()
        }
      } else {
        this.$linkTo(url)
      }
    },
    login() {
      this.$refs.login.show()
    },

    toSubmit() {
      this.handleGoto('./serviceForm?id=' + this.id, 'idNumber')
    },
  },
  onShareAppMessage() {
    return {
      title: this.title,
      path: `./serviceNotice?id=${this.id}`,
    }
  },
}
</script>

<style scoped lang="scss">
.service-notice {
  min-height: 100vh;
  padding-bottom: 122px;
  box-sizing: border-box;
  background-color: #fff;

  .service-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
    font-size: 34px;
    color: #fff;
    background: #197df0;
  }

  h2 {
    padding: 40px 0;
    text-align: center;
    font-size: 34px;
    color: #333;
    font-weight: 600;
  }

  .service-content {
    padding: 0 32px;
  }
}
</style>
