<template>
  <div class="app-container">
    <form action="" method="post" enctype="multipart/form-data">
      <div class="wechat-reply-wrapper">
        <div class="ibox-title">
          <p>{{ msg }}</p>
        </div>
        <div class="ibox-content clearfix">
          <el-row :gutter="24">
            <el-col :span="5">
              <div class="view-wrapper col-sm-4">
                <div class="mobile-header">公众号</div>
                <section class="view-body" style="overflow:scroll;">
                  <div class="time-wrapper"><span class="time">9:36</span></div>
                  <div class="view-item text-box clearfix" :class="{show:type=='text'}">
                    <!-- <div class="avatar fl"><img src="../../../assets/wechat/head.gif"></div> -->
                    <div class="box-content fl">
                      <div style="font-weight: bold;">{{template.name}}</div>
                      <!-- <div v-html="contentData "></div> -->
                      <textarea id="" v-model="contentData" name="" cols="30" rows="10" placeholder="" disabled="disabled" />
                      <div class="detail">
                        <!-- <img src="../../../assets/wechat/head.gif"> -->
                        <span>详情</span>
                      </div>
                    </div>
                  </div>

                  <div v-if="dataGroup.news.length >0" class="view-item news-box" :class="{show:type=='news'}">
                    <div v-if="dataGroup.news.length ==1" class="vn-content">
                      <div class="vn-title">{{ dataGroup.news[0].title }}</div>
                      <div class="vn-time">{{ dataGroup.news[0].date }}</div>
                      <div class="vn-picture" :style="{backgroundImage: 'url('+dataGroup.news[0].image+')'}" />
                      <div class="vn-picture-info">{{ dataGroup.news[0].description }}</div>
                      <div class="vn-more">
                        <a :href="dataGroup.news[0].url">阅读原文</a>
                      </div>
                    </div>
                    <div v-else class="vn-content">
                      <div class="con-item-box">
                        <div class="vn-picture" :style="{backgroundImage: 'url('+dataGroup.news[0].image+')'}" />
                        <div class="first-title">{{ dataGroup.news[0].title }}</div>
                      </div>
                      <div v-for="(newinfos,index) in dataGroup.news" v-if="index>0" class="con-item-list clearfix">
                        <div class="list-tit-info fl">{{ newinfos.title }}</div>
                        <div class="list-pic fr" :style="{backgroundImage: 'url('+newinfos.image+')'}" />
                      </div>
                    </div>
                  </div>

                  <div class="view-item text-box clearfix" :class="{show:type=='image'}">
                    <div class="avatar fl"><img src="../../../assets/wechat/head.gif"></div>
                    <div class="box-content fl">
                      <img class="picbox" :src="dataGroup.image.src" alt="">
                    </div>
                  </div>

                </section>
              </div>
            </el-col>
            <!-- <el-col :span="19">
              </el-col> -->
            <div class="km"  v-show="kmTrue">
              <div class="km_title">科目选择:</div>
              <div class="km_list">
                <el-cascader
                  placeholder="科目筛选"
                  v-model="kmvul"
                  :options="options"
                  :props='{
               value: "AppID",
               label: "Name",
               children: "Childs",
               multiple: true
               // checkStrictly: true
               }'
                  collapse-tags
                  clearable
                  ref="refSubCat"
                  @active-item-change="onClike"
                  @change="handleSubCat"
                  size="small"
                ></el-cascader>

              </div>
              <div style="text-align: center;"><button type="button" class="el-button el-button--primary" @click="synKsbClass2" style="margin-left: 30px;width: 80px;height:30px;display: flex;align-items: center;justify-content: center;background: #000000;border: none">同步</button></div>
            </div>

            <div class="yhqt">
              <div class="yhqt_left">
                <div class="yhqt_left_title">用户群体:</div>
                <div class="yhqt_left_list">
                  <el-select v-model="group" clearable placeholder="请选择" class="filter-item" style="width: 230px"
                             value-key="name" @change="onGroup">
                    <el-option v-for="(item,index) in groupData" :key="item.id" :label="item.name" :value="item.value" />
                  </el-select>
                </div>

              </div>
              <div class="yhqt_right" v-show="groupTrue">
                <el-cascader
                  placeholder="班次"
                  v-model="kmvul2"
                  :options="options2"
                  :props='{
                 value: "val",
                label: "key",
                children: "Childs",
                multiple: true
                // checkStrictly: true
                }'
                  collapse-tags
                  clearable
                  ref="refSubCat"
                  @active-item-change="onClike"
                  @change="handleSubCat2"
                  size="small"
                ></el-cascader>
              </div>
            </div>

            <el-col :span="19" style="margin-top: 20px;">
              <div class="control-wrapper col-sm-8">
                <section>

                  <!-- <div class="control-title">{{ msg }}</div> -->
                  <div class="control-body">
                    <div class="form-group clearfix">
                      <el-row :gutter="20">
                        <el-col :span="6">
                          <label class="col-sm-2 control-label tips" for="">关联小工具</label>
                        </el-col>
                        <el-col :span="16">
                          <el-radio-group v-model="status">
                            <el-radio :label="3">不关联</el-radio>
                            <el-radio :label="1">考试宝典小程序</el-radio>
                            <el-radio :label="0">活动链接（h5)</el-radio>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                    </div>

                    <div class="form-group clearfix" v-if="status==0">
                      <el-row :gutter="20">
                        <el-col :span="4">
                          <label for="" class="col-sm-2 control-label tips" style="width: 80px; height: 32px;line-height: 32px;">跳转H5链接</label>
                        </el-col>
                        <el-col :span="16">

                          <div class="col-sm-9 group-item">
                            <input v-model="H5url" type="text" placeholder="H5链接" style="width: 370px;" class="el-input__inner">
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="form-group clearfix">
                      <el-row :gutter="20">
                        <el-col :span="4">
                          <label class="col-sm-2 tips" for="">活动主题</label>
                        </el-col>
                        <el-col :span="16">
                          <div class="col-sm-10 group-item">
                            <el-select v-model="template" clearable placeholder="请选择推送活动模板" class="filter-item" style="width: 230px"
                                       value-key="id">
                              <el-option v-for="item in result" :key="item.id" :label="item.name" :value="item" />
                              <div class="Loading" v-show="LoadingTrue"> 加载中</div>
                            </el-select>

                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="control-main">
                      <!-- 文字 -->
                      <div class="control-item control-main-txt" :class="{show:type=='text'}">
                        <div class="form-group clearfix">
                          <label class="col-sm-2 tips" for="">活动内容</label>

                          <div class="col-sm-10 group-item" style="border: 1px solid #EEEEEE;">
                            <textarea id="" v-model="template.content" name="" cols="30" rows="10" placeholder="请输入内容" disabled="disabled" />
                            <!-- <textarea id="" v-model="contentData" name="" cols="30" rows="10" placeholder="请输入内容" /> -->
                          </div>
                        </div>
                      </div>
                      <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
                        <div v-for="(val, key, i) in template.keyVal" :key="key" :value="val">

                          <div class="form-group clearfix" >
                            <label for="" class="el-form-item__label" style="width: 80px;">{{key+":"}}</label>
                            <div class="col-sm-9 group-item">
                              <textarea style="border: 1px solid #EEEEEE;height:150px;width:300px;" id="" v-model="template.keyVal[key]" name="" cols="30" rows="10" placeholder=""/>
                              <!-- <input v-model="template.keyVal[key]" type="text" placeholder="菜单名称" style="width: 370px;" class="el-input__inner"> -->
                            </div>
                          </div>

                        </div>
                      </div>
                      <!-- 图片 -->
                      <div class="control-item control-main-picture" :class="{show:type=='image'}">
                        <div class="form-group clearfix">
                          <pic-upload v-model="dataGroup.image.src" style="width: 500px;" />
                        </div>

                      </div>
                    </div>
                  </div>
                  <div style="text-align: center;"><button type="button" class="el-button el-button--primary" @click="submit">发布</button></div>
                </section>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
  var that;
  import checkPermission from '@/utils/permission'
  import initData from '@/mixins/crud'
  import { del, add } from '@/api/yxWechatReply'
  import { getWechatTemplate } from '@/api/yxWechatTemplate'
  import { publishForAll,getAppEName,getCacheAppVnList ,synKsbClass} from '@/api/tblWechatSendTemplateInfo'
  import eForm from './form'
  import picUpload from '@/components/pic-upload'
  import { Message } from 'element-ui'
  import ChildPage from "@/components/boxLabel/subjectBox.vue"; //切换科目
  import {
    getKsbClass,
    getKsbClassInfo
  } from "../../../api/Api.js";

  //  import {
  //    getCacheAppVnList
  //  } from "../../../api/Api.js";
  export default {
    components: { eForm, picUpload ,ChildPage},
    mixins: [initData],
    data() {
      return {
        delLoading: false,
        status: 1,
        msg: '',
        type: 'text',
        textBox: '',
        pic: '',
        key: '',
        dataGroup: {
          text: {
            content: ''
          },
          image: {
            src: ''
          },
          voice: {
            src: ''
          },
          news: []
        },
        uploadColl: function() {
        },
        uploadLink: '',
        H5url: '',
        contentData: '',
        template: {name:'',content: ''},
        keyVal: {},
        result: [{keyVal:{}}],
        LoadingTrue:false,
        //用户群体
        group:'',
        groupData:[{
          value:1,
          name:'全部已购用户'
        },
          {
            value:2,
            name:'全部未购用户'
          },
          {
            value:4,
            name:'部分用户'
          },
          {
            value:3,
            name:'全部已购、未购用户'
          },
          {
            value:5,
            name:'公众号所有用户'
          }
        ],
        //班次
        classes:'',
        classesData:[],
        optionProps: {
          value: "AppID",
          label: "Name",
          children: "Childs",
          multiple: true
          // checkStrictly: true
        },
        options:[],//接口返回数据
        options2:[],//接口返回数据
        kmvul:'',
        kmvul2:'',
        appidArr:[],
        appidArr2:[],
        groupTrue:false,
        kmTrue:true

      }
      //班次
    },
    watch: {
      template: {
        handler(newValue, oldValue) {
          this.contentData = newValue.content.replace(/.DATA/g, "").replace(/{{/g, "").replace(/}}/g, "")
          for(var key in newValue.keyVal){
            this.contentData = this.contentData.replace(key, newValue.keyVal[key])
          }
          console.log(' this.contentData', this.contentData)

        },
        deep: true
      }
    },

    created() {
      this.$nextTick(() => {
        this.init()
      })
    },
    mounted: function() {
      that=this;
      this.key = 'subscribe'
      this.msg = '编辑关注回复'
      this.LoadingTrue=true;
      getWechatTemplate().then(rese => {
        this.result = rese.content
        for (var i = 0; i < this.result.length; i++) {
          this.result[i].keyVal=JSON.parse(this.result[i].keyVal)
        }
        this.LoadingTrue=false;
      })
      //班次
      this.onPricelist();
      this.onGetKsbClass();
    },
    methods: {
      onClike:function(value){
        console.log("2222", value);
      },


      handleSubCat2:function(value){
        console.log("1111", value);
        // 获取value值
        var appids = [];
        if (value.length == 0) {
          this.appidArr2 = "";
        } else {
          for (let index = 0; index < value.length; index++) {


            appids.push(value[index][0]+"_"+value[index][value[index].length - 1]);
          }
        }
        console.log("获取label", appids);
        this.appidArr2 =appids;




      },
      onGroup:function(e){
        if(this.group==5){
          this.kmTrue=false;
        }else {
          this.kmTrue=true;
        }

        if(this.group==4){
          this.groupTrue=true;
        }else{
          this.groupTrue=false;
        }
      },
      handleSubCat:function(value){
        console.log("1111", value);
        // 获取value值
        var appids = [];
        if (value.length == 0) {
          this.appidArr = "";
        } else {
          for (let index = 0; index < value.length; index++) {







            appids.push(value[index][value[index].length - 1]);
          }
        }
        console.log("获取label", appids);
        this.appidArr =appids;

        getCacheAppVnList(this.appidArr).then(rese => {

          this.options2 = rese;


          console.log("获取rese", rese);
//          this.result = rese.content
//          for (var i = 0; i < this.result.length; i++) {
//            this.result[i].keyVal=JSON.parse(this.result[i].keyVal)
//          }
//          this.LoadingTrue=false;
        })

      },
      //切换科目数据
      onGetKsbClass(){
        getAppEName().then((res)=>{
          that.options=res.data;
          console.log('resresresres',res)

        })
      },
      //班次数据
      onPricelist(){
//        let data=`agentCode='857'&appID=1245&groups=[0,1,2,5]`;
//        getCacheAppVnList(data,(res=>{
//          this.classesData=res.data.data;
//          console.log('res',res.data.data)
//
//        }))
      },
      onClasses:function(value){
        console.log('wwwwwww',value)

        // 获取value值
        var classesArray = [];
        if (value.length != 0) {
          for (let index = 0; index < value.length; index++) {
            // classesArray.push(value[index][value[index].length - 1]);
          }
        }

      },
      //切换科目
      getData:function(e){
        console.log('eeeeeeeeeeeeee',e)

      },
      checkPermission,
      beforeInit() {
        this.url = 'api/yxWechatReply'
        const sort = 'id,desc'
        this.params = { page: this.page, size: this.size, sort: sort }
        return true
      },
      subDelete(id) {
        this.delLoading = true
        del(id).then(res => {
          this.delLoading = false
          this.$refs[id].doClose()
          this.dleChangePage()
          this.init()
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
        }).catch(err => {
          this.delLoading = false
          this.$refs[id].doClose()
          console.log(err.response.data.message)
        })
      },
      add() {
        this.isAdd = true
        this.$refs.form.dialog = true
      },
      edit(data) {
        this.isAdd = false
        const _this = this.$refs.form
        _this.form = {
          id: data.id,
          key: data.key,
          type: data.type,
          data: data.data,
          status: data.status,
          hide: data.hide
        }
        _this.dialog = true
      },
      synKsbClass2: function() {
        // let data={sendType:this.group,appid_className:this.appidArr2,appid:this.appidArr,templateid: this.template.id, status: this.status, keyVal: this.template.keyVal, h5url: this.H5url }
        //    console.log('data',data)
        // return

        synKsbClass().then(function(res) {
          Message({ message: '同步成功', type: 'success' })
        }).catch(function(err) {
          // Message({message: err,type: 'error'})
        })

      },
      submit: function() {
        // let data={sendType:this.group,appid_className:this.appidArr2,appid:this.appidArr,templateid: this.template.id, status: this.status, keyVal: this.template.keyVal, h5url: this.H5url }
        //    console.log('data',data)
        // return
        if (!this.check()) return false
        publishForAll({sendType:JSON.stringify(this.group),appid_className:this.appidArr2,appid:this.appidArr,templateid: this.template.id, status: this.status, keyVal: this.template.keyVal, h5url: this.H5url }).then(function(res) {
          Message({ message: '发送成功', type: 'success' })
        }).catch(function(err) {
          // Message({message: err,type: 'error'})
        })
      },
      check: function() {

        if (this.group == '') {

          this.$message({
          message: '用户群体不能为空',
          type: 'warning'
        })
          return
        }
        status

        if (this.template.name == '') {
          this.$message({
          message: '活动主题不能为空',
          type: 'warning'
        })
          return
        }
        if (this.status == 0&&this.H5url == '') {
          this.$message({
            message: '跳转H5链接不能为空',
            type: 'warning'
          })
          return
        }
        return true
      }
    }
  }
</script>

<style scoped>
  .form-control {
    background-color: #FFF;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 6px 12px;
    -webkit-transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s;
    transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s;
    width: 100%;
    font-size: 14px;
  }

  #app .layout-ceiling-main a {
    color: #9ba7b5
  }

  #table-list .mp-header-wrapper h1 {
    padding-left: 15px;
    float: left;
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 20px;
    font-weight: 400;
    color: #464c5b;
  }

  .mp-form .ivu-tree li {
    margin: 0;
  }

  .mp-form .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .mp-form .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .wechat-reply-wrapper .fl {
    float: left;
    margin-left: 10px;
  }

  .wechat-reply-wrapper .fr {
    float: right;
  }

  .wechat-reply-wrapper .clearfix:after {
    content: ".";
    display: block;
    height: 10px;
    visibility: hidden;
    clear: both;
  }

  .wechat-reply-wrapper .ibox-title {
    padding: 0px;
    font-size: 16px;
    border-bottom: 1px solid #e7eaec;
  }

  .wechat-reply-wrapper .ibox-title p {
    border-left: 2px solid #2494f2;
    text-indent: 8px;
  }

  .wechat-reply-wrapper .ibox-content {
    padding: 15px;
    font-size: 12px
  }

  .wechat-reply-wrapper .ibox-content .view-wrapper {
    position: relative;
    width: 317px;
    background-image: url(../../../assets/wechat/mobile_head.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #f5f5f5;
  }

  .wechat-reply-wrapper .ibox-content .view-wrapper .mobile-header {
    position: relative;
    left: 0;
    top: 36px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 16px;
  }

  .wechat-reply-wrapper .ibox-content .view-wrapper .view-body {
    margin-top: 65px;
    background-color: #f5f5f5;
    height: 500px;
  }

  .wechat-reply-wrapper .view-wrapper .view-body .time-wrapper {
    margin-bottom: 10px;
    text-align: center;
  }

  .wechat-reply-wrapper .view-wrapper .view-body .time-wrapper .time {
    display: inline-block;
    color: #f5f5f5;
    display: inline-block;
    color: #f5f5f5;
    background: rgba(0, 0, 0, .3);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
  }

  .wechat-reply-wrapper .view-wrapper .view-body .view-item {
    display: none;
  }

  .wechat-reply-wrapper .view-wrapper .view-body .view-item.show {
    display: block;
  }

  .wechat-reply-wrapper .view-wrapper .view-body .view-item .avatar {
    width: 40px;
    height: 40px;
  }

  .wechat-reply-wrapper .view-wrapper .view-body .view-item .avatar img {
    max-width: 100%;
    height: auto;
  }

  /* .wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content {
    position: relative;
    max-width: 60%;
    min-height: 40px;
    margin-left: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 1.5;
    border-radius: 5px;
  } */
  .wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content {
    /* position: relative; */
    width: 90%;
    min-height: 40px;
    margin-left: 15px;
    padding: 10px 10px 0px 10px;
    border: 1px solid #ccc;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 1.5;
    border-radius: 5px;
    background: #FFFFFF;
  }
  .wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content .picbox {
    max-width: 100%;
  }

  .wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content:before {
    content: '';
    position: absolute;
    left: -13px;
    top: 11px;
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #ccc;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .wechat-reply-wrapper .view-wrapper .view-body .view-item .box-content:after {
    content: '';
    content: '';
    position: absolute;
    left: -12px;
    top: 11px;
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #f5f5f5;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .wechat-reply-wrapper .submit {
    text-align: center;
  }

  /* 图文 */
  .view-wrapper .view-body .view-item.news-box {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
  }

  .view-wrapper .view-body .view-item .vn-content {
    padding: 0;
  }

  .view-wrapper .view-body .view-item .vn-content .vn-title {
    line-height: 1.5;
    font-size: 16px;
  }

  .view-wrapper .view-body .view-item .vn-content .vn-time {
    padding: 5px 0;
    font-size: 12px;
    color: #999;
  }

  .view-wrapper .view-body .view-item .vn-content .vn-picture {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center center;
    border-radius: 5px 5px 0 0;
  }

  .view-wrapper .view-body .view-item .vn-content .vn-picture-info {
    line-height: 22px;
    color: #7b7b7b;
    padding: 0;
    display: block;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    font-size: 12px;
    white-space: nowrap;
  }

  .view-wrapper .view-body .view-item .vn-more {
    display: block;
    padding: 10px 0 0;
    border-top: 1px solid #dddddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .view-wrapper .view-body .view-item .vn-content .con-item-box {
    position: relative;
  }

  .view-wrapper .view-body .view-item .vn-content .con-item-box .first-title {
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /*background: rgba(0,0,0,.8);*/
    color: #fff;
    text-indent: 1em;
  }

  .view-wrapper .view-body .view-item .vn-content .con-item-list {
    margin-top: 10px;
    margin: 6px 10px 0 10px;
    border-top: 1px solid #FBFBFB;
  }

  .view-wrapper .view-body .view-item .vn-content .con-item-list .list-tit-info {
    width: 70%;
    line-height: 1.5;
    word-wrap: break-word;
  }

  .view-wrapper .view-body .view-item .vn-content .con-item-list .list-pic {
    width: 20%;
    min-height: 50px;
    background-size: cover;
    background-position: center center;
  }

  /* 音乐 */
  .view-wrapper .view-body .view-item.music-box .box-content {
    position: relative;
    width: 100%;
    background: #080;
    color: #fff;
    border-color: #080;
  }

  .view-wrapper .view-body .view-item.music-box .box-content p {
    width: 75%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .view-wrapper .view-body .view-item.music-box .box-content .music-icon {
    position: absolute;
    right: 11px;
    top: 50%;
    width: 30px;
    height: 30px;
    background: #0a0;
    text-align: center;
    line-height: 30px;
    margin-top: -15px;
    font-size: 16px;
  }

  .view-wrapper .view-body .view-item.music-box .box-content:after {
    display: none;
  }

  .view-wrapper .view-body .view-item.music-box .box-content:before {
    border-top: 10px solid #080;
  }

  /* 视频 */
  .view-wrapper .view-body .view-item.video-box {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .view-wrapper .view-body .view-item.video-box .vn-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 右侧控制器 */
  .wechat-reply-wrapper .ibox-content .control-wrapper {
    position: relative;
    /* width: 535px; */
    height: 565px;
    padding: 0;
    margin-left: 20px;
    /* border: 1px solid #e2e2e2; */
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-title {
    position: absolute;
    left: 71px;
    top: -12px;
    width: auto;
    padding: 0 10px;
    font-size: 20px;
    background-color: #fff;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body {
    margin-top: 40px;
    padding: 0 10px;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group label {
    font-weight: normal;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group .tips:after {
    content: '*';
    color: red;
    position: absolute;
    margin-left: 4px;
    font-weight: bold;
    line-height: 1.8em;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group .group-item {
    position: relative;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group .group-item .file-btn {
    position: absolute;
    right: 15px;
    top: 0;
    display: block;
    width: 66px;
    border-radius: 6px;
    cursor: pointer;
    padding: .5rem;
    background-color: #18a689;
    color: #fff;
    text-align: center;
    height: 100%;
    line-height: 23px;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body .form-group .group-item textarea {
    resize: none;
    width: 100%;
    height: 100px;
    padding: 10px;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body .tips-info {
    padding-left: 100px;
    font-size: 12px;
    color: #737373;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body .control-main .control-item {
    display: none;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body .control-main .control-item.show {
    display: block;
  }

  /* 微信菜单定制 */
  .wechat-menu ul {
    padding: 0;
  }

  .wechat-menu .menu-footer span {
    display: block;
  }

  .wechat-menu .menu-footer li {
    position: relative;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    list-style: none;
    border: 1px solid transparent;
    border-right: 1px solid #e7e7eb;
  }

  .wechat-menu .menu-footer .icon-sub {
    background: url(../../../assets/wechat/index.png) 0 -48px no-repeat;
    width: 7px;
    height: 7px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 2px;
    margin-top: -2px;
  }

  .wechat-menu .menu-footer .sub-menu {
    position: absolute;
    border-radius: 3px;
    border: 1px solid #d0d0d0;
    display: block;
    bottom: 60px;
    width: 100%;
    background-color: #fafafa;
  }

  .wechat-menu .menu-footer .sub-menu:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fafafa;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    bottom: -5px;
    border-bottom: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    left: 50%;
    margin-left: -5px;
  }

  .wechat-menu .menu-footer .sub-menu li {
    border-right: 0;
    border-bottom: 1px solid #d0d0d0;
  }

  .wechat-menu .menu-footer .sub-menu li:last-child {
    border-bottom: 0;
  }

  .wechat-menu .menu-footer .active {
    border: 1px solid #44b549;
  }

  .wechat-menu .menu-footer .sub-menu li.active {
    border: 1px solid #44b549 !important;
  }

  /* 右侧 */
  .wechat-menu .menu-control .popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
    font-weight: 400;
  }

  .wechat-menu .menu-control .popover-title a {
    color: #06C;
    font-size: 12px;
  }

  .wechat-menu .menu-control .tips-txt {
    line-height: 40px;
    padding: 0 20px;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body.menu-content {
    padding: 0 20px;
    margin-top: 0;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body.menu-content .radio {
    display: inline-block !important;
    width: 45%;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body.menu-content .menu-control-box {
    padding: 0 20px;
  }

  .wechat-reply-wrapper .ibox-content .control-wrapper .control-body.menu-content .menu-control-box .radio {
    display: block !important;
    width: 100%;
  }

  .menu-control-box .item {
    display: none;
  }

  .menu-control-box .show {
    display: block;
  }
  .Loading{
    margin: 0 auto;
  }
  .detail{
    display: flex;
    align-items: center;
    position: relative;
    bottom: 0;
    height: 35px;
    border-top: 1px solid #EEEEEE;
  }
  .detail img{
    width: 30px;
    height: 30px;
  }
  textarea{
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    cursor: pointer;
    background: #FFFFFF;
    overflow-x:hidden;overflow-y:hidden
  }
  .km{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 15px;
  }
  .km_list{
    margin-left: 10px;
  }
  .km_title{
    width: 80px;
  }
  .yhqt{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  .yhqt_left_title{
    width:80px;
  }
  .yhqt_left{
    display: flex;
    flex-direction: row;
  }
  .yhqt_right{
    margin-left: 100px;
  }
  .yhqt_left_list{
    margin-left: 10px;
  }

</style>
