<template>
  <h-view class="public-style mationMain" title="信息填写">
    <h-content class="has-footer">
      <list-item :item-height="40">
        <item>
          <div slot="name" class="required">经销商名称</div>
          <div slot="content">{{ project.invoice_agent_id_n }}</div>
        </item>
        <item>
          <div slot="name" class="required">客户类别</div>
          <div slot="content">{{ project.bp_class_n }}</div>
        </item>
        <item>
          <div slot="name" class="required">业务类别</div>
          <div slot="content">{{ project.business_type_n }}</div>
        </item>
        <item>
          <div slot="name" class="required">请选择产品线</div>
          <div slot="content">{{ project.division_n }}</div>
        </item>
        <item>
          <div slot="name" class="required">车辆类型</div>
          <div slot="content">{{ project.car_type_n }}</div>
        </item>
      </list-item>

      <div class="first-row">
        <div class="car-info" @click="goCarDetail()">
          <div v-if="!carFlag" class="circle"><img src="@/assets/image/projectCreate/red-circle@2x.png"></div>
          <div v-if="carFlag" class="circle"><img src="@/assets/image/projectCreate/green-circle@2x.png"></div>
          <img src="@/assets/image/projectCreate/car@2x.png">
          <div class="fun-name">车辆信息</div>

        </div>
        <div class="car-info bg-light" @click="goBpDetail()">
          <div v-if="!clientInfoFlag" class="circle"><img src="@/assets/image/projectCreate/red-circle@2x.png">
          </div>
          <div v-if="clientInfoFlag" class="circle"><img src="@/assets/image/projectCreate/green-circle@2x.png">
          </div>
          <img src="@/assets/image/projectCreate/user@2x.png">
          <div class="fun-name">客户信息</div>
        </div>
      </div>
      <div class="last-row">
        <div class="car-info bg-light" @click="goPriceDetail()">
          <div v-if="!offerFlag" class="circle"><img src="@/assets/image/projectCreate/red-circle@2x.png"></div>
          <div v-if="offerFlag" class="circle"><img src="@/assets/image/projectCreate/green-circle@2x.png"></div>

          <img src="@/assets/image/projectCreate/price@2x.png">
          <div class="fun-name">报价信息</div>
        </div>
        <div
          :class="{'bg-normal':attachFlag,'bg-grey':!attachFlag}" class="car-info"
          @click="attachmentUpload()">
          <div v-if="!attachFlag" class="circle"><img src="@/assets/image/projectCreate/red-circle@2x.png"></div>
          <div v-if="attachFlag" class="circle"><img src="@/assets/image/projectCreate/green-circle@2x.png"></div>
          <img src="@/assets/image/projectCreate/attachment@2x.png">
          <div class="fun-name">附件信息</div>
        </div>
      </div>
    </h-content>
    <bottom-tab :show-divider="false">
      <tab-button cus-class="button-left" @click.native="saveAll()">保存
      </tab-button>
      <tab-button cus-class="button-right" @click.native="saveAll('Y')">提交</tab-button>
    </bottom-tab>
  </h-view>

</template>

<script>
import projectService from './projectService'

export default {
  name: 'InfoMationMain',
  data () {
    return {
      carFlag: 0,
      attachFlag: 0,
      clientInfoFlag: 0,
      offerFlag: 0,
      project: null,
      projectBp: null,
      lease: null,
      prjItemList: null,
      reload: null,
    }
  },
  created: function () {
    this.carFlag = projectService.getCarFlag() || 0
    this.attachFlag = projectService.getAttachFlag() || 0
    this.clientInfoFlag = projectService.getClientInfoFlag() || 0
    this.offerFlag = projectService.getOfferFlag() || 0
    this.project = projectService.getProject()
    this.lease = projectService.getLease()
    this.projectBp = projectService.getPrjbp()
    this.reload = this.$route.params.reload

    this.loadPrjInfo()
  },
  methods: {
    loadPrjInfo () {
      let vm = this
      let basePath = process.env.basePath
      // 项目维护界面信息查询
      if (vm.project.project_id && this.reload) {
        let url3 = basePath + 'prj_project_query'
        var param3 = {
          project_id: vm.project.project_id,
          cdd_list_id: vm.project.cdd_list_id,
        }
        hlsHttp.post(url3, param3).then(function (res) {
          // hlsPopup.hideLoading();
          if (res.result === 'S') {
            vm.project = res.prj_project_list[0]
            vm.projectBp = res.prj_bp_list[0]
            if (res.prj_lease_list.length) {
              vm.lease = res.prj_lease_list[0]
            }
            vm.prj_item_list = res.prj_item_list
          }
          projectService.setProject(vm.project)
          projectService.setPrjbp(vm.projectBp)
          projectService.setLease(vm.lease)
          projectService.setPrjItemList(vm.prj_item_list)
        })
      }
    },
    goCarDetail () { // 进入车辆信息填写页面
      this.$router.push({
        name: 'LeaseCarDetail',
      })
    },

    goBpDetail () { // 进入客户信息填写页面
      this.$router.push({
        name: 'PrjBpInfo',
      })
    },

    goPriceDetail () { // 进入报价信息填写页面
      this.$router.push({
        name: 'PrjQuotionInfo',
      })
    },

    attachmentUpload () {
      let vm = this
      if (vm.attachFlag) {
        vm.$router.push({
          name: 'PrjAttachment',
        })
      } else {
        vm.hlsPopup.showLongBottom('请完成所有信息填写后再进行附件上传!')
      }
    },

    saveAll (submitFlag) {
      let vm = this
      vm.hlsPopup.hideLoading()
      // 提交校验客户信息
      if (submitFlag) {
        if (vm.carFlag && vm.clientInfoFlag && vm.offerFlag) {
          vm.saveFun(submitFlag)
        } else {
          vm.hlsPopup.showLongCenter('请完成所有信息填写后再提交')
        }
      } else {
        if (vm.carFlag && vm.clientInfoFlag && vm.offerFlag) {
          vm.saveFun(submitFlag)
        } else {
          vm.hlsPopup.showLongCenter('请完成必要信息填写再保存！')
        }
      }
    },

    isEmpty (obj) {
      if (typeof obj === 'undefined' || obj === null || obj === '') {
        return true
      } else {
        return false
      }
    },

    saveFun (submitFlag) {
      let vm = this
      let url = process.env.basePath + 'prj_project_save'
      // 计算报价
      let result = projectService.calcQuotation(vm.lease.invoice_price, vm.lease.annual_pay_times, vm.lease.lease_times, (vm.lease.int_rate_display / 100), (vm.lease.down_payment_ratio / 100), (vm.lease.balloon_ratio / 100), (vm.lease.deposit_ratio / 100), vm.lease.lease_charge, vm.lease.insurance_price, vm.lease.gps_amount, vm.lease.travel_tax, vm.lease.purchase_tax, 0)
      let param = {
        project: projectService.getProject(),
        prj_bp: projectService.getPrjbp(),
        lease: projectService.getLease(),
        cash_flows: result.cash_flows,
      }
      vm.hlsPopup.showLoading('正在保存请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.attachFlag = 1
          projectService.setAttachFlag(1)
          vm.project.cdd_list_id = res.resp_item[0].cdd_list_id

          vm.project.project_id = res.resp_project[0].project_id
          vm.projectBp.bp_id = res.resp_bp[0].bp_id
          vm.projectBp.prj_bp_id = res.resp_bp[0].prj_bp_id
          vm.lease.project_lease_item_id = res.resp_lease[0].project_lease_item_id

          projectService.setProjectId(vm.project.project_id)
          projectService.setProjectBpId(vm.projectBp.bp_id)
          projectService.setProjectBpProId(vm.projectBp.prj_bp_id)
          projectService.setProjectLeaseItemId(vm.lease.project_lease_item_id)
          // 提交逻辑
          if (submitFlag === 'Y') {
            // 项目提交
            vm.submit()
          } else {
            vm.hlsPopup.showLongCenter('保存成功!')
          }
        }
      })
    },

    submit () {
      let vm = this
      let url = process.env.basePath + 'prj_project_submit'
      let param = {
        project_id: vm.project.project_id,
      }
      vm.hlsPopup.showLoading('正在提交请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showLongCenter('提交成功!')
          vm.$router.push({
            name: 'Home',
          })
        }
      })
    },
  },
}
</script>

<style scoped lang="less">

  .mationMain {
    padding: 0;
    background-color: #f7f7f8;

    .first-row {
      width: 100%;
      margin-top: 40px;
      display: flex;
    }

    .car-info {
      width: 44%;
      height: 130px;
      background: #B9D3EB;
      box-shadow: 0 0 8px -3px rgba(25, 99, 197, 0.50);
      border-radius: 4px;
      margin-left: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      &.activated {
        opacity: 0.9;
        -webkit-transform: scale(0.95);
        transform: scale(0.95)
      }

      .fun-name {
        font-size: 13px;
        color: #243059;
        margin-top: 10px;
      }

      .circle {
        margin-top: -5px;
        margin-bottom: 5px;
        margin-left: 80%;
        img{
          width: 10px;
        }
      }
      img{
        width: 74px;
      }
    }

    .bg-light {
      background: #DFEFF0;
      box-shadow: 0 0 8px -3px rgba(25, 99, 197, 0.50);
    }

    .bg-normal {
      opacity: 1;
    }

    .bg-grey {
      opacity: 0.3;
    }

    .last-row {
      width: 100%;
      margin-top: 26px;
      display: flex;
      margin-bottom: 10px;
      .circle {
        img{
          width: 10px;
        }
      }
    }

    .h-bottom-tab {
      .button-left {
        background-color: @theme-color;
        width: 50%;
        height: 100%;
        font-size: 15px;
        line-height: 21px;
        color: #FFFFFF;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
      }

      .button-right {
        background-color: #E55F5F;
        width: 50%;
        height: 100%;
        font-size: 15px;
        line-height: 21px;
        color: #FFFFFF;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
      }
    }
  }
</style>
