<template>
  <h-view id="np-base-info">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png" >
        <span>用户审批</span>
      </div>
    </h-header>
    <h-content>
      <div class="tab">
        <p v-if="bpclass==='NP'"><span :class="{'selected':activedCom === 'base-info'}" @click="isSelected(0)">基本信息</span></p>
        <p v-if="bpclass==='ORG'"><span :class="{'selected':activedCom === 'base-eninfo'}" @click="isSelected(1)">基本信息</span></p>
        <p><span :class="{'selected':activedCom === 'bill-info'}" @click="isSelected(2)">开票信息</span></p>
        <p><span :class="{'selected':activedCom === 'append-info'}" @click="isSelected(3)">附件信息</span></p>
        <p><span :class="{'selected':activedCom === 'credit-info'}" @click="isSelected(4)">银行卡</span></p>
      </div>
      <div style="padding-top:45px;">
        <div
          ref="activedCom" :is="activedCom" :document_id="document_id" :document_name="document_name"
          :record_id="record_id"/>
      </div>
    </h-content>
    <bottom-tab v-if="type === 'todo'" class="footer-button">
      <tab-button class="save" @click.native="approv('0')"><img src="@/assets/functionCenter/stamp.png">审批</tab-button>
    </bottom-tab>
    <h-modal ref="modal" v-model="showModalValue">
      <div class="modal_header">
        审批意见<img src="@/assets/userBind/close.png" @click="hideModal()">
      </div>
      <div class="modal_content">
        <textarea v-model="comment_text"/>
      </div>
      <div class="modal_footer">
        <bottom-tab class="footer-button">
          <tab-button class="refuse" @click.native="approv('2')">拒绝</tab-button>
          <tab-button class="comfirm" @click.native="approv('1')">同意</tab-button>
        </bottom-tab>
      </div>
    </h-modal>
  </h-view>
</template>
<script>
import baseInfo from './component/baseInfo'
import baseEninfo from './component/baseEninfo'
import billInfo from './component/billInfo'
import appendInfo from './component/appendInfo'
import creditInfo from './component/creditInfo'

export default {
  components: {
    baseInfo,
    baseEninfo,
    billInfo,
    appendInfo,
    creditInfo,
  },
  data () {
    return {
      type: '',
      selected: '',
      document_id: '',
      document_name: '',
      record_id: '',
      comment_text: '',
      showModalValue: false,
      activedCom: '',
      comArr: ['base-info', 'base-eninfo', 'bill-info', 'append-info', 'credit-info'],
      bpclass: '',
    }
  },
  watch: {
  },
  activated () {
    this.document_id = this.$route.params.document_id
    this.document_name = this.$route.params.document_name
    this.record_id = this.$route.params.record_id
    this.type = this.$route.params.type
    this.bpclass = this.$route.params.bpclass
    console.log('--------------------------')
    console.log(this.document_id)
    if (this.bpclass === 'NP') {
      this.isSelected(0)
    } else if (this.bpclass === 'ORG') {
      this.isSelected(1)
    }
  },
  created () {
    this.document_id = this.$route.params.document_id
    this.document_name = this.$route.params.document_name
    this.record_id = this.$route.params.record_id
    this.type = this.$route.params.type
    this.bpclass = this.$route.params.bpclass
    if (this.bpclass === 'NP') {
      this.isSelected(0)
    } else if (this.bpclass === 'ORG') {
      this.isSelected(1)
    }
  },
  methods: {
    isSelected (index) {
      this.activedCom = this.comArr[index]
    },
    hideModal () {
      this.showModalValue = false
    },
    approv (action_type) {
      if (action_type === '0') {
        this.showModalValue = true
      } else {
        let param = {
          master: {
            record_id: this.record_id,
            action_type: action_type,
            user_id: this.document_id,
            comment_text: this.comment_text,
          },
        }
        let url
        if (action_type === '1') {
          url = $config.basePath + 'action_agree'
        } else if (action_type === '2') {
          url = $config.basePath + 'action_refuse'
        }
        this.hlsHttp.post(url, param).then((res) => {
          this.showModalValue = false
          this.hlsPopup.showLongCenter(res.message)
          if (res.result === 'S') {
            this.$routeGo()
          }
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
  .refuse {
    border-radius: 4px;
    border: 1px solid #FDB62F;
    color: #FDB62F;
    width: 45vw;
  }
  .save,.comfirm {
    color: #fff;
    border-radius: 4px;
    background-color: @headerColor;
    width: 45vw;
  }
  .modal_header {
    width: 100%;
    height: 50px;
    line-height: 30px;
    padding: 10px 20px;
    background: white;
    position: fixed;
    bottom: 300px;
    font-size: 15px;
    font-family: PingFangSC-Semibold;
    color: #383F45;
    vertical-align: middle;
    img {
      width: 30px;
      height: 30px;
      float: right;
    }
  }
  .modal_content {
    width: 100%;
    height: 250px;
    padding: 0 20px;
    background: white;
    position: fixed;
    bottom: 50px;
    textarea{
      width: 100%;
      height: 200px;
      color: #666;
      border: 1px solid #F1F0F5;
      border-radius: 8px;
      resize: none;
      padding: 15px;
      font-size: 14px;
    }
  }
  .modal_footer {
    width: 100%;
    height: 50px;
    background: white;
    position: fixed;
    bottom: 0;
  }
  .tab {
      display: flex;
      background-color: #fff;
      padding: 6px 8px 4px 6px;
      position: fixed;
      width: 100%;
      z-index: 50;
      p {
      text-align: center;
      flex: auto;
      span {
          display: block;
          padding: 6px 0;
          background-color: #fff;
          font-family: PingFangSC-Regular;
          font-size: 15px;
          color: #656464;
      }
      span.selected {
          border-bottom: 3px solid #1D3FFF;
          font-family: PingFangSC-Semibold;
          font-weight: 700;
      }
    }
  }
</style>
