            <template>
              <div class="app-container calendar-list-container">
                <el-form  label-position="left" label-width="80px"
                    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('coupon.couponbatchs')" >
                          <div class="block">
                            <el-input style="width: 100%;" class="filter-item" v-model="seachQuery.cb_code" :maxlength = 20>
                            </el-input>
                          </div>
                        </el-form-item>
                      </div>
                   </el-col>
                  <el-col :xs="23" :sm="23" :md="11" :lg="6" :xl="6">
                    <div class="grid-content bg-purple" >
                      <el-form-item  :label="$t('coupon.couponname')" >
                        <div class="block">
                          <el-input style="width: 100%;" class="filter-item"
                              v-model="seachQuery.cb_name" :maxlength = 20>
                          </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('coupon.couponpackages')"  >
                        <div class="block">
                          <el-select class="filter-item" v-model="seachQuery.cb_packages"  style="width: 100%;">
                            <el-option v-for="item in packageoptions" :key="item.p_code" :label="item.p_name" :value="item.p_code">
                            </el-option>
                        </el-select>
                        </div>
                      </el-form-item>
                     </div>
                  </el-col>
                  <el-col :xs="23" :sm="23" :md="11" :lg="5" :xl="5">
                     <div class="grid-content bg-purple" >
                      <el-form-item  :label="$t('coupon.couponcity')"  >
                        <div class="block">
                          <el-select class="filter-item" v-model="seachQuery.cb_citys" default-first-optionplaceholder="请选择城市" style="width: 100%;">
                            <el-option v-for="item in branchesOptions" :key="item.branche_code" :label="item.branche_name" :value="item.branche_code">
                            </el-option>
                          </el-select>
                        </div>
                      </el-form-item>
                    </div>
                  </el-col>
                  </el-row>
                  <el-row :gutter="24" >
                    <div  align="center" > <el-button class="filter-item" type="primary" :loading ="buttonloading" 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-row>
                  <el-row :gutter="24">
                    <div align="right">
                      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary"
                            icon="el-icon-edit">{{$t('table.add')}}
                    </el-button>&nbsp;&nbsp;&nbsp;</div>    
                  </el-row>
                </el-form>
                <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.couponbatchs')">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_code}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.couponname')">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.couponcomm')">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_rule}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.couponpackages')">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_packages}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('coupon.couponcity')">
                    <template slot-scope="scope">
                      <span>{{scope.row.cb_citys}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('table.actions')" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <a href="#" @click="hrefcouponbatchedit(scope.row.id)"><el-tag>{{$t('table.edit')}}</el-tag></a> 
                    <a href="#" @click="delcouponbatch(scope.row.cb_code)"><el-tag>{{$t('table.delete')}}</el-tag></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>
                <!--添加批次-->
                <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :before-close="handleClose">
                  <el-form :rules="rules" ref="addForm" :model="addcbinfo" label-position="left" label-width="80px"
                          style='width: 600px;margin-left:20px'>
                        <el-row :gutter="16" style="margin-bottom: 15px;">
                          <el-col :span="8">
                            <div class="grid-content bg-purple" style="width: 300px;">
                              <el-form-item  :label="$t('coupon.couponname')" prop="cb_name" style="width: 310px;">
                                <div class="block">
                              <el-input v-model="addcbinfo.cb_name"> </el-input>
                                </div>
                              </el-form-item>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row :gutter="16" style="margin-bottom: 15px;">  
                          <el-col :span="14">
                            <div class="grid-content bg-purple" style="width: 300px;">
                              <el-form-item  :label="$t('coupon.couponcomm')" >
                              <el-input
                                type="textarea"
                                :autosize="{ minRows: 7, maxRows: 8}"
                                placeholder="请输入使用规则"
                                :maxlength = 150
                                v-model="addcbinfo.cb_rule">
                            </el-input>
                              </el-form-item>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row :gutter="16" style="margin-bottom: 15px;">  
                        <el-col :span="8">
                            <div class="grid-content bg-purple" style="width: 500px; ">
                              <el-form-item  :label="$t('coupon.couponcity')" prop="cb_citys">
                              <el-checkbox-group v-model="addcbinfo.cb_citys">
                                <el-checkbox v-for="city in citysOptions" :label="city.branche_code" :key="city.branche_code">{{city.branche_name}}</el-checkbox>
                              </el-checkbox-group>
                              </el-form-item>
                            </div>
                        </el-col>
                        </el-row>
                        <el-row :gutter="16" style="margin-bottom: 15px;">
                          <el-col :span="16">
                            <div class="grid-content bg-purple" style="width: 500px;">
                              <el-form-item  :label="$t('coupon.couponpackages')" prop="cb_packages" >
                              <el-checkbox-group v-model="addcbinfo.cb_packages" >
                                <el-checkbox v-for="item in packageoptions" :label="item.p_code" :key="item.p_code">{{item.p_name}}</el-checkbox>
                              </el-checkbox-group>
                              </el-form-item>
                            </div>
                          </el-col>
                        </el-row>
                    </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button  type="primary" @click="addCouponBatch">{{$t('table.confirm')}}</el-button>
                    <el-button @click="resetForm('addForm')">{{$t('navbar.reset')}}</el-button>
                  </div>
                </el-dialog>

                <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 { fetchPv, updateArticle, seachList, createArticle, getBranches } from '@/api/article'
              import { getPackageSelect, getCouponbatchs, getQCouponBatch, addCouponBatch, deleteCouponBatch } from '@/api/couponapi'
              import waves from '@/directive/waves' // 水波纹指令
              import { parseTime } from '@/utils'
              // arr to obj ,such as { CN : "China", US : "USA" }
              export default {
                name: 'couponbatch',
                directives: {
                  waves
                },
                data() {
                  return {
                    tableKey: 0,
                    list: null,
                    total: null,
                    page: 1,
                    limit: 10,
                    queryType: 'list',
                    listLoading: true,
                    buttonloading: false,
                    listQuery: {
                      importance: undefined,
                      title: undefined,
                      type: undefined,
                      sort: '+id'
                    },
                    seachQuery: {
                      cb_code: null,
                      cb_name: 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,
                    addcbinfo: {
                      cb_name: undefined,
                      cb_rule: undefined,
                      cb_packages: [],
                      cb_citys: []
                    },
                    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
                    getCouponbatchs(this.listQuery).then(response => {
                      this.list = response.data.items
                      this.total = response.data.total
                      this.listLoading = false
                    })
                  },
                  handleFilter() {
                    if (this.seachQuery.experience === 0) {
                      this.seachQuery.experience = null
                    }
                    this.seachQuery.page = this.page
                    this.seachQuery.limit = this.limit
                    this.queryType = 'query'
                    this.listLoading = true
                    seachList(this.seachQuery).then(response => {
                      this.list = response.data.items
                      this.total = response.data.total
                      this.listLoading = false
                    })
                  },
                  handleFilterfirst() {
                    this.seachQuery.page = 1
                    this.seachQuery.limit = 10
                    this.page = 1
                    this.limit = 10
                    this.queryType = 'query'
                    this.listLoading = true
                    this.buttonloading = true
                    getQCouponBatch(this.seachQuery).then(response => {
                      this.buttonloading = false
                      this.list = response.data.items
                      this.total = response.data.total
                      this.listLoading = false
                    })
                  },
                  handleSizeChange(val) {
                    this.limit = val
                    if (this.queryType === 'list') {
                      this.listQuery.limit = val
                      this.listQuery.page = this.page
                      this.getList()
                    } else {
                      this.seachQuery.limit = val
                      this.seachQuery.page = this.page
                      this.handleFilter()
                    }
                  },
                  handleCurrentChange(val) {
                    this.page = val
                    if (this.queryType === 'list') {
                      this.listQuery.limit = this.limit
                      this.listQuery.page = val
                      this.getList()
                    } else {
                      this.seachQuery.limit = this.limit
                      this.seachQuery.page = val
                      this.handleFilter()
                    }
                  },
                  handleModifyStatus(row, status) {
                    this.$message({
                      message: '操作成功',
                      type: 'success'
                    })
                    row.status = status
                  },
                  handleCreate() {
                    this.addcbinfo.dialogStatus = 'create'
                    this.addcbinfo.cb_name = null
                    this.addcbinfo.cb_rule = null
                    this.addcbinfo.cb_packages = []
                    this.addcbinfo.cb_citys = []
                    this.dialogFormVisible = true
                    this.$nextTick(() => {
                      this.$refs['addForm'].clearValidate()
                    })
                  },
                  handleClose(done) {
                    this.$confirm('确认关闭？').then(_ => {
                      done()
                    }).catch(_ => {})
                  },
                  addCouponBatch() {
                    this.$refs['addForm'].validate((valid) => {
                      if (valid) {
                        var newpackages = ''
                        for (var valuep of this.addcbinfo.cb_packages) {
                          newpackages = newpackages + valuep + ','
                        }
                        if (newpackages != null) {
                          this.addcbinfo.cb_packages = newpackages.substring(0, newpackages.length - 1)
                        }
                        var newcitys = ''
                        for (var valuec of this.addcbinfo.cb_citys) {
                          newcitys = newcitys + valuec + ','
                        }
                        if (newcitys != null) {
                          this.addcbinfo.cb_citys = newcitys.substring(0, newcitys.length - 1)
                        }
                        this.listLoading = true
                        addCouponBatch(this.addcbinfo).then(response => {
                          if (response.data === 1) {
                            this.list = response.data.items
                            this.total = response.data.total
                            this.listLoading = false
                            this.$refs['addForm'].validate((valid) => {
                              if (valid) {
                                createArticle(this.temp).then(() => {
                                  this.dialogFormVisible = false
                                  this.$notify({
                                    title: '成功',
                                    message: '创建成功',
                                    type: 'success',
                                    duration: 2000
                                  })
                                })
                              }
                            })
                          } else {
                            this.listLoading = false
                            this.$refs['addForm'].validate((valid) => {
                              if (valid) {
                                createArticle(this.temp).then(() => {
                                  this.dialogFormVisible = false
                                  this.$notify({
                                    title: '失败',
                                    message: '生成失败！',
                                    type: 'error',
                                    duration: 2000
                                  })
                                })
                              }
                            })
                          }
                          this.getList()
                        })
                      }
                    })
                  },
                  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()
                    })
                  },
                  hrefcouponbatchedit(id) {
                    this.$router.push({ name: 'couponbatchedit', params: { couponBatch: id }})
                  },
                  delcouponbatch(cb_code) {
                    createArticle(this.temp).then(() => {
                      this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        this.couponbatchdel.cb_code = cb_code
                        this.listLoading = true
                        deleteCouponBatch(this.couponbatchdel).then(response => {
                          this.list = response.data.items
                          this.total = response.data.total
                          this.listLoading = false
                          if (response.data === 9) {
                            createArticle(this.temp).then(() => {
                              this.$notify({
                                title: '失败',
                                message: '发过券的批次号不能删除',
                                type: 'error',
                                duration: 2000
                              })
                            })
                          } else if (response.data === 1) {
                            createArticle(this.temp).then(() => {
                              this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success',
                                duration: 2000
                              })
                            })
                          } else {
                            createArticle(this.temp).then(() => {
                              this.$notify({
                                title: '错误',
                                message: '错误',
                                type: 'error',
                                duration: 2000
                              })
                            })
                          }
                          this.getList()
                        })
                      }).catch(() => {})
                    })
                  },
                  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
                          })
                        })
                      }
                    })
                  },
                  handleDelete(row) {
                    this.$notify({
                      title: '成功',
                      message: '删除成功',
                      type: 'success',
                      duration: 2000
                    })
                    const index = this.list.indexOf(row)
                    this.list.splice(index, 1)
                  },
                  handleFetchPv(pv) {
                    fetchPv(pv).then(response => {
                      this.pvData = response.data.pvData
                      this.dialogPvVisible = true
                    })
                  },
                  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.cb_code = null
                    this.seachQuery.cb_name = 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>
            