<template>
  <el-dialog
    title="自动回复"
    center
    append-to-body
    :visible.sync="show"
    width="800px">
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" >
        <el-row>
          <el-col :span="4"><label>Key</label></el-col>
          <el-col :span="8">
            <el-form-item  prop="key">
              <el-input v-model="form.key"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><label>关键词</label></el-col>
          <el-col :span="8">
            <el-form-item  prop="value">
              <el-input v-model="form.value"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><label>描述</label></el-col>
          <el-col :span="8">
            <el-form-item  prop="desc">
              <el-input v-model="form.desc" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </div>
  </el-dialog>

</template>

<script>
  import {updateConfigApi,saveConfigApi} from "../../service/api";
  import {TEACHERTYPE} from "../../util/wordbook";
  import page from '../framework/page'
  export default {
    name: "dialogObj",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        show:false,
        id: '',
        loading:true,
        form:{
          key:'',
          value:'',
          desc:''
        },
        mediaList: [],
        rules:{
          value:[
            { required: true, message: '请输入关键词', trigger: 'change' }
          ],
          desc:[
            { required: true, message: '请输入描述', trigger: 'change' }
          ],
          key:[
            { required: true, message: '请输入Key', trigger: 'change' }
          ]
        }
      }
    },
    components:{
      page
    },
    methods:{
      save(){
        if(this.dialogObj.id){
          this.$refs['form'].validate((valid) => {
            if(valid){
              this.$confirm('此操作将修改该配置?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                updateConfigApi(this.id,this.form).then(res=>{
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  });
                  this.$emit("reflash");
                  this.show = false;
                })
              })
            }
          });
        }else{
          this.$refs['form'].validate((valid) => {
            if(valid){
              this.$confirm('此操作将添加新配置?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                saveConfigApi(this.form).then(res=>{
                  this.$message({
                    type: 'success',
                    message: '新增成功!'
                  });
                  this.$emit("reflash");
                  this.show = false;
                })
              })
            }
          });
        }
      },
      initDialog(){
        this.show = this.dialogObj.show;
        if (this.dialogObj.id) {
          this.id = this.dialogObj.id;
        }
        this.form.key = this.dialogObj.key;
        this.form.value = this.dialogObj.value;
        this.form.desc = this.dialogObj.desc;
        this.loading = false
      }
    },
    watch:{
      dialogObj:{
        handler: function () {
          this.loading = true;
          this.initDialog()
        },
        deep: true
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  /*.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;
    margin-top: 30px;
  }
  .msg_sender_wrp {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    /*position: absolute;*/
    /*left: 100%;*/
    /*top: 50%;*/
    width: 500px;
    /*z-index: 500;*/
    /*-ms-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/
    /*background: #FFFFFF;*/
    /*box-shadow: 0 1px 20px 0 #E4E8EB;*/
    /*border-radius: 2px;*/
  }
  .el-icon-circle-plus-outline {
    font-size: 28px;
  }
  .weui-desktop-msg-sender__tabs {
    line-height: 38px;
    background-color: #FFFFFF;
  }
  ul, ol {
    padding-left: 0;
    list-style-type: none;
  }
  .weui-desktop-msg-sender__tab {
    padding: 0 15px;
    float: left;
    cursor: pointer;
  }
  .weui-desktop-msg-sender__tab_appmsg:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_appmsg3f92fe.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:before {
    content: " ";
    display: inline-block;
    width: 22px;
    height: 20px;
    vertical-align: middle;
    margin: -0.2em 5px 0 0;
  }
  .weui-desktop-msg-sender__tab_text:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_text3f92fe.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab_img:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img3f92fe.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab_audio:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_audio3f92fe.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab_video:before {
    background: transparent url(https://mp.weixin.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_video3f92fe.svg) no-repeat 0 0;
  }
</style>