            <template>
              <div class="app-container calendar-list-container">
                <div class="filter-container">
                  <el-row :gutter="20">
                  <el-col :span="6">
                      <label class="el-form-item__label">{{$t('coupon.couponpackages')}}:</label>
                      <el-select class="filter-item" v-model="seachQuery.cb_packages"  style="width: 200px;">
                      <el-option v-for="item in packageoptions" :key="item.p_code" :label="item.p_name" :value="item.p_code">
                      </el-option>
                      </el-select>
                  </el-col>
                  <el-col :span="5">
                      <label class="el-form-item__label">{{$t('coupon.amount')}}:</label>
                      <el-select class="filter-item" v-model="seachQuery.cb_citys" default-first-optionplaceholder="请选择城市" style="width: 150px;">
                        <el-option v-for="item in branchesOptions" :key="item.branche_code" :label="item.branche_name" :value="item.branche_code">
                        </el-option>
                      </el-select>
                  </el-col>
                  <el-col :span="7">
                      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilterfirst">
                        {{$t('coupon.search')}}
                      </el-button>
                  </el-col>
                  </el-row>
                  <el-row :gutter="20">
                       <el-col :span="20">
                         <el-tag  v-if="customerinfo.customerMp!=null">手机：{{customerinfo.customerMp}}&nbsp;&nbsp;&nbsp;&nbsp;可用张数：{{customerinfo.customerCquantity}}&nbsp;&nbsp;&nbsp;&nbsp;可用金额：{{customerinfo.customerCamount}}</el-tag>
                       </el-col>
                  </el-row>
                </div>
                <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中......" border fit
                          highlight-current-row
                          style="width: 100%">
                  <el-table-column align="center" :label="$t('coupon.couponname')" width="140">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.couponcomm')" width="400">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_rule}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.couponpackages')" width="300">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_packages}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.couponcity')" width="100">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_citys}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.startdate')" width="97">
                    <template slot-scope="scope">
                      <span>{{scope.row.cp_startdate}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.enddate')" width="97">
                    <template slot-scope="scope">
                      <span>{{scope.row.cp_enddate}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.amount')" width="67">
                    <template slot-scope="scope">
                      <span>{{scope.row.cp_amount}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.getdate')" width="98">
                    <template slot-scope="scope">
                      <span>{{scope.row.cc_getdate}}</span>
                    </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>
                <el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
                  <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
                    <el-table-column prop="key" label="Channel"></el-table-column>
                    <el-table-column prop="pv" label="Pv"></el-table-column>
                  </el-table>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
                  </span>
                </el-dialog>
              </div>
            </template>
            <script>
              import { updateArticle, getBranches } from '@/api/article'
              import { getPackageSelect, getCustomerCoupons, getCouponSum, CustomerUseCoupon } from '@/api/couponapi'
              import waves from '@/directive/waves' // 水波纹指令
              import { parseTime } from '@/utils'
              // arr to obj ,such as { CN : "China", US : "USA" }
              export default {
                name: 'complexTable',
                directives: {
                  waves
                },
                data() {
                  return {
                    tableKey: 0,
                    list: null,
                    total: null,
                    page: 1,
                    limit: 10,
                    customerinfo: {
                      customerMp: null,
                      customerCquantity: null,
                      customerCamount: null
                    },
                    queryType: 'list',
                    listLoading: true,
                    listQuery: {
                      importance: undefined,
                      title: undefined,
                      type: undefined,
                      sort: '+id'
                    },
                    useCoupons: {
                      couponCode: null,
                      cm_phone: null
                    },
                    seachQuery: {
                      cm_phone: null,
                      cb_packages: null,
                      cb_citys: null,
                      page: null,
                      limit: null
                    },
                    idcardquery: {
                      idcard: null
                    },
                    couponbatchdel: {
                      cb_code: undefined
                    },
                    checksalt: {
                      salt: undefined
                    },
                    sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
                    branchesOptions: [],
                    citysOptions: [],
                    packageoptions: [],
                    showReviewer: false,
                    ethnicgroupptions: '',
                    provinceoptions: '',
                    dialogFormVisible: false,
                    checkidcard: {
                      idcard: undefined
                    },
                    dialogStatus: '',
                    textMap: {
                      update: 'Edit',
                      create: '添加月嫂'
                    },
                    dialogPvVisible: false,
                    pvData: [],
                    updateStatus: {
                      id: undefined,
                      status: undefined
                    },
                    rules: {
                      cb_name: [{ required: true, min: 1, max: 20, message: '请正确录入批次名称', trigger: 'blur' }],
                      cb_packages: [{ required: true, message: '请选择适用套餐', trigger: 'blur' }],
                      cb_citys: [{ required: true, message: '请选择适用城市', trigger: 'blur' }]
                    },
                    downloadLoading: false
                  }
                },
                created() {
                  this.getList()
                  getBranches().then(response5 => {
                    this.branchesOptions = response5.data
                    this.citysOptions = response5.data
                  })
                  getPackageSelect().then(response6 => {
                    this.packageoptions = response6.data
                  })
                },
                methods: {
                  getList() {
                    this.listQuery.page = this.page
                    this.listQuery.limit = this.limit
                    this.queryType = 'list'
                    this.listLoading = true
                    this.listLoading = false
                  },
                  handleFilterfirst() {
                    if (this.seachQuery.cm_phone === null || this.seachQuery.cm_phone === '') {
                      this.$message({
                        message: '请输入手机号',
                        type: 'warning'
                      })
                    } else {
                      this.seachQuery.page = this.page
                      this.seachQuery.limit = this.limit
                      this.queryType = 'query'
                      this.listLoading = true
                      getCustomerCoupons(this.seachQuery).then(response => {
                        this.list = response.data.items
                        this.total = response.data.total
                        this.listLoading = false
                      })
                      getCouponSum(this.seachQuery).then(response2 => {
                        if (response2.data.length === 0) {
                          this.customerinfo.customerMp = null
                          this.customerinfo.customerCquantity = null
                          this.customerinfo.customerCamount = null
                        } else {
                          this.customerinfo.customerMp = response2.data[0].cm_phone
                          this.customerinfo.customerCquantity = response2.data[0].cc_quantity
                          this.customerinfo.customerCamount = response2.data[0].cp_amount
                        }
                      })
                    }
                  },
                  handleSizeChange(val) {
                    this.limit = val
                    if (this.queryType === 'list') {
                      this.listQuery.limit = val
                      this.listQuery.page = this.page
                      this.handleFilterfirst()
                    } else {
                      this.seachQuery.limit = val
                      this.seachQuery.page = this.page
                      this.handleFilterfirst()
                    }
                  },
                  couponUse() {
                    var tempCoupons = ''
                    if (this.customerinfo.customerMp === null) {
                      this.$message({
                        message: '请输入手机号',
                        type: 'warning'
                      })
                    } else if (this.list === null) {
                      this.$message({
                        message: '无券可用',
                        type: 'warning'
                      })
                    } else {
                      for (var value of this.list) {
                        tempCoupons = tempCoupons + value.cc_code + ','
                      }
                      this.useCoupons.couponCode = tempCoupons.substring(0, tempCoupons.length - 1)
                      this.useCoupons.cm_phone = this.customerinfo.customerMp
                      CustomerUseCoupon(this.useCoupons).then(response2 => {
                        if (response2.data === 1) {
                          this.$message({
                            message: '核销成功！',
                            type: 'success'
                          })
                          this.seachQuery.cm_phone = null
                          this.seachQuery.cb_packages = null
                          this.seachQuery.cb_citys = null
                          this.list = null
                          this.customerinfo.customerMp = null
                          this.customerinfo.customerCquantity = null
                          this.customerinfo.customerCamount = null
                        } else {
                          this.$message({
                            message: '核销失败！',
                            type: 'warning'
                          })
                        }
                      })
                    }
                  },
                  handleCurrentChange(val) {
                    this.page = val
                    if (this.queryType === 'list') {
                      this.listQuery.limit = this.limit
                      this.listQuery.page = val
                      this.handleFilterfirst()
                    } else {
                      this.seachQuery.limit = this.limit
                      this.seachQuery.page = val
                      this.handleFilterfirst()
                    }
                  },
                  handleModifyStatus(row, status) {
                    this.$message({
                      message: '操作成功',
                      type: 'success'
                    })
                    row.status = status
                  },
                  handleUpdate(row) {
                    this.temp = Object.assign({}, row) // copy obj
                    this.temp.timestamp = new Date(this.temp.timestamp)
                    this.dialogStatus = 'update'
                    this.dialogFormVisible = true
                    this.$nextTick(() => {
                      this.$refs['dataForm'].clearValidate()
                    })
                  },
                  updateData() {
                    this.$refs['dataForm'].validate((valid) => {
                      if (valid) {
                        const tempData = Object.assign({}, this.temp)
                        tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
                        updateArticle(tempData).then(() => {
                          for (const v of this.list) {
                            if (v.id === this.temp.id) {
                              const index = this.list.indexOf(v)
                              this.list.splice(index, 1, this.temp)
                              break
                            }
                          }
                          this.dialogFormVisible = false
                          this.$notify({
                            title: '成功',
                            message: '更新成功',
                            type: 'success',
                            duration: 2000
                          })
                        })
                      }
                    })
                  },
                  handleDownload() {
                    this.downloadLoading = true
                    import('@/vendor/Export2Excel').then(excel => {
                      const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
                      const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
                      const data = this.formatJson(filterVal, this.list)
                      excel.export_json_to_excel(tHeader, data, 'table-list')
                      this.downloadLoading = false
                    })
                  },
                  handleref() {
                    this.seachQuery.cm_phone = null
                    this.seachQuery.cb_packages = null
                    this.seachQuery.cb_citys = null
                  },
                  resetForm(formName) {
                    this.$refs[formName].resetFields()
                  },
                  formatJson(filterVal, jsonData) {
                    return jsonData.map(v => filterVal.map(j => {
                      if (j === 'timestamp') {
                        return parseTime(v[j])
                      } else {
                        return v[j]
                      }
                    }))
                  }
                }
              }
            </script>
            <style>
            .el-form--label-left .el-form-item__label{
              text-align:right
            }
            .el-rate{
              line-height: 0;
              margin-top:8px;
            }
            .el-checkbox.el-checkbox {
                margin-left: 30px;
            }
            </style>
            