<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
       <template>
  <el-row>
  <el-col :span="12">
   <el-form-item label="账号" prop="账号">
        <el-input style="width:300px;" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包名称" autocomplete="off" />
      </el-form-item>
  </el-col>
  </el-row>
   <el-row>
   <el-col :span="12">
   <el-form-item label="密码" prop="密码">
        <el-input style="width:300px;" type="password" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
      </el-form-item>
  </el-col>
  </el-row>
    <el-row>
   <el-col :span="12">
   <el-form-item label="昵称" prop="昵称">
        <el-input style="width:300px;" placeholder="请输入账号" :disabled="ids" v-model.trim="form.券包价格" autocomplete="off" />
      </el-form-item>
  </el-col>
  </el-row>
   <el-form-item label="选择角色类型">
   <el-checkbox-group class="group" v-model="checkedCities" @change="handleCheckedCitiesChange">
   <el-checkbox  
    v-for="(value,index) in cities" 
    :label="value.id"
    :key="index">{{value.text}}
    </el-checkbox>
   </el-checkbox-group>
  </el-form-item>

   <el-form-item label="状态">
    <el-radio-group v-model="form.resource">
      <el-radio label="显示"></el-radio>
      <el-radio label="隐藏"></el-radio>
    </el-radio-group>
  </el-form-item>
   <!-- <el-row>
  </el-row> -->
       </template>
         <!-- <el-form-item v-else label="订单状态" prop="订单状态">
             <el-select v-model="form.订单状态" placeholder="请选择">
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="!ids">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

  <script>
  import { doEdit,addPackage,editPackage } from '@/api/table'
  export default {
  name: 'TableEdit',
  data() {
  return {
  ids:true,
  status:'',
  checkedCities: [],
  cities: [
{text:'超级管理员',id:0},
{text:'管理员',id:1},
{text:'主管',id:2},
{text:'队长',id:3}
],
//   options:[
//   { "label": "选项1", "value": "1" },
//   { "label": "选项2", "value": "2" },
//   { "label": "选项3", "value": "3" }
// ],
  form: {
  券包名称:'',
  券包价格:'',
  package1:{
  券ID:'',
  券的有效期限:'',
  },
  package2:{
  券ID:'',
  券的有效期限:'',
  },
  package3:{
  券ID:'',
  券的有效期限:'',
  },
  },
  rules: {
  // 券包ID: [{ required: true, trigger: 'blur', message: '请输入券ID' }],
  券包名称: [{ required: true, trigger: 'blur', message: '请输入券名称' }],
  券包价格: [{ required: true, trigger: 'blur', message: '请输入券包价格' }]
  },
  title: '',
  dialogFormVisible: false,
  }
  },
  created() {
  },
  methods:{
  showEdit(row,ids){
  this.status = row
  if (!row) {
  this.title = '添加1'
  this.ids = false
  this.form.券包名称='',
  this.form. 券包价格='',
  this.form.package1 = {}
  this.form.package2 = {}
  this.form.package3 = {}
  }
  else if (ids) {
  this.ids = ids
  this.title = '查看'
  this.form = Object.assign({}, row)
  }
  else{
  this.title = '编辑'
  this.ids = false
  this.form = Object.assign({}, row)
  }
  this.dialogFormVisible = true
  },
  close(){
  // this.$refs['form'].resetFields()
  // this.form = this.$options.data().form
  this.dialogFormVisible = false
  this.form.券包名称='',
  this.form. 券包价格='',
  this.form.package1 = {}
  this.form.package2 = {}
  this.form.package3 = {}
  },
  save() {
  if(this.status){
  this.$refs['form'].validate(async (valid) => {
  if (valid) {
  const { msg } = await editPackage(this.form)
  this.$message({
  message:msg,
  duration:2000,
  type:'success'
  })
  // this.$baseMessage(msg, 'success')
  this.$refs['form'].resetFields()
  this.$parent.fetchData();
  this.dialogFormVisible = false
  this.form = this.$options.data().form
  } 
  else 
  {
  return false
  }
  })
  }
  else
  {
  this.$refs['form'].validate(async (valid) => {
  if (valid) {
  const { msg } = await addPackage(this.form)
  this.$message({
  message:msg,
  duration:2000,
  type:'success'
  })
  // this.$baseMessage(msg, 'success')
  this.$refs['form'].resetFields()
  this.$parent.fetchData();
  this.dialogFormVisible = false
  this.form = this.$options.data().form
  } else {
  return false
  }
  })
  }
  },
  },
  }
  </script>
