<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-demo__customers}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="客户姓名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.mobile" placeholder="手机号码" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.channelId"  clearable placeholder="请选择渠道">
            <el-option
                    v-for="item in channels"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-select v-model="dataForm.pageId" clearable placeholder="请选择落地页">
            <el-option
                    v-for="item in pages"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-date-picker
                  v-model="dataForm.startDate"
                  type="date"
                  placeholder="录入开始时间"
                  value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
                  v-model="dataForm.endDate"
                  type="date"
                  placeholder="录入结束时间"
                  value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item>
          <el-select v-model="dataForm.companyId"  clearable placeholder="所属公司">
            <el-option
                    v-for="item in companys"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-select v-model="dataForm.callType"  clearable placeholder="回访结果">
            <el-option
                    v-for="item in callTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-select v-model="dataForm.isPush"  clearable placeholder="是否推送">
            <el-option
                    v-for="item in isPushs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('sys:customers:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('sys:customers:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="name" label="客户姓名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" header-align="center" align="center">
        	<template slot-scope="scope">
	            <el-tag v-if="scope.row.sex === 1" size="small">男</el-tag>
	            <el-tag v-if="scope.row.sex === 2" size="small">女</el-tag>
        	</template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="telLocation" label="号码归属地" header-align="center" align="center"></el-table-column>
        <el-table-column prop="age" label="年齢" header-align="center" align="center"></el-table-column>
        <el-table-column prop="cardNo" label="身份证号码" header-align="center" align="center"></el-table-column>
        <el-table-column prop="operationId" label="运营机构" header-align="center" align="center"></el-table-column>
        <el-table-column prop="channelId" label="投放渠道" header-align="center" align="center"></el-table-column>
        <el-table-column prop="companyId" label="所属公司" header-align="center" align="center"></el-table-column>
        <el-table-column prop="pageId" label="所属落地页" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ip" label="数据来源" header-align="center" align="center"></el-table-column>
        <el-table-column prop="leadsArea" label="IP所在地" header-align="center" align="center"></el-table-column>
        <el-table-column prop="city" label="city" header-align="center" align="center"></el-table-column>
        <el-table-column prop="url" label="落地页url" header-align="center" align="center"></el-table-column>
        <el-table-column prop="isPush" label="是否推送" header-align="center" align="center">
        	<template slot-scope="scope">
	            <el-tag v-if="scope.row.isPush === 1" size="small">是</el-tag>
	            <el-tag v-if="scope.row.isPush === 0" size="small">否</el-tag>
        	</template>
        </el-table-column>
       <!-- <el-table-column prop="pushMsg" label="推送内容" header-align="center" align="center"></el-table-column> -->
        <el-table-column prop="pushDate" label="推送时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="returnMsg" label="返回信息" header-align="center" align="center"></el-table-column>
        <el-table-column prop="address" label="详细地址" header-align="center" align="center"></el-table-column>
        <el-table-column prop="bundle" label="其他字段信息" header-align="center" align="center"></el-table-column>
        <el-table-column prop="isMarried" label="婚姻状况" header-align="center" align="center">
        	<template slot-scope="scope">
	            <el-tag v-if="scope.row.isPush === 1" size="small">未婚</el-tag>
	            <el-tag v-if="scope.row.isPush === 2" size="small">已婚</el-tag>
        	</template>
        </el-table-column>
        <el-table-column prop="education" label="教育程度" header-align="center" align="center"></el-table-column>
        <el-table-column prop="professional" label="职业" header-align="center" align="center"></el-table-column>
        <el-table-column prop="employmentTime" label="就业时长" header-align="center" align="center"></el-table-column>
        <el-table-column prop="monthlyIncome" label="月收入" header-align="center" align="center"></el-table-column>
        <el-table-column prop="payrollType" label="工资发放形式" header-align="center" align="center"></el-table-column>
        <el-table-column prop="money" label="申请金额" header-align="center" align="center"></el-table-column>
        <el-table-column prop="useFor" label="贷款用途" header-align="center" align="center"></el-table-column>
        <el-table-column prop="loanLongTime" label="贷款期限" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creditSituation" label="信用情况" header-align="center" align="center"></el-table-column>
        <el-table-column prop="isCredit" label="信用卡" header-align="center" align="center"></el-table-column>
        <el-table-column prop="shebao" label="社保" header-align="center" align="center"></el-table-column>
        <el-table-column prop="gongjijin" label="公积金" header-align="center" align="center"></el-table-column>
        <el-table-column prop="car" label="车产" header-align="center" align="center"></el-table-column>
        <el-table-column prop="carType" label="车况（新车|二手车）" header-align="center" align="center"></el-table-column>
        <el-table-column prop="carModel" label="车型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="carLife" label="车辆年限" header-align="center" align="center"></el-table-column>
        <el-table-column prop="baodanIs" label="商业保险" header-align="center" align="center"></el-table-column>
        <el-table-column prop="zmScore" label="芝麻信用" header-align="center" align="center"></el-table-column>
        <el-table-column prop="weili" label="微粒贷" header-align="center" align="center"></el-table-column>
        <el-table-column prop="businessLicense" label="企业主" header-align="center" align="center"></el-table-column>
        <el-table-column prop="house" label="房产" header-align="center" align="center"></el-table-column>
        <el-table-column prop="houseType" label="房屋类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="houseSize" label="房屋面积" header-align="center" align="center"></el-table-column>
        <el-table-column prop="houseLife" label="房屋年限" header-align="center" align="center"></el-table-column>
        <el-table-column prop="shopName" label="门店名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="shopAddress" label="门店地址" header-align="center" align="center"></el-table-column>
        <el-table-column prop="leadsEmail" label="邮箱" header-align="center" align="center"></el-table-column>
        <el-table-column prop="leadsQq" label="qq号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="leadsWechat" label="微信号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" header-align="center" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
        <el-table-column prop="accountId" label="账户ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="accountName" label="账户名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="adgroupId" label="广告组ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="adgroupName" label="广告组名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="adsId" label="推广计划ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="adsName" label="推广计划名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creativeId" label="创意ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creativeName" label="广告创意" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creator" label="创建人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createDate" label="创建日期" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updateBy" label="更新人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="更新日期" header-align="center" align="center"></el-table-column>
        <el-table-column prop="deleteTime" label="删除日期" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('sys:customers:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('sys:customers:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
            <el-button type="text" size="small" @click="againPush(scope.row.id)">{{ $t('重推') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './customers-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/customers/page',
        getDataListIsPage: true,
        exportURL: '/sys/customers/export',
        deleteURL: '/sys/customers',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      pages:[],
      companys:[],
      channels:[],
      callTypes:[
        {
            'label':'回访结果0',
            'value':0,
        },
        {
            'label':'回访结果1',
            'value':1,
        }
      ],
      isPushs:[
        {
            'label':'未推送',
            'value':0,
        },
        {
            'label':'已推送',
            'value':1,
        }
      ],
    }
  },
  components: {
    AddOrUpdate
  },
  created () {
    if (this.mixinViewModuleOptions.createdIsNeed) {
      this.query()
      this.getPageOptions();
      this.getCompanysOptions();
      this.getchannelsOptions();
    }
  },
  methods: {
    //初始化落地页下拉框中的选项
    async getPageOptions() {
      this.$http.get(`/sys/landingpages/list`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.pages=[];
        if (res.data!=null){
          res.data.forEach(element => {
            this.pages.push({label:element.name,value:element.id})
          })
        }
      }).catch(() => {})
    },
    //初始化公司下拉框中的选项
    async getCompanysOptions() {
      this.$http.get(`/sys/companies/list`).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.companys = [];
        if (res.data != null) {
          res.data.forEach(element => {
            this.companys.push({label: element.name, value: element.id})
          })
        }
      }).catch(() => {
      })
    },
    //初始化渠道下拉框中的选项
    async getchannelsOptions() {
      this.$http.get(`/sys/channels/list`).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.channels = [];
        if (res.data != null) {
          res.data.forEach(element => {
            this.channels.push({label: element.name, value: element.id})
          })
        }
      }).catch(() => {
      })
    },
    
    againPush(id){
    	this.$http.get(`/sys/customers/againPush/${id}`,id).then(({ data: res }) => {
	        if (res.code !== 0) {
	          return this.$message.error(res.msg)
	        }
	        this.query();
	   }).catch(() => {})
	   
    }
  }
}
</script>
