<template>
  <h-view class="public-style contract-mainten" style="height:100%;" title="合同维护">
    <s-tab class="" @tabClick="switchTab">
      <tab-item>基本信息</tab-item>
      <tab-item>资金信息</tab-item>
      <tab-item>资金明细</tab-item>
      <tab-item>附件信息</tab-item>
    </s-tab>
    <h-content v-show="tabIndex[0]" class="has-footer">
      <basic-info :contract="contract" :readOnly="readOnly"/>
    </h-content>
    <h-content v-show="tabIndex[1]" class="has-footer">
      <quote-info :contract="contract"/>
    </h-content>
    <h-content v-show="tabIndex[2]" class="has-footer">
      <quote-detail :cashflows="cashflows" :contract="contract"/>
    </h-content>
    <h-content v-show="tabIndex[3]" class="has-footer">
      <file-info :dowload_list="dowload_list" :cdd_item="cdd_item" :upload_list="upload_list"/>
    </h-content>

    <div class="esign" @click="createSign()">
      <img src="../../../assets/image/contractMainten/esign.png">
    </div>
    <bottom-tab>
      <tab-button class="button-save" @click.native="submit">提交</tab-button>
    </bottom-tab>
    <!--签名模态框-->
    <signModal v-show="isModalVisible" :info="info" @closeModal="closeModal"/>
  </h-view>
</template>

<script>
  import signModal from './signModal'
  import basicInfo from './contractComponents/basic-info'
  import quoteInfo from './contractComponents/quote-info'
  import quoteDetail from './contractComponents/quote-detail'
  import fileInfo from './contractComponents/file-info'
export default {
  components: {
    signModal,
    basicInfo,
    quoteInfo,
    quoteDetail,
    fileInfo,
  },
  data () {
    return {
      isModalVisible: false,
      info: {
        name: '张三',
        id_number: '361021197607154329',
      },

      readOnly: 'sign', // item只读标志，区分合同维护
      index: 0,
      tabIndex: [1, 0, 0, 0],
      contract_id: '',
      cdd_list_id: '',
      contract: {},
      cdd_item: [],
      cashflows: [],
      dowload_list: [],
      upload_list: [], // 待上传列表
    }
  },
  created: function () {
  },
  mounted: function () {
  },
  updated: function () {
  },
  destroyed: function () {
  },
  activated: function () {
  },
  beforeRouteEnter: function (to, form, next) {
    next(vm => {
      vm.contract_id = vm.$route.params.contract_id
      vm.cdd_list_id = vm.$route.params.cdd_list_id
      vm.upload_list = [] // 清空待上传列表，防止再次进入页面加载待上传列表图片
      vm.dowload_list = [] // 清空待下载列表，防止再次进入页面加载上一次下载的列表图片
      vm.initLoad()
    })
  },
  methods: {
    createSign () {
      // 打开模态框
      let vm = this
      vm.isModalVisible = true
    },
    // 关闭模态框
    closeModal: function () {
      this.isModalVisible = false
    },
    switchTab (index) {
      let vm = this
      vm.index = index
      vm.tabIndex = [0, 0, 0, 0]
      vm.tabIndex[index] = 1
    },
    initLoad () {

      let vm = this
      let url = process.env.basePath + 'app_get_contract_selected' // 合同维护信息查询
      let param = {
        'contract_id': vm.contract_id,
        'cdd_list_id': vm.cdd_list_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          vm.contract = res.getContract_list[0]
          vm.cdd_item = res.prj_item_list
          vm.cdd_item.forEach((item, index) => {
            vm.load_picture(item.check_id, index)
          })
        } else if (res.result === 'E') {
          hlsPopup.showLongCenter(res.message)
        }
      })
      // 查询现金流
      let urlTwo = process.env.basePath + 'contract_cshflow'
      let paramTwo = {
        'contract_id': vm.contract_id,
      }
      vm.$post(urlTwo, paramTwo).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.cashflows = res.cashflow_list
        } else if (res.result === 'E') {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    /**
       * 查询照片
       * @param check_id
       */
    load_picture (check_id, index) {
      let vm = this
      let url = process.env.basePath + 'attment_download' + '&index' + index // 附件查询
      let param = {
        'check_id': check_id,
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          let list = res.cdd_atm_list
          vm.dowload_list.push(list)
        } else if (res.result === 'E') {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    submit () {
      let vm = this
      let url = process.env.basePath + 'contract_sign_submit' // 合同签约
      let param = {
        'contract_id': vm.contract.contract_id
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          hlsPopup.showLongCenter('提交成功!')
          vm.$router.go(-1)
        } else if (res.result === 'E') {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>

<style scoped lang="less" rel="stylesheet">
  .public-style {
    .content {
      margin-bottom: 42px;
    }
    .esign{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      bottom: 15%;
      right: 10%;
      background-color: #1E8CEB;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-align-items: center;
      img{
        width: 60%;
      }
    }
  }
</style>
