<template>
  <h-view class="public-style car-details" title="车辆信息">
    <h-content class="">
      <list-item :item-height="40">
        <item>
          <img slot="left-icon" src="@/assets/image/projectCreate/red-car@2x.png" class="left-icon">
          <div slot="name">车辆信息</div>
        </item>
        <item :show-arrow="true">
          <div slot="name" class="required">品牌</div>
          <input
            slot="content" v-model="lease.brand_id_n" type="text" placeholder="请选择"
            readonly
            @click="selectBrand()">
        </item>
        <item :show-arrow="true">
          <div slot="name" class="required">车系</div>
          <input
            slot="content" v-model="lease.series_id_n" type="text" placeholder="请选择"
            readonly @click="selectSeries()">
        </item>
        <item :show-arrow="true">
          <div slot="name" class="required">车型</div>
          <input
            slot="content" v-model="lease.model_id_n" type="text" placeholder="请选择"
            readonly @click="selectModel()">
        </item>
        <item>
          <div slot="name" class="required">车辆指导价</div>
          <input slot="content" v-model="lease.guide_price" placeholder="请输入" type="number">
        </item>
        <item :show-arrow="true">
          <div slot="name" class="required">购车目的</div>
          <input
            slot="content" v-model="lease.objective_buy_car_n" type="text" placeholder="请选择"
            readonly @click="selectAim()">
        </item>
        <item>
          <div slot="name" class="required">实际销售价</div>
          <input slot="content" v-model="lease.invoice_price" type="number" placeholder="请输入">
        </item>
      </list-item>
    </h-content>
    <bottom-tab>
      <tab-button @click.native="save">保存</tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
import projectService from './projectService'
export default {
  name: 'LeaseCarDetail',
  data () {
    return {
      lease: {
        brand_id: null,
        brand_id_n: null,
        series_id: null,
        series_id_n: null,
        model_id: null,
        model_id_n: null,
        guide_price: null,
        objective_buy_car: null,
        objective_buy_car_n: null,
        invoice_price: null,
      },
      brands: [], // 品牌
      seriess: [], // 车系
      models: [], // 车型
      objectives: [],
    }
  },
  created () {

  },
  mounted () {
    this.lease = projectService.getLease()
    this.loadCar()
    this.loadBind()
  },
  methods: {
    loadCar () {
      let vm = this
      let url = $config.basePath + 'prj_car_info_selected' // 初始化购车目的
      let param = {}
      vm.hlsHttp.post(url, param).then((res) => {
        if (res.result === 'S') {
          vm.objectives = res.objective_buy_car_list
        }
      })
    },

    loadBind () { // 初始化车辆信息
      let vm = this
      let url = $config.basePath + 'hls_car_bind'
      let param = {}
      vm.hlsHttp.post(url, param).then(function (res) {
        if (res.result === 'S') {
          vm.brands = res.brand_id_list
        }
      })
    },
    loadSeries () {
      let vm = this
      vm.hlsPopup.showLoading('请稍候')
      let url = $config.basePath + 'prj_car_series_selected' // 车系下拉框
      let param1 = {
        'brand_id': this.lease.brand_id,
      }
      vm.hlsHttp.post(url, param1).then(function (res) {
        vm.hlsPopup.hideLoading()//
        if (res.result === 'S') {
          vm.seriess = res.series_id_list
        }
      })
    },

    loadCarModel () {
      let vm = this
      vm.hlsPopup.showLoading('请稍候')
      let url = $config.basePath + 'prj_car_model_selected' // 车型下拉框
      let param1 = {
        'brand_id': vm.lease.brand_id,
        'series_id': vm.lease.series_id,
      }
      vm.hlsHttp.post(url, param1).then(function (res) {
        vm.hlsPopup.hideLoading()//
        if (res.result === 'S') {
          vm.models = res.model_id_list
        }
      })
    },

    selectBrand () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.brands,
        code: 'brand_id',
        object: vm.lease,
        returnItem: function (index, result) {
          vm.lease = result
          vm.cleanCarSeries()
        },
      })
    },

    cleanCarSeries () {
      let vm = this
      vm.loadSeries()
      vm.lease.series_id = null
      vm.lease.series_id_n = null
      vm.lease.model_id = null
      vm.lease.model_id_n = null
      vm.lease.guide_price = null
    },

    selectSeries () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.seriess,
        code: 'series_id',
        object: vm.lease,
        returnItem: function (index, result) {
          vm.lease = result
          vm.cleanCarModel()
        },
      })
    },

    cleanCarModel () {
      let vm = this
      vm.lease.model_id = null
      vm.lease.model_id_n = null
      vm.loadCarModel()
    },

    selectModel () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.models,
        code: 'model_id',
        object: vm.lease,
        returnItem: function (index, result) {
          vm.lease = result
          vm.lease.guide_price = vm.models[index].guide_price
        },
      })
    },

    selectAim () { // 购车目的下拉框
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.objectives,
        code: 'objective_buy_car',
        object: vm.lease,
        returnItem: function (index, result) {
          vm.lease = result
        },
      })
    },
    /**
     * 保存
     */
    save () {
      let vm = this
      if (vm.lease.brand_id_n && vm.lease.series_id_n && vm.lease.model_id_n && vm.lease.guide_price && vm.lease.objective_buy_car_n && vm.lease.invoice_price) {
        vm.hlsPopup.showLongCenter('保存成功!')
        projectService.setLease(vm.lease)
        projectService.setCarFlag(1)
        vm.$routeGo()
      } else {
        vm.hlsPopup.showLongCenter('必填字段不能为空!')
      }
    },
  },
}
</script>

<style scoped lang="less">
  .hls-item .contents .add-content .right-icon {
    width: 10px;
  }
  .h-bottom-tab{
    background-color: @headerColor;
    color: #fff;
  }
</style>
