<template>
  <el-dialog
    :title="title"
    width="800px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    :visible.sync="newObj.show">
    <el-form label-width="100px">
      <el-form-item label="名称">
        <el-input v-model="form.title" :disabled="newObj.readFlag"/>
      </el-form-item>

      <el-form-item label="推广码">
        <el-input v-model="form.invite_code" :disabled="newObj.readFlag || newObj.editFlag">
          <template slot="prepend">CC-SOURCE-</template>
        </el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="请选择" :disabled="newObj.readFlag">
          <el-option v-for="item in statusOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二维码类型">
        <el-switch
          :disabled="newObj.readFlag || newObj.editFlag"
          v-model="form.type"
          :active-value="1"
          :inactive-value="2"
          active-text="永久"
          inactive-text="临时">
        </el-switch>
        <span v-if="form.type === 2" style="font-size: 12px;color: #888">
          （最多持续一个月）
        </span>
        <span v-if="form.type === 1" style="font-size: 12px;color: #888">
          （永久二维码最多10万个）
        </span>
      </el-form-item>
      <el-form-item label="结束时间" v-if="form.type === 2">
        <el-date-picker
          :disabled="newObj.readFlag || newObj.editFlag"
          v-model="form.end_at"
          type="datetime"
          :picker-options="pickerOptions1"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="自动回复" name="autoReply">
          <el-button @click="addNew" style="float: right" v-if="!newObj.readFlag">添加＋</el-button>
          <el-table
            :data="list"
            style="width: 100%;"
            max-height="800">
            <el-table-column
              fixed
              label="类型"
              width="150">
              <template slot-scope="scope">
                {{scope.row.type | typeFilter}}
              </template>
            </el-table-column>
            <el-table-column
              label="内容">
              <template slot-scope="scope">
                <div v-if="scope.row.type === 'text'" v-html="scope.row.content.replace(/\/[\u4E00-\u9FA5]{1,3}/gi, emotion)"></div>
                <a v-else-if="scope.row.type === 'image' && scope.row.content"  :href="scope.row.content" target="_blank">
                  <img class="shotcut" :src="scope.row.content">
                </a>
                <div v-else-if="scope.row.type === 'video'">
                  <a :href="scope.row.content.down_url" target="_blank">{{scope.row.content.title}}</a>
                </div>
                <div v-else-if="scope.row.type === 'voice'">
                  {{scope.row.content.name}}
                </div>
                <div v-else-if="scope.row.type === 'voice'">
                  <a :href="scope.row.content.down_url" target="_blank">{{scope.row.content.title}}</a>
                </div>
                <div v-else-if="scope.row.type === 'news'">
                  <div class="news-media">
                    <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>
                </div>
                <div v-else-if="scope.row.type === 'link'" class="news-media" style="display: inline-block;width: 150px;">
                  <el-card :body-style="{ padding: '0px' }">
                    <a :href="scope.row.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
                      <div style="margin: 3px;line-height: 2" class="ellip">{{scope.row.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%;">{{scope.row.description}}</div>
                        <img :src="scope.row.thumb_url" style="width: 35%; height: auto"/>
                      </div>
                    </a>
                  </el-card>
                </div>
                <div v-else-if="scope.row.type === 'news-item'" class="news-media" style="width: 150px;">
                  <el-card :body-style="{ padding: '0px' }">
                    <a :href="scope.row.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
                      <img :src="scope.row.thumb_url" style="width: 100%; height: auto"/>
                      <div style="margin: 3px;line-height: 2" class="ellip">{{scope.row.title}}</div>
                      <div style="color: #666;width: 63%;word-break: break-all;word-wrap: break-word;line-height: 1;">{{scope.row.description}}</div>
                    </a>
                  </el-card>
                </div>

              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              v-if="!newObj.readFlag && !$store.state.readonly"
              width="200">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="editRow(scope.$index, list)"
                  type="text"
                  size="small">
                  编辑
                </el-button>
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, list)"
                  v-if="$store.state.deletePermission"
                  type="text"
                  size="small">
                  移除
                </el-button>
                    <i class="iconfont icon-shangyi"  @click="upIndex(scope.$index, list)" v-if="!$store.state.readonly" style="cursor: pointer;color: #409EFF;margin-left:10px;"></i>
                    <i class="iconfont icon-xiayi"  @click="downIndex(scope.$index, list)" v-if="!$store.state.readonly"  style="cursor: pointer;color: #409EFF;"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="onCancel" v-if="!newObj.readFlag">取 消</el-button>
        <el-button type="primary" @click="onSave" v-if="!newObj.readFlag">确 定</el-button>
      <el-button type="primary" @click="onCancel" v-if="newObj.readFlag">确 定</el-button>
      </span>
    <dialog-com v-if="dialogObj.show" :dialogObj="dialogObj" @changeShow="changeShow" @reflash = "getReplyList"/>
  </el-dialog>
</template>

<script>
  import {createQrCodeApi,updateQrCodeApi} from "../../service/api";
  import dialogCom from './focusReplyDialog'
  export default {
    props:[
      'newObj'
    ],
    components:{
      dialogCom
    },
    filters: {
      typeFilter(value){
        if(!value) return '';
        if(value === 'text') {
          return '文字'
        } else if(value === 'image') {
          return '图片'
        } else if(value === 'news'){
          return '图文'
        } else if(value === 'video'){
          return '视频'
        } else if(value === 'voice'){
          return '语音'
        } else if(value === 'link'){
          return '链接'
        } else if(value === 'news-item'){
          return '图文链接'
        } else {
          return val
        }
      }
    },
    data(){
      return {
        title: '新建二维码',
        activeName: 'autoReply',
        form:{
          title:null,
          type:2,
          invite_code:null,
          status:0,
          end_at:null,
          id: null
        },
        dialogObj: {
          show:false,
          index: -1,
          list: []
        },
        list: [],
        pickerOptions1: {
          disabledDate(time) {
            let date = new Date();
            let nextDate = new Date(date.getFullYear(),date.getMonth()+1,date.getDate());
            let ret = !(time.getTime() > date.getTime()) || !(time.getTime() < nextDate.getTime());
            return ret;
          }
        },
        typeOption:[
          {
            label:'临时',
            value:2
          },{
            label:'永久',
            value:1
          },
        ],
        statusOption:[
          {
            label:'正常',
            value:0
          },{
            label:'禁用',
            value:1
          },
        ],
      }
    },
    // mounted(){
    //   this.initDialog();
    // },
    watch:{
      'newObj.show'(value){
        if(value){
          this.initDialog();
        }
      }
    },
    methods:{
      allowEdit(){

      },
      initDialog(){
        let _newObj = this.newObj;
        this.form = {
          title: _newObj.title,
          type:_newObj.type,
          invite_code:_newObj.invite_code,
          status:_newObj.status,
          end_at:_newObj.end_at,
          id: _newObj.id
        }
        this.list = _newObj.list ? _newObj.list : [];
        if(_newObj.readFlag){
            this.title="查看二维码详情"
        }
        if(_newObj.editFlag){
          this.title="编辑二维码详情"
        }
        if(!_newObj.readFlag && !_newObj.editFlag) {
          this.title="新建二维码"
        }
      },
      emotion (res) {
        let word = res.replace(/\//gi,'')
        const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
        let index = list.indexOf(word)
        return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
      },
      onSave(){
        let json = {
          title:this.form.title,
          type:this.form.type,
          invite_code:'CC-SOURCE-' + this.form.invite_code,
          status:this.form.status,
          end_at:this.form.end_at
        };
        if(this.list.length > 0) {
            json.auto_reply = JSON.stringify(this.list)
        }
        if(this.form.id){
          updateQrCodeApi(this.form.id, json).then(res=> {
            this.$message('修改成功');
            this.$emit('initPage');
            this.form = {
              title: null,
              type: 2,
              invite_code: null,
              status: 0,
              end_at: null
            };
            this.newObj.show = false
            this.$emit("changeShow", false);
          })
        } else {
          createQrCodeApi(json).then(res=>{
            this.$message('创建成功');
            this.$emit('initPage');
            this.form={
              title:null,
              type:2,
              invite_code:null,
              status:0,
              end_at:null
            };
            this.newObj.show=false
            this.$emit("changeShow", false);
          })
        }
      },
      changeShow(val){
        this.dialogObj.show = val;
      },
      getReplyList(form){
        if(form.index === -1){
          let _index = this.list.length === 0 ? -1 : this.list.length - 1
          this.list.splice(_index + 1, 0, form.desc)
        } else {
            this.list.splice(form.index,1,form.desc)
        }
      },
      editRow(index, row){
        this.dialogObj = {
          show: true,
          index: index,
          desc: this.list[index],
        }

      },
      addNew(){
        this.dialogObj = {
          show: true,
          index: -1,
          desc: {}
        }
      },
      onCancel(){
        this.newObj.show = false
        this.$emit("changeShow", false);
      },
      deleteRow(index , list){
        this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.list.splice(index,1);
        }).catch(()=>{
          this.$message({
            type: 'success',
            message: '已取消删除!'
          });
        })
      },
      upIndex(index , list){
          if(index>0){
            var tempOption = list[index - 1];
            Vue.set(list, index - 1, list[index]);
            Vue.set(list, index, tempOption);
             this.$message({
            type: 'success',
            message: '操作成功!'
          });
          }
      },
      downIndex(index , list){
           if(index < list.length-1){
            var tempOption = list[index + 1];
            Vue.set(list, index + 1, list[index]);
            Vue.set(list, index, tempOption);
             this.$message({
            type: 'success',
            message: '操作成功!'
          });
          }
      },
    }
  }
</script>

<style scoped>
  .shotcut {
    width: 150px;
  }
  .clear-both:after{
     content: '';
     display: block;
     clear: both;
  }
  .news-media {
    padding: 10px;
    width: 150px;
    background-color: #fff;
  }
  .news-media .el-card{
      padding: 10px;
  }
  .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>