<template>
  <div class="detail-container">
    <div class="pdf">
      <iframe :src="src + pdfUrl" class="iframe"></iframe>
    </div>
    <!-- 补充材料问题件 -->
    <div class="update" v-if="issueType === '828601'">
      <div class="updateInfo">
        <div class="title">请上传补充资料</div>
        <div class="content">
          <div class="query">
            <div>补充说明</div>
            <textarea id="supplementDesc" v-model="suplementDesc" :maxlength="200" placeholder="如您有需要说明的内容, 请在此输入" />
          </div>
          <div class="query">
            <div class="mb5">问题说明</div>
            <p>
              {{ problemDetail.issueContent }}
            </p>
          </div>
          <van-uploader :after-read="uploadSupplementImg" :before-delete="deleteSupplementImg" v-model="imageList" />
        </div>
      </div>
    </div>
    <!-- 新契约基本问题件 -->
    <div class="feedback" v-if="issueType === 'TB89'">
      <div class="title">问题件回复：</div>
      <textarea placeholder="请输入" v-model="newContract.feedback"></textarea>
    </div>
    <div class="checkedBox" v-if="issueType !== '818901'">
      <van-checkbox v-model="checked" class="checked" icon-size="16px" shape="square"
        >本人认真阅读本新契约基本问题件，对其有关内容已全部了解，确认所上传资料均为真实资料，如有虚假资料或不如实告知，一切法律后果本人承担，同意将其作为投保要约的有效组成部分并承诺遵守。</van-checkbox
      >
    </div>
    <!-- 转账不成功基本问题件 -->
    <div class="selectList" v-if="issueType === '818901'">
      <div class="item">
        <van-field label-class="labels" label="处理方式">
          <template #input>
            <van-radio-group :disabled="handleType" v-model="transfer.mode" direction="horizontal" class="radioGroup" @change="modeChange">
              <van-radio :name="1" icon-size="16px">继续转账</van-radio>
              <van-radio :name="2" icon-size="16px">终止转账</van-radio>
              <van-radio :name="3" icon-size="16px">更换卡号</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
      <div v-if="this.transfer.mode === 3">
        <div class="item">
          <van-field v-model="transfer.bank" @click="getBankListItem" label-class="labels" readonly label="开户银行" placeholder="请选择"> </van-field>
        </div>
        <div class="item">
          <van-field v-model="transfer.card" :maxlength="19" label-class="labels" label="银行卡号" placeholder="请输入银行卡号"
            ><template #button>
              <van-button size="small" class="button" round color="#e4393c" type="primary" @click.stop="toggleCardScan(true)">银行卡扫描</van-button>
            </template>
          </van-field>
        </div>
        <div class="item">
          <van-field label-class="labels" readonly label="银行卡照片"></van-field>
          <div class="cardList">
            <van-uploader :max-count="1" :after-read="cardUpload" @delete="transferBankCardDelete" name="bankcardA" v-model="transfer.cardPhoto" />
          </div>
        </div>
      </div>
      <div class="checkedBox" v-if="issueType === '818901'">
        <van-checkbox v-model="checked" class="checked" icon-size="16px" shape="square"
          >本人已认真阅读和理解上述通知书内容，同意将其作为投保要约的有效组成部分并承诺遵守。</van-checkbox
        >
      </div>
    </div>
    <!-- end -->
    <div class="autograph">
      <div class="list">
        <span>投保人<span v-if="releationType">/被保险人</span>亲笔签名：</span>
        <van-button type="danger" size="small" @click="autograph(0)">{{ policyholderSigned ? '已签名' : '未签名' }}</van-button>
      </div>
      <div class="list" v-if="!releationType">
        <span>被保险人/监护人亲笔签名：</span>
        <van-button type="danger" size="small" @click="autograph(1)">{{ insurantSigned ? '已签名' : '未签名' }}</van-button>
      </div>
    </div>
    <div class="bg-white bottom-btn">
      <van-button type="danger" size="large" block @click="submit">下一步</van-button>
    </div>
    <short-message
      :phoneNumber="phoneNum"
      :sendTime.sync="sendTime"
      :show.sync="dialog.show"
      :type="dialog.type"
      :text="dialog.text"
      @getMessage="getMessage"
    ></short-message>
    <van-popup v-model="transfer.show" position="bottom">
      <ul class="bankList">
        <li v-for="item in transfer.bankList" :key="item.code" @click="getBankListItem(item)">{{ item.bankName }}</li>
      </ul>
    </van-popup>
    <div :class="{ showDiscern: 1, show: transfer.showDiscern }">
      <van-icon name="cross" class="icon" @click.stop="toggleCardScan(false)" size="20" />
      <bank-card-scan class="backContent" :scanShow="true" :clear="transfer.clear" @getScanInfo="getBankNo"></bank-card-scan>
    </div>
    <!-- 转账不成功问题件提示框 -->
    <van-dialog v-model="showConfirm" title="标题" :show-confirm-button="false">
      <p style="margin: 1em;" v-if="transfer.mode === 2">
        如您选择终止转账，我公司将按照承保前撤单处 理，请您谨慎选择
      </p>
      <p style="margin: 1em;" v-if="transfer.mode === 3">
        变更银行账号后，续期保险费（如有）默认使用新账 号信息进行转账支付
      </p>
      <van-button type="danger" block @click="showConfirm = false">确定</van-button>
    </van-dialog>
  </div>
</template>
<script>
import { Uploader, Checkbox, Field, Radio, RadioGroup, Popup, Overlay, Dialog } from 'vant'
import { getBankList, uploadImg } from '@/api/ebiz/sale/sale'
import { getQuestionDetail, updateQuestionDetail } from '@/api/ebiz/questions'
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
import ShortMessage from '@/components/ebiz/question/ShortMessage.vue'
import config from '@/config'
export default {
  name: 'QuestionsDetail',
  components: {
    [Uploader.name]: Uploader,
    [Checkbox.name]: Checkbox,
    ShortMessage,
    BankCardScan,
    [Field.name]: Field,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Popup.name]: Popup,
    [Overlay.name]: Overlay,
    [Dialog.name]: Dialog
  },
  data() {
    let isWeixin = this.$utils.device().isWeixin
    return {
      suplementDesc: '',
      uploadIndex: 0,
      releationType: null,
      imageList: [],
      imageResultList: [],
      sendTime: 0,
      isWeixin,
      problemInfo: {},
      problemDetail: {},
      newContract: {
        // 新契约
        feedback: ''
      },
      transfer: {
        // 转账失败
        mode: 1,
        bank: '',
        bankCode: '',
        card: '',
        cardPhoto: [],
        bankList: [],
        show: false, //显示银行列表
        showDiscern: false, //是否开启银行卡识别
        clear: false, //是否清空银行卡识别数据
        cardUploadResult: null
      },
      // 勾选协议
      checked: false,
      dialog: {
        // 弹窗
        show: false,
        type: 'confirm',
        text: ''
      },
      issueType: 0,
      // 投保人是否已签名
      policyholderSigned: false,
      policyholderBase64: '',
      // 被保人是否已签名
      insurantSigned: false,
      insurantBase64: '',
      // 接收验证码手机号码
      phoneNum: '',
      showConfirm: false,
      src: location.origin + '/pdfjs/web/viewer.html?file=',
      pdfUrl: '',
      // 转账不成功处理方式是否不可用
      handleType: false
    }
  },
  methods: {
    // 补充资料问题件被保人上传身份证照片
    async uploadSupplementImg(file) {
      file.index = this.uploadIndex
      this.uploadIndex++
      this.$toast.loading({
        duration: 0
      })
      const res = await this.afterRead(file)
      let result = {
        rgssUrl: res.path,
        imageInfoType: 1,
        subBusinessType: '0',
        index: this.uploadIndex
      }
      this.imageResultList.push(result)
      if (this.isWeixin) {
        localStorage.setItem('imageResultList', JSON.stringify(this.imageResultList))
      }
    },
    deleteSupplementImg(file) {
      this.imageResultList = this.imageResultList.filter(result => {
        return result.index !== file.index
      })
      if (this.isWeixin) {
        localStorage.setItem('imageResultList', JSON.stringify(this.imageResultList))
      }
      return true
    },
    checkSupplementData() {
      return this.imageList.length !== 0
    },
    // 转账不成功问题件添加银行卡照片
    async cardUpload(file, detail) {
      // 供微信签名回调回显图片
      if (this.isWeixin) {
        localStorage.setItem(detail.name, file.content)
      }
      let res = await this.afterRead(file)
      if (res.result === '0') {
        this.transfer.cardUploadResult = {
          rgssUrl: res.path,
          imageInfoType: '3',
          subBusinessType: '0'
        }
        if (this.isWeixin) {
          localStorage.setItem('transferCardUploadResult', JSON.stringify(this.transfer.cardUploadResult))
        }
      } else {
        this.$toast(res.resultMessage)
      }
    },
    // 转账不成功问题件删除银行卡照片
    transferBankCardDelete() {
      this.transfer.cardUploadResult = null
    },
    // 签名
    async autograph(personType) {
      if (this.isWeixin && this.checked) {
        localStorage.setItem('agreementChecked', true)
      }

      if (this.isWeixin && this.issueType === '828601') {
        localStorage.setItem('imageResultList', JSON.stringify(this.imageResultList))
        localStorage.setItem('suplementDesc', JSON.stringify(this.suplementDesc))
      }else if (this.isWeixin && this.issueType === 'TB89'){
        localStorage.setItem('feedback', JSON.stringify(this.newContract.feedback))
      }

      // 新契约问题件签名前必须输入回复内容
      if (this.issueType === 'TB89') {
        let reply = this.newContract.feedback.trim()
        if (!reply) {
          return this.$toast('请填写具体回复信息')
        } else if (reply.length < 4 || reply.length > 400) {
          return this.$toast('请输入4-400个字符')
        } else {
          localStorage.setItem('problemReplay', reply)
        }
      }
      // 转账不成功签名前必须选择处理方式
      if (this.issueType === '818901') {
        if (this.transfer.mode === '') {
          return this.$toast('请先选择处理方式')
        } else {
          localStorage.setItem('resolveType', this.transfer.mode)
        }

        // 非终止转账
        if (this.transfer.mode === 3) {
          // 校验开户行
          if (!this.transfer.bank) {
            return this.$toast('请选择开户银行')
          }
          // 银行卡号校验
          if (this.transfer.card.trim() === '') {
            return this.$toast('请填写银行卡信息')
          }
          let regx = /^(\d{16}|\d{17}|\d{18}|\d{19})$/
          if (!regx.test(this.transfer.card)) {
            return this.$toast('银行卡号不符合规则')
          }
          if (this.transfer.cardPhoto.length === 0) {
            return this.$toast('请上传银行卡照片')
          }
        }

        if (this.transfer.bank) {
          localStorage.setItem('problemBank', this.transfer.bank)
        }

        if (this.transfer.bankCode) {
          localStorage.setItem('problemBankCode', this.transfer.bankCode)
        }

        if (this.transfer.card) {
          localStorage.setItem('problemCard', this.transfer.card)
        }
      }
      let name = personType === 0 ? this.problemInfo.appntName : this.problemInfo.insuredName
      let number = personType === 0 ? this.problemInfo.appntIdCardNo : this.problemInfo.insuredIdCardNo
      let keyword = ''
      if (personType === 1) {
        keyword = '被保险人/监护人签名'
      }
      if (personType === 0) {
        if (this.releationType) {
          keyword = '投保人/被保险人签名'
        } else {
          keyword = '投保人签名'
        }
      }
      if (!this.isWeixin) {
        let signParam = {
          name,
          type: '1',
          number,
          keyword,
          pageNo: '1',
          index: 1,
          offset: 20,
          pos: 3,
          signatureWidth: this.$utils.signParams().signatureWidth,
          signatureHeight: this.$utils.signParams().signatureHeight
        }
        console.dir(signParam)
        // eslint-disable-next-line
        const res = await EWebBridge.webCallAppInJs('ca_sign', signParam)
        let signRes = JSON.parse(res)
        // 投保人签名
        if (personType === 0 && signRes.state === '1') {
          this.policyholderBase64 = decodeURI(signRes.sign)
          this.policyholderSigned = true
        }
        // 被保人签名
        else if (personType === 1 && signRes.state === '1') {
          this.insurantBase64 = decodeURI(signRes.sign)
          this.insurantSigned = true
        }
      } else {
        if (personType === 0) {
          if (this.releationType) {
            this.toAirSign('0', '投保人/被保险人签名', '10', '2', personType)
          } else {
            this.toAirSign('0', '投保人签名', '10', '2', personType)
          }
        } else {
          let keyword = '被保险人/监护人签名'
          this.toAirSign('0', keyword, '10', '2', personType)
        }
      }
    },
    getBankNo(data) {
      console.log(data)
    },
    toggleCardScan(data) {
      this.transfer.showDiscern = data
      if (data) {
        localStorage.setItem('cardScanningType', 0)
      } else {
        localStorage.removeItem('cardScanningType')
      }
    },
    getBankListItem(item) {
      this.transfer.show = !this.transfer.show
      this.transfer.bank = item.bankName
      this.transfer.bankCode = item.code
    },
    async getBankList() {
      this.transfer.bankList = (
        await getBankList({
          operateType: 'bank_type'
        })
      ).content
    },
    appCallBack(data) {
      let title = ''
      if (this.issueType === 'TB89') {
        title = '国富人寿基本问题件处理'
      } else if (this.issueType === '828601') {
        title = '国富人寿补充资料问题件处理'
      } else {
        title = '国富人寿转账不成功问题件处理'
      }
      let shareObj = {
        title: title,
        content: '签字进行',
        url: `${location.origin}/#/questions/detail/${this.problemDetail.issueId}/${this.problemDetail.issueType}?&token=${localStorage.token}&receiveType=${this.problemDetail.receiveType}&prtNo=${this.$route.query.prtNo}`,
        img: this.$assetsUrl + 'images/logo.png'
      }
      if (data.trigger == 'right_button_click') {
        // eslint-disable-next-line no-undef
        EWebBridge.webCallAppInJs('bridge', {
          flag: 'share',
          extra: shareObj
        })
      }
    },
    modeChange(mode) {
      if (mode !== 1) {
        this.showConfirm = true
      }
      this.transfer.bankCode = ''
      this.transfer.bank = ''
      this.transfer.card = ''
      this.transfer.cardPhoto.splice(0)
      this.transfer.cardUploadResult.splice(0)
    },
    async afterRead(file) {
      let data = new FormData()
      data.append('imgPath', file.file)
      return await uploadImg(data)
    },
    // 下一步
    async submit() {
      // 校验回复内容
      if (this.issueType === 'TB89') {
        let reply = this.newContract.feedback.trim()
        if (reply === '') return this.$toast('请填写具体回复信息')
        if (reply.length < 4 || reply.length > 400) return this.$toast('请输入4-400个字符')
      }
      // 校验补充资料
      if (this.issueType === '828601') {
        if (!this.checkSupplementData()) return this.$toast('请上传补充资料')
      }
      // 转账不成功
      if (this.issueType === '818901') {
        // 非终止转账
        if (this.transfer.mode === 3) {
          // 校验开户行
          if (!this.transfer.bank) {
            return this.$toast('请选择开户银行')
          }
          // 银行卡号校验
          if (this.transfer.card.trim() === '') {
            return this.$toast('请填写银行卡信息')
          }
          let regx = /^(\d{16,19})$/
          if (!regx.test(this.transfer.card)) {
            return this.$toast('银行卡号不符合规则')
          }
          if (this.transfer.cardPhoto.length === 0) {
            return this.$toast('请上传银行卡照片')
          }
        }
      }
      if (!this.checked) {
        return this.$toast('请先阅读并勾选协议')
      }
      // 校验签名
      if (this.releationType) {
        if (!this.policyholderSigned) return this.$toast('签名未完成, 请先进行签名')
      } else {
        if (!this.policyholderSigned || !this.insurantSigned) return this.$toast('签名未完成, 请先进行签名')
      }

      this.phoneNum = this.problemInfo.phoneNo
      let phoneStrArr = this.problemInfo.phoneNo.split('')
      phoneStrArr.splice(3, 4, '****')
      let encryptPhone = phoneStrArr.join('')
      // 短信校验
      this.dialog = {
        type: 'confirm',
        show: true,
        text: `为确定用户身份，我们将向${encryptPhone}此手机号发送验证码`
      }
    },
    async getMessage({ data }) {
      let signInfo = []
      if (this.policyholderBase64) signInfo.push(this.policyholderBase64)
      if (this.insurantBase64) signInfo.push(this.insurantBase64)
      let problemData = {
        id: this.$route.params.id,
        businessType: this.$route.params.type,
        content: '',
        disposeStatus: '',
        bankType: '',
        bankName: '',
        bankNo: '',
        list: [],
        signInfo: signInfo
      }
      // 验证码验证成功
      if (data) {
        // 关闭短信弹窗
        this.dialog.show = false
        // 契约问题件
        if (this.issueType === 'TB89') {
          problemData.content = this.newContract.feedback
        }
        // 补充资料类问题件
        else if (this.issueType === '828601') {
          problemData.list.push(...this.imageResultList)
          if (this.suplementDesc.trim()) {
            problemData.content = this.suplementDesc.trim()
          } else {
            problemData.content = '客户已上传资料'
          }
        }
        // 转账不成功问题件
        else {
          problemData.disposeStatus = this.transfer.mode
          problemData.bankType = this.transfer.bankCode
          problemData.bankName = this.transfer.bank
          problemData.bankNo = this.transfer.card
          // 选择非终止转账时上传银行卡照片
          if (this.transfer.mode === 3) {
            problemData.list.push(this.transfer.cardUploadResult)
          }
        }
        // 更新问题件数据
        try {
          this.$toast.loading({
            duration: 0
          })
          let res = await updateQuestionDetail(problemData)
          this.$toast.clear()
          if (res.result === '1') {
            localStorage.setItem('failedReason', res.resultMessage)
          }
          this.$jump({
            flag: 'h5',
            extra: {
              url: location.origin + `/#/questions/result/${res.result}`,
              forbidSwipeBack: '1'
            },
            routerInfo: {
              path: `/questions/result/${res.result}`
            }
          })
        } catch (reason) {
          this.$toast.clear()
          this.$toast('服务器异常, 请稍后再试')
        }
      }
    },
    async getQuestionDetail() {
      const rs = await getQuestionDetail({
        id: this.$route.params.id,
        prtNo: this.$route.query.prtNo,
        userType: Number(this.$route.query.receiveType)
      })
      if (rs.result === '0') {
        // 已处理问题件跳转至列表页
        if (rs.content && rs.content.status === '1') {
          Dialog({
            message: '问题件已被处理',
            confirmButtonColor: 'red',
            beforeClose: (action, done) => {
              done()
              this.$jump({
                flag: 'h5',
                extra: {
                  url: location.origin + `/#/questions/list`,
                  forbidSwipeBack: '1'
                },
                routerInfo: {
                  path: `/questions/list`
                }
              })
            }
          })
          return
        }
        // 是否投被同人
        this.releationType = rs.content.releation === '00'
        // 包含投保人和被保人证件id和姓名
        this.problemInfo = rs.content
        this.pdfUrl = encodeURIComponent(config.imgDomain + `/returnDirectStream?imgPath=${this.problemInfo.pdfUrl}`)
        this.problemDetail = this.problemInfo.list[0]
        // 问题件接收人类型: 0投保人, 1被保人
        this.problemDetail.receiveType = this.$route.query.receiveType
      } else {
        this.$toast(rs.resultMessage)
      }
    },
    // 微信空签
    toAirSign(status, keyword, offset, originStatus, personType) {
      sessionStorage.removeItem('twoimgBase64Data')
      sessionStorage.removeItem('twowxSigned')
      localStorage.removeItem('signInfo')

      localStorage.setItem('signedPersonType', personType)
      localStorage.setItem(
        'signInfo',
        JSON.stringify({
          originStatus: originStatus,
          idNo: personType === 0 ? this.problemInfo.appntIdCardNo : this.problemInfo.insuredIdCardNo,
          name: personType === 0 ? this.problemInfo.appntName : this.problemInfo.insuredName,
          type: '1',
          keyword: keyword,
          status: status,
          offset: offset,
          originUrl: location.href + '&fromSign=true'
        })
      )
      window.location.href = this.$mainUrl + '/sign/index.html'
    },
    dataURLtoFile(dataurl, filename) {
      // 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    }
  },
  async created() {
    // 问题件类型
    this.issueType = this.$route.params.type
    // 根据问题件类型修改标题
    if (this.issueType === 'TB89') {
      document.title = '新契约基本问题件通知书'
    } else if (this.issueType === '818901') {
      document.title = '转账不成功问题件'
    } else if (this.issueType === '828601') {
      document.title = '补充资料通知书'
    }
    if (this.isWeixin) {
      localStorage.setItem('token', this.$route.query.token)
      let imgBase64Data = sessionStorage.getItem('twoimgBase64Data')
      let signInfo = JSON.parse(localStorage.getItem('signInfo'))

      if (this.$route.query.fromSign) {
        // 0代表投保人签名
        if (Number(localStorage.getItem('signedPersonType')) === 0) {
          if (signInfo.status == '0') {
            localStorage.setItem('policyholderSignInfo', imgBase64Data)
          }
        }
        // 1代表被保人签名
        else {
          if (signInfo.status == '0') {
            localStorage.setItem('insurantSignInfo', imgBase64Data)
          }
        }
      } else {
        // 不是微信签名回调时清空保存的数据
        localStorage.removeItem('insurantSignInfo')
        localStorage.removeItem('policyholderSignInfo')
        localStorage.removeItem('agreementChecked')
        localStorage.removeItem('problemReplay')
        // 转账不成功类型保存的数据
        localStorage.removeItem('resolveType')
        localStorage.removeItem('problemBank')
        localStorage.removeItem('problemCard')
        localStorage.removeItem('problemBankCode')
        // 补充资料问题件保存数据
        localStorage.removeItem('imageResultList')
        localStorage.removeItem('suplementDesc')
        localStorage.removeItem('feedback')
      }

      // localstorage存在投保人签名信息
      if (localStorage.getItem('policyholderSignInfo')) {
        this.policyholderBase64 = localStorage.getItem('policyholderSignInfo')
        this.policyholderSigned = true
      }

      // localstorage存在被保人签名信息
      if (localStorage.getItem('insurantSignInfo')) {
        this.insurantBase64 = localStorage.getItem('insurantSignInfo')
        this.insurantSigned = true
      }

      // localstorage存在回复内容时回显回复内容
      if (localStorage.getItem('problemReplay')) {
        this.newContract.feedback = localStorage.getItem('problemReplay')
      }

      // 微信签名后回显同意协议
      if (localStorage.getItem('agreementChecked') === 'true') {
        this.checked = true
      }

      // 转账不成功问题件
      {
        // localstorage存在处理类型回显处理类型
        if (localStorage.getItem('resolveType')) {
          this.transfer.mode = Number(localStorage.getItem('resolveType'))
        }

        // localstorage存在银行名称回显银行名称
        if (localStorage.getItem('problemBank')) {
          this.transfer.bank = localStorage.getItem('problemBank')
        }

        // localstorage存在银行卡号回显银行卡号
        if (localStorage.getItem('problemCard')) {
          this.transfer.card = localStorage.getItem('problemCard')
        }

        if (localStorage.getItem('problemBankCode')) {
          this.transfer.bankCode = localStorage.getItem('problemBankCode')
        }

        // 签名回调回显银行卡照片
        if (localStorage.getItem('bankcardA')) {
          this.transfer.cardPhoto.push({
            content: localStorage.getItem('bankcardA')
          })
        }
      }

      {
        // 微信签名后回显补充资料照片
        if (localStorage.getItem('imageResultList')) {
          let images = JSON.parse(localStorage.getItem('imageResultList'))
          this.imageResultList = images
          for (let image of images) {
            this.imageList.push({
              url: config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${encodeURIComponent(image.rgssUrl)}`,
              index: image.index
            })
          }
        }
        if (localStorage.getItem('suplementDesc')) {
          this.suplementDesc = JSON.parse(localStorage.getItem('suplementDesc'))
        }
        if (localStorage.getItem('feedback')) {
          this.newContract.feedback = JSON.parse(localStorage.getItem('feedback'))
        }
      }
    }
    this.getBankList()
    this.getQuestionDetail()
  },
  mounted() {
    setTimeout(() => {
      // 拦截原生右上角按钮
      if (!this.isWeixin) {
        window.EWebBridge.webCallAppInJs('webview_right_button', {
          btns: [
            {
              img: this.$assetsUrl + 'images/share@3x.png'
            }
          ]
        })
      }
    }, 1000)
    window['appCallBack'] = this.appCallBack
  }
}
</script>
<style lang="scss" scoped>
.iframe {
  width: 99%;
  height: 70vh;
}

.uploadTitle {
  font-size: 14px;
  margin-bottom: 0.5em;
}

.bottom-btn {
  z-index: 1;
}

/deep/ .van-dialog__header {
  padding-top: 1em;
}

/deep/ .van-search {
  font-size: 10px;
}

#app .van-cell:not(:last-child):after {
  border: 0;
}
.detail-container {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 40px;
  box-sizing: border-box;
  .showDiscern {
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0.3s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #fff;
    &.show {
      z-index: 999;
      opacity: 1;
      visibility: visible;
      transition: all 0.3s;
      .backContent {
        transform: translateY(0);
        transition: all 0.3s ease 0.3s;
      }
    }
    .icon {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 1;
    }
    .backContent {
      transition: all 0.3s;
      width: 100%;
      transform: translateY(10px);
      height: 95%;
      background: #fff;
      border-radius: 5px;
      overflow: hidden;
    }
  }
  .bankList {
    height: 300px;
    li {
      text-align: center;
      padding: 10px 0;
      font-size: 14px;
      border-bottom: 1px solid #eee;
    }
  }
  .pdf {
    width: 100vw;
  }
  .checkedBox {
    padding: 10px;
    .checked {
      font-size: 10px;
      color: #666;
      line-height: 1.5;
    }
  }
  .update {
    margin-bottom: 10px;
    .updateInfo {
      border-bottom: 1px solid #eee;
      .title {
        border-bottom: 1px solid #eee;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding: 0 10px;
      }
      .content {
        padding: 10px 20px;
        .query {
          color: #e4393c;
          font-size: 13px;
          #supplementDesc {
            margin: 10px 0;
            width: 100%;
            color: #000;
          }
          div {
            padding-bottom: 2px;
          }
          p {
            line-height: 22px;
          }
        }
      }
    }
  }
  .feedback {
    margin-bottom: 10px;
    padding: 0 10px;
    .title {
      font-size: 14px;
      padding: 10px 0;
    }
  }
  .selectList {
    .item {
      border-bottom: 1px solid #eee;
      /deep/.labels {
        font-size: 13px;
      }
      .radioGroup {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
      }
      .button {
        height: 18px;
        line-height: 18px;
      }
      .cardList {
        padding: 10px 10px 0;
        border-top: 1px solid #eee;
      }
    }
  }
  .autograph {
    padding: 10px 10px 20px 10px;
    font-size: 12px;
    .list {
      &:first-child {
        margin-bottom: 5px;
      }
      .button {
        border-radius: 5px;
        height: 18px;
        line-height: 18px;
      }
    }
  }
  .next {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
  }
}
textarea {
  font-size: 13px;
  border: 0;
  width: 96%;
  height: 60px;
  border: 1px solid #e5e5e5;
  padding: 5px;
  resize: none;
}
</style>
