<template>
  <h-view id="contract-details" class="public-style">

    <h-header :proportion="[5, 1, 1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>客户准入申请工作流</span>
      </div>
    </h-header>

    <h-content style="overflow-y: auto;">
      <!-- 审批历史 -->
      <div :class="[history_Coll ? 'history_active' : '']" class="history" @click="triggerHistory">
        <History :isOpen="history_Coll" :historyData="historyData"/>
      </div>

      <!-- tab 页 -->
      <div class="tab-style z100">
        <div :class="{ 'done': tabNum === 1, 'undone': tabNum !== 1 }" @click="tabNum = 1;">
          基本信息
        </div>
        <div :class="{ 'done': tabNum === 2, 'undone': tabNum !== 2 }" @click="tabNum = 2;">
          开票信息
        </div>
        <div :class="{ 'done': tabNum === 3, 'undone': tabNum !== 3 }" @click="tabNum = 3;">
          角色信息
        </div>
        <div :class="{ 'done': tabNum === 4, 'undone': tabNum !== 4 }" @click="tabNum = 4;">
          银行信息
        </div>
        <div :class="{ 'done': tabNum === 5, 'undone': tabNum !== 5 }" @click="tabNum = 5;">
          附件信息
        </div>
      </div>

      <div v-if="tabNum === 1" class="z100">
        <!-- <BaseInfo :baseInfo="baseInfo"/> -->
        <BaseInfoNP v-if="baseInfo.bp_class === 'NP'" :baseInfo="baseInfo"/>
        <BaseInfoOrg v-else :baseInfo="baseInfo"/>
      </div>
      <div v-if="tabNum === 2" class="z100">
        <BillingInfo :billingInfo="billingInfo" />
      </div>
      <div v-if="tabNum === 3" class="z100">
        <RoleInfo :roleInfo="roleInfo"/>
      </div>
      <div v-if="tabNum === 4" class="z100">
        <BankInfo :bankInfo="bankInfo"/>
      </div>
      <div v-if="tabNum === 5" class="z100">
        <AttachmentInfo :car="attachmentInfo.car" :house="attachmentInfo.house" :real="attachmentInfo.real"/>
        <Appendix :appendixData="appendixData" @upData="getData"/>
        <div v-show="isTodo" class="approveBottom">
          <span> 审批意见 </span>
          <textarea v-model="confirm_note" cols="8" rows="5" placeholder="请输入" />
        </div>
        <div v-show="isTodo" class="foot-bottom">
          <button class="success" @click="approv('1')">通 过</button>
          <button class="refused" @click="approv('2')">拒 绝</button>
        </div>
      </div>
    </h-content>
  </h-view>
</template>

<script>
import { Collapse, CollapseItem } from 'vant'
import 'vant/lib/collapse/style'
import 'vant/lib/collapse-item/style'
import BillingInfo from './components/BillingInfo'
import AttachmentInfo from './components/AttachmentInfo'
import BankInfo from './components/BankInfo'
import RoleInfo from './components/RoleInfo'
import Appendix from './components/Appendix'
import BaseInfoOrg from './components/BaseInfoOrg'
import BaseInfoNP from './components/BaseInfoNP'
import History from './components/History'

// import axios from 'axios'
export default {
  components: {
    BillingInfo,
    Collapse,
    CollapseItem,
    AttachmentInfo,
    BankInfo,
    Appendix,
    BaseInfoOrg,
    History,
    RoleInfo,
    BaseInfoNP,
  },
  data () {
    return {
      tabNum: 1,
      collActiveTab: ['2'],
      history_Coll: false,
      confirm_note: '',
      baseInfo: {}, // 基本信息
      billingInfo: [], // 开票信息
      attachmentInfo: [], // 附件  信息
      bankInfo: [], // 银行信息
      roleInfo: [], // 角色信息
      historyData: [],
      appendixData: [],
      isTodo: true,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'ToDoList') {
        vm.tabNum = 1
        vm.collActiveTab = ['2']
        vm.history_Coll = false
        vm.confirm_note = ''
        vm.baseInfo = {} // 基本信息
        vm.billingInfo = [] // 开票信息
        vm.attachmentInfo = [] // 附件  信息
        vm.bankInfo = [] // 银行信息
        vm.roleInfo = [] // 角色信息
        vm.historyData = []
        vm.appendixData = []
        vm.isTodo = vm.$route.params.type === 'todo'

        vm.getData()
        vm.getHistory()
      }
    })
  },
  mounted () {
    this.getData()
    this.getHistory()
  },
  methods: {
    getData () {
      let bp_id = this.$route.params.document_id
      this.hlsPopup.showLoading('请稍候')
      let url = $config.basePath + 'bp_access_info_query'
      let param = { bp_id }

      this.hlsHttp.post(url, param).then((res) => {
        this.hlsPopup.hideLoading()

        if (res.result === 'S') {
          console.log('工作流信息：', res)
          this.roleInfo = res.role_lists
          this.baseInfo = res.info
          this.billingInfo = res.info
          this.bankInfo = res.bank_lists
          this.attachmentInfo = {car: res.car_card, house: res.house_card, real: res.real_est_certificate}
          // this.planData = res.quotation_lists
          this.appendixData = (res.cdd_lists || []).map(item => {
            let attachArr = []
            item.attach_file_name && item.attach_file_name.split(';;').forEach(ele => {
              let attach = ele.split('--')
              attach[0] && attachArr.push({ fileName: attach[0], attachId: attach[1] })
            })
            return { ...item, attachArr }
          })
        } else {
          hlsPopup.showLongCenter('获取工作流信息失败')
          setTimeout(() => {
            this.$router.back()
          }, 2000)
        }
      })
    },
    getHistory () {
      this.historyData = this.$route.params.approve_history_lists.reverse()
      console.log('历史审批数据：', this.historyData)
    },
    triggerHistory () {
      this.history_Coll = !this.history_Coll
    },
    approv (action_type) {
      let params = this.$route.params
      let param = {
        master: {
          record_id: params.record_id,
          action_type: action_type,
          user_id: params.user_id,
          comment_text: this.confirm_note,
        },
      }
      let url = process.env.basePath + (action_type === '1' ? 'action_agree' : 'action_refuse')

      this.hlsPopup.showLoading('请稍候')
      this.hlsHttp.post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        this.hlsPopup.showLongCenter(res.message)
        if (res.result === 'S') {
          setTimeout(() => {
            this.$router.back()
          }, 2000)
        }
      })
    },
  },
}
</script>
  <style lang="less" rel="stylesheet">
  #contract-details {
    .bar-custom {
      background-color: #02459a;
    }

    .history {
      height: 50px;
      background-color: #02459a;
      position: relative;
      pointer-events: none;
      padding: 0 0 30px;

      &::after {
        background: url('../../assets/userBind/arrow-bottom.png') no-repeat;
        background-size: 15px;
        background-position: center;
        content: " ";
        display: block;
        position: absolute;
        height: 20px;
        bottom: 3px;
        width: 100%;
        pointer-events: auto;
      }
    }

    .history.history_active {
      height: auto;
      min-height: 100px;

      &::after {
        transform: rotate(180deg);
      }
    }

    .tab-style {
      display: flex;
      justify-content: center;
      padding-top: 12px;
      text-align: center;
      padding-bottom: 8px;
      align-items: center;
      box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.5);

      div {
        display: block;
        height: 32px;
        width: 172px;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        letter-spacing: 0.43px;
        margin: 0 4px;
        line-height: 32px;
        color: #02459a;
      }

      .undone {}

      .done {
        border-bottom: 2px solid #02459a;
      }

      img {
        width: 16px;
        display: block;
        float: left;
        margin: 8px 5px 0 20px;
      }

      span:nth-of-type(2) {
        margin-left: 7px;
      }
    }

    .van-cell__title {
      color: #02459a
    }

    .van-cell {
      background-color: #f6f6f6;
    }

    .van-icon-arrow::before {
      color: #02459a
    }

    .z100 {
      z-index: 100;
    }

    .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;
        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;
      }
    }

    .foot-bottom {
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      border-radius: 20px;
      background-color: #fff;
      margin: 10px 15px;
      padding: 10px;

      button {
        height: 40px;
        padding: 10px 1rem;
        border-radius: 10px;
      }

      .success {
        background-color: #02459a;
        border: 1px solid #02459a;
        color: #fff
      }

      .refused {
        background-color: #fff;
        border: 1px solid #02459a;
        color: #02459a
      }

      .back {
        background-color: #ff5461;
        border: 1px solid #ff5461;
        color: #fff
      }
    }

  }
  </style>
