                <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('coupon.couponname')" >
                            <div class="block">
                              <el-select class="filter-item" v-model="seachQuery.cb_code"  filterable  style="width: 100%;">
                              <el-option v-for="item in couponbatchoptions" :key="item.cb_code" :label="item.cb_name" :value="item.cb_code">
                              </el-option>
                              </el-select>
                            </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.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="12" :lg="6" :xl="6">
                        <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-col :xs="23" :sm="23" :md="11" :lg="5" :xl="5">
                        <div class="grid-content bg-purple" >
                          <el-form-item  :label="$t('coupon.createdate')" >
                            <div class="block">
                              <el-date-picker v-model="seachQuery.cc_createdate" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" style="width: 100%;">
                             </el-date-picker>
                            </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('coupon.amount')" >
                            <div class="block">
                              <el-input-number style="width: 100%;" class="filter-item" v-model="seachQuery.cc_amount" :max="9999" controls-position="right">
                          </el-input-number>
                            </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.quantity')" >
                            <div class="block">
                              <el-input-number style="width: 100%;" class="filter-item" v-model="seachQuery.cc_quantity" :max="99999" controls-position="right">
                            </el-input-number>
                            </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.startdate')" >
                            <div class="block">
                               <el-date-picker v-model="seachQuery.cc_startdate" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" style="width: 100%;">
                              </el-date-picker>
                            </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.enddate')" >
                            <div class="block">
                               <el-date-picker v-model="seachQuery.cc_enddate" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" style="width: 100%;">
                              </el-date-picker>
                            </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('coupon.status')" >
                            <div class="block">
                               <el-select v-model="seachQuery.cc_status" style="width: 100%;" >
                                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" >
                                </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" v-waves :loading ="buttonloading" 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.couponname')">
                        <template slot-scope="scope">
                          <span>{{scope.row.cb_name}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" :label="$t('coupon.startdate')">
                        <template slot-scope="scope">
                          <span>{{scope.row.cc_startdate}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" :label="$t('coupon.enddate')">
                        <template slot-scope="scope">
                          <span>{{scope.row.cc_enddate}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" :label="$t('coupon.createdate')">
                        <template slot-scope="scope">
                          <span>{{scope.row.cc_createdate}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" :label="$t('coupon.amount')">
                        <template slot-scope="scope">
                          <span>{{scope.row.cc_amount}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" :label="$t('coupon.quantity')">
                        <template slot-scope="scope">
                          <span>{{scope.row.cc_quantity}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" :label="$t('coupon.status')">
                        <template slot-scope="scope">
                          <el-tag v-if="scope.row.cc_status == '1' " type="success">可用</el-tag>
                          <el-tag v-else-if="scope.row.cc_status == '0' " type="warning">停用</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" :label="$t('table.actions')" class-name="small-padding fixed-width">
                      <template slot-scope="scope">
                        <a v-if="scope.row.cc_status == '1'" href="#" @click="diableCoupno(scope.row.id)"><el-tag>{{$t('table.disable')}}</el-tag></a> 
                        <a v-else href="#" @click="enbleCoupno(scope.row.id)"><el-tag>{{$t('table.enable')}}</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="addccinfo" label-position="left" label-width="100px"
                              style='width: 600px;margin-left:20px'>
                            <el-row :gutter="20" style="margin-bottom: 15px;">
                              <el-col :span="20">
                                <div class="grid-content bg-purple" style="width: 400px;">
                                  <el-form-item  :label="$t('coupon.couponname')" prop="cb_code" style="width: 310px;">
                                    <div class="block">
                                    <el-select class="filter-item" v-model="addccinfo.cb_code"  filterable  style="width: 200px;">
                                    <el-option v-for="item in couponbatchoptions" :key="item.cb_code" :label="item.cb_name" :value="item.cb_code">
                                    </el-option>
                                    </el-select>
                                    </div>
                                  </el-form-item>
                                </div>
                              </el-col>
                            </el-row>
                            <el-row :gutter="20" style="margin-bottom: 15px;">  
                              <el-col :span="20">
                                <div class="grid-content bg-purple" style="width: 400px;">
                                  <el-form-item  :label="$t('coupon.startdate')"  prop="cc_startdate">
                                  <el-date-picker v-model="addccinfo.cc_startdate" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" style="width: 200px;">
                                </el-date-picker>
                                  </el-form-item>
                                </div>
                              </el-col>
                            </el-row>
                            <el-row :gutter="20" style="margin-bottom: 15px;">  
                            <el-col :span="20">
                                <div class="grid-content bg-purple" style="width: 400px; ">
                                  <el-form-item  :label="$t('coupon.enddate')" prop="cc_enddate">
                                  <el-date-picker v-model="addccinfo.cc_enddate" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" style="width: 200px;">
                                </el-date-picker>
                                  </el-form-item>
                                </div>
                            </el-col>
                            </el-row>
                            <el-row :gutter="20" style="margin-bottom: 15px;">
                              <el-col :span="20">
                                <div class="grid-content bg-purple" style="width: 500px;">
                                  <el-form-item  :label="$t('coupon.cb_type')" >
                                    <el-checkbox v-model="addccinfo.cb_type" @change="handkeFileChange"></el-checkbox>
                                  </el-form-item>
                                </div>
                              </el-col>
                            </el-row>
                            <el-row :gutter="20" style="margin-bottom: 15px;">
                              <el-col :span="20">
                                <div class="grid-content bg-purple" style="width: 500px;">
                                  <el-form-item  :label="$t('coupon.quantity')" prop="cc_quantity" >
                                  <el-input-number v-if="quantityEnable" style="width: 200px;" class="filter-item" 
                                      v-model="addccinfo.cc_quantity" :max="1000" controls-position="right">
                                  </el-input-number>
                                  <el-input-number v-else style="width: 200px;" class="filter-item" disabled
                                      v-model="addccinfo.cc_quantity" controls-position="right">
                                  </el-input-number>
                                  </el-form-item>
                                </div>
                              </el-col>
                            </el-row>
                            <el-row :gutter="20" style="margin-bottom: 15px;">
                              <el-col :span="20">
                                <div class="grid-content bg-purple" style="width: 500px;">
                                  <el-form-item  :label="$t('coupon.amount')" prop="cc_amount" >
                                  <el-input-number style="width: 200px;" class="filter-item"
                                      v-model="addccinfo.cc_amount" :max="1000" controls-position="right">
                                  </el-input-number>
                                  </el-form-item>
                                </div>
                              </el-col>
                            </el-row>
                        </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button  type="primary" @click="addCouponCreate">{{$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, createArticle, getBranches } from '@/api/article'
                  import { getPackageSelect, selectCouponBatch, enableCouponCreate, getQCouponCreate, disableCouponCreate, addCouponCreate } from '@/api/couponapi'
                  import waves from '@/directive/waves' // 水波纹指令
                  import { parseTime } from '@/utils'
                  import regex from '@/utils/regex'
                  // arr to obj ,such as { CN : "China", US : "USA" }
                  export default {
                    name: 'couponcreate',
                    directives: {
                      waves
                    },
                    data() {
                      return {
                        tableKey: 0,
                        list: null,
                        total: null,
                        page: 1,
                        limit: 10,
                        queryType: 'list',
                        listLoading: true,
                        buttonloading: false,
                        quantityEnable: true,
                        listQuery: {
                          importance: undefined,
                          title: undefined,
                          type: undefined,
                          sort: '+id'
                        },
                        seachQuery: {
                          cb_code: null,
                          cb_name: null,
                          cb_packages: null,
                          cb_citys: null,
                          cc_amount: null,
                          cc_quantity: null,
                          cc_createdate: null,
                          cc_status: null,
                          cc_startdate: null,
                          cc_enddate: null,
                          page: null,
                          limit: null
                        },
                        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)
                            }
                          }]
                        },
                        idcardquery: {
                          idcard: null
                        },
                        couponbatchdel: {
                          cb_code: undefined
                        },
                        checksalt: {
                          salt: undefined
                        },
                        sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
                        branchesOptions: [],
                        citysOptions: [],
                        packageoptions: [],
                        couponbatchoptions: [],
                        statusOptions: [{ label: '可用', value: '1' }, { label: '停用', value: '0' }],
                        showReviewer: false,
                        addccinfo: {
                          cb_code: undefined,
                          cc_quantity: undefined,
                          cc_amount: undefined,
                          cc_startdate: undefined,
                          cc_enddate: undefined,
                          cb_type: undefined
                        },
                        ethnicgroupptions: '',
                        provinceoptions: '',
                        dialogFormVisible: false,
                        checkidcard: {
                          idcard: undefined
                        },
                        dialogStatus: '',
                        textMap: {
                          update: 'Edit',
                          create: '添加月嫂'
                        },
                        dialogPvVisible: false,
                        pvData: [],
                        updateStatus: {
                          id: undefined
                        },
                        rules: {
                          cb_code: [{ required: true, message: '请选择优惠券批次', trigger: 'blur' }],
                          cc_quantity: [{ required: true, message: '请输入发券数量', trigger: 'blur' },
                            { pattern: regex.NUMBER, max: 4, message: '发券数量输入错误', trigger: 'blur' }],
                          cc_amount: [{ required: true, message: '请输入券金额', trigger: 'blur' },
                            { pattern: regex.NUMBER, max: 4, message: '券金额输入错误', trigger: 'blur' }],
                          cc_startdate: [{ required: true, message: '请输入优惠券的有效期', trigger: 'blur' }],
                          cc_enddate: [{ 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
                      })
                      selectCouponBatch().then(response7 => {
                        this.couponbatchoptions = response7.data
                      })
                    },
                    methods: {
                      getList() {
                        this.listQuery.page = this.page
                        this.listQuery.limit = this.limit
                        this.queryType = 'list'
                        this.listLoading = true
                        getQCouponCreate(this.listQuery).then(response => {
                          this.list = response.data.items
                          this.total = response.data.total
                          this.listLoading = false
                        })
                      },
                      handleFilter() {
                        this.seachQuery.page = this.page
                        this.seachQuery.limit = this.limit
                        this.queryType = 'query'
                        this.listLoading = true
                        getQCouponCreate(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.queryType = 'query'
                        this.listLoading = true
                        this.buttonloading = true
                        getQCouponCreate(this.seachQuery).then(response => {
                          this.list = response.data.items
                          this.total = response.data.total
                          this.listLoading = false
                          this.buttonloading = 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.addccinfo.dialogStatus = 'create'
                        this.addccinfo.cb_code = null
                        this.addccinfo.cc_quantity = null
                        this.addccinfo.cc_amount = null
                        this.addccinfo.cc_startdate = null
                        this.addccinfo.cc_enddate = null
                        this.addccinfo.cb_type = false
                        this.dialogFormVisible = true
                        this.quantityEnable = true
                        this.$nextTick(() => {
                          this.$refs['addForm'].clearValidate()
                        })
                      },
                      handkeFileChange(value) {
                        this.quantityEnable = !value
                        if (value) {
                          this.addccinfo.cc_quantity = 9999999
                        } else {
                          this.addccinfo.cc_quantity = null
                        }
                      },
                      handleClose(done) {
                        this.$confirm('确认关闭？').then(_ => {
                          done()
                        }).catch(_ => {})
                      },
                      addCouponCreate() {
                        this.$refs['addForm'].validate((valid) => {
                          if (valid) {
                            this.listLoading = true
                            addCouponCreate(this.addccinfo).then(response => {
                              this.getList()
                              this.listLoading = false
                            })
                            this.$refs['addForm'].validate((valid) => {
                              if (valid) {
                                createArticle(this.temp).then(() => {
                                  // this.list.unshift(this.temp)
                                  this.dialogFormVisible = false
                                  this.$notify({
                                    title: '成功',
                                    message: '创建成功',
                                    type: 'success',
                                    duration: 2000
                                  })
                                })
                              }
                            })
                          }
                        })
                      },
                      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()
                        })
                      },
                      diableCoupno(id) {
                        this.updateStatus.id = id
                        disableCouponCreate(this.updateStatus).then(response => {
                          this.getList()
                          this.listLoading = false
                        })
                        createArticle(this.temp).then(() => {
                          this.$notify({
                            title: '成功',
                            message: '更新成功',
                            type: 'success',
                            duration: 2000
                          })
                        })
                      },
                      enbleCoupno(id) {
                        this.updateStatus.id = id
                        enableCouponCreate(this.updateStatus).then(response => {
                          this.getList()
                          this.listLoading = false
                        })
                        createArticle(this.temp).then(() => {
                          this.$notify({
                            title: '成功',
                            message: '更新成功',
                            type: 'success',
                            duration: 2000
                          })
                        })
                      },
                      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.cc_amount = null
                        this.seachQuery.cc_quantity = null
                        this.seachQuery.cc_createdate = null
                        this.seachQuery.cc_status = null
                        this.seachQuery.cc_startdate = null
                        this.seachQuery.cc_enddate = 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>
                