<template>
  <div class="app-container calendar-list-container">
    <el-form label-position="right" label-width="100px" style='width:100%;'>
      <el-row :gutter="24">
        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.source_information')" prop="fb_customer_phone">
              <div class="block">


                <el-select v-model="source_information" placeholder="请选择" filterable remote v-el-select-loadmore="loadmore"
                    :remote-method="selectedRemoteMethod" :loading="selectedLoading" @focus="selectFocus" @change="selectedChange">
                  <el-option v-for="item in options" :key="item.id" :label="item.fb_customer_name + ' ' + item.fb_customer_phone" :value="item">
                  </el-option>
                </el-select>

                
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.branche_name')">
              <div class="block">
                <el-select v-model="searchQuery.branchNameQuerys" multiple collapse-tags style="width: 100%;">
                  <el-option v-for="item in branches" :key="item.branche_code" :label="item.branche_name"
                    :value="item.branche_name">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.fb_customer_phone')">
              <div class="block">
                <el-input v-model="searchQuery.fb_customer_phone" style="width:100%;"> </el-input>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.create_person')">
              <div class="block">
                <el-select v-model="searchQuery.createPersonQuerys" multiple collapse-tags style="width: 100%;">
                  <el-option v-for="item in jlAdminUsers" :key="item.username" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        
        <!-- <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.in_charge_person')">
              <div class="block">
                <el-select v-model="searchQuery.inChargePersonQuerys" multiple collapse-tags style="width: 100%;">
                  <el-option v-for="item in jlAdminUsers" :key="item.username" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col> -->

        
        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.package_name')" prop="p_code">
              <div class="block">
                <el-select class="filter-item" v-model="searchQuery.p_code" style="width: 100%;">
                  <el-option v-for="item in packages" :key="item.p_code" :label="item.p_name" :value="item.p_name">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col>

        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.source_channel')">
              <div class="block">
                <el-select v-model="searchQuery.sourceChannelQuerys" multiple collapse-tags style="width: 100%;">
                  <el-option v-for="item in sourceChannels" :key="item.id" :label="item.source_channel"
                    :value="item.source_channel">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col>

        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.customer_state')">
              <div class="block">
                <el-select v-model="searchQuery.customerStateQuerys" multiple collapse-tags style="width: 100%;">
                  <el-option v-for="item in customerInfoStates" :key="item.id" :label="item.customer_state"
                    :value="item.customer_state">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.fb_customer_name')">
              <div class="block">
                <el-input v-model="searchQuery.fb_customer_name" style="width:100%;"> </el-input>
              </div>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        
        <el-col :xs="23" :sm="23" :md="12" :lg="12" :xl="12">
          <div class="grid-content bg-purple">
            <el-form-item :label="$t('customers.entry_date')">
              <div class="block">
                <el-date-picker v-model="searchQuery.entryDateQuerys" align="right" type="datetimerange"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format='yyyy-MM-dd HH:mm:ss'
                  style="width: 100%;">
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
      <el-row :gutter="20" style="margin-bottom:22px;">
        <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23">
          <div align="center">
            <el-button :loading="buttonloading" class="filter-item" type="primary" icon="el-icon-search"
              @click="handleFilterfirst">
              {{$t('table.search')}}
            </el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-delete" @click="handleref">
              {{$t('table.cancel')}}
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <div align="right">
          <el-button class="filter-item" @click="femadd" type="primary" icon="el-icon-edit">{{$t('customers.emhadd')}}
          </el-button>&nbsp;&nbsp;&nbsp;
        </div>
      </el-row>
    </el-form>
    <el-table :key='tableKey' :data="tableList" v-loading="tableListLoading" element-loading-text="加载中......" border fit
      highlight-current-row style="width: 100%">
      <el-table-column align="center" :label="$t('customers.id')">
        <template slot-scope="scope">
          <a href="#" @click="infoshow(scope.row.id)"><span style="color:#409EFF">{{scope.row.id}}</span></a>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.fb_customer_name')">
        <template slot-scope="scope">
          <span>{{scope.row.fb_customer_name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.channel_phone')">
        <template slot-scope="scope">
          <span>{{scope.row.fb_customer_name}}&nbsp;{{scope.row.fb_customer_phone}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.branche_name')">
        <template slot-scope="scope">
          <span>{{scope.row.branche_name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.fb_customer_phone')">
        <template slot-scope="scope">
          <span>{{scope.row.fb_customer_phone}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.fb_wechat_number')">
        <template slot-scope="scope">
          <span>{{scope.row.fb_wechat_number}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.edc_date')">
        <template slot-scope="scope">
          <span>{{scope.row.edc_date}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.address_basic')">
        <template slot-scope="scope">
          <span>{{showAddress(scope.row.address_basic)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.fb_remarks')">
        <template slot-scope="scope">
          <span>{{scope.row.fb_remarks}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.source_channel')">
        <template slot-scope="scope">
          <span>{{scope.row.source_channel}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.customer_state')">
        <template slot-scope="scope">
          <span>{{scope.row.customer_state}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.package_name')">
        <template slot-scope="scope">
          <span>{{scope.row.p_code}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.pregnancy_way')">
        <template slot-scope="scope">
          <span>{{scope.row.pregnancy_way}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.actions')">
        <template slot-scope="scope">
          <a href="#" @click="infoedit(scope.row.id)"><span style="color:#409EFF">{{$t('table.edit')}}</span></a>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page" :page-sizes="[10,20,30, 50]" :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { getSourceChannel, listAllInfoBasic, getAllInfoState, getInfoFeedback } from '@/api/customers'
  import { getBranches } from '@/api/article'// seachList,
  import { getJlAdminUsers } from '@/api/dc'
  import { getPackageSelect } from '@/api/couponapi'
  import { CodeToText } from 'element-china-area-data'
  export default {
    name: 'infobasic',
    directives: {
      'el-select-loadmore': {

        bind(el, binding) {
          // 获取element-ui定义好的scroll盒子
          const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
          SELECTWRAP_DOM.addEventListener('scroll', function() {
            /**
                    * scrollHeight 获取元素内容高度(只读)
                    * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                    * clientHeight 读取元素的可见高度(只读)
                    * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                    * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                    */
            const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
            if (condition) {
              binding.value()
            }
          })
        }

      }
    },
    data() {
      return {
        page: 1,
        limit: 10,
        total: null,
        tableListLoading: false,
        buttonloading: false,
        tableKey: 0,
        tableList: [],
        packages: [],
        queryType: 'list',
        selectedLoading: false,
        initTableQuery: {
          page: 1,
          limit: 10
        },
        searchQuery: {
          id: null,
          fbDateQuerys: [],
          fb_customer_phone: null,
          sourceChannelQuerys: [],
          branchNameQuerys: [],
          fbTypeQuerys: [],
          createPersonQuerys: [],
          inChargePersonQuerys: [],
          entryDateQuerys: [],
          customerStateQuerys: [],
          source_channel: null,
          branche_name: null,
          fb_type: null,
          create_person: null,
          in_charge_person: null,
          start_fb_date: null,
          end_fb_date: null,
          start_entry_date: null,
          end_entry_date: null,
          fb_customer_name: null,
          p_code: null,
          page: 1,
          limit: 10
        },
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        sourceChannels: [],
        branches: [],
        jlAdminUsers: [],
        customerInfoStates: [],

        value: '',
        options: [],
        formData: {
          page: 1,
          limit: 10,
          selectedPage: '',
          fb_customer_phone: null
        },
        source_information: null
      }
    },
    created() {
      getSourceChannel().then(response => {
        this.sourceChannels = response.data
      })
      getBranches().then(response => {
        this.branches = response.data
      })
      getJlAdminUsers().then(response => {
        this.jlAdminUsers = response.data
      })
      getAllInfoState().then(response => {
        this.customerInfoStates = response.data
      })
      getPackageSelect().then(response => {
        this.packages = response.data
      })
      this.getList()
    },
    mounted() {
      this.getSelectList(this.formData)
    },
    methods: {
      handleFilterfirst() {
        if (this.searchQuery.inChargePersonQuerys.length > 0) {
          var inChargePersonQueryStr = ''
          for (var inpz = 0, lnz = this.searchQuery.inChargePersonQuerys.length; inpz < lnz; inpz++) {
            inChargePersonQueryStr = inChargePersonQueryStr + this.searchQuery.inChargePersonQuerys[inpz] + ','
          }
          this.searchQuery.in_charge_person = inChargePersonQueryStr
        }
        if (this.searchQuery.sourceChannelQuerys.length > 0) {
          var sourceChannelQueryStr = ''
          for (var inp = 0, ln = this.searchQuery.sourceChannelQuerys.length; inp < ln; inp++) {
            sourceChannelQueryStr = sourceChannelQueryStr + this.searchQuery.sourceChannelQuerys[inp] + ','
          }
          this.searchQuery.source_channel = sourceChannelQueryStr
        }
        if (this.searchQuery.branchNameQuerys.length > 0) {
          var brancheStr = ''
          for (var ie = 0, le = this.searchQuery.branchNameQuerys.length; ie < le; ie++) {
            brancheStr = brancheStr + this.searchQuery.branchNameQuerys[ie] + ','
          }
          this.searchQuery.branche_name = brancheStr
        }
        if (this.searchQuery.customerStateQuerys.length > 0) {
          var customerStateStr = ''
          for (var csr = 0, csrl = this.searchQuery.customerStateQuerys.length; csr < csrl; csr++) {
            customerStateStr = customerStateStr + this.searchQuery.customerStateQuerys[csr] + ','
          }
          this.searchQuery.customer_state = customerStateStr.substring(0, customerStateStr.length - 1)
        }
        if (this.searchQuery.fbTypeQuerys.length > 0) {
          var fbTypeStr = ''
          for (var iz = 0, lz = this.searchQuery.fbTypeQuerys.length; iz < lz; iz++) {
            fbTypeStr = fbTypeStr + this.searchQuery.fbTypeQuerys[iz] + ','
          }
          this.searchQuery.fb_type = fbTypeStr
        }
        if (this.searchQuery.createPersonQuerys.length > 0) {
          var createPsersonStr = ''
          for (let ic = 0, lc = this.searchQuery.createPersonQuerys.length; ic < lc; ic++) {
            createPsersonStr = createPsersonStr + this.searchQuery.createPersonQuerys[ic] + ','
          }
          this.searchQuery.create_person = createPsersonStr
        }
        if (this.searchQuery.fbDateQuerys.length > 0) {
          this.searchQuery.start_fb_date = this.searchQuery.fbDateQuerys[0]
          this.searchQuery.end_fb_date = this.searchQuery.fbDateQuerys[1]
        }
        if (this.searchQuery.entryDateQuerys !== null && this.searchQuery.entryDateQuerys.length > 0) {
          this.searchQuery.start_entry_date = this.searchQuery.entryDateQuerys[0]
          this.searchQuery.end_entry_date = this.searchQuery.entryDateQuerys[1]
        }
        this.searchQuery.page = this.page
        this.searchQuery.limit = this.limit
        this.queryType = 'query'

        this.tableListLoading = true
        this.buttonloading = true
        listAllInfoBasic(this.searchQuery).then(response => {
          this.tableList = response.data.items
          this.buttonloading = false
          this.total = response.data.total
          this.tableListLoading = false
          this.searchQuery.source_channel = null
          this.searchQuery.branche_name = null
          this.searchQuery.fb_type = null
          this.searchQuery.create_person = null
          this.searchQuery.start_fb_date = null
          this.searchQuery.end_fb_date = null
          this.searchQuery.start_entry_date = null
          this.searchQuery.end_entry_date = null
          this.searchQuery.customer_state = null
        })
        this.page = 1
      },
      handleFilter() {
        if (this.searchQuery.sourceChannelQuerys.length > 0) {
          var sourceChannelQueryStr = ''
          for (var inp = 0, ln = this.searchQuery.sourceChannelQuerys.length; inp < ln; inp++) {
            sourceChannelQueryStr = sourceChannelQueryStr + this.searchQuery.sourceChannelQuerys[inp] + ','
          }
          this.searchQuery.source_channel = sourceChannelQueryStr
        }
        if (this.searchQuery.branchNameQuerys.length > 0) {
          var brancheStr = ''
          for (var ie = 0, le = this.searchQuery.branchNameQuerys.length; ie < le; ie++) {
            brancheStr = brancheStr + this.searchQuery.branchNameQuerys[ie] + ','
          }
          this.searchQuery.branche_name = brancheStr
        }
        if (this.searchQuery.fbTypeQuerys.length > 0) {
          var fbTypeStr = ''
          for (var iz = 0, lz = this.searchQuery.fbTypeQuerys.length; iz < lz; iz++) {
            fbTypeStr = fbTypeStr + this.searchQuery.fbTypeQuerys[iz] + ','
          }
          this.searchQuery.fb_type = fbTypeStr
        }
        if (this.searchQuery.createPersonQuerys.length > 0) {
          var createPsersonStr = ''
          for (let ic = 0, lc = this.searchQuery.createPersonQuerys.length; ic < lc; ic++) {
            createPsersonStr = createPsersonStr + this.searchQuery.createPersonQuerys[ic] + ','
          }
          this.searchQuery.create_person = createPsersonStr
        }
        if (this.searchQuery.fbDateQuerys.length > 0) {
          this.searchQuery.start_fb_date = this.searchQuery.fbDateQuerys[0]
          this.searchQuery.end_fb_date = this.searchQuery.fbDateQuerys[1]
        }
        if (this.searchQuery.entryDateQuerys !== null && this.searchQuery.entryDateQuerys.length > 0) {
          this.searchQuery.start_entry_date = this.searchQuery.entryDateQuerys[0]
          this.searchQuery.end_entry_date = this.searchQuery.entryDateQuerys[1]
        }
        this.searchQuery.page = this.page
        this.searchQuery.limit = this.limit
        this.queryType = 'query'

        this.tableListLoading = true
        this.buttonloading = true
        listAllInfoBasic(this.searchQuery).then(response => {
          this.tableList = response.data.items
          this.buttonloading = false
          this.total = response.data.total
          this.tableListLoading = false
        })
      },
      handleSizeChange(val) {
        this.limit = val
        if (this.queryType === 'list') {
          this.getList()
        } else {
          this.handleFilter()
        }
      },
      handleCurrentChange(val) {
        this.page = val
        if (this.queryType === 'list') {
          this.getList()
        } else {
          this.handleFilter()
        }
      },
      handleref() {
        this.searchQuery.customerStateQuerys = []
        this.searchQuery.fb_date = []
        this.searchQuery.fb_customer_phone = null
        this.searchQuery.sourceChannelQuerys = []
        this.searchQuery.branchNameQuerys = []
        this.searchQuery.fbTypeQuerys = []
        this.searchQuery.createPersonQuerys = []
        this.searchQuery.inChargePersonQuerys = []
        this.searchQuery.entry_date = []
        this.searchQuery.fb_date = []
        this.searchQuery.source_channel = null
        this.searchQuery.branche_name = null
        this.searchQuery.fb_type = null
        this.searchQuery.create_person = null
        this.searchQuery.in_charge_person = null
        this.searchQuery.start_fb_date = null
        this.searchQuery.end_fb_date = null
        this.searchQuery.start_entry_date = null
        this.searchQuery.end_entry_date = null
        this.searchQuery.customer_state = null
        this.searchQuery.p_code = null
        this.searchQuery.entryDateQuerys = []
        this.searchQuery.fb_customer_name = null
        this.options = []
        this.formData.page = 1
        this.formData.fb_customer_phone = null
        this.selectedLoading = false
        this.source_information = null
        this.getSelectList(this.formData)
      },
      selectFocus() {
        this.options = []
        this.formData.page = 1
        this.formData.fb_customer_phone = null
        this.selectedLoading = false
        this.getSelectList(this.formData)
      },
      getList() {
        this.initTableQuery.page = this.page
        this.initTableQuery.limit = this.limit
        this.initTableQuery.status = 1
        this.queryType = 'list'
        this.listLoading = true
        listAllInfoBasic(this.initTableQuery).then(response => {
          this.tableList = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
      },
      femadd() {
        this.$router.push({ name: 'infobasicadd' })
      },
      infoedit(id) {
        this.$router.push({ name: 'infobasicedit', params: { ib_id: id }})
      },
      infoshow(id) {
        this.$router.push({ name: 'infobasicshow', params: { ib_id: id }})
      },

      loadmore() {
        this.formData.page++
        this.getSelectList(this.formData)
      },
      getSelectList(formData) {
        // 这里是接口请求数据, 带分页条件
        getInfoFeedback(formData).then(response => {
          this.options.push.apply(this.options, response.data.items)
        })
      },
      selectedRemoteMethod(query) {
        if (query !== '') {
          this.selectedLoading = true
          setTimeout(() => {
            this.selectedLoading = false
            this.formData.page = 1
            this.formData.fb_customer_phone = query
            this.options = []
            this.getSelectList(this.formData)
          }, 200)
        }
      },
      showAddress(address) {
        if (address === null) {
          return ''
        }
        var str = ''
        var arr = []
        arr = address.split(',')
        for (var i of arr) {
          str += CodeToText[i]
        }
        return str
      },
      selectedChange(data) {
        this.source_information = data.fb_customer_name + ' ' + data.fb_customer_phone
        this.searchQuery.fb_customer_phone = data.fb_customer_phone
      }
    }
  }

</script>