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

    <bottom-tab>
      <tab-button @click.native="save" >
        保存
      </tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      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: {
    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)
        }
      })
    },
    save () {
      let vm = this
      let url = process.env.basePath + 'contract_sign_basic_save' // 合同信息保存
      let param = {
        'contract_id': vm.contract.contract_id,
        'direct_debit_bank_id': vm.contract.direct_debit_bank_id,
        'dd_bank_account_name': vm.contract.dd_bank_account_name,
        'dd_bank_account_num': vm.contract.dd_bank_account_num,
        'ebank_account_prop': vm.contract.ebank_account_prop,
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          hlsPopup.showLongCenter('保存成功!')
        } else if (res.result === 'E') {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>

<style scoped lang="less" rel="stylesheet">
  .public-style {
    .content{
      margin-bottom: 42px;
    }
    .vux-tab-wrap {
      padding: 0;
      position: fixed;
      width: 100%;
      z-index: 99;
      top: 40px;
      height: 42px;
    }

    .vux-slider {
      padding-top: 84px;
      margin-bottom: 40px;

      .vux-swiper {
        .vux-swiper-item {
          position: relative;
        }
      }
    }
    .button-save{
      background-color: #5D98F6;
      color: #FFF;
    }
  }
  .platform-ios {
    .vux-tab-wrap {
      top:64px;
    }
    .vux-slider {
      padding-top: 114px;
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .vux-tab-wrap {
        top:84px;
      }
      .vux-slider {
        padding-top: 124px;
      }
    }
  }
  // iPhoneX max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .vux-tab-wrap {
        top:84px;
      }
      .vux-slider {
        padding-top: 124px;
      }
    }
  }
</style>
