<template>
  <div>
    <xy-dialog ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增会员' : '编辑会员'" :form="form" :rules="rules" @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>姓名：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入姓名" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:promotion>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否推广人员：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.promotion"></el-switch>
          </div>
        </div>
      </template>
      <template v-slot:phone>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>电话：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.phone" placeholder="请输入电话" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {store,show,save} from "@/api/member"
import { Message } from 'element-ui'
export default {
  data() {
    return {
      id:'',
      isShow:false,
      type:'add',

      form:{
        name:'',
        phone:'',
        promotion:false,
      },
      rules:{
        name:[
          {required:true,message:'请填写姓名'}
        ],
        phone:[
          {required:true,message:'请填写电话'},
          {pattern: /^[1][3-9][\d]{9}/,message:'手机号格式错误'}
        ]
      }
    }
  },
  methods: {
    async getDetail(){
      const res = await show({id:this.id})
      this.form.name = res.name
      this.form.promotion = res.promotion == 1 ? true : false
      this.form.phone = res.phone
    },

    submit(){
      if(this.type === 'add'){
        store({
          name:this.form.name,
          promotion:this.form.promotion ? 1 : 0,
          phone:this.form.phone
        }).then(res => {
          Message({
            type:'success',
            message:'新增会员成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          name:this.form.name,
          promotion:this.form.promotion ? 1 : 0,
          phone:this.form.phone
        }).then(res => {
          Message({
            type:'success',
            message:'编辑会员成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      }
    }
  },
  watch:{
    isShow(val){
      if(val){
        if(this.type === 'editor'){
          this.getDetail()
        }
      }else{
        this.id = ''
        this.type = ''
        this.$refs['dialog'].reset()
      }
    }
  }

}
</script>

<style scoped lang="scss">
.xy-table-item-label{
  width: 160px;
}
</style>
