<!--代理商参会人-->
<template>
  <div class="page-contain list-contain"
       style="background:rgb(249, 249, 249);padding-bottom:120px">
    <top-nav title="联系人列表"
             @query="onSearch"
             :backFunc="returnLast"></top-nav>
    <form action="/"  class="seach-form" :style="{top: paddingTop ? (paddingTop+40)+'px' : '40px'}">
      <van-search  v-model="inputVal"  show-action
        placeholder="请输入联系人名称"
        @search="hanldeSearch"
        @input="handleInput"
        @cancel="onCancel"
      />
    </form>

    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :style="{marginTop: paddingTop ? (paddingTop+40) + 'px' : '40px'}"
              class="data-list">
      <div>
        <van-checkbox-group v-model="checkboxResult">
          <van-row v-for="(item, index) in this.tableData"
                   :key="index"
                   class="data-item"
                   @click="selUser(item, index)">
            <van-col span="18">
              <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.name }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>职位：</span>
                  <span class="fc666">{{ item.contactTitle }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>联系电话：</span>
                  <span class="fc666">{{ item.mobilePhone }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>邮箱：</span>
                  <span class="fc666">{{ item.email }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>是否有效：</span>
                  <span class="fc666">{{ item.status==='A'?'是':'否' }}</span>
                </div>
              </div>
            </van-col>
            <van-col span="6" class="van-flex" >
              <van-checkbox :name="item.name"  ref="checkboxes"  icon-size="25px" />
              <van-button @click="handleEdit(item, $event)"  icon="edit"
                plain hairline type="info"  round class="edit-btn">编辑</van-button>
            </van-col>
          </van-row>
        </van-checkbox-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.name"
                   label="联系人名称"
                   label-width="5em"
                   placeholder="请输入客户名称"
                   input-align="right"
                   clearable
                   @click="getFocus" />

        <van-field v-model="form.contactTitle"
                   label="联系人职位"
                   label-width="5em"
                   placeholder="请输入客户编号"
                   input-align="right"
                   clearable
                   @click="getFocus" />
      </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>
      <van-button type="primary"
                  @click="handleAdd">新增
                  </van-button>

    </div>
    <popup-operat-contact ref="opeartContRef"></popup-operat-contact>
  </div>
</template>

<script>
import resolveKeyboardIos from '../common/resolveKeyboardIos'
import util from '../common/util'
export default {
  name: 'customer-contact-list',
  props: {
    onlyOne: Boolean, // 是否单选
    initNames: Array, // 默认选择名称数组
    customerNos: Array ,// 客户编号数组
    customerInfo: Object //客户编号
  },
  mixins: [resolveKeyboardIos],
  data () {
    return {
      system: util.appSystem(),
      showCustomerStatus: false,
      showCustomerType: false,
      form: {
        name: '',
        contactTitle: '',
        busSystem: 'cloud-crm-project',
        customerNos: []
      },
      tableData: [],
      loading: false,
      finished: false,
      showOrgPopup: false,
      checkboxResult: [],
      // 分页参数
      pager: {
        curPage: 1,
        pageSize: 20,
        total: 0
      },
      paddingTop: Number(localStorage.getItem('paddingTop')),
      inputVal: '', //查询输入框的值
      timeId: -1,
    }
  },
  created () {

    this.form.customerNos = this.customerNos
    this.checkboxResult = this.initNames
    // this.onLoad(this.form)
  },
  methods: {
    // 手动传参查询
    setParamOnSearch (customerNos, initNames) {
      this.form.customerNos = customerNos
      this.checkboxResult = initNames
      this.reload()
    },
    selUser (item, index) {
      if(!item.name || !item.contactTitle || !item.mobilePhone || !item.email){
        this.$toast({type: 'warning', message: '信息不全，请先补充联系人信息'});
        this.$refs.checkboxes[index].toggle(false);
        return;
      }
      if (this.onlyOne) {
        // 单选
        this.checkboxResult = [item.name];
        return;
      }
      if (this.checkboxResult.includes(item.name)) {
        this.checkboxResult = this.checkboxResult.filter(v => v !== item.name)
      } else {
        this.checkboxResult.push(item.name)
      }
    },

    handleSure () {
      this.showOrgPopup = false
      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 queryParam = this.form
      if (!queryParam.customerNos || queryParam.customerNos.length === 0) {
        // this.$toast('代理商编号不能为空！')
        this.finished = true
        return false;
      }
      let param = {
        currPage: this.pager.curPage,
        pageSize: this.pager.pageSize
      }
      Object.assign(param, queryParam)
      this.$axios.post({
        domain: 'dataQueryUrl',
        url: 'bus.getCustomerContact',
        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
              let array = []
              if (this.tableData.length !== 0) {
                this.tableData.forEach(v => {
                  let find = array.find(z => z.name === v.name)
                  if (!find) {
                    array.push(v)
                  }
                })
              }
              this.tableData = array
            }
          } else {
            this.$toast.fail(res.msg)
            this.finished = true
          }
        }.bind(this),
        error: function (res) {
          this.$toast.fail(res.msg)
          this.finished = true
        }.bind(this)
      })
    },
    // userClick (user) {
    //   if (this.onlyOne) {
    //     // 单选
    //     this.checkboxResult = [user.name]
    //   }
    // },
    isExistInfo(email, job, mobile){
      if(!job || !email || !mobile) {
        this.$toast.warning('信息不全，请先补充联系人信息');
      }
    },
    reset () {
      for (let key in this.form) {
        this.form[key] = ''
      }
      this.handleSure()
    },
    clear () {
      let obj = {
        form: {
          customerFullName: '',
          customerNo: '',
          customerStatus: '',
          customerType: ''
        },
        tableData: [],
        loading: false,
        finished: false,
        showOrgPopup: false,
        checkboxResult: [],
        // 分页参数
        pager: {
          curPage: 1,
          pageSize: 20,
          total: 0
        }
      }
      for (let key in obj) {
        this[key] = obj[key]
      }
    },
    returnLast () {
      this.inputVal = '';
      this.$emit('close', [])
    },
    confirm (status) {
      let result = []
      if (status) {
        this.tableData.forEach((v) => {
          if (this.checkboxResult.includes(v.name)) {
            result.push(v)
          }
        })
      }
      this.$emit('close', result,status)
    },
    handleEdit(row, e){
      debugger;
      this.$refs.opeartContRef.paramForm = JSON.parse(JSON.stringify(row));
      this.$refs.opeartContRef.title = '编辑联系人';
      this.$refs.opeartContRef.openType = 'edit';
      this.$refs.opeartContRef.showPopup = true;
      e.stopPropagation();
    },
    handleAdd(){
      this.$refs.opeartContRef.paramForm.customerName = this.customerInfo.customer;
      this.$refs.opeartContRef.paramForm.customerId = this.customerInfo.customerId;
      this.$refs.opeartContRef.title = '新增联系人';
      this.$refs.opeartContRef.openType = 'add';
      this.$refs.opeartContRef.showPopup = true;
    },
    hanldeSearch(val) {
      this.reload();
    },
    handleInput(val){
      let _this = this;
      _this.form.name = val;
      // clearTimeout(this.timeId);
      // this.timeId = setTimeout(()=>{
      //   _this.reload();
      // }, 1000)
    },
    onCancel() {
      this.form.name = '';
    },

  }
}
</script>
<style scoped lang="scss">
.contain {
  span {
    width: 100%;
    padding: 0 0.213rem;
  }
}
.search-popup {
  height: calc(100vh - 1.06667rem);
  margin-top: 0.54667rem;
  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;
  }
}
 /deep/ .edit-btn {
    height: 1rem;
    margin-top: 20px;
  }
.van-flex{
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  border-left: 1px solid #e9e9e9;
  height: 3.6rem;

  .van-checkbox{
    flex: 1;
    display: flex;
    justify-content: center;
  }
}
</style>
<style  lang="scss">
.seach-form{
  position: fixed;
  top: 82px;
  left: 0;
  right: 0;
  z-index: 999;

  .van-field__left-icon {
    display: flex;
    align-items: center;
  }

  .van-cell {
    border-bottom: none;
    min-height: unset;
    height: 30PX;

   .van-field__control{
      line-height: 0.65rem;
    }
    .van-icon-clear{
      font-size: 0.52rem;
    }
  }
  .van-search__action{
    font-size: 0.4rem;
  }
}
</style>
