<!--
 * @Author: your name
 * @Date: 2019-09-29 10:02:11
 * @LastEditTime : 2019-12-26 12:05:03
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 -->
<template>
  <h-view id="sales-info">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>合同创建</span>
      </div>
    </h-header>
    <h-content>
      <list-item :item-height="44" class="second-part">
        <item :showArrow="true" @click.native="picker">
          <div slot="name" class="font-color required">承租人</div>
          <input slot="content" v-model="lessee" readonly placeholder="请选择">
        </item>
        <item :showArrow="true">
          <div slot="name" class="font-color required">业务类型</div>
          <input
            slot="content"
            v-model="business"
            type="text"
            readonly
            placeholder="请选择"
            @click="selectBusiness"
          >
        </item>
        <item>
          <div slot="name" class="font-color required">经销商</div>
          <input v-if="user_bp_type === 'AGENT'" slot="content" v-model="bp_agent_name" readonly>
          <input v-if="user_bp_type === 'OFFICE'" slot="content" placeholder="直销" readonly>
        </item>
        <item :showArrow="true">
          <div slot="name" class="font-color required">销售人员</div>
          <input
            slot="content"
            v-model="sales"
            type="text"
            readonly
            placeholder="请选择"
            @click="selectSales"
          >
        </item>
        <item :showArrow="true">
          <div slot="name" class="font-color required">办事处</div>
          <input
            slot="content"
            v-model="office_name"
            type="text"
            readonly
            placeholder="请选择"
            @click="selectOffice"
          >
        </item>
        <item :showArrow="true">
          <div slot="name" class="font-color required">主机厂</div>
          <input
            slot="content"
            v-model="factory_name"
            type="text"
            readonly
            placeholder="请选择"
            @click="selectFactory"
          >
        </item>
        <item>
          <div slot="name" class="font-color required">主机厂业务员</div>
          <input slot="content" v-model="salesInfo.manu_manager" placeholder="请输入业务员姓名">
        </item>
        <item v-if="user_bp_type === 'AGENT'">
          <div slot="name" class="font-color required">授信额度</div>
          <CurrencyInput slot="content" v-model="inflow_line" readonly placeholder="授信额度"/>
        </item>
        <item v-if="user_bp_type === 'AGENT'">
          <div slot="name" class="font-color required">已使用授信额度</div>
          <CurrencyInput slot="content" v-model="inflow_used" readonly placeholder="已使用授信额度"/>
        </item>
        <item v-if="user_bp_type === 'AGENT'">
          <div slot="name" class="font-color required">剩余授信额度</div>
          <CurrencyInput slot="content" v-model="inflow_reset" readonly placeholder="剩余授信额度"/>
        </item>
        <item @click.native="showTime('YYYY-MM-DD')">
          <div slot="name" class="font-color required">签约日期</div>
          <input
            slot="content" v-model="salesInfo.sale_date" placeholder="请选择签约日期"
            readonly>
          <img src="@/assets/contractCreate/date.png" alt="" class="date-pic">
        </item>
      </list-item>
    </h-content>
    <bottom-tab>
      <tab-button class="footer" @click.native="confirmCreate">
        确认创建
      </tab-button>
    </bottom-tab>
    <h-modal v-model="showModal" position="bottom" class="hmodal">
      <h-view id="picker">
        <h-header :proportion="[5,1,1]" class="bar-custom">
          <div slot="left" class="h-header-btn">
            <img src="@/assets/userBind/arrow.png" @click="hideModal">
            <span>选择承租人</span>
          </div>
        </h-header>
        <!-- 搜索 -->
        <div class="search">
          <input type="text" placeholder="请输入承租人名称/证件号码">
        </div>
        <scroll
          ref="scroll"
        >
          <div class="wrap">
            <div v-for="(item,index) in showLists" :key="index" class="contract-lists" >
              <div class="box" @click="pickLessee(item)">
                <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
                <div><p>承租人名称</p><p>{{ item.bp_name }}</p></div>
                <div><p>证件号</p><p>{{ item.bp_id_card_no }}</p></div>
              </div>
            </div>
          </div>
        </scroll>
        <!-- <bottom-tab>
          <tab-button class="footer">
            确认创建
          </tab-button>
        </bottom-tab> -->
      </h-view>
    </h-modal>
  </h-view>
</template>

<script>
import CurrencyInput from '../../components/currencyInput'
export default {
  components: {
    CurrencyInput,
  },
  data () {
    return {
      inflow_line: '', // 授信总额度
      inflow_used: '', // 已使用授信额度
      inflow_reset: '', // 剩余授信额度
      lessee: '', // 承租人
      sales: '', // 销售人员
      office_name: '', // 办事处
      factory_name: '',
      business: '',
      factoty: '', // 主机厂列表
      showModal: false,
      showLists: [],
      user_bp_type: '', // 客户类型
      businessLists: [], // 业务人员查询结果
      salesLists: [], // 销售人员查询结果
      officeLists: [], // 办事处查询结果
      factoryLists: [], // 主机厂
      bp_agent_id: '', // 经销商id
      bp_agent_name: '', // 经销商名称
      salesInfo: {
        bp_type: window.localStorage.bp_type,
        bp_id_tenant: '', // 承租人id
        business_type: '', // 业务类型
        bp_id_agent: '', // 经销商id
        bp_user_id: '', // 业务员id
        office_id: '', // 办事处id
        factory: '', // 主机厂id
        manu_manager: '', // 办事处业务员
        sale_date: '',
        project_id: '',
      },
    }
  },
  watch: {
    'salesInfo.factory': {
      handler (newVal, oldVal) {
        this.factoty.forEach(i => {
          if (i.bp_factory_id === this.salesInfo['factory']) {
            this.inflow_line = i.inflow_line
            this.inflow_used = i.inflow_used
            this.inflow_reset = i.inflow_reset
          }
        })
      },
      immediate: true,
    },
    // '$route' (to, from) {
    //   debugger
    //   if (from.fullPath !== '/contract-create-list' && to.fullPath === '/sales-info') {
    //     this.$router.go(0)
    //   }
    // },
  },
  activated () {

  },
  created () {

  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'ContractCreateList') {
        vm.showModal = false
        vm.lessee = ''
        vm.business = ''
        vm.office_name = ''
        vm.factory_name = ''
        vm.bp_agent_id = ''
        vm.bp_agent_name = ''
        vm.inflow_line = '' // 授信总额度
        vm.inflow_used = '' // 已使用授信额度
        vm.inflow_reset = '' // 剩余授信额度
        vm.user_bp_type = window.localStorage.bp_type
        vm.sales = window.localStorage.bp_name
        vm.salesInfo = {
          bp_id_tenant: '', // 承租人id
          business_type: '', // 业务类型
          bp_id_agent: '', // 经销商id
          bp_user_id: '', // 业务员id
          office_id: '', // 办事处id
          factory: '', // 主机厂id
          manu_manager: '', // 办事处业务员
          sale_date: '',
          bp_type: window.localStorage.bp_type,
          project_id: '',
        }
        vm.businessQuery().then(res => {
          vm.agentQuery().then(res => {
            vm.factoryQuery().then(res => {
            })
          })
        })
      } else if (from.name === 'CreateBaseInfo') {
        vm.salesInfo.project_id = window.localStorage.project_id
      }
    })
  },
  methods: {
    // 时间选择
    showTime (format) {
      let vm = this
      hlsPopup.showTime({
        nowDate: (new Date()).format('yyyy-MM-dd'),
        format: format,
        callback: (date) => {
          vm.salesInfo.sale_date = date
        },
      })
    },
    // 承租人查询
    lesseeQuery () {
      let vm = this
      let url = process.env.basePath + 'prj_bp_master_query'
      let param = {
        bp_agent_id: vm.bp_agent_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        console.log('承租人', res)
        if (res.result === 'S') {
          vm.showLists = res.lists
        }
      })
    },
    // 业务类型查询
    businessQuery () {
      let vm = this
      let url = process.env.basePath + 'prj_business_type'
      let param = { }
      vm.hlsPopup.showLoading('请稍候')
      return vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        console.log('业务类型', res)
        if (res.result === 'S') {
          vm.businessLists = res.lists.map(item => {
            return {
              code: item.business_type,
              code_name: item.business_type_n,
            }
          })
        }
      })
    },
    // 业务类型选择
    selectBusiness () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.businessLists,
        code: 'business_type',
        object: {},
        returnItem: function (index, obj) {
          vm.business = obj.business_type_n
          vm.salesInfo.business_type = obj.business_type
        },
      })
    },
    // 经销商查询
    agentQuery () {
      let vm = this
      let url = process.env.basePath + 'prj_bp_agent_query'
      let param = {
        user_phone: window.localStorage.user_phone,
      }
      vm.hlsPopup.showLoading('请稍候')
      return vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        console.log('经销商', res)
        if (res.result === 'S') {
          vm.bp_agent_name = res.info.bp_agent_name
          vm.bp_agent_id = res.info.bp_agent_id
          if (window.localStorage.bp_type === 'OFFICE') {
            vm.office_name = res.info.bp_agent_name
            vm.salesInfo.office_id = res.info.bp_agent_id
            vm.salesInfo.bp_id_agent = ''
          } else {
            vm.salesInfo.bp_id_agent = res.info.bp_agent_id
          }
          vm.salesInfo.bp_user_id = res.info.bp_user_id
          vm.lesseeQuery()
          vm.salesQuery()
          vm.officeQuery()
          vm.creditQuery()
        }
      })
    },
    // 主机厂查询
    factoryQuery () {
      let vm = this
      let url = process.env.basePath + 'prj_factory_list'
      let param = {
        phone: window.localStorage.getItem('user_phone'),
      }
      vm.hlsPopup.showLoading('请稍候')
      return vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.factoty = res.lists
        if (res.result === 'S') {
          vm.factoryLists = res.lists.map(item => {
            return {
              code: item.bp_factory_id,
              code_name: item.bp_factory_name,
            }
          })
        }
      })
    },

    // 主机厂选择
    selectFactory () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.factoryLists,
        code: 'factory_type',
        object: {},
        returnItem: function (index, obj) {
          vm.salesInfo.factory = obj.factory_type
          vm.factory_name = obj.factory_type_n
        },
      })
    },
    // 销售人员查询
    salesQuery () {
      let vm = this
      let url = process.env.basePath + 'prj_bp_agent_user'
      let param = {
        bp_agent_id: vm.bp_agent_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        console.log('销售人员', res)
        if (res.result === 'S') {
          vm.salesLists = res.lists.map(item => {
            return {
              code: item.bp_user_id,
              code_name: item.agent_username,
            }
          })
        }
      })
    },
    selectSales () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.salesLists,
        code: 'agent_type',
        object: {},
        returnItem: function (index, obj) {
          console.log(obj)
          vm.salesInfo.bp_user_id = obj.agent_type
          vm.sales = obj.agent_type_n
        },
      })
    },
    // 办事处查询
    officeQuery () {
      let vm = this
      let url = process.env.basePath + 'prj_office_list'
      let param = {
        bp_agent_id: vm.bp_agent_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        console.log('办事处', res)
        if (res.result === 'S') {
          vm.officeLists = res.lists.map(item => {
            return {
              code: item.office_id,
              code_name: item.office_name,
            }
          })
        }
      })
    },
    // 选择办事处
    selectOffice () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.officeLists,
        code: 'office_type',
        object: {},
        returnItem: function (index, obj) {
          vm.salesInfo.office_id = obj.office_type
          vm.office_name = obj.office_type_n
        },
      })
    },
    // 授信额度查询
    creditQuery () {
      let vm = this
      let url = process.env.basePath + 'prj_agent_credit_query'
      let param = {
        bp_agent_id: vm.bp_agent_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        console.log('授信额度查询', res)
        if (res.result === 'S') {
          // vm.inflow_line = '' // 授信总额度
          // vm.inflow_used = '' // 已使用授信额度
          // vm.inflow_reset = '' // 剩余授信额度
        }
      })
    },
    // 查询承租人
    picker () {
      // this.$router.push({
      //   name: 'PickLessee',
      // })
      this.showModal = true
    },
    // 选择承租人
    pickLessee (item) {
      this.lessee = item.bp_name
      this.salesInfo.bp_id_tenant = item.bp_id
      this.showModal = false
      window.localStorage.setItem('bp_id_tenant', this.salesInfo.bp_id_tenant)
      window.localStorage.setItem('bp_class_tenant', item.bp_class)
      window.localStorage.setItem('bp_name_tenant', item.bp_name)
    },
    hideModal () {
      this.showModal = false
    },
    check () {

    },
    // 销售信息保存
    confirmCreate () {
      let vm = this
      if (!vm.lessee) {
        hlsPopup.showLongCenter('请选择承租人!')
      } else if (!vm.business) {
        hlsPopup.showLongCenter('业务类型不能为空!')
      } else if (!vm.sales) {
        hlsPopup.showLongCenter('销售人员不能为空!')
      } else if (!vm.office_name) {
        hlsPopup.showLongCenter('办事处不能为空!')
      } else if (!vm.factory_name) {
        hlsPopup.showLongCenter('主机厂不能为空!')
      } else if (!vm.salesInfo.manu_manager) {
        hlsPopup.showLongCenter('主机厂业务员不能为空!')
      } else if (!vm.salesInfo.sale_date) {
        hlsPopup.showLongCenter('请选择签约日期!')
      } else {
        let url = process.env.basePath + 'prj_sales_info_save'
        window.localStorage.setItem('bp_id_tenant', this.salesInfo.bp_id_tenant)
        let param = {
          master: vm.salesInfo,
        }
        vm.hlsPopup.showLoading('请稍候')
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            hlsPopup.showLongCenter('创建成功！')
            window.localStorage.setItem('project_id', res.project_id)
            window.localStorage.setItem('fromPage', 'sale')
            vm.$router.push({
              name: 'CreateBaseInfo',
            })
          }
        })
      }
    },
  },

}
</script>

<style lang="less" type="text/less">
#sales-info {
    .date-pic {
      height: 17px;
      width: 17px;
      margin-top: 14px;
      margin-left: 6px;
    }
    .bottom-tab-button{
    background: @headerColor;
    border-radius: 4px;
    color:white;
    height: 40px;
    margin: 4px 2% 0 2%;
  }
  .hmodal {
    z-index: 99;
    .search {
      background-color: #fff;
      padding: 8px 12px;
      position: absolute;
      width: 100%;
      z-index: 100;
      margin-bottom: 8px;
      input {
        padding-left: 12px;
        border-radius: 4px;
        height: 36px;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        line-height: 36px;
        background: url("../../assets/contractStart/search1.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
      }

      input::placeholder {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        letter-spacing: 0;
      }
      input:focus {
        background: url("../../assets/contractStart/search2.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
        border: 2px solid #bcc6ff;
      }
    }
    .wrap {
      width: 100%;
      padding: 8px;
      .contract-lists {
        width: 100%;
        background: #fff;
        margin-bottom: 8px;
        border-radius: 2px;
        position: relative;
        .box {
          height: 68px;
          margin-left: 50px;
          margin-right: 19px;
          .file-icon {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 10px;
            top: 8px;
          }
          div {
            width: 100%;
            height: 32px;
            position: relative;
            p {
              height: 32px;
              line-height: 32px;
              position: absolute;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              letter-spacing: 0;
            }
            p:nth-of-type(1){
              left: 0;
              color: rgba(75,74,75,0.60);
            }
            p:nth-of-type(2){
              right: 0;
              color: #4B4A4B;
            }
          }
        }
      }
    }
    .content{
      position: absolute;
      top:0;
    }
    .scrollContent{
     padding-top: 1.92rem;
      padding-bottom: 20px;
    }
  }
}
  .platform-ios {
    #picker {
      .scrollContent {
        padding-top: 2.32rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #picker {
        .scrollContent {
          padding-top: 2.72rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #picker {
        .scrollContent {
          padding-top: 2.72rem;
        }
        .search {
        input {
          background: url("../../assets/contractStart/search1.png") 320px
            no-repeat;
          background-size: 16px 16px;
          background-color: rgba(239, 239, 239, 0.55);
          padding: 8px 12px;
          border-radius: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
        }
      }
      }
    }
  }
</style>
