<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>

      <!-- 销售信息折叠 -->
      <Collapse v-model="collActiveTab">
        <CollapseItem title="销售信息" name="1">
          <Sale :lesseeData="lesseeData" />
        </CollapseItem>
      </Collapse>

      <!-- 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">
        <Lessee :lesseeData="lesseeData" />
      </div>
      <div v-show="tabNum === 2" class="z100">
        <Plan ref="myform_30" :planData="planData" :editFlag="isEditType" :showFlag="isShowType" />
      </div>
      <div v-if="tabNum === 3" class="z100">
        <Partner :bplist="bplist" />
      </div>
      <div v-if="tabNum === 4" class="z100">
        <Equipment v-if="equipmentData.length>0" :equipmentData="equipmentData" />
        <Empty v-else description="无"/>
      </div>
      <div v-if="tabNum === 5" class="z100">
        <Appendix ref="myappendix" :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 v-if="this.$route.params.node_sequence_num === '20'" style="background-color: orange; color: white;"
            @click="getSign20">主机厂签约</button>
          <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, Empty } from 'vant'
import 'vant/lib/collapse/style'
import 'vant/lib/collapse-item/style'
import 'vant/lib/empty/style'
import Plan from './components/plan.vue'
import Sale from './components/Sale.vue'
import Partner from './components/Partner.vue'
import Appendix from './components/Appendix.vue'
import Lessee from './components/Lessee.vue'
import History from './components/History.vue'
import Equipment from './components/equipment.vue'

import axios from 'axios'
export default {
  components: {
    Plan,
    Collapse,
    CollapseItem,
    Sale,
    Partner,
    Appendix,
    Lessee,
    History,
    Equipment,
    Empty,
  },
  data() {
    return {
      tabNum: 1,
      collActiveTab: ['2'],
      history_Coll: false,
      confirm_note: '',
      bplist: [], // 商业伙伴信息
      equipmentData: [], // 设备清单
      lesseeData: {}, // 承租人， 销售信息
      planData: [], // 商务方案
      historyData: [],
      appendixData: [],
      isTodo: true,
      isEditType: false, // 30节点可编辑合同类型、开票类型
      isShowType: false, // 75节点可见合同类型、开票类型
      isSign20: false, // 主机厂签约标志
    }
  },
  mounted() {
    console.log(this.$route.params)
    this.isEditType = this.$route.params.node_sequence_num === '30'
    this.isShowType = this.$route.params.node_sequence_num === '75'
    this.isTodo = this.$route.params.type === 'todo'
    this.getHistory()
    this.getData()
    this.getEquipList()
  },
  methods: {
    getEquipList () {
      let vm = this
      let url = process.env.basePath + 'prj_equip_list_query'
      let param = {
        project_id: this.$route.params.document_id,
        pagesize: 1,
        pagenum: 999,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.equipmentData = res.lists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    async getSign20 () {
      let vm = this
      hlsPopup.showLoading('请稍候')
      let url1 = process.env.basePath + 'zj_wfl_20_sign_check'
      let param1 = {
        project_id: this.$route.params.document_id,
      }
      let res = await vm.hlsHttp.post(url1, param1)
      hlsPopup.hideLoading()
      if (res.result === 'S') {
        let flag_s = true // 不进行签约 标志
        if (res.lists.length > 0) {
          res.lists.map(item => {
            if (item.signed_flag === 'N') {
              flag_s = false
            }
          })
        }
        if (flag_s) {
          this.hlsPopup.showLongCenter('已签约或无需签约')
        } else {
          let param = {
            master: {
              project_id: this.$route.params.document_id,
            },
          }
          console.log(param)
          let url = process.env.basePath + 'zj_wfl_20_auto_sign'
          console.log(url)

          this.hlsPopup.showLoading('请稍候')
          this.hlsHttp.post(url, param).then((res) => {
            this.hlsPopup.hideLoading()
            if (res.result === 'S') {
              this.isSign20 = true
              this.hlsPopup.showLongCenter(res.message)
            } else {
              this.hlsPopup.showLongCenter(res.message)
            }
          })
        }
      } else {
        this.hlsPopup.showLongCenter(res.message)
      }
    },
    getData() {
      let project_id = this.$route.params.document_id
      this.hlsPopup.showLoading('请稍候')
      let url = $config.basePath + 'prj_project_info_query'
      let param = { project_id }

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

        if (res.result === 'S') {
          this.bplist = res.bp_lists
          this.lesseeData = res.info
          this.planData = res.quotation_lists
          this.planData.factory_n = res.info.factory_n
          this.planData.bp_id_agent_n = res.info.bp_id_agent_n
          this.planData.bp_id_tenant_n = res.info.bp_id_tenant_n
          console.log(this.planData)
          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()
    },
    triggerHistory() {
      this.history_Coll = !this.history_Coll
    },
    async approv(action_type) {
      if (this.isEditType) { // 30节点编辑后的校验
        let isSave = window.localStorage.getItem('myform_30_isSave')
        let flag = await this.$refs.myform_30.validate()
        if (!flag || isSave === 'false') {
          hlsPopup.showLongCenter('请将商务方案中的必填项填写完整并保存')
          return
        }
        if (this.$refs.myform_30.getData() === 'Y') {
          let temp = this.$refs.myappendix.getspcialArr()
          if (temp.attachArr.length < 1) {
            hlsPopup.showLongCenter('请上传特批报告')
            return
          }
        }
      }
      if (!this.isSign20 && this.$route.params.node_sequence_num === '20') {
        hlsPopup.showLongCenter('请进行主机厂签约！')
        return
      }
      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,
        },
      }
      console.log(process.env.basePath)
      let url = process.env.basePath + (action_type === '1' ? 'action_agree' : 'action_refuse')
      console.log(url)

      this.hlsPopup.showLoading('请稍候')
      this.hlsHttp.post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        this.hlsPopup.showLongCenter(res.message)
        if (res.result === 'S') {
          window.localStorage.removeItem('myform_30_isSave')
          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: 0 5vw;
      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>