import request from '@/helpers/request'
import { Button, Popup, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import UserAuth from '@/views/order-detail/userAuth/index'
import { postMessage } from '@/helpers/native-message'
import { state } from '@/state'
import ColHeader from '@/components/col-header'
import TheSticky from '@/components/the-sticky'
import { browser } from '@/helpers/utils'

export default defineComponent({
  name: 'cash-protocol',
  data() {
    return {
      dialogStatus: false,
      realStatus: true, // 是否已经实名认证
      url: '',
      signStatus: '' // 签署状态
    }
  },
  async mounted() {
    try {
      const { data } = await request.get(
          '/api-teacher/sysUserContractRecord/checkContractSignV2?contractType=WITHDRAW'
        )
        this.signStatus = data
      // 先实名认证
      const user = state.user.data
      if (!user.realName || !user.idCardNo) {
        this.realStatus = false
      } else {

        this.getDetail()
      }
    } catch {
      //
    }
  },
  methods: {
    async getDetail() {
      try {
        // 查询提现协议
        if (this.signStatus === 'SUCCESS') {
          const res = await request.get(
            '/api-teacher/sysUserContractRecord/querySignContract',
            {
              params: {
                contractType: 'WITHDRAW'
              }
            }
          )
          this.url =
            window.location.origin +
            window.location.pathname +
            '/pdf/web/viewer.html?file=' +
            encodeURIComponent(res.data) +
            '&btn=1'
        } else {
          const res = await request.get(
            '/api-teacher/sysUserContractRecord/queryLatestContractTemplate',
            {
              params: {
                contractType: 'WITHDRAW'
              }
            }
          )

          this.url =
            window.location.origin +
            window.location.pathname +
            '/pdf/web/viewer.html?file=' +
            encodeURIComponent(res.data.origanalFileUrl) +
            '&btn=1'
        }
      } catch {
        //
      }
    },
    async onSubmit() {
      try {
        await request.get('/api-teacher/sysUserContractRecord/sign', {
          params: {
            contractType: 'WITHDRAW'
          }
        })
        this.dialogStatus = true
        // setTimeout(() => {
        //   // Toast('签署成功')
        // }, 100)
        // setTimeout(() => {
        //   postMessage({
        //     api: 'openPageSuccess',
        //     content: {
        //       page: 'WITHDRAW'
        //     }
        //   })
        // }, 1000)
      } catch {
        //
      }
    },
    onSuccess() {
      // 实名成功
      this.realStatus = true
      this.getDetail()
    },
    onBack() {
      if (browser().isApp) {
        postMessage({ api: 'goBack' })
      } else {
        this.$router.back()
      }
    }
  },
  render() {
    return (
      <div class={styles.cashProtocol}>
        <TheSticky position="top">
          <ColHeader />
        </TheSticky>
        {this.realStatus ? (
          <>
            <iframe
              src={this.url}
              frameborder="0"
              style={{
                width: '100%',
                height: 'calc(100vh - var(--header-height))',
                border: 'none'
              }}
            ></iframe>
            {this.signStatus === 'NOT_SIGN' ? (
              <Button
                type="primary"
                size="large"
                block
                round
                class={styles.submit}
                onClick={this.onSubmit}
              >
                我已阅读并同意
              </Button>
            ) : (
              ''
            )}
          </>
        ) : (
          <UserAuth hideHeader onSuccess={this.onSuccess} />
        )}

        <Popup
          v-model:show={this.dialogStatus}
          round
          class={styles.dialogPopup}
        >
          <div class={styles.dialogSection}>
            <div class={styles.dialogTitle}>提示</div>
            <div class={styles.dialogContent}>
              结算协议签署中，签署成功后即可申请结算
            </div>

            <Button
              round
              type="primary"
              class={styles.dialogBtn}
              onClick={() => this.onBack()}
            >
              我知道了
            </Button>
          </div>
        </Popup>
      </div>
    )
  }
})
