<template>
  <div v-if="show">
    <el-dialog
      title="自动回复"
      center
      append-to-body
      :visible.sync="show"
      width="50%">
      <div v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" >
          <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="20">
              <template v-if="form.desc">
                <div v-for="(item, index) in JSON.parse(form.desc)" class="msg-item">
                  <span class="msg-text" v-if="item.type==='text'">{{item.content}}</span>
                  <img v-else-if="item.type==='image' && item.content" :src="item.content"/>
                  <span  v-else-if="item.type==='image' && item.variable" class="msg-text" >我的老师二维码</span>
                  <a v-else-if="item.type==='video'" :href="item.content.down_url" target="_blank">{{item.content.title}}</a>
                  <div v-else-if="item.type==='news' && item.content && item.content.news_item" class="news-media" style="display: inline-block">
                    <el-card :body-style="{ padding: '0px' }">
                      <div v-for="(child, childIndex) in item.content.news_item" style="position: relative">
                        <div v-if="item.content.news_item.length === 1" class="single-cover">
                          <div class="title">{{child.title}}</div>
                          <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
                          <div class="digest">{{child.digest}}</div>
                          <a class="preview" :href="child.url" target="_blank">
                            预览文章
                          </a>
                        </div>
                        <div v-else-if="item.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
                          <div v-if="childIndex === 0" class="muti-cover">
                            <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
                            <div class="bottom-title">{{child.title}}</div>
                          </div>
                          <div class="next-cover clear-both" v-else>
                            <span class="next-title">{{child.title}}</span>
                            <img class="next-img" :src="child.thumb_url"/>
                          </div>
                          <a class="preview" :href="child.url" target="_blank">
                            预览文章
                          </a>
                        </div>
                      </div>
                    </el-card>
                  </div>
                  <div v-else-if="item.type === 'link'" class="news-media" style="display: inline-block">
                    <el-card :body-style="{ padding: '0px' }">
                      <a :href="item.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
                        <div style="margin: 3px;line-height: 2" class="ellip">{{item.title}}</div>
                        <div class="f-bt" style="position: relative;">
                          <div style="color: #666;margin-left: 3px;word-wrap: break-word;word-break: break-all;width: 60%;">{{item.description}}</div>
                          <img :src="item.thumb_url" style="width: 35%; height: auto"/>
                        </div>
                      </a>
                    </el-card>
                  </div>
                  <div v-else-if="item.type === 'news-item'" class="news-media" style="display: inline-block">
                    <el-card :body-style="{ padding: '0px' }">
                      <a :href="item.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
                        <img :src="item.thumb_url" style="width: 100%; height: auto"/>
                        <div style="margin: 0;line-height: 2" class="ellip">{{item.title}}</div>
                        <div style="color: #666;margin-left: 0;word-wrap: break-word;word-break: break-all;">{{item.description}}</div>
                      </a>
                    </el-card>
                  </div>
                  <i class="el-icon-edit" @click="onEditText(item, index)"></i>
                  <i class="el-icon-delete" @click="onDelText(item, index)"></i>
                </div>
              </template>
              <div class="msg_sender_wrp" style="width:100%;">
                <div>
                  <i class="el-icon-circle-plus-outline" @click="onAddContent"></i>
                </div>
                <el-dialog
                  width="50%"
                  :title="title"
                  :visible.sync="showType"
                  :close-on-click-modal="false"
                  :close-on-press-escape="false"
                  :show-close="false"
                  append-to-body>
                  <div>
                    <el-tabs v-if="showType" v-model="type" type="card">
                      <el-tab-pane label="文字" name="text"></el-tab-pane>
                      <el-tab-pane label="图片" name="image"></el-tab-pane>
                      <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文消息" name="news"></el-tab-pane>
                      <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文链接" name="news-item"></el-tab-pane>
                      <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="语音" name="voice"></el-tab-pane>
                      <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="视频" name="video"></el-tab-pane>
                      <el-tab-pane label="链接" name="link"></el-tab-pane>
                    </el-tabs>
                    <div v-if="showType" class="more-info clear-both">
                      <template v-if="type=== 'text'">
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 4, maxRows: 8}"
                          placeholder="请输入内容"
                          v-model="content">
                        </el-input>
                        <div style="float:left;">
                          <el-popover
                            placement="bottom-end"
                            width="400"
                            :offset="10"
                            trigger="hover"
                            v-model="showEmotion">
                            <div>
                              <emotion @emotion="handleEmotion" :height="200"></emotion>
                            </div>
                            <el-button @click="showEmotion = !showEmotion" slot="reference" type="text">
                              <span class="icon_emotion emotion_switch" ></span>
                            </el-button>
                          </el-popover>
                          <el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherName" type="warning" plain style="margin-top: 10px;">添加老师名字</el-button>
                          <el-button v-if="form.key !== 'mini_keywords_reply'" @click="addTeacherAlias" type="success" plain style="margin-top: 10px;">添加老师别名</el-button>
                        </div>
                      </template>
                      <template v-if="type==='image'">
                        <div v-if="imageContent.url && form.key !== 'mini_keywords_reply'" class="img">
                          <img :src="imageContent.url"/>
                          <i class="el-icon-delete" @click="imageContent={url:'',media_id:''}"></i>
                        </div>
                        <div v-if="imageContent.variable && form.key !== 'mini_keywords_reply'" class="img my-teacher">
                          <div>老师二维码</div>
                          <i class="el-icon-delete" @click="imageContent={url:'',media_id:'',variable:''}"></i>
                        </div>
                        <div class="display-b" v-if="form.key !== 'mini_keywords_reply'">
                          <div class="choose_item" style="color: #888;" @click="getMediaList('image')">+从素材库中选择</div>
                          <div class="choose_item" style="color: #888;" @click="addTeacherQrcode">+添加老师二维码</div>
                        </div>
                        <el-upload
                          v-if="form.key === 'mini_keywords_reply'"
                          action="/api/public/upload/zone"
                          :http-request="uploadFile"
                          :class="{disabled:!uploadShow}"
                          :before-upload="beforeAvatarUpload"
                          list-type="picture-card"
                          :file-list="imageList"
                          :on-success="handleAvatarSuccess"
                          :on-remove="handleRemove"
                          :limit="1">
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <div v-if="showMedia && mediaList.length > 0">
                          <el-table
                            :data="mediaList"
                            @row-click="onChooseMedia"
                            style="width: 100%">
                            <el-table-column
                              prop="name"
                              label="名称">
                            </el-table-column>
                            <el-table-column
                              prop="media_id"
                              label="mediaId">
                            </el-table-column>
                            <el-table-column
                              label="URL">
                              <template slot-scope="scope">
                                <a :href="scope.row.url">
                                  <img style="width: 60px;" :src="scope.row.url"/>
                                </a>
                              </template>
                            </el-table-column>
                          </el-table>
                          <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
                        </div>
                      </template>
                      <template v-if="type==='video'">
                        <div v-if="videoContent && videoContent.info && videoContent.info.down_url">
                          <a :href="videoContent.info.down_url" target="_blank">{{videoContent.info.title}}</a>
                          <i class="el-icon-delete" @click="videoContent=''"></i>
                        </div>
                        <div class="display-b">
                          <div class="choose_item" style="color: #888;" @click="getMediaList('video')">+从素材库中选择</div>
                        </div>
                        <div v-if="showMedia && mediaList.length > 0">
                          <el-table
                            :data="mediaList"
                            @row-click="onChooseMedia"
                            style="width: 100%">
                            <el-table-column
                              prop="name"
                              label="名称">
                            </el-table-column>
                            <el-table-column
                              prop="media_id"
                              label="mediaId">
                            </el-table-column>
                            <el-table-column
                              label="URL">
                              <template slot-scope="scope">
                                <a :href="scope.row.info.down_url" target="_blank" v-if="scope.row.info && scope.row.info.down_url">
                                  {{scope.row.info.title}}
                                </a>
                              </template>
                            </el-table-column>
                          </el-table>
                          <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
                        </div>
                      </template>
                      <template v-if="type==='voice'">
                        <div v-if="voiceContent && voiceContent.info && voiceContent.info.down_url">
                          <a :href="voiceContent.info.down_url" target="_blank">{{voiceContent.info.title}}</a>
                          <i class="el-icon-delete" @click="voiceContent=''"></i>
                        </div>
                        <div class="display-b">
                          <div class="choose_item" style="color: #888;" @click="getMediaList('voice')">+从素材库中选择</div>
                        </div>
                        <div v-if="showMedia && mediaList.length > 0">
                          <el-table
                            :data="mediaList"
                            @row-click="onChooseMedia"
                            style="width: 100%">
                            <el-table-column
                              prop="name"
                              label="名称">
                            </el-table-column>
                            <el-table-column
                              prop="media_id"
                              label="mediaId">
                            </el-table-column>
                            <el-table-column
                              label="URL">
                              <template slot-scope="scope">
                                <a v-if="scope.row.info && scope.row.info.down_url" :href="scope.row.info.down_url" target="_blank">
                                  {{scope.row.info.title}}
                                </a>
                              </template>
                            </el-table-column>
                          </el-table>
                          <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
                        </div>
                      </template>
                      <template v-if="type==='news'">
                        <div v-if="newsContent && newsContent.content && newsContent.content.news_item">
                          <div class="news-media" style="display: inline-block">
                            <el-card :body-style="{ padding: '0px' }">
                              <div v-for="(child, childIndex) in newsContent.content.news_item" style="position: relative">
                                <div v-if="newsContent.content.news_item.length === 1" class="single-cover">
                                  <div class="title">{{child.title}}</div>
                                  <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
                                  <div class="digest">{{child.digest}}</div>
                                  <a class="preview" :href="child.url" target="_blank">
                                    预览文章
                                  </a>
                                </div>
                                <div v-else-if="newsContent.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
                                  <div v-if="childIndex === 0" class="muti-cover">
                                    <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
                                    <div class="bottom-title">{{child.title}}</div>
                                  </div>
                                  <div class="next-cover clear-both" v-else>
                                    <span class="next-title">{{child.title}}</span>
                                    <img class="next-img" :src="child.thumb_url"/>
                                  </div>
                                  <a class="preview" :href="child.url" target="_blank">
                                    预览文章
                                  </a>
                                </div>
                              </div>
                            </el-card>
                          </div>
                            <i class="el-icon-delete" @click="newsContent=''" style="display: inline-block"></i>
                        </div>
                        <div class="display-b">
                          <div class="choose_item" style="color: #888;" @click="getMediaList('news')">+从素材库中选择</div>
                        </div>
                        <div v-if="showMedia && mediaList.length > 0">
                          <el-table
                            :data="mediaList"
                            @row-click="onChooseMedia"
                            style="width: 100%">
                            <el-table-column
                              prop="media_id"
                              label="mediaId">
                            </el-table-column>
                            <el-table-column
                              label="URL">
                              <template slot-scope="scope">
                                <div class="news-media" style="display: inline-block;width: 200px;" v-if="scope.row.content && scope.row.content.news_item">
                                  <div v-for="(child, childIndex) in scope.row.content.news_item" style="position: relative">
                                    <div v-if="scope.row.content.news_item.length === 1" class="single-cover">
                                      <div class="title">{{child.title}}</div>
                                      <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
                                      <div class="digest">{{child.digest}}</div>
                                      <a class="preview" :href="child.url" target="_blank">
                                        预览文章
                                      </a>
                                    </div>
                                    <div v-else-if="scope.row.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
                                      <div v-if="childIndex === 0" class="muti-cover">
                                        <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
                                        <div class="bottom-title">{{child.title}}</div>
                                      </div>
                                      <div class="next-cover clear-both" v-else>
                                        <span class="next-title">{{child.title}}</span>
                                        <img class="next-img" :src="child.thumb_url"/>
                                      </div>
                                      <a class="preview" :href="child.url" target="_blank">
                                        预览文章
                                      </a>
                                    </div>
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>
                          <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
                        </div>
                      </template>
                      <template v-if="type==='link' || type==='news-item'">
                        <el-form-item label="标题">
                          <el-input v-model="linkContent.title"></el-input>
                        </el-form-item>
                        <el-form-item label="描述">
                          <el-input v-model="linkContent.description"></el-input>
                        </el-form-item>
                        <el-form-item label="跳转链接">
                          <el-input v-model="linkContent.url"></el-input>
                        </el-form-item>
                        <el-form-item label="缩略图">
                          <el-upload
                            action="/api/public/upload/zone"
                            :http-request="uploadFile"
                            :class="{disabled:!uploadLinkShow}"
                            :before-upload="beforeAvatarUpload"
                            list-type="picture-card"
                            :file-list="imageLinkList"
                            :on-success="handleAvatarSuccess"
                            :on-remove="handleRemove"
                            :limit="1">
                            <i class="el-icon-plus"></i>
                          </el-upload>
                        </el-form-item>
                      </template>
                      <div class="tool_bar">
                        <el-button @click="close">取 消</el-button>
                        <el-button class="weui-desktop-btn weui-desktop-btn_primary el-button--primary" @click="confirm">确定</el-button>
                      </div>
                    </div>
                  </div>
                </el-dialog>
              </div>
            </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>
  </div>

</template>

<script>
  import {updateConfigApi,saveConfigApi,getMediaListApi,getTeacherListApi,uploadFileApi} from "../../service/api";
  import page from '../framework/page'
  import emotion from '../framework/Emotion/index'
  export default {
    name: "dialogObj",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        editIndex: -1,
        title: '',
        show:false,
        showEmotion: false,
        id: '',
        loading:true,
        showType: false,
        showTextContent: false,
        total:0,
        nowPage:1,
        limit: 5,
        type:'text',
        form:{
          key:'keywords_reply',
          value:'',
          desc:''
        },
        teacher_id: '',
        start_at: '',
        textContent: '',
        mediaList:  [],
        showMedia: false,
        teacherList: [],
        content: '',
        imageContent: {
          url: '',
          media_id: ''
        },
        linkContent: {
          title: '',
          description: '',
          url: '',
          thumb_url: ''
        },
        voiceContent:'',
        videoContent: '',
        newsContent: '',
        pickerOptions1: {
          disabledDate(time) {
            return !(time.getTime() > Date.now());
          }
        },
        rules:{
          value:[
            { required: true, message: '请输入规则名称', trigger: 'change' }
          ],
          desc:[
            { required: true, message: '请输入回复内容', trigger: 'change' }
          ],
          qr:[
            { required: true, message: '请输入二维码', trigger: 'change' }
          ]
        },
        imageList: [],
        imageLinkList: [],
        uploadShow: true,
        uploadLinkShow: true
      }
    },
    components:{
      page,
      emotion
    },
    methods:{
      getTeacher(){
        getTeacherListApi({page: 1, limit: 1000}).then(res=>{
          this.teacherList = res.list
        })
      },
      save(){
        let json = {
          key:this.form.key,
          value:this.form.value,
          desc:this.form.desc
        }
        if(this.dialogObj.id){
          this.$refs['form'].validate((valid) => {
            if(valid){
              updateConfigApi(this.id,json).then(res=>{
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.$emit("reflash");
                this.show = false;
              })
            }
          });
        }else{
          this.$refs['form'].validate((valid) => {
            if(valid){
              saveConfigApi(json).then(res=>{
                this.$message({
                  type: 'success',
                  message: '新增成功!'
                });
                this.$emit("reflash");
                this.show = false;
              })
            }
          });
        }
      },
      addContent(type, content, mediaId, my_teacher) {
        let _form = this.form;
        let _desc = _form.desc ? JSON.parse(_form.desc) : [];
        let obj = {
            type: type
        };
        if (content) {
            obj.content = content
        }
        if (mediaId) {
            obj.media_id = mediaId;
        }
        if (my_teacher) {
          obj.variable = my_teacher
        }
        if (this.editIndex > -1) {
          _desc.splice(this.editIndex,1,obj);
        } else {
          _desc.push(obj);
        }
        _form.desc = JSON.stringify(_desc);
        this.form = _form;
        this.showType = false;
      },
      addLinkContent(type, title, description, url,thumb_url) {
        let _form = this.form;
        let _desc = _form.desc ? JSON.parse(_form.desc) : [];
        let obj = {
          type: type,
          title: title,
          description: description,
          url: url,
          thumb_url: thumb_url
        };
        if (this.editIndex > -1) {
          _desc.splice(this.editIndex,1,obj);
        } else {
          _desc.push(obj);
        }
        _form.desc = JSON.stringify(_desc);
        this.form = _form;
        this.showType = false;
      },
      initDialog(){
        this.show = this.dialogObj.show;
        if (this.dialogObj.id) {
          this.id = this.dialogObj.id;
        }
        this.form.value = this.dialogObj.value;
        this.form.desc = this.dialogObj.desc;
        if (this.dialogObj.key) {
          this.form.key = this.dialogObj.key
        }
        this.loading = false;
        this.showType = false;
      },
      onPageChange(val){
        this.nowPage = val
        this.getMediaList(this.type)
      },
      onSizeChange(val){
        this.nowPage = 1
        this.limit = val
        this.getMediaList(this.type)
      },
      onChangeTab(type){
          this.type = type;
      },
      onAddContent(){
        this.editIndex = -1;
        this.title = '添加回复';
        this.content='';
        this.voiceContent = '';
        this.videoContent = '';
        this.type = 'text';
        this.imageContent = {
          url: '',
          media_id: '',
          variable: ''
        };
        this.linkContent = {
          title: '',
          description: '',
          url: '',
          thumb_url: ''
        };
        this.imageList = [];
        this.imageLinkList = [];
        this.teacher_id = '';
        this.start_at = '';
        this.showType = true;
        this.uploadShow = true;
        this.uploadLinkShow = true;
      },
      onEditText(item, index) {
        this.title = '编辑回复';
        this.type = item.type;
        this.editIndex = index;
        if (this.type === 'text') {
          this.content=item.content;
        } else if (this.type === 'link' || this.type === 'news-item') {
            this.linkContent = {
              url: item.url,
              title : item.title,
              description: item.description,
              thumb_url: item.thumb_url
            };
            this.imageLinkList = [{name:'mini',url:item.thumb_url}];
            this.uploadLinkShow = false;
        } else {
            if(item.content) {
              this.imageContent = {
                url: item.content,
                media_id: item.media_id
              };
            }
            if (item.variable) {
              this.imageContent = {
                variable: item.variable
              };
            }
            if(this.type === 'image' && this.form.key === 'mini_keywords_reply') {
                this.imageList = [{name:'mini',url:item.content}]
                this.uploadShow = false;
            }
        }
        this.showType = true;
      },
      close(){
        this.content='';
        this.imageContent = {
          url: '',
          media_id: ''
        };
        this.teacher_id = '';
        this.start_at = '';
        this.linkContent = {
          url: '',
          title : '',
          description: '',
          thumb_url: ''
        };
        this.showType = false;
      },
      confirm(){
        if(this.type === 'text') {
          if(!this.content){
            this.$message({
              showClose: true,
              message: '请输入文本内容'
            });
          } else {
            this.addContent('text', this.content, '','');
          }
        } else if (this.type === 'image') {
          if (!this.imageContent.url && !this.imageContent.variable) {
            this.$message({
              showClose: true,
              message: '请选择图片'
            });
          } else {
            let _myTeacher = this.imageContent.variable ? this.imageContent.variable : '';
            let _url = this.imageContent.url ? this.imageContent.url : '';
            let _mediaId = this.imageContent.media_id ? this.imageContent.media_id : '';
            this.addContent(this.type, _url, _mediaId,_myTeacher);
          }
        } else if (this.type === 'link' || this.type === 'news-item'){
          if (!this.linkContent.title) {
            this.$message({
              showClose: true,
              message: '请输入标题'
            });
            return;
          }
          if (!this.linkContent.description) {
            this.$message({
              showClose: true,
              message: '请输入描述'
            });
            return;
          }
          if (!this.linkContent.url) {
            this.$message({
              showClose: true,
              message: '请输入跳转链接'
            });
            return;
          }
          if (!this.linkContent.thumb_url) {
            this.$message({
              showClose: true,
              message: '请上传缩略图'
            });
            return;
          }
          this.addLinkContent(this.type, this.linkContent.title, this.linkContent.description, this.linkContent.url,this.linkContent.thumb_url);
        } else if (this.type === 'news') {
          if (!this.newsContent) {
            this.$message({
              showClose: true,
              message: '请选择图文'
            });
          } else {
            let _url = this.newsContent.content ? this.newsContent.content : '';
            let _mediaId = this.newsContent.media_id ? this.newsContent.media_id : '';
            this.addContent(this.type, _url, _mediaId,'');
          }
        }else if (this.type === 'video') {
          if (!this.videoContent) {
            this.$message({
              showClose: true,
              message: '请选择视频'
            });
          } else {
            let _url = this.videoContent.info ? this.videoContent.info : '';
            let _mediaId = this.videoContent.media_id ? this.videoContent.media_id : '';
            this.addContent(this.type, _url, _mediaId,'');
          }
        }
      },
      getMediaList(type){
        let json = {
          type: type,
          page: this.nowPage,
          limit: this.limit
        };
        this.loading = true;
        this.showMedia = true;
        getMediaListApi(json).then(res=>{
          this.loading = false;
          this.type = type;
          this.mediaList = res.item;
          this.total = res.total_count;
          if (this.total === 0 ) {
            this.$message({
              showClose: true,
              message: '暂无数据'
            });
          }
        }).catch(() => {
          this.loading = false;
        })
      },
      editContent() {
        this.$prompt('请输入文本', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({value}) => {
          this.addContent('text', value, '','');
        })
      },
      onDelText(item, index) {
        let _form = this.form;
        this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _desc = JSON.parse(_form.desc);
          _desc.splice(index,1);
          _form.desc = JSON.stringify(_desc);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.form = _form;
      },
      onChooseMedia(val){
        if (this.type === 'image') {
          this.imageContent = val
        } else if (this.type === 'video'){
          this.videoContent = val
        } else if (this.type === 'voice'){
          this.voiceContent = val
        } else if (this.type === 'news'){
          this.newsContent = val
        }
        this.showMedia = false;
      },
      addTeacherQrcode(){
        this.showMedia = false;
        this.imageContent = {
          variable:'my_teacher'
        }
      },
      handleEmotion (i) {
        this.content += i
      },
      addTeacherName(){
        this.content += '{my_teacher_name}'
      },
      addTeacherAlias(){
        this.content += '{my_teacher_alias}'
      },
      handleAvatarSuccess(res) {
        if (this.type === 'link' || this.type === 'news-item') {
          this.imageLinkList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
        } else {
          this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
        }
      },
      beforeAvatarUpload(){
        if (this.type === 'link' || this.type === 'news-item') {
          this.uploadLinkShow = false
        } else {
          this.uploadShow = false
        }
      },
      uploadFile(a) {
        this.loading = true;
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        if (this.type === 'link' || this.type === 'news-item') {
          uploadFileApi({file:a.file,type:'local'}).then(res=>{
            this.imageLinkList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
            this.loading = false;
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.linkContent.thumb_url = process.env.IMAGE_URL_HEAD + res.url;
          }).catch(()=>{
            this.loading = false;
          })
        } else {
          uploadFileApi({file:a.file,type:'mini'}).then(res=>{
            this.uploadFileToQiniu(a, res);
            this.loading = false;
          }).catch(()=>{
            this.loading = false;
          })
        }
      },
      uploadFileToQiniu(a, data) {
        this.loading = true;
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
          this.loading = false;
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
          this.imageContent = {
            url: process.env.IMAGE_URL_HEAD + res.url,
            media_id: data.media_id,
            name: res.url
          }
        }).catch(()=>{
          this.loading = false;
        })
      },
      handleRemove(){
        if (this.type === 'link' || this.type === 'news-item') {
          this.uploadLinkShow = true
        } else {
          this.uploadShow = true
        }
      }
    },
    watch:{
      dialogObj:{
        handler: function () {
          this.loading = true;
          this.initDialog();
          this.getTeacher();
        },
        deep: true
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .emotion_switch {
    float: left;
    height: 28px;
    line-height: 999em;
    overflow: hidden;
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/reply/images/icon_emotion_switch.png) no-repeat 0 0;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
  }
  .msg-item {
    margin: 30px 0;
    width: 600px;
    img {
      width: 30%;
    }
  }
  .msg-text {
    margin-right: 20px;
  }
  .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;*/
    /*height: 48px;*/
    /*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;
  }
  .more-info {

  }
  .img {
    position: relative;
    width: 25%;
    img {
      width: 100%;
    }
    .el-icon-delete {
      position: absolute;
      top: 50%;
      left: 50%;
      display: none;
    }
  }
  .img:hover img{
    opacity: 0.3;
  }
  .img:hover .el-icon-delete{
    display: block;
  }
  .tool_bar {
    float: right;
    margin-top: 20px;
  }
  .choose_item {
    margin-bottom: 25px;
    color: rgb(136, 136, 136);
    height: 80px;
    line-height: 80px;
    width: 45%;
    border: 1px dashed;
    text-align: center;
  }
  .display-b {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .my-teacher {
    width: 25%;
    height: 80px;
    background-color: #eee;
    line-height: 80px;
    text-align: center;
    margin-bottom: 10px;
  }
  .news-media {
    padding: 10px;
    width: 25%;
  }
  .news-media img{
    width: 100%;
  }
  .s-news img {
    width: 50px;
    float: right;
  }
  .title {
    font-size: 16px;
    font-weight: 400;
    display: block;
    line-height: 1.2;
    color: #353535;
  }
  .digest {
    padding-top: 12px;
    color: #9A9A9A;
    font-size: 14px;
  }
  .single-cover {
    /*padding: 20px 15px 15px;*/
  }
  .muti-cover {
    position: relative;
    padding: 20px 15px 0 15px;
  }
  .bottom-title {
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.55);
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    padding: 8px 12px;
  }
  .next-cover {
    padding: 12px 15px;
    position: relative;
  }
  .next-img {
    float: right;
    margin-left: 12px;
    width: 60px !important;
    height: 60px !important;
  }
  .next-title {
    overflow: hidden;
    font-weight: 400;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    color: #353535;
  }
  .single-cover:hover .preview,.bottomCover:hover .preview{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .preview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    text-decoration: none;
  }
  .f-bt {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
  }
  .ellip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<style>
  .disabled .el-upload--picture-card {
    display: none !important;
  }
</style>
