<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="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-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.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-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.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_type')">
              <div class="block">
                <el-select v-model="searchQuery.fbTypeQuerys" multiple collapse-tags style="width: 100%;">
                  <el-option v-for="item in fbTypes" :key="item.fb_type" :label="item.fb_type" :value="item.fb_type">
                  </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-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-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" 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.source_channel}}&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.branche_name')">
        <template slot-scope="scope">
          <span>{{scope.row.branche_name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.create_person')">
        <template slot-scope="scope">
          <span>{{scope.row.create_person}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.in_charge_person')">
        <template slot-scope="scope">
          <span>{{scope.row.in_charge_person}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.customer_manager')">
        <template slot-scope="scope">
          <span>{{scope.row.customer_manager}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('customers.fb_type')">
        <template slot-scope="scope">
          <!-- <el-tag v-if="scope.row.fb_type == '1' " type="success">{{$t('table.status1')}}</el-tag>
                    <el-tag v-else-if="scope.row.fb_type == '2' ">{{$t('table.status2')}}</el-tag>
                    <el-tag v-else-if="scope.row.fb_type == '3' " type="warning">{{$t('table.status3')}}</el-tag>
                    <el-tag v-else-if="scope.row.fb_type == '4' " type="danger">{{$t('table.status4')}}</el-tag>
                    <el-tag v-else type="info">{{$t('table.status5')}}</el-tag> -->
          <span>{{scope.row.fb_type}}</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('customers.entry_date')">
        <template slot-scope="scope">
          <span>{{scope.row.entry_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.store')">
        <template slot-scope="scope">
          <span>{{scope.row.store}}</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.package_name')">
        <template slot-scope="scope">
          <span>{{scope.row.p_code}}</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, getInfoFeedback } from '@/api/customers'
  import { getBranches } from '@/api/article'// seachList,
  import { getJlAdminUsers } from '@/api/dc'
  import waves from '@/directive/waves' // 水波纹指令
  export default {
    name: 'infofeedback',
    directives: {
      waves
    },
    data() {
      return {
        page: 1,
        limit: 10,
        total: null,
        tableListLoading: false,
        buttonloading: false,
        tableKey: 0,
        tableList: [],
        queryType: 'list',
        initTableQuery: {
          page: 1,
          limit: 10
        },
        searchQuery: {
          id: null,
          fbDateQuerys: [],
          fb_customer_phone: null,
          sourceChannelQuerys: [],
          branchNameQuerys: [],
          fbTypeQuerys: [],
          createPersonQuerys: [],
          inChargePersonQuerys: [],
          entryDateQuerys: [],
          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,
          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: [],
        fbTypes: [
          { fb_type: '待确认' },
          { fb_type: '确认中' },
          { fb_type: '月嫂' },
          { fb_type: '产后恢复' },
          { fb_type: '育儿嫂' },
          { fb_type: '应聘' },
          { fb_type: '异业合作' },
          { fb_type: '无效信息' }

        ]
      }
    },
    created() {
      getSourceChannel().then(response => {
        this.sourceChannels = response.data
      })
      getBranches().then(response => {
        this.branches = response.data
      })
      getJlAdminUsers().then(response => {
        this.jlAdminUsers = response.data
      })
      this.getList()
    },
    methods: {
      log: function(event) {
        console.log(this.searchQuery)
      },
      handleFilterfirst() {
        if (this.searchQuery.inChargePersonQuerys.length > 0) {
          var inChargePersonQueryStr = ''
          for (let inp = 0, ln = this.searchQuery.inChargePersonQuerys.length; inp < ln; inp++) {
            inChargePersonQueryStr = inChargePersonQueryStr + this.searchQuery.inChargePersonQuerys[inp] + ','
          }
          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.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 !== null && 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
        getInfoFeedback(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.in_charge_person = 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 !== null && 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
        getInfoFeedback(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.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.entryDateQuerys = []
        this.searchQuery.fbDateQuerys = []
      },
      getList() {
        this.initTableQuery.page = this.page
        this.initTableQuery.limit = this.limit
        this.initTableQuery.status = 1
        this.queryType = 'list'
        this.listLoading = true
        getInfoFeedback(this.initTableQuery).then(response => {
          this.tableList = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
      },
      femadd() {
        this.$router.push({ name: 'infofeedbackadd' })
      },
      infoedit(id) {
        this.$router.push({ path: 'infofeedbackedit', query: { fb_id: id }})
      },
      infoshow(id) {
        this.$router.push({ name: 'infofeedbackshow', params: { fb_id: id }})
      }
    }
  }

</script>