<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="请选择" disabled>-->
              <el-select v-model="form.type" placeholder="请选择" :disabled="typeList.length < 2">
                <el-option v-for="data in typeList" :key="data.type" :label="data.name" :value="data.type"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><label>二维码</label></el-col>
          <el-col :span="8">
            <img class="qr-img" v-if="type===1" :src="teacherDetail.qr"/>
            <el-form-item v-if="type !== 1">
              <!--<el-input v-model="form.qr"></el-input>-->
              <el-upload
                action="/api/public/upload/zone"
                list-type="picture-card"
                :http-request="uploadFile"
                :class="{disabled:!uploadShow}"
                :before-upload="beforeAvatarUpload"
                :file-list="imageList"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>

          <template v-if="type===1">
            <el-col :span="4"><label>邀请码</label></el-col>
            <el-col :span="8">
              <span v-if="type===1">{{teacherDetail.invite_code}}</span>
            </el-col>
          </template>
          <el-col :span="4"><label>分组</label></el-col>
          <el-col :span="8">
            <el-select v-model="form.squad" placeholder="请选择">
              <el-option
                v-for="i in 10"
                :key="i+(index-1)*10"
                :label="'T'+(i+(index-1)*10)"
                :value="i+(index-1)*10">
              </el-option>
            </el-select>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="type !== 1">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<script>
  import {getTeacherDetailApi, addTeacherApi, editTeacherApi, uploadFileApi} from "../../service/api";

  export default {
    name: "dialogObj",
    props: [
      'dialogObj',
      'index'
    ],
    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,
        typeList: [],
        title: '',
        form: {
          name: '',
          type: 0,
          squad: '',
          qr: '',
          alias: '',
          status: 0,
          media_id: ''
        },
        rules: {
          name: [ {required: true, message: '请输入名称', trigger: 'change'} ],
          qr: [ {required: true, message: '请输入二维码', trigger: 'change'} ]
        },
        teacherDetail: {},
        imageList: [],
        uploadShow: true
      }
    },
    methods: {
      sub() {
        if (this.imageList.length > 0) {
          this.form.qr = this.imageList[0].url;
        }
        let json = {
          name: this.form.name,
          type: this.form.type,
          qr: this.form.qr,
          squad: this.form.squad,
          alias: this.form.alias,
          status: this.form.status,
          media_id: this.form.media_id
        };
        switch (this.dialogObj.type) {
          case 2:
            this.$refs['form'].validate((valid) => {
              if (valid) {
                editTeacherApi(this.id, json).then(res => {
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  });
                  this.$emit("reflash");
                  this.show = false;
                })
              }
            });
            break;
          case 0:
            this.$refs['form'].validate((valid) => {
              if (valid) {
                addTeacherApi(json).then(res => {
                  this.$message({
                    type: 'success',
                    message: '新增成功!'
                  });
                  this.$emit("reflash");
                  this.show = false;
                })
              }
            });
            break
        }
      },
      beforeAvatarUpload() {
        this.uploadShow = false
      },
      handleRemove() {
        this.uploadShow = true
      },
      handleAvatarSuccess(res) {
        this.imageList = [{name: res.data.url, url: process.env.IMAGE_URL_HEAD + res.data.url}]
      },
      uploadFile(a) {
        this.loading = true;
        this.$store.dispatch('setProgress', {type: 'new', id: a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file: a.file, type: 'all'}).then(res => {
          this.form.media_id = res.wechat_info ? res.wechat_info.media_id : '';
          this.imageList = [{name: res.url, url: process.env.IMAGE_URL_HEAD + res.url}];
          this.uploadShow = false;
          this.loading = false;
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
        }).catch(() => {
          this.loading = false;
        })
      },
      initType() {
        // debugger
        if (this.dialogObj.teacherTypeList && this.dialogObj.teacherTypeList.length) {
          if (String(this.dialogObj.typeAdd).indexOf(',') > -1) { // 3,4
            let typeAddArr = this.dialogObj.typeAdd.split(','), arr = [];
            typeAddArr.forEach(val => {
              let idx = this.dialogObj.teacherTypeList.findIndex(i => i.type == val);
              if (idx > -1) {
                arr.push(this.dialogObj.teacherTypeList[idx])
              }
            })
            this.typeList = arr;
          // } else if (this.dialogObj.typeAdd == 0 || this.dialogObj.typeAdd == 2) {
          } else {
            let idx = this.dialogObj.teacherTypeList.findIndex(i => i.type == this.dialogObj.typeAdd);
            if (idx > -1) {
              this.typeList = [this.dialogObj.teacherTypeList[idx]]
            }
          }
        }
      },
      initDialog() {
        // console.log(this.dialogObj)
        this.initType();

        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.squad = "";
            this.form.type = String(this.dialogObj.typeAdd).indexOf(',') > -1 ? 3 : this.dialogObj.typeAdd;
            this.form.status = 0;
            this.imageList = [];
            this.loading = false;
            this.uploadShow = true;
            this.form.media_id = '';
            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.squad = res.squad;
              this.form.alias = res.alias;
              this.form.qr = res.qr;
              this.form.type = res.type;
              this.form.status = res.status;
              this.form.media_id = res.media_id ? res.media_id : '';
              this.imageList = [{name: res.qr, url: res.qr}];
              this.uploadShow = !res.qr;
              this.loading = false;
            });
            break
        }

      }
    },
    watch: {
      'dialogObj.teacherTypeList'() {
        console.log('listUpdate'); // todo 似乎无用？
        this.initType();
      },
      dialogObj: {
        handler: function () {
          this.loading = true;
          this.initDialog()
        },
        deep: true
      },
      show(value) {
        this.$emit("changeShow", value);
      }
    }
  }
</script>

<style scoped lang="less">
  .el-col {
    min-height: 50px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 40px;

    .el-select {
      width: 100%;
    }

    img {
      width: 50px;
      border-radius: 100px;
    }

    label {
      color: #5982e6;
    }
  }

  .qr-img {
    width: 148px !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .dialog-footer {
    display: block;
    text-align: center;
  }
</style>
<style>
  .disabled .el-upload--picture-card {
    display: none !important;
  }
</style>
