<template>
  <Page class="page-rnr-person-agreement" title="入网协议">
    <div class="page-rnr-main-card">
      <van-loading v-if="!notificationUrl" class="global-loading" color="#0094ff" />
      <Painter ref="painterRef" v-else>
        <img crossOrigin :src="notificationUrl">
        <img :src="signUrl" class="fixed-right">
        <h1>* 附件</h1>
        <div v-for="vin in enterpriseMarkup.iccidList" :key="vin.vin">
          <p>VIN: {{ vin.vin }}</p>
          <p>ICCID: {{ (vin.iccidList || []).join(', ') }}</p>
          <p style="border-top: 1px solid;" />
        </div>
      </Painter>
    </div>
    <div class="page-rnr-sign-wrapper">
      <div v-if="signUrl" class="page-rnr-sign-fill" @click="openSign">
        <img :src="signUrl" class="page-rnr-sign-img">
        <div class="page-rnr-sign-btn">重签</div>
      </div>
      <div v-else class="page-rnr-sign" @click="openSign">点击在此处签名</div>
    </div>
    <template #slot-operation>
      <van-button type="primary" class="page-rnr-main-btn-before" round color="linear-gradient(120deg, #EDF3FF 0%, #E9F0FF 97%)" @click="handleToBefore">上一步</van-button>
      <van-button :disabled="btnDisable" :loading="loading" type="primary" class="page-rnr-main-btn-next" round color="linear-gradient(120deg, #4F4CFB 0%, #376FF4 97%)" @click="handleToNext">下一步</van-button>
    </template>
    <Sign :visible.sync="showSign" @submit="handleSignChange" />
    <!-- <PhoneVerify :visible.sync="showSms" :customer="true" :loading="loading" @submit="handleToNext" /> -->
  </Page>
</template>

<script>
import Painter from '@/components/Painter'
import { mapGetters } from 'vuex'
import signMixin from '@/minxin/sign'
import Page from '@/components/Page'
import PhoneVerify from '@/components/PhoneVerify'
import { DISPATCH_INIT_PROTOCAL } from '@/store/modules/markup'
import { fileUpload, submitEnterpriseRnr } from '@/api/markup'

export default {
  name: 'MarkupEnterpriseAgreement',
  components: { Page, PhoneVerify, Painter },
  mixins: [signMixin],
  data() {
    return {
      loading: false,
      showSms: false,
      contractPic: [],
      notificationUrl: ''
    }
  },

  computed: {
    ...mapGetters(['enterpriseMarkup'])
  },
  async mounted() {
    // 查询协议数据
    await this.$store.dispatch(`markup/${DISPATCH_INIT_PROTOCAL}`)
    // 当前请求到的协议数据
    const { protocalMarkup } = this.$store.getters
    // 协议链接
    this.notificationUrl = protocalMarkup[window.os.isTablet ? 'companyAgreementVertical' : 'companyAgreementHorizontal'].fileUrl
  },
  methods: {
    /**
     * 调到到下一页：腾讯的实名认证平台
     */
    async handleToNext() {
      // 呈现loading状态
      this.loading = true
      try {
        // 开始绘制canvas
        const file = await this.$refs.painterRef.draw()
        // 开始导出图片
        const { uuid } = await fileUpload({ file })
        // 取出数据
        const enterpriseRnr = {
          ...(this.$store.getters.enterpriseMarkup || {}),
          contractPic: [uuid],
          corporationPhone: this.$store.getters.loginUser.phone,
          verificationCode: ''
        }
        // 开始提交数据
        const { h5LivenessUrl } = await submitEnterpriseRnr({
          ...enterpriseRnr
        })
        // 跳转到活体认证页面
        window.location.href = h5LivenessUrl
      } catch (error) {
        console.error(error)
      }
      // 关闭loading状态
      this.loading = false
    },

    /**
     * 跳转到上一页
     */
    handleToBefore() {
      // 回退到上个页面
      this.$router.back()
    }
  }
}
</script>

<style lang="scss">
.page-rnr-person-agreement {
  .page-rnr-main {
    margin-top: 30px;
    .page-rnr-main-card {
      padding: 24px 24px 168px;
      height: calc(100vh - 450px);
      overflow: auto;
      .page-rnr-main-canvas {
        width: 100%;
      }
    }
    .page-rnr-sign-wrapper {
      background: #ffffff;
      bottom: 196px;
      padding: 24px 32px;
      position: fixed;
      left: 24px;
      right: 24px;

      .page-rnr-sign {
        align-items: center;
        background: #F7F8FA;
        border: 1px dashed rgba(7, 97, 243, 1);
        border-radius: 12px;
        color: #0761F3;
        display: flex;
        font-size: 24px;
        font-weight: 400;
        height: 120px;
        justify-content: center;
      }
      .page-rnr-sign-fill {
        align-items: center;
        background: #F7F8FA;
        border-radius: 12px;
        bottom: 148px;
        display: flex;
        height: 120px;
        justify-content: space-between;
        padding: 0px 48px 0px 132px;
        .page-rnr-sign-img {
          width: auto;
          height: 100px;
        }
        .page-rnr-sign-btn {
          color: #0761F3;
          font-size: 24px;
          font-weight: 400;
        }
      }
    }
    .page-rnr-main-fixed-btn-group {
      display: flex;
      justify-content: space-between;
      .page-rnr-main-btn-before {
        color: #242424 !important;
        flex: 1;
        height: 96px;
      }
      .page-rnr-main-btn-next {
        flex: 2;
        height: 96px;
      }
    }
  }
}
</style>
