<template>
  <h-view id="partner-create" class="public-style" title="客户创建">
    <!--<h-header :has-border="false" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$hlsExit()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">客户创建</div>
    </h-header>-->
    <h-content>
      <div class="picture">
        <img src="@/assets/image/bpMaster/partner-create@2x.png">
      </div>
      <list-item :item-height="40">
        <item :has-border="false" :show-arrow="true">
          <div slot="name" class="required">省份</div>
          <input
            slot="content" v-model="bpdata.province_id_n" placeholder="请输入省份" type="text"
            readonly @click="selectPrivince">
        </item>
        <item :has-border="false" :show-arrow="true">
          <div slot="name" class="required">市</div>
          <input
            slot="content" v-model="bpdata.city_sp_n" placeholder="请输入市" type="text"
            readonly @click="selectCity" >
        </item>
        <item :has-border="false" :show-arrow="true">
          <div slot="name" class="required">客户名称</div>
          <input
            slot="content" v-model="bpdata.bp_name" placeholder="请输入伙伴名称" type="text">
        </item>
        <item :has-border="false" :show-arrow="true" @click.native="selectBpType()">
          <div slot="name" class="required">客户类型</div>
          <input
            slot="content" v-model="bpdata.bp_type_n" placeholder="请选择客户类型" type="text"
            readonly>
        </item>
        <item :has-border="false" :show-arrow="true" @click.native="selectBpClass()">
          <div slot="name" class="required">客户分类</div>
          <input
            slot="content" v-model="bpdata.bp_class_n" placeholder="请选择客户分类" type="text"
            readonly>
        </item>
      </list-item>
      <h-button class="button-class radius-large" @click.native="create()">创建</h-button>
    </h-content>
  </h-view>
</template>

<script>
export default {
  data () {
    return {

      bpClassList: [
        {
          'code': 'NP',
          'code_name': '个人',
        },
        {
          'code': 'ORG',
          'code_name': '企业',
        },
      ],
      bpTypes: [],
      bpdata: {
        bp_name: '',
        bp_type: '',
        bp_type_n: '',
        bp_category: null,
        bp_category_n: null,
        bp_class: null,
        bp_class_n: null,
        province_id: null,
        province_id_n: null,
        city_sp: null,
        city_sp_n: null,
      },
      provinceList: [],
      cityList: [],
    }
  },
  created: function () {
    let vm = this
    vm.initLoad()
    vm.appLoadProvince()
  },
  methods: {
    initLoad () {
      let vm = this
      let url = $config.basePath + 'bp_type_enter_selected'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.bpTypes = res.bp_type_list
        }
      })
    },
    appLoadProvince () {
      let vm = this
      let url = $config.basePath + 'app_bp_province'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.provinceList = res.province_list
        }
      })
    },
    appLoadCity (provinceId) {
      let vm = this
      let url = $config.basePath + 'app_bp_city_query'
      let param = {
        province_id: provinceId,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.cityList = res.city_list
        }
      })
    },

    selectBpType () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.bpTypes,
        code: 'bp_type',
        object: vm.bpdata,
        returnItem: function (index, obj) {
          vm.bpdata = obj
          vm.bpdata['bp_category'] = vm.bpTypes[index].bp_category
          vm.bpdata['bp_category_n'] = vm.bpTypes[index].bp_category_n
        },
      })
    },

    selectBpClass () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.bpClassList,
        code: 'bp_class',
        object: vm.bpdata,
        returnItem: function (index, obj) {
          vm.bpdata = obj
        },
      })
    },

    selectPrivince () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.provinceList,
        code: 'province_id',
        object: vm.bpdata,
        returnItem: function (index, obj) {
          vm.appLoadCity(vm.provinceList[index].code)
          vm.bpdata = obj
          vm.bpdata.city_sp = ''
          vm.bpdata.city_sp_n = ''
        },
      })
    },
    selectCity () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.cityList,
        code: 'city_sp',
        object: vm.bpdata,
        returnItem: function (index, obj) {
          vm.bpdata = obj
        },
      })
    },

    create () {
      let vm = this
      let name
      if (!vm.bpdata.province_id || !vm.bpdata.city_sp || !vm.bpdata.bp_name || !vm.bpdata.bp_type || !vm.bpdata.bp_class) {
        vm.hlsPopup.showLongBottom('请填写字段!')
      } else {
        if (vm.bpdata.bp_class === 'NP') {
          name = 'PartnerMainten'
        } else {
          name = 'PartnerOrgMainten'
        }
        this.$router.push({
          name: name,
          params: {
            bpData: vm.bpdata,
          },
        })
      }
    },

  },
}
</script>
<style lang="less" type="text/less">

  #partner-create {
    .content {
      background-color: #f7f7f8;
      padding-top: 0;

      .picture {
        width: 100%;
        margin-top: -1px;

        img {
          width: 100%;
        }
      }

      .hls-list-item {
        background-color: transparent;
        margin-top: -15px;
        position: relative;
        .hls-item {
          width: 92%;
          background-color: #fff;
          margin-top: 5px;
          margin-left: 15px;
          margin-right: 15px;
          border-radius: 10px;
          .right-icon{
            // transform: rotate(90deg);
          }
        }
      }

      .button-class {
        width: 70%;
        margin: 0.2rem 15%;
        display: flex;
        justify-content: center;
        border-radius: 10px;
        background-color: @theme-color;
        color: #fff;
        border: none;
        &.activated {
          opacity: 0.8;
          -webkit-transform: scale(0.95);
          transform: scale(0.95)
        }
      }
    }
  }

  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios.platform-cordova:not(.fullscreen) {
      //.h-ios {
      #home {

      }
    }
  }
</style>
