<template>
  <div v-if="show">
    <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>关键词</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">
              <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'" :src="item.content"/>
                  <i v-if="item.type === 'text'" 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">
                <i class="el-icon-circle-plus-outline" @click="showType = true"></i>
                <ul class="weui-desktop-msg-sender__tabs" v-if="showType">
                  <!--<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" @click="getMediaList('news')">图文消息</li>-->
                  <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" @click="editContent()">文字</li>
                  <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" @click="getMediaList('image')">图片</li>
                  <!--<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" @click="getMediaList('voice')">语音</li>-->
                  <!--<li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" @click="getMediaList('video')">视频</li>-->
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <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"/>
        </div>
        <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} from "../../service/api";
  import page from '../framework/page'
  export default {
    name: "dialogObj",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        show:false,
        id: '',
        loading:true,
        showType: false,
        showTextContent: false,
        total:0,
        nowPage:0,
        type:'text',
        form:{
          key:'keywords_reply',
          value:'',
          desc:''
        },
        textContent: '',
        mediaList:  [
//          {
//            "media_id": "hQb3Pbdb4E5Ivxi2sagL5sTdtW5W9pKJNA6Z8nBo6Ao",
//            "name": "xx.jpg",
//            "update_time": 1535351431,
//            "url": "http://mmbiz.qpic.cn/mmbiz_jpg/qNgYSw5sicibUGtiaRYRY9QEZUoqgGdvkTE5Zvg58tUciaAXFslmwuiadgU6turtsF7mXFeicKa9RQTTG1gKSLqPiabpA/0?wx_fmt=jpeg"
//          },
//          {
//            "media_id": "hQb3Pbdb4E5Ivxi2sagL5p2poL7GllXYm4SETNmf210",
//            "name": "z.jpg",
//            "update_time": 1535351316,
//            "url": "http://mmbiz.qpic.cn/mmbiz_jpg/qNgYSw5sicibUGtiaRYRY9QEZUoqgGdvkTE5mTOB0jnmfdH30s54N5FIr2Tsbd9QcBFDiapicYWJ6sCZRMGTIlj179g/0?wx_fmt=jpeg"
//          }
        ],
        showMedia: false,
        rules:{
          value:[
            { required: true, message: '请输入规则名称', trigger: 'change' }
          ],
          desc:[
            { required: true, message: '请输入回复内容', trigger: 'change' }
          ],
          qr:[
            { required: true, message: '请输入二维码', trigger: 'change' }
          ]
        }
      }
    },
    components:{
      page
    },
    methods:{
      save(){
        let json = {}
        console.log('this.form', this.form)
        if(this.dialogObj.id){
          this.$refs['form'].validate((valid) => {
            if(valid){
              json = this.form
              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){
              saveConfigApi(this.form).then(res=>{
                this.$message({
                  type: 'success',
                  message: '新增成功!'
                });
                this.$emit("reflash");
                this.show = false;
              })
            }
          });
        }
      },
      addContent(type, content, mediaId) {
        let _form = this.form;
        let _desc = JSON.parse(_form.desc);
        let obj = {};
        if (content) {
            obj = {
              type: type,
              content: content
            };
        }
        if (mediaId) {
            obj.media_id = mediaId;
        }
        _desc.push(obj);
        _form.desc = JSON.stringify(_desc);
        this.form = _form;
      },
      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;
        this.loading = false;
        this.showType = false;
      },
      getMediaList(type){
        let json = {
          type: type,
          page: this.nowPage
        };
        this.showType = false;
        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, '');
        })
      },
      onEditText(item, index) {
        let _form = this.form;
        this.$prompt('编辑文本', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: item.content
        }).then(({value}) => {
          let newDesc = JSON.parse(_form.desc);
          let _desc = {
            type: 'text',
            content: value
          };
          newDesc.splice(index,1,_desc);
         _form.desc = JSON.stringify(newDesc);
        })
        this.form = _form;
      },
      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){
        this.addContent(this.type, val.url, val.media_id);
        this.showMedia = 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";
  .msg-item {
    margin-bottom: 10px;
  }
  .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;
  }
</style>