<!--客户列表-->
<template>
  <div class="page-contain list-contain">
    <top-nav title="客户列表"
             @query="onSearch"
             :backFunc="returnLast"></top-nav>
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
               :style="{marginTop: paddingTop ? paddingTop + 'px' : '0'}"
              class="data-list">
      <div>
        <van-radio-group v-model="radio">
          <van-row v-for="(item, index) in this.tableData"
                   :key="index"
                   class="data-item"
                   @click="radio=item.customerId">
            <van-col span="21">
              <div class="row">
                <div class="left">
                  <span class="fb">{{ item.projectCode }}</span>
                </div>
                <div class="fc8CEE fs28">{{ item.statusKey }}</div>
              </div>
              <div class="row">
                <div class="left">
                  <span>客户全称：</span>
                  <span class="fc666">{{ item.customerFullName }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>客户编码：</span>
                  <span class="fc666">{{ item.customerNo }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>客户类型：</span>
                  <span class="fc666">{{ item.customerType }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>客户状态：</span>
                  <span class="fc666">{{ item.customerStatus }}</span>
                </div>
              </div>
            </van-col>
            <van-col span="3">
              <van-radio :name="item.customerId"
                         icon-size="25px"
                         style="
                  height: 100px;
                  padding-left:10px;
                  border-left: 1px solid #e9e9e9;
                " />
            </van-col>
            <!-- <van-col span="3"
                     style="padding: 10px">
              <van-radio :name="item.customerId"
                         style="
                  height: 100px;
                  border-left: 1px solid #e9e9e9;
                  padding: 0 20px;
                " />
            </van-col> -->
          </van-row>
        </van-radio-group>
      </div>
    </van-list>
    <van-popup v-model="showOrgPopup"
               position="right"
               get-container="#app"
               class="search-popup"
               id="search-popup"
               @click-overlay="handleSure">
      <div class="contain">
        <div style="padding: 10px; border-bottom: 1px solid #e9e9e9;">
          查询条件
        </div>
        <van-field v-model="form.customerFullName"
                   name="customerFullName"
                   label="客户名称"
                   input-align="right"
                   placeholder="请输入客户名称"
                   clearable
                   @click="getFocus" />
        <van-field v-model="form.customerNo"
                   name="customerNo"
                   label="客户编号"
                   input-align="right"
                   placeholder="请输入客户编号"
                   clearable
                   @click="getFocus" />
        <van-field readonly
                   clickable
                   :value="form.customerStatus"
                   label="客户状态"
                   placeholder="请选择客户状态"
                   @click="showCustomerStatus = true"
                   input-align="right"
                   clearable />
        <van-popup v-model="showCustomerStatus"
                   position="bottom"
                   get-container="#search-popup">
          <van-picker show-toolbar
                      :columns="customerStatusKeyList"
                      @confirm="customerStatusConfirm"
                      @cancel="showCustomerStatus = false" />
        </van-popup>
        <van-field readonly
                   clickable
                   :value="form.customerType"
                   label="客户类型"
                   placeholder="请选择客户类型"
                   @click="showCustomerType = true"
                   input-align="right"
                   clearable />
        <van-popup v-model="showCustomerType"
                   position="bottom"
                   get-container="#search-popup">
          <van-picker show-toolbar
                      :columns="customerTypeKeyList"
                      @confirm="customerTypeConfirm"
                      @cancel="showCustomerType = false" />
        </van-popup>
      </div>
      <div class="footer-btn"
           :style="{paddingBottom:system==='ios'?'15px':'0px',background:'#fff'}">
        <van-button type="info"
                    native-type="submit"
                    @click="handleSure">确定</van-button>
        <van-button type="default"
                    @click="reset">重置</van-button>

      </div>
    </van-popup>
    <div class="footer-btn"
         :style="{paddingBottom:system==='ios'?'15px':'0px',background:'#fff'}">
      <van-button type="info"
                  native-type="submit"
                  @click="confirm(true)">确定</van-button>
      <van-button type="default"
                  @click="confirm(false)">取消</van-button>

    </div>
  </div>
</template>

<script>
import commonSelectList from '../common/commonSelectList'
import resolveKeyboardIos from '../common/resolveKeyboardIos'
import util from '../common/util'
export default {
  name: 'customer-list',
  props: {
    initId: String,customerType: String // 客户ID
  },
  mixins: [resolveKeyboardIos],
  data () {
    return {
      system: util.appSystem(),
      showCustomerStatus: false,
      showCustomerType: false,
      form: {
        customerFullName: '',
        customerNo: '',
        customerStatus: '',
        customerType: ''
      },
      // 客户状态
      customerStatusKeyList: [],
      customerStatusList: [],
      // 客户类型
      customerTypeKeyList: [],
      customerTypeList: [],
      searchValue: '',
      tableData: [],
      loading: false,
      finished: false,
      showOrgPopup: false,
      radio: '',
      // 分页参数
      pager: {
        curPage: 1,
        pageSize: 20,
        total: 0
      },
      paddingTop: localStorage.getItem('paddingTop'),

    }
  },
  created () {
    debugger;
    this.radio = this.initId || ''
    // 客户状态
    commonSelectList
      .initDictDataGet(this, 'data_permission_customer_status')
      .then((data) => {
        this.customerStatusList = data
        let customerStatusKeyList = []
        if (data.length !== 0) {
          data.forEach((v) => {
            customerStatusKeyList.push(v.key)
          })
        }
        this.customerStatusKeyList = customerStatusKeyList
      })
    // 客户类型
    commonSelectList.initDictDataGet(this, 'Crm_Customer_Type').then((data) => {
      this.customerTypeList = data
      let customerTypeKeyList = []
      if (data.length !== 0) {
        data.forEach((v) => {
          customerTypeKeyList.push(v.key)
        })
      }
      this.customerTypeKeyList = customerTypeKeyList
    })
  },
  methods: {
    customerStatusConfirm (data) {
      this.showCustomerStatus = false
      this.form.customerStatus = data
    },
    customerTypeConfirm (data) {
      this.showCustomerType = false
      this.form.customerType = data
    },
    handleSure () {
      // if (this.form.customerStatus === '' && this.form.customerType !== '') {
      //   this.$toast('客户状态不能为空！')
      //   return false
      // }
      // if (this.form.customerType === '' && this.form.customerStatus !== '') {
      //   this.$toast('客户类型不能为空！')
      //   return false
      // }
      this.showOrgPopup = false
      this.pager.curPage = 1
      this.tableData = []
      let customerStatus = this.customerStatusList.find(
        (v) => v.key === this.form.customerStatus
      )
      if (customerStatus) {
        this.form.customerStatus = customerStatus.vaule
      }
      this.reload()
    },
    onSearch (val) {
      this.showOrgPopup = true
    },
    searchClose (form) {
      this.showOrgPopup = false
      this.form = form
      this.reload()
    },
    reload () {
      this.pager.curPage = 1
      this.tableData = []
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    onLoad () {
      let param = {
        currPage: this.pager.curPage,
        pageSize: this.pager.pageSize
      }
      if(!this.form.customerType){
        this.form.customerType=this.customerType;
      }
      Object.assign(param, this.form)
      this.$axios.post({
        domain: 'dataQueryUrl',
        url: 'bus.crmCustomerListPage',
        requestType: 'body',
        data: param,
        success: function (res) {
          if (res.success) {
            let data = res.data.list || []
            this.tableData = [...this.tableData, ...data]
            this.pager.curPage++
            this.loading = false
            if (this.tableData.length === res.data.recordTotal) {
              this.finished = true
            }
          } else {
            this.$toast.fail(res.msg)
            this.finished = true
          }
        }.bind(this),
        error: function (res) {
          this.$toast.fail(res.msg)
          this.finished = true
        }.bind(this)
      })
    },
    reset () {
      for (let key in this.form) {
        this.form[key] = ''
      }
      this.handleSure()
    },
    clear () {
      let obj = {
        form: {
          customerFullName: '',
          customerNo: '',
          customerStatus: '',
          customerType: ''
        },
        // 客户状态
        customerStatusKeyList: [],
        customerStatusList: [],
        // 客户类型
        customerTypeKeyList: [],
        customerTypeList: [],
        searchValue: '',
        tableData: [],
        loading: false,
        finished: false,
        showOrgPopup: false,
        radio: '',
        // 分页参数
        pager: {
          curPage: 1,
          pageSize: 20,
          total: 0
        }
      }
      for (let key in obj) {
        this[key] = obj[key]
      }
    },
    returnLast () { this.$emit('close', []) },
    confirm (status) {
      let result = null
      if (status && this.tableData.length !== 0) {
        this.tableData.forEach((v) => {
          if (this.radio === v.customerId) {
            result = v
          }
        })
      }
      this.$emit('close', result)
    }
  }
}
</script>
<style scoped lang="scss">
.list-contain {
  // padding-top: 82px;
   background-color: #F9F9F9;
}
.contain {
  span {
    width: 100%;
    padding: 0 0.213rem;
  }
}

.search-popup {
  height: calc(100vh - 80px);
  margin-top: 41px;
  width: 66%;
  .van-field__body {
    height: 60px;
  }
  .van-field__left-icon {
    line-height: 60px;
  }

  .footer-tool {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    border-top: 1px solid #ddd;
    display: flex;
    padding: 0 5px;
    align-items: center;
  }
}
</style>
