<template>
<div class="index">
  <el-tabs type="border-card">
  <el-tab-pane label="编辑内容">
    <div class="box">
      <div class="radio">
        <div class="radio_title">选择发送范围 :</div>
        <el-radio-group  v-model="radio1" >
          <el-radio :label="1">全部粉丝</el-radio>
          <el-radio :label="2">按条件筛选</el-radio>
          <el-radio :label="3">手动选择粉丝</el-radio>
        </el-radio-group>
      </div>
      <div class="secUinput" v-if="radio1==3">
        <div><el-button type="primary" @click="radio1change" plain>编辑用户</el-button></div>
          已选用户ID：
          <el-table
              :data="handSecUserShow"
              border
              style="width: 70%">
              <el-table-column
                prop="nickname"
                label="用户名称"
               >
              </el-table-column>
              <el-table-column
                prop="user_id"
                label="用户Id"
                >
              </el-table-column>
            </el-table>
      </div>
      <div v-if="radio1==2">
        <div class="radio_title">选择用户性别 :</div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-bottom:10px;" >全选</el-checkbox>
        <el-checkbox-group  @change="sexChange" v-model="checksex">
          <el-checkbox v-for="item in sex" :label="item.code" :key="item.code">{{item.name}}</el-checkbox>
        </el-checkbox-group>
        <div class="radio_title">选择地区 :</div>
        <el-select v-model="secProvince" placeholder="请选择" multiple clearable filterable style="width: 300px">
          <el-option v-for="item in province" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>
      <div class="radio" v-if="radio1==2">
        <div class="radio_title">选择用户类型 :</div>
        <el-radio-group @change="radio2change" v-model="radio2">
          <el-radio :label="1">无手机号用户</el-radio>
          <el-radio :label="2">有手机号但无课用户</el-radio>
          <el-radio :label="3">有课用户</el-radio>
        </el-radio-group>
      </div>
      <div class="radio" v-if="radio2==3&&radio1==2">
        <div class="radio_title">选择课程类型 :</div>
        <el-radio-group v-model="radio3">
          <el-radio  :label="1">所有有课用户</el-radio>
          <el-radio  :label="2">根据商品选择用户</el-radio>
          <el-radio  :label="3">根据期数选择用户</el-radio>
        </el-radio-group>
      </div>
      <div class="secUinput" v-if="radio2==3&&radio1==2&&radio3==2">
        <div><el-button type="primary" @click="radio3change" plain>编辑商品</el-button></div>
          已选商品：
          <el-table
              :data="secGoodsShow"
              border
              style="width: 30%">
              <el-table-column
                prop="name"
                label="商品名称"
                >
              </el-table-column>
            </el-table>
      </div>
      <div class="secUinput" v-if="radio2==3&&radio1==2&&radio3==3">
        <div><el-button type="primary" @click="radio3change" plain>编辑期数</el-button></div>
          已选期数：
            <el-table
              :data="secPeriodsShow"
              border
              style="width: 30%">
              <el-table-column
                prop="title"
                label="期数标题"
                >
              </el-table-column>
            </el-table>
      </div>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="文本" name="text">
            <div class="inner-edit_area">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8}"
                placeholder="请输入内容"
                v-model="content">
              </el-input>
            </div>
            <div style="float: right;margin-right:15px;">
                <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>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图片" name="image">
            <div class="flex-start">
              <div>
                <el-upload
                  action="/api/public/upload/zone"
                  :http-request="uploadFile"
                  :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>
              <div class="display-b" style="margin-left: 10px">
                <div class="choose_item" style="color: #888;" @click="getMediaList()"><i class="el-icon-plus" style="color: #8c939d"></i>从素材库中选择</div>
              </div>
            </div>
            <div v-if="showImage && mediaImageList.length > 0">
              <el-table
                :data="mediaImageList"
                @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-image :total="mediaImagePage.total" v-model="mediaImagePage.nowPage" :limit="mediaImagePage.limit" @pageChange="onImagePageChange" @sizeChange="onImageSizeChange"/>
            </div>
          </el-tab-pane>
          <el-tab-pane label="视频" name="video">
            <div class="flex-start">
              <el-upload
                class="upload-video"
                action="/api/public/upload/zone"
                :http-request="uploadVideo"
                :file-list="fileList"
                :on-remove="handleRemoveVideo"
                :limit="1">
                <el-button size="small" type="primary" :disabled="(fileUid && progress < 99)">点击上传</el-button>
                <div style="width: 300px">
                  <el-progress v-if="fileUid" :percentage="progress"></el-progress>
                </div>
              </el-upload>
              <div class="display-b">
                <div class="choose_item" style="color: #888;" @click="getMediaList()"><i class="el-icon-plus" style="color: #8c939d"></i>从素材库中选择</div>
              </div>
            </div>
            <div v-if="showVideo && mediaVideoList.length > 0">
              <el-table
                :data="mediaVideoList"
                @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>
          </el-tab-pane>
          <el-tab-pane label="图文" name="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()"><i class="el-icon-plus" style="color: #8c939d"></i>从素材库中选择</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>
              <page2 :total="total" v-model="mediaPage.nowPage" :limit="mediaPage.limit" @pageChange="onMediaPageChange" @sizeChange="onMediaSizeChange"/>
            </div>
          </el-tab-pane>
        </el-tabs>
<div class="b-title"> <el-button style="float: right; margin-bottom: 10px;" type="primary" plain @click="send()">立即群发</el-button>
<el-button style="float: right; margin:0 40px  10px 0;" type="info" plain @click="sendReviewDialog=true">预览发送</el-button></div>
    </el-tab-pane>
  <el-tab-pane label="发送记录"><el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table
          :border="false"
          :data="[JSON.parse(props.row.content)]">
          <el-table-column
            label="类型"
          >
            <template slot-scope="item">
              {{item.row.type | typeFilter}}
            </template>
          </el-table-column>
          <el-table-column
            v-if="JSON.parse(props.row.content).type !== 'text'"
            prop="media_id"
            label="media_id"
          >
            <template slot-scope="item">
              {{item.row.content}}
            </template>
          </el-table-column>
          <el-table-column
            prop="url"
            label="内容"
          >
            <template slot-scope="item">
              <div v-if="item.row.type === 'text'">
                <span v-html="item.row.content.replace(/\/[\u4E00-\u9FA5]{1,3}/gi, emotion)"></span>
              </div>
              <div v-else-if="item.row.type === 'image'">
                <img style="width: 80px;" :src="item.row.url"/>
              </div>
              <div v-else-if="item.row.type === 'video'">
                <a :href="item.row.url" target="_blank">点击查看视频</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column
      prop="send_id"
      label="消息ID">
    </el-table-column>
    <el-table-column
      label="消息类型" prop="condition">
    </el-table-column>
    <el-table-column
      label="状态" prop="status">
    </el-table-column>
    <el-table-column
      prop="send_num"
      label="预计发送">
    </el-table-column>
    <el-table-column
      prop="arrive_num"
      label="已发送">
    </el-table-column>
    <el-table-column
      prop="failed_num"
      label="发送失败">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>用户设置拒收的过滤，用户接收已超4条的过滤</p>
          <!-- <p>住址: </p> -->
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.failed_num }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      prop="created_at"
      label="发送时间">
    </el-table-column>
  </el-table>
  <page :total="total" :limit="limit"  @pageChange="onPageChange" @sizeChange="onSizeChange"/></el-tab-pane>
</el-tabs>
  <el-dialog :visible.sync="sendReviewDialog" width="30%" center append-to-body>
    <div class="secTitle" >预览发送</div>
    <!-- <el-form-item label="请填写用户ID"> -->
       请填写用户id <el-input v-model="sendReviewId" style="width: 110px"></el-input>
      <!-- </el-form-item> -->
    <!-- <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="sendReviewDialog = false">取 消</el-button>
        <el-button type="primary" @click="sendReview">确 定</el-button>
      </span>
  </el-dialog>
<el-dialog :visible.sync="periodsDialog.show" width="90%" append-to-body>
  <div class="secTitle" >选择期数</div>
  <div class="form-block">
      <el-form label-width="85px" inline size="small">
        <el-form-item label="期数标题">
          <el-input v-model="periodTitle" placeholder="请输入内容" style="width: 150px" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-select v-model="goodsId" placeholder="请选择" style="width: 150px" @change="onPeriodsSearch" clearable>
            <el-option
              v-for="(data,index) in goodList"
              :key="index"
              :label="data | filterGoods"
              :value="data.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-select v-model="lessonId" placeholder="请选择" style="width: 150px"  @change="onPeriodsSearch" clearable>
            <el-option
              v-for="(data,index) in lessonList"
              :key="index"
              :label="data.title"
              :value="data.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="periodStartTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00','23:59:59']"
            @change="onPeriodsSearch">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="onPeriodsSearch" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox" >
        <div class="item" >
          <p>筛选列表</p>
          <el-tabs v-model="course_type" type="card" style="background: white;padding-top: 10px" @tab-click="onPeriodsSearch">
            <el-tab-pane label="日课" name="1"/>
            <el-tab-pane label="月课" name="0"/>
            <el-tab-pane label="全部" name="-1"/>
          </el-tabs>
          <el-table
            size="mini"
            :data="periodList"
            @select="periodsSelectionChange"
            @select-all="periodSelectionAll"
            style="width: 100%"  fixed>
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
              label="期数标题">
              <template slot-scope="scope">
                <router-link :to="{name:'class', query: { goods_id: scope.row.goods_id, periods_id: scope.row.id}}" >
                  {{scope.row.title}}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="goods_name"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="start_at"
              label="起止时间" sortable>
              <template slot-scope="scope">
                {{scope.row.start_at}}
                <br>
                {{scope.row.over_at ? scope.row.over_at : ''}}
              </template>
            </el-table-column>
            <el-table-column
              prop="created_at"
              label="创建时间" sortable>
            </el-table-column>
          </el-table>
        </div>
        <div class="item" >
          <p>选中列表</p>
          <el-table
            size="mini"
            :data="secPeriods"
            style="width: 100%"  fixed>
            <el-table-column
              label="期数标题">
              <template slot-scope="scope">
                <router-link :to="{name:'class', query: { goods_id: scope.row.goods_id, periods_id: scope.row.id}}" >
                  {{scope.row.title}}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
           label="操作"
          width="148" v-if="!$store.state.readonly"  fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="danger"  plain @click="perioddel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
          </el-table>
        </div>
    </div>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPeriodsPageChange" @sizeChange="onPeriodsSizeChange"/>
    <span slot="footer" class="dialog-footer">
        <el-button @click="periodsDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="onPeriodsConfirm">确 定</el-button>
      </span>
  </el-dialog>
  <el-dialog :visible.sync="goodsDialog.show" width="90%" append-to-body>
    <div class="secTitle" >选择商品</div>
    <div class="tableBox" >
        <div class="item" >
          <p>筛选列表</p>
          <el-tabs v-model="goodSearchFrom.status" type="card" style="background: white;padding-top: 10px" @tab-click="getGoods()">
      <el-tab-pane label="上架" name="1"></el-tab-pane>
      <!-- <el-tab-pane label="编辑中" name="0"></el-tab-pane> -->
      <el-tab-pane label="下架" name="2"></el-tab-pane>
      <el-tab-pane label="全部" name="-1"></el-tab-pane>
    </el-tabs>
    <el-table
      size="small"
      :data="goodList"
      @select="goodsSelectionChange"
      @select-all="goodsSelectionAll"
      style="width: 100%"  fixed>
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
        <template slot-scope="scope">
          <router-link :to="{name:'periods', query: { goods_id: scope.row.id}}" >
            {{scope.row.name}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        label="商品类型">
        <template slot-scope="scope">
          {{scope.row.goods_type | goodsType}}
        </template>
      </el-table-column>
      <el-table-column
        prop="course_title"
        label="课程名称">
      </el-table-column>
      <el-table-column
        label="课程类别">
        <template slot-scope="scope">
          {{scope.row.course_type | lessonType}}
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          {{scope.row.status | goodsStatus}}
        </template>
      </el-table-column>
    </el-table>
        </div>
        <div class="item" >
          <p>选中列表</p>
          <el-table
      size="small"
      :data="secGoods"
      style="width: 100%"  fixed>
      <el-table-column
        prop="name"
        label="名称">
        <template slot-scope="scope">
          <router-link :to="{name:'periods', query: { goods_id: scope.row.id}}" >
            {{scope.row.name}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
           label="操作"
          width="148" v-if="!$store.state.readonly"  fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="danger"  plain @click="goodsdel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
    </el-table>
        </div>
      </div>
    
    <!-- <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="goodsDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="onGoodsConfirm">确 定</el-button>
      </span>
  </el-dialog>
  <el-dialog :visible.sync="userDialog.show" width="70%" append-to-body>
    <div class="secTitle" >手动选择用户</div>
      <el-form label-width="90px">
        <el-row>
          <el-col :span="3" >
            <el-form-item>
              <el-button style="float: right" type="primary" plain @click="getUser">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="ID">
              <el-input v-model="searchUserFrom.userId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="昵称">
              <el-input v-model="searchUserFrom.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="电话">
              <el-input v-model="searchUserFrom.mobile"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
      <div class="tableBox" >
        <div class="item" >
          <p>筛选列表</p>
          <el-table
          :data="userList"
          ref="multipleTable"
          @select="handleSelectionChange"
          @select-all="handleSelectionAll"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            className="f-c"
            label="用户">
            <template slot-scope="scope">
              <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
            </template>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
        </el-table>
        </div>
        <div class="item" >
          <p>已选中列表</p>
          <el-table
          :data="handSecUser"
          ref="multipleTable"
          style="width: 100%">
          <el-table-column
            className="f-c"
            label="用户">
            <template slot-scope="scope">
              <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
            </template>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
          <el-table-column
           label="操作"
          width="148" v-if="!$store.state.readonly"  fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="danger"  plain @click="userdel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>
      </div>
      <page :total="userDialog.total" :limit="userDialog.limit" @pageChange="onUserPageChange" @sizeChange="onUserSizeChange"/>
    </el-dialog>
</div>
</template>

<script>
import {
  uploadFileApi,
  getMsgListApi,
  sendMsgApi,
  getUserListApi,
  getMediaListApi,
  getGoodsListApi,
  getLessonApi,
  getPeriodsApi,
  getMsgCountApi,
  updateFansApi
} from "../../service/api";
import page from "../framework/page";
import page2 from "../framework/page";
import pageImage from "../framework/page";
import emotion from "../framework/Emotion/index";
import CommonJs from "../../util/common";
// import user_dialog from "./userDialog";
import {ISORNOT,GOODSTYPE,LESSONTYPE,GOODSSTATUS} from "../../util/wordbook";
export default {
  name: "index",
  components: {
    page,
    page2,
    pageImage,
    emotion,
    // user_dialog
  },
  data() {
    return {
      checksex:[],
      sex:[{name:"保密",code:"0"},{name:"男",code:"1"},{name:"女",code:"2"}],
      province:['上海','云南','内蒙古','北京','台湾','吉林','四川','天津','宁夏','安徽','山东','山西','广东','广西','新疆'
      ,'江苏','江西','河北','河南','浙江','海南','湖北','湖南','澳门','甘肃','福建','西藏','贵州','辽宁','重庆','陕西','青海','香港','黑龙江'],
      secProvince:[],
      checkAll:false,
      isIndeterminate:false,
      sendReviewDialog:false,
      sendReviewId:"",
      goodList:[],
      periodsDialog:{
        show:false,
      },
      goodsDialog:{
        show:false,
      },
      handSecUserIds:"",
      handSecUser:[],
      handSecUserShow:[],
      secGoods_ids:'',
      secGoods:[],
      secGoodsShow:[],
      secPeriods_ids:'',
      secPeriods:[],
      secPeriodsShow:[],
      userList:[],
      periodList:[],
      goodsId:null,
      lessonId:null,
      lessonList:[],
      periodStartTime:null,
      periodTitle:null,
      course_type:'1',
      radio1:1,
      radio2:1,
      radio3:1,
      nowPage: 1,
      total: 0,
      limit: 10,
      mediaPage: {
        nowPage: 1,
        total: 0,
        limit: 5
      },
      show: false,
      loading: false,
      activeName: "text",
      list: [],
      content: "",
      uploadShow: true,
      imageList: [],
      fileList: [],
      imageContent: "",
      videoContent: "",
      searchFrom: {
        type: 1,
        is_test: false
      },
      goodSearchFrom:{
        status:"1"
      },
      tableData: [],
      fileUid: null,
      userDialog: {
        total: 0,
        limit: 5,
        nowPage: 1,
        show: false
      },
      searchUserFrom: {},
      multipleSelection: [],
      showEmotion: false,
      showMedia: false,
      showImage: false,
      showVideo: false,
      mediaList: [],
      mediaImageList: [],
      mediaVideoList: [],
      mediaImagePage: {
        nowPage: 1,
        total: 0,
        limit: 5
      },
      mediaVideoPage: {
        nowPage: 1,
        total: 0,
        limit: 5
      },
      imageContent: null,
      videoContent: null,
      newsContent: null
    };
  },
  filters: {
    filterGoods(val){
        return '['+val.id+']['  + GOODSTYPE[val.goods_type] + ']' + '【' +val.current_price / 100 + '元】' + val.name
      },
    isOrNot(value){
        return ISORNOT[value]
      },
      goodsType(value){
        return GOODSTYPE[value]
      },
      lessonType(value){
        return LESSONTYPE[value]
      },
      goodsStatus(value){
        return GOODSSTATUS[value]
      },
    typeFilter(val) {
      if (!val) return;
      if (val === "text") return "文本";
      if (val === "image") return "图片";
      if (val === "video") return "视频";
      if (val === "news") return "图文";
    },
    typeListFilter(val) {
      if (!val) return "";
      if (val === 1) return "48时内关注但未购课用户";
      if (val === 2) return "有体验课但没有正式课用户";
      if (val === 3) return "未试听用户";
      if (val === 4) return "指定用户手机号";
    }
  },
  methods: {
     handleCheckAllChange(val) {
       console.log(val)
       if(val){
         this.sex.forEach(el => {
           this.checksex.push(el.code)
         })
       }else{
         this.checksex = []
       }
      //  this.checksex = val ? this.sex : [];
       console.log(this.checksex )
       this.isIndeterminate = false;
      },
    sexChange(val){
        let checkedCount = val.length;
        this.checkAll = checkedCount === this.sex.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.sex.length;
      // console.log(val)
      // this.checksex = val ? this.sex : [];
      // console.log(this.checksex)
      // this.isIndeterminate = false;
    },
    updateFans(){
      updateFansApi({}).then(res=>{
            this.$message({
            type: "success",
            message: "同步成功!"
          });
        })
    },
    getMsgCount(params){
      return new Promise((resolve,reject) =>{
          let countParams={}
        countParams.type = params.type
        if(params.fans_type){
          countParams.fans_type = params.fans_type
        }
        if(params.course_type){
          countParams.course_type = params.course_type
        }
        if(params.ids){
          countParams.ids = params.ids
        }
        getMsgCountApi(countParams).then(res=>{
            console.log(res)
            resolve(res)
          })
      })
    },
    getLessonOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getLessonApi(json).then(res=>{
          this.lessonList = res.list;
        })
      },
    onPeriodsPageChange(val){
        this.nowPage = val
        this.onPeriodsSearch()
      },
      onPeriodsSizeChange(val){
        this.limit = val
        this.nowPage = 1;
        this.onPeriodsSearch()
      },
      onPeriodsSearch(){
        let json={
          limit: this.limit,
          page: this.nowPage
        };
        if (this.course_type !== '-1'){
          json.course_type = this.course_type
        }
        if(this.periodTitle){
            json.title = this.periodTitle;
        }
        if(this.goodsId){
          json.goods_id = this.goodsId;
        }
        if(this.lessonId){
          json.course_id = this.lessonId;
        }
        if(this.periodStartTime && this.periodStartTime.length > 0){
          json.start_start_at = CommonJs.dateFmt(this.periodStartTime[0],"yyyy-MM-dd")
          json.start_end_at = CommonJs.dateFmt(this.periodStartTime[1],"yyyy-MM-dd")
        }
        if(this.startAt){
          json.start_at = this.startAt;
        }
        getPeriodsApi(json).then(res=>{
          res.list.forEach(data=>{
            data.arrive_course_rate = 0;
            data.watch_course_rate = 0;
            data.over_course_rate = 0;
            data.work_rate = 0;
            data.over_work_rate = 0;
            data.clock_rate = 0;
            data.over_clock_rate = 0;
            data.transform_rate = 0
          });
          this.periodList = res.list;
          this.total = res.total
        });
      },
    getGoods(){
        let json = {
          limit: "100",
          page: this.nowPage
        };
        if (this.goodSearchFrom.status && this.goodSearchFrom.status !== '-1') {
          json.status = this.goodSearchFrom.status
        }
        console.log(613)
        getGoodsListApi(json).then(res=>{
          res.list.forEach(i=>{
            if(i.conflict_goods_ids === ''){
              i.conflict_goods_ids=[]
            }else{
              i.conflict_goods_ids=i.conflict_goods_ids.split(',')
            }
          });
          this.goodList = res.list;
          // this.total = res.total
        })
      },
    radio1change(){
      if(this.radio1 == 3){
        this.onSelectUser()
      }
      // console.log(this.radio1)
    },
    radio2change(val){
      // console.log(this.radio2)
    },
    radio3change(){
      if(this.radio3==2){
        this.getGoods()
        this.goodsDialog.show = true;
      }else if(this.radio3==3){
        this.getLessonOption()
        this.onPeriodsSearch()
        this.periodsDialog.show = true;
      }
      console.log(this.radio3)
    },
    handleClick(tab) {
      this.activeName = tab.name;
    },
    handleRemove() {
      this.uploadShow = true;
      this.imageList = [];
      this.imageContent = "";
    },
    handleRemoveVideo() {
      this.videoContent = "";
      this.fileList = [];
    },
    beforeAvatarUpload() {
      this.uploadShow = false;
    },
    handleAvatarSuccess(res) {
      this.imageList = [
        { name: res.data.url, url: process.env.IMAGE_URL_HEAD + res.data.url }
      ];
    },
    uploadFile(a) {
      this.$store.dispatch("setProgress", { type: "new", id: a.file.uid });
      uploadFileApi({ file: a.file, type: "wechat" })
        .then(res => {
          this.imageContent = {
            content: res.media_id,
            url: res.url
          };
          this.imageList = [{ name: res.media_id, url: res.url }];
          this.$message({
            type: "success",
            message: "上传成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "上传失败!"
          });
        });
    },
    uploadVideo(a) {
      uploadFileApi({ file: a.file, type: "wechat" })
        .then(res => {
          this.uploadVideoFile(a, res);
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "上传失败!"
          });
        });
    },
    uploadVideoFile(a, data) {
      this.fileUid = a.file.uid;
      this.loading = true;
      this.$store.dispatch("setProgress", { type: "new", id: a.file.uid });
      uploadFileApi({ file: a.file, type: "local" })
        .then(res => {
          this.videoContent = {
            content: data.media_id,
            url: process.env.IMAGE_URL_HEAD + res.url
          };
          this.fileList = [
            { name: res.name, url: process.env.IMAGE_URL_HEAD + res.url }
          ];
          this.loading = false;
          this.$message({
            type: "success",
            message: "上传成功!"
          });
          this.$store.dispatch("setProgress", {
            type: "delete",
            id: a.file.uid
          });
          this.fileUid = null;
        })
        .catch(() => {
          this.loading = false;
          this.$message({
            type: "error",
            message: "上传失败!"
          });
        });
    },
    sendReview(){
      let json = {};
      json.test_id = this.sendReviewId
      let _content = {};
      _content.type = this.activeName;
      if (this.activeName === "text") {
        if (!this.content) {
          this.$message({
            type: "error",
            message: "请输入文本!"
          });
          return;
        } else {
          _content.content = this.content;
        }
      } else if (this.activeName === "image") {
        if (!this.imageContent) {
          this.$message({
            type: "error",
            message: "请上传图片!"
          });
          return;
        } else {
          _content.content = this.imageContent.content;
          _content.url = this.imageContent.url;
        }
      } else if (this.activeName === "video") {
        if (!this.videoContent) {
          this.$message({
            type: "error",
            message: "请上传视频!"
          });
          return;
        } else {
          _content.content = this.videoContent.content;
          _content.url = this.videoContent.url;
        }
      } else if (this.activeName === "news") {
        if (this.newsContent && this.newsContent.media_id) {
          _content.content = this.newsContent.media_id;
        } else {
          this.$message({
            type: "error",
            message: "请选择图文!"
          });
        }
      }
      json.content = JSON.stringify(_content);
      sendMsgApi(json).then(res => {
            this.$message({
              message: res,
              type: "success"
            });
            this.sendReviewDialog = false;
            this.clearData();
            this.getMsgList();
          });
    },
    send() {
      let json = {};
      json.type = this.radio1;
      let msgTips = ""
      if(json.type==3){
        if(this.handSecUserIds){
          json.ids = this.handSecUserIds
          // msgTips = "确认发送用户"
        }else{
          this.$message({
            type: "error",
            message: "请选择用户!"
          });
          return
        }
      }
      if(json.type==2){
        json.fans_type = this.radio2;
        if(json.fans_type==3){
          json.course_type = this.radio3
          if(json.course_type==2){
            if(this.secGoods_ids){
              // msgTips = "确认发送商品"
            json.ids = this.secGoods_ids
            }else{
              this.$message({
                type: "error",
                message: "请选择商品!"
              });
              return
            }
            
          }else if(json.course_type==3){
            if(this.secPeriods_ids){
              // msgTips = "确认发送期数"
              json.ids = this.secPeriods_ids
            }else{
              this.$message({
                type: "error",
                message: "请选择期数!"
              });
              return
            }
            
          }
        }
      }
      let _content = {};
      _content.type = this.activeName;
      if (this.activeName === "text") {
        if (!this.content) {
          this.$message({
            type: "error",
            message: "请输入文本!"
          });
          return;
        } else {
          _content.content = this.content;
        }
      } else if (this.activeName === "image") {
        if (!this.imageContent) {
          this.$message({
            type: "error",
            message: "请上传图片!"
          });
          return;
        } else {
          _content.content = this.imageContent.content;
          _content.url = this.imageContent.url;
        }
      } else if (this.activeName === "video") {
        if (!this.videoContent) {
          this.$message({
            type: "error",
            message: "请上传视频!"
          });
          return;
        } else {
          _content.content = this.videoContent.content;
          _content.url = this.videoContent.url;
        }
      } else if (this.activeName === "news") {
        if (this.newsContent && this.newsContent.media_id) {
          _content.content = this.newsContent.media_id;
        } else {
          this.$message({
            type: "error",
            message: "请选择图文!"
          });
        }
      }
      if(this.checksex){
        json.sex = this.checksex.join(',')
      }
      if(this.secProvince){
        json.province = this.secProvince.join(',')
      }
      json.content = JSON.stringify(_content);
      json.is_test = this.searchFrom.is_test ? 2 : 1;
      // console.log("json", json);
      updateFansApi({}).then(res=>{
            this.getMsgCount(json).then((res)=>{
            this.$confirm('你将发送给'+res+"位用户", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              sendMsgApi(json).then(res => {
                this.$message({
                  message: res,
                  type: "success"
                });
                this.show = false;
                this.clearData();
                this.getMsgList();
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消发送"
              });
            });
          })
        })
      
    },
    clearData() {
      this.content = "";
      this.videoContent = null;
      this.imageContent = null;
      this.newsContent = null;
      this.activeName === "text";
      this.searchFrom = {};
      this.fileList = [];
      this.imageList = [];
    },
    getMsgList() {
      let json = {
        limit: this.limit,
        page: this.nowPage
      };
      getMsgListApi(json).then(res => {
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    onMediaPageChange(val) {
      this.mediaPage.nowPage = val;
      this.getMediaList();
    },
    onMediaSizeChange() {
      this.mediaPage.nowPage = 1;
      this.mediaPage.limit = val;
      this.getMediaList();
    },
    onImagePageChange(val) {
      this.mediaImagePage.nowPage = val;
      this.getMediaList();
    },
    onImageSizeChange(val) {
      this.mediaImagePage.nowPage = 1;
      this.mediaImagePage.limit = val;
      this.getMediaList();
    },
    onVideoPageChange(val) {
      this.mediaVideoPage.nowPage = val;
      this.getMediaList();
    },
    onVideoSizeChange(val) {
      this.mediaVideoPage.nowPage = 1;
      this.mediaVideoPage.limit = val;
      this.getMediaList();
    },
    onPageChange(val) {
      this.nowPage = val;
      this.getMsgList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getMsgList();
    },

    getUser() {
      let json = {
        page: this.userDialog.nowPage,
        limit: this.userDialog.limit
      };
      if (this.searchUserFrom.userId) {
        json.user_id = this.searchUserFrom.userId;
      }
      if (this.searchUserFrom.nickName) {
        json.nickname = this.searchUserFrom.nickName;
      }
      if (this.searchUserFrom.mobile) {
        json.mobile = this.searchUserFrom.mobile;
      }
      getUserListApi(json).then(res => {
        this.userList = res.list;
        this.userDialog.total = res.total;
      });
    },
    onUserPageChange(val) {
      this.userDialog.nowPage = val;
      this.getUser();
    },
    onUserSizeChange(val) {
      this.userDialog.nowPage = 1;
      this.userDialog.limit = val;
      this.getUser();
    },
    periodsSelectionChange(val,el){
      this.multipleSelection = val;
      for(let i=0;i<this.secPeriods.length;i++){
        if(el.id==this.secPeriods[i].id){
          return
        }
      }
      this.secPeriods.push(el)
    },
    periodSelectionAll(val){
      if(this.secPeriods.length==0){
          this.secPeriods = [...val]
        }else{
          let length = this.secPeriods.length
          for(let j=0;j<val.length;j++){
            for(let i=0;i<=length;i++){
              if(val[j].id==this.secPeriods[i].id){
                break
                }else{
                  if(i==length-1){
                    this.secPeriods.push(val[j])
                    break
                  }
                }
              }
          }
        }
    },
    perioddel(el){
      for(let i=0;i<this.secPeriods.length;i++){
        if(el.id==this.secPeriods[i].id){
          this.secPeriods.splice(i,1)
        }
      }
      console.log(this.secPeriods)
      // perioddel
    },
    onPeriodsConfirm() {
      let _list = this.secPeriods;
      if (_list.length === 0) {
        this.$message({
          type: "error",
          message: "请选择期数!"
        });
      } else {
        let _userIds = [];
        _list.forEach(item => {
          _userIds.push(item.id);
        });
        let _tmp = _userIds;
        // if (this.searchFrom.user_ids) {
        //   _tmp = _userIds.concat(
        //     this.stringToInt(this.searchFrom.user_ids.split(","))
        //   );
        // }
        let _result = this.dedupe(_tmp);
        this.secPeriods_ids = _result.join(",");
        console.log(this.secPeriods_ids)
        this.periodsDialog.show = false;
        this.secPeriodsShow = this.secPeriods
      }
    },
    goodsSelectionChange(val,el) {
      this.multipleSelection = val;
      for(let i=0;i<this.secGoods.length;i++){
        if(el.id==this.secGoods[i].id){
          return
        }
      }
      this.secGoods.push(el)
      console.log(el)
    },
    goodsSelectionAll(val){
      if(this.secGoods.length==0){
          this.secGoods = [...val]
        }else{
          let length = this.secGoods.length
          for(let j=0;j<val.length;j++){
            for(let i=0;i<=length;i++){
              if(val[j].id==this.secGoods[i].id){
                break
                }else{
                  if(i==length-1){
                    this.secGoods.push(val[j])
                    break
                  }
                }
              }
          }
        }
    },
    goodsdel(el){
      for(let i=0;i<this.secGoods.length;i++){
        if(el.id==this.secGoods[i].id){
          this.secGoods.splice(i,1)
        }
      }
      // goodsdel
      // console.log(this.handSecUser)
    },
    onGoodsConfirm() {
      let _list = this.secGoods;
      if (_list.length === 0) {
        this.$message({
          type: "error",
          message: "请选择商品!"
        });
      } else {
        let _userIds = [];
        _list.forEach(item => {
          _userIds.push(item.id);
        });
        let _tmp = _userIds;
        let _result = this.dedupe(_tmp);
        this.secGoods_ids = _result.join(",");
        console.log(this.secGoods_ids)
        this.secGoodsShow = this.secGoods
        this.goodsDialog.show = false;
      }
    },
    handleSelectionChange(val,el) {
      this.multipleSelection = val;
      for(let i=0;i<this.handSecUser.length;i++){
        if(el.user_id==this.handSecUser[i].user_id){
          return
        }
      }
      this.handSecUser.push(el)
    },
    handleSelectionAll(val){
      if(this.handSecUser.length==0){
          this.handSecUser = [...val]
        }else{
          let length = this.handSecUser.length
          for(let j=0;j<val.length;j++){
            for(let i=0;i<=length;i++){
              if(val[j].user_id==this.handSecUser[i].user_id){
                break
                }else{
                  if(i==length-1){
                    this.handSecUser.push(val[j])
                    break
                  }
                }
              }
          }
        }
    },
    userdel(el){
      for(let i=0;i<this.handSecUser.length;i++){
        if(el.user_id==this.handSecUser[i].user_id){
          this.handSecUser.splice(i,1)
        }
      }
      // goodsdel
      // console.log(this.handSecUser)
    },
    onSelectUser() {
      this.userDialog.show = true;
      // console.log(this.userDialog)
      // if (this.searchFrom.user_id) {
      //   this.multipleSelection = this.searchFrom.user_id.split(",");
      // } else {
      //   this.multipleSelection = [];
      // }
      this.getUser();
    },
    onConfirm() {
      console.log(this.handSecUser)
      let _list = this.handSecUser;
      if (_list.length === 0) {
        this.$message({
          type: "error",
          message: "请选择用户!"
        });
      } else {
        let _userIds = [];
        _list.forEach(item => {
          _userIds.push(item.user_id);
        });
        let _tmp = _userIds;
        if (this.searchFrom.user_ids) {
          _tmp = _userIds.concat(
            this.stringToInt(this.searchFrom.user_ids.split(","))
          );
        }
        let _result = this.dedupe(_tmp);
        this.handSecUserIds = _result.join(",");
        this.handSecUserShow = this.handSecUser;
        console.log(_result)
        this.userDialog.show = false;
      }
    },
    dedupe(array) {
      return Array.from(new Set(array));
    },
    stringToInt(list) {
      let _list = list || [];
      _list = _list.map(val => {
        return parseInt(val, 10);
      });
      return _list;
    },
    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">`;
    },
    handleEmotion(i) {
      this.content += i;
    },
    onChooseMedia(val) {
      console.log("onChooseMedia", val);
      if (this.type === "image") {
        this.imageContent = {
          content: val.media_id,
          url: val.url
        };
        this.imageList = [{ name: val.media_id, url: val.url }];
        this.showImage = false;
      } else if (this.type === "video") {
        this.videoContent = {
          content: val.media_id,
          url: val.info.down_url
        };
        this.fileList = [{ name: val.info.title, url: val.info.url }];
        this.showVideo = false;
      } else if (this.type === "news") {
        this.newsContent = val;
        this.showMedia = false;
      }
    },
    getMediaList() {
      let type = this.activeName;
      let json = {
        type: type,
        page: this.mediaPage.nowPage,
        limit: this.mediaPage.limit
      };
      if (type === "image") {
        json.page = this.mediaImagePage.nowPage;
        json.limit = this.mediaImagePage.limit;
        this.showImage = true;
      } else if (type === "video") {
        json.page = this.mediaVideoPage.nowPage;
        json.limit = this.mediaVideoPage.limit;
        this.showVideo = true;
      } else if (type === "news") {
        json.page = this.mediaPage.nowPage;
        json.limit = this.mediaPage.limit;
        this.showMedia = true;
      }
      this.loading = true;
      getMediaListApi(json)
        .then(res => {
          this.loading = false;
          this.type = type;
          this.mediaList = res.item;
          this.mediaPage.total = res.total_count;
          if (type === "image") {
            this.mediaImageList = res.item;
            this.mediaImagePage.total = res.total_count;
          } else if (type === "video") {
            this.mediaVideoList = res.item;
            this.mediaVideoPage.total = res.total_count;
          } else if (type === "news") {
            this.mediaList = res.item;
            this.mediaPage.total = res.total_count;
          }
          if (this.total === 0) {
            this.$message({
              showClose: true,
              message: "暂无数据"
            });
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    defaultTime() {
      let date = new Date();
      let now_seconds = date.getTime();
      let start_seconds = now_seconds - 48 * 60 * 60 * 1000;
      this.searchFrom.time = [new Date(start_seconds), new Date(now_seconds)];
    }
  },
  mounted() {
    this.getMsgList();
    this.defaultTime();
  },
  computed: {
    progress() {
      return this.$store.state.progressList.find(i => {
        return i.id === this.fileUid;
      }).num < 100
        ? this.$store.state.progressList.find(i => {
            return i.id === this.fileUid;
          }).num
        : 100;
    }
  }
};
</script>

<style scoped>
.el-dialog__wrapper .el-dialog{width: 80%;}
.userInfoBox{display: flex;}
.userInfoBox .line{border-bottom: 1px solid #dcdfe6;flex: 1;height: 10px; }
.userInfoBox .text{width: 200px;text-align: center;margin-bottom: 20px;}
.tableBox{display: flex;}
.tableBox .item{flex: 1;}
.box{min-height: 500px;}
.secTitle{line-height: 50px;text-align: center;font-size: 18px;}
/* .el-radio-group{display: block;} */
.secUinput{width: 600px;margin-top: 10px;}
.el-dialog__body{padding-top: 0;}
.avatar{width: 32px;height: 32px;}
.radio_title{line-height: 45px;}
.el-radio-group .el-radio{
  width: 166px;
}
.index {
  padding: 20px 0;
}
.top {
  margin-bottom: 30px;
  margin-left: 20px;
}
.title {
  font-size: 16px;
  font-weight: 400;
  display: block;
  line-height: 1.2;
  color: #353535;
}
.inner-edit_area {
  width: 96%;
  margin: 0 auto;
}
.upload-video {
  display: block;
  margin-left: 2%;
}
.b-title {
  padding: 20px;
  color: #666;
}
.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;
}
.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 {
  box-sizing: border-box;
  margin-bottom: 25px;
  color: rgb(136, 136, 136);
  height: 148px;
  line-height: 148px;
  width: 148px;
  text-align: center;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
}
.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;
}
.flex-start {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>
<style>
.el-radio-group {
  /* display: flex !important; */
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.el-radio + .el-radio {
  margin-left: 0 !important;
}
.el-radio {
  margin-bottom: 6px;
}
</style>
