              <template>
                <div class="app-container calendar-list-container">
                  <el-form :rules="rules" ref="addForm" :model="updatecbinfo" 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="updatecbinfo.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="updatecbinfo.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-if=" this.checkCouponCreate == false " v-model="updatecbinfo.cb_citys" disabled>
                                  <el-checkbox  v-for="city in citysOptions" :label="city.branche_code" :key="city.branche_code">{{city.branche_name}}</el-checkbox>
                                </el-checkbox-group>
                                <el-checkbox-group  v-else v-model="updatecbinfo.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-if=" this.checkCouponCreate == false " v-model="updatecbinfo.cb_packages" disabled>
                                  <el-checkbox v-for="item in packageoptions" :label="item.p_code" :key="item.p_code">{{item.p_name}}</el-checkbox>
                                </el-checkbox-group>
                                <el-checkbox-group v-else v-model="updatecbinfo.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-row :gutter="24" style="margin-bottom: 15px;">
                          <el-col :span="8"><div>&nbsp;</div></el-col>
                          <el-col :span="12">
                            <div >
                              <el-button  type="primary" @click="updateCouponBatch">{{$t('table.confirm')}}</el-button>
                              <el-button @click="handleref()">{{$t('navbar.reset')}}</el-button>
                            </div>
                          </el-col>
                          <el-col :span="6"><div>&nbsp;</div></el-col>
                        </el-row>
                      </el-form>
                  <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 { getBranches, createArticle } from '@/api/article'
                import { getPackageSelect, getCouponBatch, updateCouponBatch, checkCouponBatchid } from '@/api/couponapi'
                import waves from '@/directive/waves' // 水波纹指令
                import { parseTime } from '@/utils'
                // arr to obj ,such as { CN : "China", US : "USA" }
                export default {
                  name: 'couponbatchedit',
                  directives: {
                    waves
                  },
                  data() {
                    return {
                      tableKey: 0,
                      list: null,
                      total: null,
                      page: 1,
                      limit: 10,
                      queryType: 'list',
                      listLoading: true,
                      couponQuery: {
                        id: undefined
                      },
                      checkCouponCreate: 0,
                      checkCouponbatch: {
                        id: null
                      },
                      updatecbinfo: {
                        id: null,
                        cb_code: null,
                        cb_name: null,
                        cb_rule: null,
                        cb_packages: [],
                        cb_citys: []
                      },
                      updatecbinfoconf: {
                        id: null,
                        cb_code: null,
                        cb_name: null,
                        cb_rule: null,
                        cb_packages: [],
                        cb_citys: []
                      },
                      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
                      branchesOptions: [],
                      citysOptions: [],
                      packageoptions: [],
                      showReviewer: false,
                      ethnicgroupptions: '',
                      provinceoptions: '',
                      dialogFormVisible: false,
                      checkidcard: {
                        idcard: undefined
                      },
                      dialogStatus: '',
                      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
                    })
                    this.checkCouponbatch.id = this.$route.params.couponBatch
                    console.log(this.$route.params.couponBatch)
                    checkCouponBatchid(this.checkCouponbatch).then(response7 => {
                      if (Number(response7.data) > 0) {
                        this.checkCouponCreate = false
                      } else {
                        this.checkCouponCreate = true
                      }
                    })
                  },
                  methods: {
                    getList() {
                      this.couponQuery.id = this.$route.params.couponBatch
                      getCouponBatch(this.couponQuery).then(response => {
                        this.updatecbinfo.cb_name = response.data.cb_name
                        this.updatecbinfo.cb_rule = response.data.cb_rule
                        if (response.data.cb_citys != null) {
                          this.updatecbinfo.cb_citys = response.data.cb_citys.split(',')
                        }
                        if (response.data.cb_packages != null) {
                          this.updatecbinfo.cb_packages = response.data.cb_packages.split(',')
                        }
                        this.updatecbinfoconf.cb_name = response.data.cb_name
                        this.updatecbinfoconf.cb_rule = response.data.cb_rule
                        if (response.data.cb_citys != null) {
                          this.updatecbinfoconf.cb_citys = response.data.cb_citys.split(',')
                        }
                        if (response.data.cb_packages != null) {
                          this.updatecbinfoconf.cb_packages = response.data.cb_packages.split(',')
                        }
                      })
                    },
                    updateCouponBatch() {
                      this.$refs['addForm'].validate((valid) => {
                        if (valid) {
                          var newpackages = ''
                          for (var valuep of this.updatecbinfo.cb_packages) {
                            newpackages = newpackages + valuep + ','
                          }
                          if (newpackages != null) {
                            this.updatecbinfoconf.cb_packages = newpackages.substring(0, newpackages.length - 1)
                          }
                          var newcitys = ''
                          for (var valuec of this.updatecbinfo.cb_citys) {
                            newcitys = newcitys + valuec + ','
                          }
                          if (newcitys != null) {
                            this.updatecbinfoconf.cb_citys = newcitys.substring(0, newcitys.length - 1)
                          }
                          this.updatecbinfoconf.id = this.$route.params.couponBatch
                          this.updatecbinfoconf.cb_name = this.updatecbinfo.cb_name
                          this.updatecbinfoconf.cb_rule = this.updatecbinfo.cb_rule
                          updateCouponBatch(this.updatecbinfoconf).then(response => {
                            if (response.data !== 1) {
                              createArticle(this.temp).then(() => {
                                this.$notify({
                                  title: '失败',
                                  message: '更新失败',
                                  type: 'warning',
                                  duration: 2000
                                })
                              })
                            } else {
                              createArticle(this.temp).then(() => {
                                this.$notify({
                                  title: '成功',
                                  message: '更新成功',
                                  type: 'success',
                                  duration: 2000
                                })
                              })
                            }
                          })
                        }
                      })
                    },
                    handleref() {
                      this.updatecbinfo.cb_name = this.updatecbinfoconf.cb_name
                      this.updatecbinfo.cb_rule = this.updatecbinfoconf.cb_rule
                      this.updatecbinfo.cb_citys = this.updatecbinfoconf.cb_citys
                      this.updatecbinfo.cb_packages = this.updatecbinfoconf.cb_packages
                    },
                    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>