<!doctype html>

<div class="ask-con" @click="closeEmoji">
  <div class="ask-top">
    <el-button class="fr return-btn" @click="returnPage('UserCourseDetailPeriodTable')">返回课时列表</el-button>
    <ks-title title="答疑" :underline="true" />
  </div>
  <div style="margin-top: 20px;margin-bottom: 8px;">
    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" placeholder="请输入你的问题" v-model="textarea">
    </el-input>
    <div slot="footer" class="footer-btn">
      <el-button class="danger-btn" type="primary" @click="save">发布问题</el-button>
      <div class="icon-box fl">
        <ks-image style="width: 22px;height: 22px; margin-right:10px" @click.stop="toggleEmoji" src="/KS_Inc/member-center/images/coursedetail/lesson_btn_face@2x.png" class="fl icon-face"></ks-image>
        <ks-image style="width: 22px;height: 22px;" @click="toggleImg" src="/KS_Inc/member-center/images/coursedetail/lesson_btn_pic@2x.png" class="fl icon-img"></ks-image>
        <div class="emoji-wrap clearfix" v-if="showEmoji">
          <span v-for="(item,i) in emojiList" :key="i" @click="setEmoji(item.name)">
            <ks-image style="width: 22px;height: 22px;" :src="item.url" class="emoji-item__image"></ks-image>
          </span>
        </div>
      </div>
    </div>
    
    <div v-if="showImg">
      <div class="dialog-image__list">
        <div class="fl image-box" v-for="(item,i) in imageList" :key="i">
          <ks-image class="ask-image__list" :src="item"></ks-image>
          <i class="image-close" @click="delImage(i)"></i>
        </div>
        <el-upload class="upload-demo" :action="`/webapi/user/UploadFile?apptoken=${$store.state.appToken}`"
          :on-success="handleSuccess" multiple :show-file-list="false" :file-list="fileList">
          <div class="add-image">
            <div class="add-pic"></div>
          </div>
        </el-upload>
      </div>
      <div class="max-image">最多可传3张</div>
    </div>
  </div>
  <div v-loading="loading">
    <div class="list">
      <div class="item" v-for="(item,i) in list" :key="i">
        <ks-image class="user-face" :src="item.userface"></ks-image>
        <div style="overflow: hidden">
          <div class="item-date-box">
            <div class="item-date">
              {{item.username}}
              <span class="fr" style="color:#A4AAB2;font-size:12px;">{{item.adddate}}</span>
              <span @click="del(item.topicid)" v-show="mytype">删除</span>
            </div>
            <div class="item-title" @click="open(item.view_url)" v-html="item.content"></div>
          </div>
        </div>
        <div class="image-list" v-if="item.showpics.length>0">
          <ks-image class="ks-image" :src="site.pic_url" v-for="(site,s) in item.showpics" :key="s"
            @click="lookImg(item.showpics,s)"></ks-image>
        </div>
        <div class="ask-reply" v-show="!item.isShowReply">
          <div class="answer" v-for="(reply, index) in item.replyList" :key="index">
            <ks-image class="teacher-image" :src="reply.userface"></ks-image>
            <div class="item-date">
              <span class="fr" style="color: #A4AAB2;font-size: 12px;">{{reply.adddate}}</span>
              {{reply.username}}
            </div>
            <div class="item-title" @click="open(item.view_url)">{{reply.content}}</div>
            <div class="image-list" v-if="reply.showpics.length>0">
              <ks-image class="ks-image" :src="site.pic_src" v-for="(site,s) in reply.showpics" :key="s"
                @click="lookImg(reply.showpics,s)"></ks-image>
            </div>
          </div>
        </div>
        <div class="item-teacher" v-if="item.postnum>0" @click="getReply(item)">
          <span>{{item.isShowReply?'展开':'收起'}}更多回答</span>
          <i class="el-icon-arrow-up zhedie" v-if="!item.isShowReply"></i>
          <i class="el-icon-arrow-down zhedie" v-else></i>
        </div>

      </div>
    </div>
    <el-pagination style="text-align: center;padding:20px 0;" background layout="prev, pager, next" :current-page="page"
      :total="pageCount" @current-change="getUserAskTopList" v-if="pageCount > 0" />
    <ks-empty msg="暂无相关提问和内容，你可以提问" v-else />
  </div>
  <!-- 预览大图 -->
  <div class="look-img__dialog" v-if="imageDialogVisible">
    <el-dialog :visible.sync="imageDialogVisible" modal close-on-click-modal custom-class="dialog" fullscreen
      :show-close="true">
      <el-carousel :autoplay="false" :initial-index="activeImageIndex" arrow="always">
        <el-carousel-item v-for="(item,i) in imgList" :key="i">
          <ks-image class="ks-image" :src="item.pic_src" fit="contain"></ks-image>
          <i class="dialog-image__close" @click="imageDialogVisible=!imageDialogVisible"></i>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>

</div>