<template>
  <el-dialog
    :title="title"
    center
    append-to-body
    :visible.sync="show"
    width="800px">
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" >
        <el-row v-if="type===1">
          <el-col :span="4"><label>ID</label></el-col>
          <el-col :span="8">
            {{teacherDetail.id}}
          </el-col>
          <el-col :span="4"><label>创建时间</label></el-col>
          <el-col :span="8">{{teacherDetail.created_at}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><label>昵称</label></el-col>
          <el-col :span="8">
            <span v-if="type === 1">{{teacherDetail.name}}</span>
            <el-form-item v-if="type !== 1"  prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4"><label>微信号</label></el-col>
          <el-col :span="8">
            <span v-if="type===1">{{teacherDetail.alias}}</span>
            <el-form-item v-if="type !== 1">
              <el-input v-model="form.alias"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="4"><label>状态</label></el-col>
          <el-col :span="8">
            <span v-if="type===1">{{teacherDetail.status}}</span>
            <el-form-item v-if="type !== 1">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option v-for="data in statusOption" :key="data.value" :label="data.label"
                           :value="data.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"><label>类型</label></el-col>
          <el-col :span="8">
            <span v-if="type===1">{{teacherDetail.type}}</span>
            <el-form-item v-if="type !== 1">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option v-for="data in typeOption" :key="data.value" :label="data.label"
                           :value="data.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type !== 1">
          <el-col :span="4"><label>二维码</label></el-col>
          <el-col :span="8">
            <span v-if="type===1">{{teacherDetail.qr}}</span>
            <el-form-item v-if="type !== 1" prop="qr">
              <el-input v-model="form.qr"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="type !== 1">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </div>
  </el-dialog>

</template>

<script>
  import {getTeacherDetailApi,addTeacherApi,editTeacherApi} from "../../service/api";
  import {TEACHERTYPE} from "../../util/wordbook";
  export default {
    name: "dialogObj",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        show:false,
        id: '',
        statusOption:[
          {
            label:'正常',
            value:0
          },
          {
            label:'禁用',
            value:1
          }
        ],
        typeOption:[
          {
            label:'老师',
            value:0
          },{
            label:'新星妈妈',
            value:1
          },{
            label:'推广人',
            value:2
          },{
            label:'市场',
            value:3
          }
        ],
        loading:true,
        type:0,
        title:'',
        form:{
          name:'',
          type:0,
          qr:'',
          alias:'',
          status:0,
        },
        rules:{
          name:[
            { required: true, message: '请输入名称', trigger: 'change' }
          ],
          qr:[
            { required: true, message: '请输入二维码', trigger: 'change' }
          ]
        },
        teacherDetail:{}
      }
    },
    methods:{
      sub(){
        switch(this.dialogObj.type){
          case 2:
            this.$refs['form'].validate((valid) => {
                if(valid){
                  editTeacherApi(this.id,this.form).then(res=>{
                    this.$message({
                      type: 'success',
                      message: '修改成功!'
                    });
                    this.$emit("reflash");
                    this.show = false;
                  })
                }
            });
            break;
          case 0:
            this.$refs['form'].validate((valid) => {
              if(valid){
                addTeacherApi(this.form).then(res=>{
                  this.$message({
                    type: 'success',
                    message: '新增成功!'
                  });
                  this.$emit("reflash");
                  this.show = false;
                })
              }
            });
            break
        }
      },
      initDialog(){
        switch(this.dialogObj.type){
          case 0:
            this.title = '新增教师';
            this.show = this.dialogObj.show;
            this.type = 0;
              this.form.name = "";
              this.form.alias = "";
              this.form.qr = "";
              this.form.type = 0;
              this.form.status = 0;
              this.loading = false;
            break;
          case 1:
            this.title = '教师详情';
            this.show = this.dialogObj.show;
            this.id = this.dialogObj.id;
            this.type = 1;
            getTeacherDetailApi(this.id).then(res=>{
              this.teacherDetail = res;
              this.loading = false
            });
            break;
          case 2:
            this.title = '编辑';
            this.show = this.dialogObj.show;
            this.id = this.dialogObj.id;
            this.type = 2;
            getTeacherDetailApi(this.id).then(res=>{
              this.form.name = res.name;
              this.form.alias = res.alias;
              this.form.qr = res.qr;
              this.form.type = res.type;
              this.form.status = res.status;
              this.loading = false
            });
            break
        }

      }
    },
    watch:{
      dialogObj:{
        handler: function () {
          this.loading = true;
          this.initDialog()
        },
        deep: true
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style scoped lang="less">
  .el-col{
    height: 50px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 40px;
    .el-select{
      width: 100%;
    }
    img{
      width: 50px;
      border-radius: 100px;
    }
    label{
      color: #5982e6;
    }
  }
  .dialog-footer{
    display: block;
    text-align: center;
  }
</style>
