<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-25 10:20:35
 * @LastEditTime: 2019-10-24 16:04:40
 * @LastEditors: Please set LastEditors
 -->
<template>
  <h-view id="approval" class="public-style" title="进件审批">
    <div v-if="!isConfirm&&confirm_status!=='APPROVED'" v-once class="myModal">
      <div class="box">
        <span class="title-box">征信授权书</span>
        <div class="content-box">
          <p>本人知晓并同意_(会员机构XXX)___依据《征信业管理条例》及相关法律法规，委托第三方征信机构，合法调查本人信息，包括但不限于个人基本信息、借贷交易信息、银行卡交易信息、电商交易信息、公用事业信息、央行征信报告。所获取的信息，仅在此笔借贷业务的贷前审批和贷后管理工作中使用。(会员机构XXX)_将对所获取的信息妥善进行保管，除为本人提供信审服务/借款资金的合作方外，未经本人授权，不得向其他机构或个人公开、编辑或透露信息内容。</p>
          <p>本人知晓并同意_(会员机构XXX)_依据《征信业管理条例》及相关法律法规，向第三方征信机构提交本人在此笔借贷业务中产生的相关信息，包括但不限于个人基本信息、借款申请信息、借款合同信息以及还款行为信息，并记录在征信机构的个人信用信息数据库中。</p>
          <p>本人同意若本人出现不良还款行为，__(会员机构XXX)__按合同所留联系方式对本人进行提醒并告知，本人若仍未履行还款义务，_(会员机构XXX)__可将本人的不良还款信息提交至第三方征信机构，记录在征信机构的个人信用信息库中。</p>
          <p>本人已被明确告知不良还款信息一旦记录在第三方征信机构的个人信用信息数据库中，在日后的经济活动中对本人可能产生的不良影响。</p>
          <p>若本人所约定的联络方式产生变化，本人将及时通知_(会员机构XXX)_，若因未通知造成的相应损失，本人愿承担相应责任。</p>
          <p>本人知晓第三方征信机构包含：北京安融惠众征信有限公司。</p>
          <p>授权人签名：_______________</p>
          <p>日期：_____________________</p>
        </div>
        <div class="confirm">
          <input type="checkbox" @click="select" >
          <span>我本人已阅读本协议，并同意授权xxxx</span>
        </div>
        <button class="appro" @click="confirm">同意</button>
      </div>
    </div>
    <div v-if="downNum==1" class="modal-show">
      <div class="down">
        <div class="top">
          身份证
          <img src="@/assets/intoApproval/close.png" @click="downNum=false" >
        </div>
        <div class="down-content">
          <div>
            <img src="@/assets/intoApproval/front.png" >
          </div>
          <div>
            <img src="@/assets/intoApproval/back.png" >
          </div>
        </div>
        <button @click="confirm">下载</button>
      </div>
    </div>
    <div v-if="downNum==2" class="modal-show">
      <div class="down">
        <div class="top">
          营业执照
          <img src="@/assets/intoApproval/close.png" @click="downNum=false" >
        </div>
        <div class="down-content">
          <div>
            <img src="@/assets/intoApproval/front.png" >
          </div>
          <div>
            <img src="@/assets/intoApproval/back.png" >
          </div>
        </div>
        <button @click="confirm">下载</button>
      </div>
    </div>
    <div v-if="downNum==3" class="modal-show">
      <div class="down">
        <div class="top">
          银行卡
          <img src="@/assets/intoApproval/close.png" @click="downNum=false" >
        </div>
        <div class="down-content">
          <div>
            <img src="@/assets/intoApproval/front.png" >
          </div>
          <div>
            <img src="@/assets/intoApproval/back.png" >
          </div>
        </div>
        <button @click="confirm">下载</button>
      </div>
    </div>
    <div v-if="downNum==4" class="modal-show">
      <div class="down">
        <div class="top">
          征信授权书
          <img src="@/assets/intoApproval/close.png" @click="downNum=false" >
        </div>
        <div class="down-content">
          <div>
            <img src="@/assets/intoApproval/front.png" >
          </div>
          <div>
            <img src="@/assets/intoApproval/back.png" >
          </div>
        </div>
        <button @click="confirm">下载</button>
      </div>
    </div>
    <h-header :proportion="[5,1,1]" class="header">
      <div slot="left" class="h-header-btn" @click="$routeGo(-1)">
        <img src="@/assets/intoApproval/arrow.png" >
        <span>进件审批</span>
      </div>
    </h-header>
    <Tab @getTabNum="getTabNum" />
    <h-content class="content">
      <div v-if="tabNum==0&&bp_class=='NP'">
        <list-item :item-height="44">
          <item>
            <div slot="name">业务经办</div>
            <input slot="content" v-model="personInfo.bp_user_id_n" readonly >
          </item>
          <item>
            <div slot="name">经销商</div>
            <input slot="content" v-model="personInfo.bp_id_agent_n" >
          </item>
        </list-item>
        <div class="userInfo">承租人信息</div>
        <list-item :item-height="44">
          <item>
            <div slot="name">姓名</div>
            <input slot="content" v-model="personInfo.bp_name" readonly >
          </item>
          <item>
            <div slot="name">证件号</div>
            <input slot="content" v-model="personInfo.id_card_no" readonly >
          </item>
          <item>
            <div slot="name">电话号码</div>
            <input slot="content" v-model="personInfo.cell_phone" readonly >
          </item>
          <item>
            <div slot="name">居住地址</div>
            <input slot="content" v-model="personInfo.living_address" readonly >
          </item>
          <item>
            <div slot="name">户籍地址</div>
            <input slot="content" v-model="personInfo.address_on_resident_booklit" readonly >
          </item>
          <item>
            <div slot="name">学历</div>
            <input slot="content" v-model="personInfo.academic_background_n" readonly >
          </item>
          <item>
            <div slot="name">婚姻状况</div>
            <input slot="content" v-model="personInfo.marital_status_n" readonly >
          </item>
        </list-item>
        <div v-if="personInfo.marital_status == 'MARRIED'" >
          <div class="userInfo">配偶信息</div>
          <list-item :item-height="44">
            <item>
              <div slot="name">姓名</div>
              <input slot="content" v-model="personInfo.bp_name_sp" readonly >
            </item>
            <item>
              <div slot="name">电话号码</div>
              <input slot="content" v-model="personInfo.spouse_phone" readonly >
            </item>
            <item>
              <div slot="name">工作单位</div>
              <input slot="content" v-model="personInfo.working_place_sp" readonly >
            </item>
            <item>
              <div slot="name">居住地址</div>
              <input slot="content" v-model="personInfo.address_sp" readonly >
            </item>
          </list-item>
        </div>
        <div class="userInfo">
          担保人信息
          <span v-if="bondsInfo.length==0">（无）</span>
        </div>
        <list-item :item-height="76">
          <item v-for="(item,index) in bondsInfo" :key="index">
            <div slot="name">
              <span class="name-box">{{ index+1 }}</span>
              <span class="name">担保人{{ index+1 }}姓名</span>
              <span class="card-num">证件号</span>
            </div>
            <div slot="content" class="right">
              <img src="@/assets/intoApproval/introduce.png" >
              <span>{{ item.bp_name }}</span>
              <br >
              <span>{{ item.bp_class=='NP'?item.id_card_no:item.organization_code }}</span>
            </div>
          </item>
        </list-item>
        <div class="bottom-call">
          <div class="left">
            <img src="@/assets/distributorSign/call.png" alt="">
          </div>
          <div class="center">
            <p>业务经办：{{ bp_user_id_n }}</p>
            <p>联系电话：{{ personInfo.agent_phone }}</p>
          </div>
          <div class="right1" @click="callUp(personInfo.agent_phone)">
            <img src="@/assets/distributorSign/calls.png" alt="">
          </div>
        </div>
        <div class="alert">
          <div class="alert-content">
            <div class="title">
              <img src="@/assets/intoApproval/info.png" >
              <span class="info-word">温馨提示</span>
            </div>
            <p class="top-info">绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p>
            <div class="top-word">
              <p>本人保证所提供信息的真实性、完整性及准确性。</p>
              <p>本人在此授权徐工融资租赁有限公司通过中国人民银行个人信用信息基础数据库及其他征信机构、金融机构查询本人的个人信息、信用记录和工作情况。</p>
              <p>本人同意接收来自于徐工融资租赁有限公司或第三方发出的提醒付款、确认付款、催款等短信(不含广告),同意接收来自于徐工融资租赁有限公司的录音电话,并积极配合。</p>
            </div>
          </div>
        </div>
      </div>

      <div v-if="tabNum==0&&bp_class=='ORG'">
        <list-item :item-height="44">
          <item>
            <div slot="name">业务经办</div>
            <input slot="content" v-model="companyInfo.bp_user_id_n" readonly >
          </item>
          <item>
            <div slot="name">经销商</div>
            <input slot="content" v-model="companyInfo.bp_id_agent_n" >
          </item>
        </list-item>
        <div class="userInfo">承租人信息</div>
        <list-item :item-height="44">
          <item>
            <div slot="name">公司名称</div>
            <input slot="content" v-model="companyInfo.bp_name" readonly >
          </item>
          <item>
            <div slot="name">营业执照号</div>
            <input slot="content" v-model="companyInfo.organization_code" readonly >
          </item>
          <item>
            <div slot="name">注册资本</div>
            <input slot="content" v-model="companyInfo.registered_capital" readonly >
          </item>
          <item>
            <div slot="name">注册地址</div>
            <input slot="content" v-model="companyInfo.registered_place" readonly >
          </item>
          <item>
            <div slot="name">经营地址</div>
            <input slot="content" v-model="companyInfo.business_address" readonly >
          </item>
          <item>
            <div slot="name">固定电话</div>
            <input slot="content" v-model="companyInfo.phone" readonly >
          </item>
          <item>
            <div slot="name">是否授权</div>
            <input slot="content" v-model="companyInfo.auth_flag" readonly >
          </item>
        </list-item>
        <div v-if="companyInfo.auth_flag === '否'" class="userInfo">法人代表信息</div>
        <div v-if="companyInfo.auth_flag === '是'" class="userInfo">法人授权信息</div>
        <list-item v-if="companyInfo.auth_flag === '是'" :item-height="44">
          <item>
            <div slot="name">姓名</div>
            <input slot="content" v-model="companyInfo.auth_person_name" readonly >
          </item>
          <item>
            <div slot="name">身份证</div>
            <input slot="content" v-model="companyInfo.auth_person_id_card" readonly >
          </item>
          <item>
            <div slot="name">公司职务</div>
            <input slot="content" v-model="companyInfo.auth_person_position" readonly >
          </item>
          <item>
            <div slot="name">授权事项</div>
            <input slot="content" v-model="companyInfo.auth_person_matter" readonly >
          </item>
        </list-item>
        <list-item v-if="companyInfo.auth_flag === '否'" :item-height="44">
          <item>
            <div slot="name">姓名</div>
            <input slot="content" v-model="companyInfo.legal_person" readonly >
          </item>
          <item>
            <div slot="name">身份证号</div>
            <input slot="content" v-model="companyInfo.id_card_no" readonly >
          </item>
          <item>
            <div slot="name">手机号</div>
            <input slot="content" v-model="companyInfo.cell_phone" readonly >
          </item>
          <item>
            <div slot="name">居住地址</div>
            <input slot="content" v-model="companyInfo.living_address" readonly >
          </item>
        </list-item>
        <div class="userInfo">
          担保人信息
          <span v-if="bondsInfo.length==0">（无）</span>
        </div>
        <list-item :item-height="76">
          <item v-for="(item,index) in bondsInfo" :key="index">
            <div slot="name">
              <span class="name-box">{{ index+1 }}</span>
              <span class="name">担保人{{ index+1 }}姓名</span>
              <span class="card-num">证件号</span>
            </div>
            <div slot="content" class="right">
              <img src="@/assets/intoApproval/introduce.png" >
              <span :title="item.bp_name">{{ item.bp_name }}</span>
              <br >
              <span>{{ item.bp_class=='NP'?item.id_card_no:item.organization_code }}</span>
            </div>
          </item>
        </list-item>
        <div class="bottom-call">
          <div class="left">
            <img src="@/assets/distributorSign/call.png" alt="">
          </div>
          <div class="center">
            <p>业务经办：{{ bp_user_id_n }}</p>
            <p>联系电话：{{ companyInfo.agent_phone }}</p>
          </div>
          <div class="right1" @click="callUp(companyInfo.agent_phone)">
            <img src="@/assets/distributorSign/calls.png" alt="">
          </div>
        </div>
        <div class="alert">
          <div class="alert-content">
            <div class="title">
              <img src="@/assets/intoApproval/info.png" >
              <span class="info-word">温馨提示</span>
            </div>
            <p class="top-info">绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p>
            <div class="top-word">
              <p>本人保证所提供信息的真实性、完整性及准确性。</p>
              <p>本人在此授权徐工融资租赁有限公司通过中国人民银行个人信用信息基础数据库及其他征信机构、金融机构查询本人的个人信息、信用记录和工作情况。</p>
              <p>本人同意接收来自于徐工融资租赁有限公司或第三方发出的提醒付款、确认付款、催款等短信(不含广告),同意接收来自于徐工融资租赁有限公司的录音电话,并积极配合。</p>
            </div>
          </div>
        </div>
      </div>
      <RentInfo v-show="tabNum==1" :confirm_status="confirm_status"/>
      <AccessoryInfo v-show="tabNum==2" @down="getDown" />
    </h-content>
    <bottom-tab v-if="confirm_status!=='APPROVED'&& (this.$route.params.hasButtom || hasButtomStorage)" class="footer-button">
      <tab-button class="approve" @click.native="showModalValue=true">
        <img src="@/assets/intoApproval/approve.png" >审批
      </tab-button>
    </bottom-tab>
    <h-modal
      v-if="confirm_status!=='APPROVED'&& (this.$route.params.hasButtom || hasButtomStorage)" ref="modal" v-model="showModalValue" position="bottom"
      cus-class="sign-modal">
      <h-view>
        <h-content class="approveContent">
          <div class="approveBottom">
            <span>
              审批意见
              <img src="@/assets/intoApproval/close1.png" @click="showModalValue=false" >
            </span>
            <textarea v-model="confirm_note" cols="8" rows="20" placeholder="请输入" />
          </div>
        </h-content>
        <bottom-tab>
          <tab-button class="reject" @click.native="showModalValue=true;charge('拒绝','REJECTED')">
            <img src="@/assets/intoApproval/reject.png" >拒绝
          </tab-button>
          <tab-button class="same" @click.native="showModalValue=true;charge('同意','APPROVED')">
            <img src="@/assets/intoApproval/approve.png" >同意
          </tab-button>
        </bottom-tab>
      </h-view>
    </h-modal>
  </h-view>
</template>
<script>
import Tab from '@/pages/intoApproval/intoApproval/tab'
import RentInfo from '@/pages/intoApproval/intoApproval/rent-info'
import AccessoryInfo from '@/pages/intoApproval/intoApproval/accessory'
import checkedImg from '@/assets/intoApproval/checked.png'
export default {
  components: {
    Tab,
    RentInfo,
    AccessoryInfo,
  },
  data () {
    return {
      hasButtomStorage: window.localStorage.getItem('hasButtom'),
      showModalValue: false,
      downNum: 0,
      tabNum: 0,
      ischecked: false,
      isConfirm: false,
      baseInfo: {},
      checkedImg: checkedImg,
      isDown: false,
      bp_class: window.localStorage.bp_class,
      confirm_status: this.$route.params.confirm_status,
      rentInfo: {},
      bondsInfo: [],
      confirm_note: '',
      files: [],
      accInfo: [],
      check_id: '',
      idCard_check_id: '',
      bp_user_id_n: '',
      cell_phone: '',
      personInfo: {
        bp_name_sp: '',
        id_card_no: '',
        living_address: '',
        academic_background_n: '',
        address_sp: '',
        spouse_phone: '',
        marital_status_n: '',
        cell_phone: '',
        marital_status: '',
        bp_name: '',
        agent_phone: '',
        address_on_resident_booklit: '',
        working_place_sp: '',
        academic_background: '',
        bp_id_agent: '',
        bp_user_id: '',
      },
      companyInfo: {
        business_address: '',
        auth_person_matter: '',
        registered_capital: '',
        auth_person_name: '',
        auth_flag: '',
        agent_phone: '',
        bp_name: '',
        registered_place: '',
        phone: '',
        auth_person_position: '',
        auth_person_id_card: '',
      },
    }
  },
  watch: {
    'ischecked': function (newVal, oldVal) {
      let appro = document.querySelector('.appro')
      if (newVal) {
        appro.style.backgroundColor = '#00469c'
      } else {
        appro.style.backgroundColor = 'rgba(56, 63, 69, 0.5)'
      }
    },
    'tabNum': function (newVal, oldVal) {

    },
  },
  created () {
    if (this.bp_class === 'NP') {
      this.getNPBase()
    } else if (this.bp_class === 'ORG') {
      this.getOrgBase()
    }
  },
  mounted () {
    this.getBonds()
    if (this.confirm_status !== 'APPROVED') {
      this.popProtocol()
    }
    this.isConfirm = this.$route.params.isConfirm
  },
  methods: {
    callUp (phoneNumber) {
      window.open('tel:' + phoneNumber)
    },
    getTabNum (i) {
      this.tabNum = i
    },
    getDown (i) {
      this.downNum = i
    },
    select () {
      this.ischecked = !this.ischecked
    },
    confirm () {
      this.ischecked ? (this.isConfirm = true) : (this.isConfirm = false)
    },
    selectCheckId () {

    },
    getNPBase () {
      let vm = this
      let url = process.env.basePath + 'prj_np_info_query'
      let param = {
        project_id: window.localStorage.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.personInfo, res.info)
          vm.bp_user_id_n = res.info.bp_user_id_n
          vm.cell_phone = res.info.cell_phone
        }
      })
    },
    getOrgBase () {
      let vm = this
      let url = process.env.basePath + 'prj_org_info_query'
      let param = {
        project_id: window.localStorage.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.companyInfo, res.info)
          vm.bp_user_id_n = res.info.bp_user_id_n
          vm.cell_phone = res.info.cell_phone
        }
      })
    },
    getDetail () {
      let vm = this
      let url = process.env.basePath + 'attachment_list_query'
      let param = {
        check_id: vm.check_id,
      }
      vm.hlsPopup.showLoading('数据加载中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.files = res.lists
        }
      })
    },
    getList () {
      let vm = this
      let url = process.env.basePath + 'prj_cdd_check_list_query'
      let param = {
        'master': {
          document_id: '7730',
          document_table: 'HLS_BP_MASTER',
          tab_group: 'HLS_NP',
        },
      }
      vm.hlsPopup.showLoading('数据加载中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.accInfo = res.lists
        }
      })
    },
    getBonds () {
      let vm = this
      let url = process.env.basePath + 'prj_guarantor_list_query'
      let param = {
        project_id: window.localStorage.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.bondsInfo = res.lists
        }
      })
    },
    popProtocol () {
      let modal = document.querySelector('.myModal')
      let alpha = 0
      let addOpacity = setInterval(() => {
        alpha += 1
        modal.style.backgroundColor = `rgba(56,63,69,${alpha / 100})`
        if (alpha >= 30) {
          clearInterval(addOpacity)
        }
      }, 10)
    },
    charge (val, status) {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: `您确认${val}吗？`,
        onConfirm: (data) => {
          if (data) {
            let vm = this
            let url = process.env.basePath + 'do_confrim_bp'
            let param = {
              'master': {
                confirm_id: window.localStorage.confirm_id,
                confirm_status: status,
                confirm_note: this.confirm_note,
              },
            }
            vm.hlsPopup.showLoading('提交数据中!')
            vm.hlsHttp.post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              if (res.result === 'S') {
                vm.hlsPopup.showSuccess(`审批成功,已${val}`)
                vm.$router.push({
                  name: 'IntoList',
                })
              } else {
                vm.hlsPopup.showSuccess(res.message)
              }
            })
          }
        },
      })
    },
  },
}
</script>
<style lang="less">
#approval {
  font-family: PingFangSC-Regular;
  input::placeholder {
    color: #b4b4b5;
  }
  .bottom-call {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
    .left {
            width: 16%;
            height: 60px;
            background: rgba(0,70,156,0.03);
            display: flex;
            justify-content: center;
            align-items: center
    }
    .center {
        height: 100%;
        width: 66%;
        margin-left: 2px;
        background: rgba(0,70,156,0.03);
        p {
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #656464;
            letter-spacing: 0.43px;
        }
    }
    .right1 {
        height: 100%;
        width: 16%;
        background: rgba(0,70,156,0.20);
        display: flex;
        justify-content: center;
        align-items: center
    }
}
  .header {
    background-color: #00469c;
    color: #fff;
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
      span {
        color: #fff;
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.6px;
        line-height: 24px;
      }
    }
  }
  .content {
    height: 79%;
    .userInfo {
      height: 45px;
      line-height: 45px;
      color: #00469c;
      margin-top: -10px;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
    }
    .userInfo::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      position: absolute;
      left: -15px;
      top: 12px;
    }
    .name-box {
      display: inline-block;
      text-align: center;
      line-height: 16px;
      color: #00469c;
      width: 16px;
      height: 16px;
      background: #cddbec;
      border-radius: 4px;
    }
    .name {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
      margin-left: 10px;
    }
    .card-num {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
      display: block;
      margin-left: 31px;
      margin-top: 7px;
    }
    .right {
      position: relative;
    }
    .right span {
      float: right;
      margin-right: 48px;
      display: block;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(56, 63, 69, 0.6);
      letter-spacing: 0;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 150px;
    }
    .right span:last-child {
      margin-top: 7px;
    }
    .right img {
      position: absolute;
      top: 30%;
      left: 80%;
      width: 14px;
      height: 16px;
    }
    .alert {
      height: 219px;
      width: 100%;
      background: rgba(252, 200, 0, 0.16);
    }
    .alert-content {
      width: 334px;
      margin: 0 auto;
      padding-top: 16px;
    }
    .info-word {
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #fcc800;
      letter-spacing: 0.5px;
      margin-left: 8px;
    }
    .title {
      display: flex;
      align-items: center;
    }
    .top-info {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #656464;
      letter-spacing: 0.37px;
      margin-top: 7px;
      line-height: 15px;
    }
    .top-word {
      p {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #656464;
        letter-spacing: 0.37px;
        margin-top: 7px;
        line-height: 15px;
        text-indent: 16px;
        position: relative;
      }
      p::before {
        content: "";
        display: block;
        position: absolute;
        top: 5px;
        left: 0px;
        width: 4px;
        height: 4px;
        border-radius: 20px;
        background-color: #fcc800;
      }
    }
    .alert img {
      width: 18px;
      height: 18px;
    }
  }
  .footer-button {
    .approve {
      width: 358.6px;
      height: 44px;
      background: #00469c;
      border-radius: 4px;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      line-height: 20px;
      letter-spacing: 10px;
      img {
        width: 16.8px;
        height: 16.8px;
      }
    }
  }
  .myModal {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    background-color: rgba(56, 63, 69, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
      position: relative;
      width: 301px;
      height: 467px;
      background: url("../../../assets/intoApproval/top.png") no-repeat;
      background-size: 301px 24.7px;
      background-color: #fff;
      button {
        width: 240px;
        height: 40px;
        position: absolute;
        color: #fff;
        bottom: 16px;
        left: 30.5px;
        background-color: rgba(56, 63, 69, 0.5);
      }
      .title-box {
        width: 100%;
        display: block;
        text-align: center;
        margin-top: 37px;
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #00469c;
      }
      .content-box {
        width: 240px;
        height: 280px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #383f45;
        margin: 0 auto;
        margin-top: 12px;
        overflow-y: scroll;
        p {
          text-indent: 25px;
          line-height: 16px;
        }
      }
      .confirm {
        width: 240px;
        height: 20px;
        padding-top: 25px;
        margin: 0 auto;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #383f45;
        line-height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        input {
          width: 16px;
          height: 16px;
          margin-right: 8px;
          background: none;
        }
        input::before {
          content: "";
          display: block;
          background-image: url("../../../assets/intoApproval/top.png");
        }
      }
    }
  }
  .modal-show {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    background-color: rgba(56, 63, 69, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .down {
      position: relative;
      width: 301px;
      height: 430px;
      background-size: 301px 24.7px;
      background-color: #fff;
    }
    .top {
      width: 301px;
      height: 44px;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      letter-spacing: 0;
      text-align: center;
      line-height: 44px;
      color: #fff;
      background: #00469c;
      img {
        width: 16px;
        height: 16px;
        float: right;
        margin-top: 13px;
        margin-right: 20px;
      }
    }
    .down-content {
      margin-top: 8px;
      div {
        width: 224px;
        margin: 0 auto;
        height: 139px;
        border: 1px dashed #ccc;
        margin-top: 16px;
        img {
          width: 224px;
          height: 139px;
        }
      }
    }
    button {
      width: 240px;
      height: 40px;
      position: absolute;
      color: #fff;
      bottom: 16px;
      left: 30.5px;
      background-color: #00469c;
    }
  }
  .approveContent {
    position: absolute;
    top: 50%;
    background-color: #fafafa;
    overflow-y: scroll;
  }
  .approveBottom {
    width: 343px;
    margin: 0 auto;
    span {
      display: block;
      width: 100%;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      color: #00469c;
      height: 21px;
      line-height: 21px;
      margin: 16px 0;
      img {
        float: right;
      }
    }
    textarea {
      width: 343px;
      height: 178px;
      border-radius: 2px;
      padding: 10px;
    }
    span::after {
      content: "";
      display: block;
      position: relative;
      left: 70px;
      top: -17px;
      width: 14px;
      height: 14px;
      background: url("../../../assets/intoApproval/approv.png");
      background-size: 14px 14px;
    }
  }
  .reject,
  .same {
    width: 175px;
    height: 40px;
    border-radius: 4px;
    font-family: PingFangSC-Semibold;
    font-size: 15px;
    img {
      width: 13px;
      height: 13px;
    }
  }
  .reject {
    color: #656464;
    border: 1px solid #656464;
  }
  .same {
    color: #ffffff;
    background: #00469c;
    border: 1px solid #00469c;
  }
}
.modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>
