<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.fb_date')">
                            <div class="block">
                                <el-date-picker v-model="searchQuery.fbDateQuerys" align="right" type="datetimerange"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    value-format='yyyy-MM-dd HH:mm:ss' :picker-options="pickerOptions1"
                                    style="width: 100%;">
                                </el-date-picker>
                            </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.customer_state')">
                        <div class="block">
                            <el-select v-model="searchQuery.follow_state" style="width: 100%;">
                                <el-option v-for="item in followStates" :key="item.follow_state" :label="item.follow_state"
                                    :value="item.follow_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.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="12" :xl="12">
                    <div class="grid-content bg-purple">
                        <el-form-item :label="$t('customers.fb_date')">
                            <div class="block">
                                <el-date-picker v-model="searchQuery.fbDateQuerys" 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" v-waves
                            icon="el-icon-search" @click="handleFilterfirst">
                            {{$t('table.search')}}
                        </el-button>
                        <el-button class="filter-item" type="primary" v-waves 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.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.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.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.follow_mehtod')">
                <template slot-scope="scope">
                    <span>{{scope.row.follow_mehtod}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('customers.follow_state')">
                <template slot-scope="scope">
                    <span>{{scope.row.follow_state}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('customers.address')">
                <template slot-scope="scope">
                  <span v-if="scope.row.address === null"></span>
                  <span v-else-if="scope.row.address.indexOf('{')>-1">{{JSON.parse(scope.row.address).Address}}</span>
                  <span v-else>{{scope.row.address}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('customers.follow_desc')">
                <template slot-scope="scope">
                    <span>{{scope.row.follow_desc}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('customers.next_follow_date')">
                <template slot-scope="scope">
                    <span>{{scope.row.next_follow_date}}</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.edc_date')">
                <template slot-scope="scope">
                    <span>{{scope.row.edc_date}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('customers.fb_date')">
                <template slot-scope="scope">
                    <span>{{scope.row.fb_date}}</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 { listInfoFollow } from '@/api/customers'
    import { getJlAdminUsers } from '@/api/dc'
    import { getPackageSelect } from '@/api/couponapi'
    import waves from '@/directive/waves' // 水波纹指令
    export default {
      name: 'infofollow',
      directives: {
        waves
      },
      data() {
        return {
          page: 1,
          limit: 10,
          total: null,
          tableListLoading: false,
          buttonloading: false,
          tableKey: 0,
          tableList: [],
          packages: [],
          queryType: 'list',
          initTableQuery: {
            page: 1,
            limit: 10
          },
          searchQuery: {
            id: null,
            follow_mehtod: null,
            fb_customer_phone: null,
            follow_state: null,
            create_person: null,
            fb_date: null,
            createPersonQuerys: [],
            fbDateQuerys: [],

            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)
              }
            }]
          },
          followMethods: [
            { follow_mehtod: '电话跟进' },
            { follow_mehtod: '上门拜访' },
            { follow_mehtod: '微信沟通' },
            { follow_mehtod: '到店咨询' }
          ],
          followStates: [
            { follow_state: '跟进中' },
            { follow_state: '邀约中' },
            { follow_state: '成功邀约' },
            { follow_state: '终止邀约' }
          ],

          jlAdminUsers: []

        }
      },
      created() {
        getJlAdminUsers().then(response => {
          this.jlAdminUsers = response.data
        })
        getPackageSelect().then(response => {
          this.packages = response.data
        })
        this.getList()
      },
      methods: {
        log: function(event) {
          console.log(this.searchQuery)
        },
        handleFilterfirst() {
          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 !== null && this.searchQuery.fbDateQuerys.length > 0) {
            this.searchQuery.start_fb_date = this.searchQuery.fbDateQuerys[0]
            this.searchQuery.end_fb_date = this.searchQuery.fbDateQuerys[1]
          }
          this.searchQuery.page = this.page
          this.searchQuery.limit = this.limit
          this.queryType = 'query'

          this.tableListLoading = true
          this.buttonloading = true
          listInfoFollow(this.searchQuery).then(response => {
            this.tableList = response.data.items
            this.buttonloading = false
            this.total = response.data.total
            this.tableListLoading = false
            this.searchQuery.create_person = null
            this.searchQuery.start_fb_date = null
            this.searchQuery.end_fb_date = null
          })
          this.page = 1
        },
        handleFilter() {
          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 !== null && this.searchQuery.fbDateQuerys.length > 0) {
            this.searchQuery.start_fb_date = this.searchQuery.fbDateQuerys[0]
            this.searchQuery.end_fb_date = this.searchQuery.fbDateQuerys[1]
          }
          this.searchQuery.page = this.page
          this.searchQuery.limit = this.limit
          this.queryType = 'query'

          this.tableListLoading = true
          this.buttonloading = true
          listInfoFollow(this.searchQuery).then(response => {
            this.tableList = response.data.items
            this.buttonloading = false
            this.total = response.data.total
            this.tableListLoading = false
            this.searchQuery.create_person = null
            this.searchQuery.start_fb_date = null
            this.searchQuery.end_fb_date = null
          })
        },
        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.fb_date = []
          this.searchQuery.fb_customer_phone = null
          this.searchQuery.follow_state = 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.fbDateQuerys = []
          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
        },
        getList() {
          this.initTableQuery.page = this.page
          this.initTableQuery.limit = this.limit
          this.initTableQuery.status = 1
          this.queryType = 'list'
          this.listLoading = true
          listInfoFollow(this.initTableQuery).then(response => {
            this.tableList = response.data.items
            this.total = response.data.total
            this.listLoading = false
          })
        },
        femadd() {
          this.$router.push({ name: 'infofollowadd' })
        },
        infoedit(id) {
          this.$router.push({ name: 'infofollowedit', params: { if_id: id }})
        },
        infoshow(id) {
          this.$router.push({ name: 'infofollowshow', params: { if_id: id }})
        }
      }
    }

</script>