<template>
    <div class="focus-reply">
      <div class="title">自动回复</div>
      <div class="content">
        <div class="inner" v-loading="loading">
          <ul class="weui-desktop-msg-sender__tabs">
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="type = 'text'">文字</li>
            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="type = 'image'">图片</li>
          </ul>
          <div class="inner-bottom">
            <div class="img-action" v-if="type === 'image'">
              <img v-if="imageContent" :src="imageContent.content"/>
              <div class="img-create-access" v-if="!showMedia">
                <a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
              </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.url">
                        <img style="width: 60px;" :src="scope.row.url"/>
                      </a>
                    </template>
                  </el-table-column>
                </el-table>
                <page :total="total" v-model="nowPage"/>
              </div>
            </div>
            <div class="inner-emotion_editor" v-else-if="type === 'text'">
              <div class="inner-edit_area">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8}"
                  placeholder="请输入内容"
                  v-model="content">
                </el-input>
              </div>
            </div>
          </div>
          <div class="tool_bar">
            <button class="weui-desktop-btn weui-desktop-btn_primary" @click="save">保存</button>
            <!--<div class="weui-desktop-popover__wrp">-->
              <!--<span class="weui-desktop-popover__target"><button class="weui-desktop-btn weui-desktop-btn_default">删除回复</button></span>-->
            <!--</div>-->
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi} from "../../service/api";
    import page from '../framework/page'
    export default {
      name: "focusReply",
      data(){
        return{
          loading:false,
          total:0,
          nowPage:1,
          id: null,
          form:{
            key:'focus_reply',
            value:'focus_reply',
            desc:''
          },
          content: '',
          imageContent: '',
          type: 'text',
          mediaList: [],
          mediaListMock:  [
          {
            "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
      },
      mounted(){
        this.getList()
      },
      methods:{
        save(){
          let json = this.form
          let _desc = [];
          if (this.type === 'text') {
            if (!this.content) {
              this.$message({
                showClose: true,
                message: '请输入文本内容'
              });
              return;
            }
            _desc[0] = {
              type : this.type,
              content: this.content
            }
          } else if (this.type === 'image') {
            if (!this.imageContent) {
              this.$message({
                showClose: true,
                message: '请选择图片'
              });
              return
            }
            _desc[0] = this.imageContent
          }
          json.desc = JSON.stringify(_desc)
          if (this.id) {
            updateConfigApi(this.id,json).then(res=>{
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.$emit("reflash");
              this.show = false;
            })
          } else {
            saveConfigApi(json).then(res=>{
              this.$message({
                type: 'success',
                message: '保存成功!'
              });
            })
          }
        },
        getMediaList(type){
          let json = {
            type: type,
            page: this.nowPage
          };
          this.loading = true;
          getMediaListApi(json).then(res=>{
            this.loading = false;
            this.type = type;
            this.total = res.total_count;
            if (res.item.length === 0 ) {
              this.$message({
                showClose: true,
                message: '暂无数据'
              });
              this.showMedia = false;
            } else {
              this.showMedia = true;
              this.mediaList = res.item;
            }
          }).catch(() => {
            this.loading = false;
            this.showMedia = false;
          })
        },
        onChooseMedia(val){
          this.addContent(this.type, val.url, val.media_id);
          this.showMedia = false;
        },
        addContent(type, content, mediaId) {
          let obj = {};
          if (content) {
            obj = {
              type: type,
              content: content
            };
          }
          if (mediaId) {
            obj.media_id = mediaId;
          }
          this.imageContent = obj
        },
        getList(){
          getConfigListApi({key: 'focus_reply'}).then(res => {
            if (res.total > 0) {
              this.id = res.list[0].id;
              let _desc = JSON.parse(res.list[0].desc);
              this.type = _desc[0].type;
              if (this.type === 'text') {
                  this.content = _desc[0].content
              } else if (this.type === 'image') {
                  this.imageContent = {
                    type: 'image',
                    content: _desc[0].content,
                    media_id: _desc[0].media_id
                  }
              }
              console.log('this.type', _desc)
            }
          })
        },
      }
    }
</script>

<style scoped>
  .focus-reply {
    padding: 30px;
  }
  ul, ol {
    padding-left: 0;
    list-style-type: none;
  }
  .title {
    color: #353535;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }
  .content {
    padding-top: 40px;
    margin-top: 24px;
    border-top: 1px solid #E4E8EB;
  }
  .inner {
    border: 1px solid #E4E8EB;
    background-color: #FFFFFF;
  }
  .inner-bottom {
    border-top: 1px solid #E4E8EB;
  }
  .img-action {
    padding: 17px 20px;
    min-height: 215px;
  }
  .img-create-access {
    position: relative;
    border: 2px dotted #E4E8EB;
    width: 48.6%;
    height: 211px;
    text-align: center;
  }
  .img-create-access:first-child {
    float: left;
  }
  .img-create-access__link {
    display: inline-block;
    vertical-align: middle;
    color: #9A9A9A;
    margin: 0 10px;
    margin-top: 68px;
    text-decoration: none;
  }
 .img-create-access__link:before {
    content: " ";
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 5px;
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/images/icon36_add_gray.png) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tabs {
    line-height: 38px;
    background-color: #FFFFFF;
  }
  .sender__tab_selected {
    color: #44B549;
  }
  .weui-desktop-msg-sender__tab:hover, .weui-desktop-msg-sender__tab_selected {
    color: #44B549;
  }
  .weui-desktop-msg-sender__tab {
    display: inline-block;
    padding: 0 20px;
    cursor: pointer;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_text:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_text:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_text_current.svg);
  }
  .weui-desktop-msg-sender__tab_img:before {
    background: transparent url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img.svg) no-repeat 0 0;
  }
  .weui-desktop-msg-sender__tab:hover.weui-desktop-msg-sender__tab_img:before, .weui-desktop-msg-sender__tab_selected.weui-desktop-msg-sender__tab_img:before {
    background-image: url(https://res.wx.qq.com/mpres/en_US/htmledition/pages/modules/msg_sender/svg/default/sender_img_current.svg);
  }
  .weui-desktop-msg-sender__tab:before {
    content: " ";
    display: inline-block;
    width: 22px;
    height: 20px;
    vertical-align: middle;
    margin: -0.2em 5px 0 0;
  }
  .tool_bar {
    padding-top: 0;
    padding-bottom: 50px;
    margin-top: 40px;
    margin-left: 20px;
  }
  .tool_bar > .weui-desktop-btn {
    margin-right: 1em;
  }
  .weui-desktop-btn_primary {
    background-color: #1AAD19;
    border-color: #1AAD19;
    color: #FFFFFF;
  }
  .weui-desktop-btn {
    display: inline-block;
    padding: 0 22px;
    min-width: 54px;
    line-height: 2.42857143;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    box-sizing: content-box;
  }
  .weui-desktop-popover__wrp {
    display: inline;
    position: relative;
    font-size: 14px;
  }
  .weui-desktop-btn_default {
    background-color: #FBFBFB;
    border-color: #E4E8EB;
    color: #353535;
  }
  .inner-emotion_editor {
    margin: 2%;
  }
</style>
