<template>

  <div>
    <div class="float-tools">

      <div class="float-tool-icon" style="margin-bottom:2px" @click="toNeedCourse" v-if="identity>1">
        <!-- <svg-icon class-name="icon"  icon-class="lessons"></svg-icon> -->
          <div class="float-img">
             <el-tooltip popper-class="popper-class" effect="dark" content="做课程" placement="top-start">
                 <img :src="`${webBaseUrl}/images/explo.png`" alt="">
             </el-tooltip>
          </div>
        <!-- <span>做课程</span> -->
      </div>
      <div class="float-tool-icon" @click="$refs.addQuestion.askQuestionDialog = true">
        <!-- <svg-icon class-name="icon"  icon-class="problem"></svg-icon> -->
          <div class="float-img" title="提问题">
           <el-tooltip popper-class="popper-class" effect="dark" content="提问题" placement="top-start">
              <img :src="`${webBaseUrl}/images/issue.png`" alt="">
           </el-tooltip>
          </div>
        <!-- <span>提问题</span> -->
      </div>
      <div class="float-tool-icon" @click="toAddArticle()">
        <!-- <svg-icon class-name="icon"  icon-class="essay"></svg-icon> -->
       <div class="float-img" title="写文章">
          <el-tooltip popper-class="popper-class" effect="dark" content="写文章" placement="top-start">
            <img :src="`${webBaseUrl}/images/essay.png`" alt="">
           </el-tooltip>
        </div>
        <!-- <span>写文章</span> -->
      </div>
      <div class="float-tool-icon" @click="showFeedback()">
        <!-- <svg-icon class-name="icon"  icon-class="agree"></svg-icon> -->
       <div class="float-img" title="提意见"> 
         <el-tooltip popper-class="popper-class" effect="dark" content="提意见" placement="top-start">
          <img :src="`${webBaseUrl}/images/opinion.png`" alt="">
         </el-tooltip>
       </div>
        <!-- <span>提意见</span> -->
      </div>
      <div class="float-tool-icon" @click="infoShow=true">
        <!-- <svg-icon class-name="icon"  icon-class="server"></svg-icon> -->
        <div class="float-img" title="联系我们">
          <el-tooltip popper-class="popper-class" effect="dark" content="联系我们" placement="top-start">
            <img :src="`${webBaseUrl}/images/contact.png`" alt="">
            </el-tooltip>
          </div>
        <!-- <span>联系我们</span> -->
      </div>
      <div class="float-tool-icon"  style="margin-top:2px" @click="backtop">
        <!-- <svg-icon class-name="icon"  icon-class="top"></svg-icon> -->
       <div class="float-img" title="返回顶部"> 
         <el-tooltip popper-class="popper-class" effect="dark" content="返回顶部" placement="top-start">
           <img :src="`${webBaseUrl}/images/back.png`" alt="">
         </el-tooltip>
        </div>
        <!-- <span>返回顶部</span> -->
      </div>
    </div>
    <!-- <div class="float-tools">
      <el-tooltip class="item" effect="light" content="返回顶部" placement="left">
        <div class="float-tool" @click="backtop">
          <div class="float-tool-icon">
            <svg-icon class-name="icon"  icon-class="top"></svg-icon>
          </div>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="light" content="做课程" placement="left">
        <div class="float-tool">
          <div class="float-tool-icon">
            <svg-icon class-name="icon"  icon-class="lessons"></svg-icon>
          </div>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="light" content="提问题" placement="left">
        <div @click="$refs.addQuestion.askQuestionDialog = true" class="float-tool">
          <div class="float-tool-icon">
            <svg-icon class-name="icon" icon-class="problem"></svg-icon>
          </div>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="light" content="写文章" placement="left">
        <div class="float-tool">
          <div class="float-tool-icon">
            <router-link to="/article/add">
              <svg-icon class-name="icon" icon-class="essay"></svg-icon>
            </router-link>
          </div>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="light" content="提意见" placement="left">
        <div @click="showFeedback()" class="float-tool">
          <svg-icon class-name="icon" icon-class="agree"></svg-icon>
        </div>
      </el-tooltip>
      <div class="float-tool" @click="infoShow=true" style="height: 200px;">
        <div>
          <div class="float-tool-icon"><svg-icon class-name="icon" icon-class="server"></svg-icon></div>
          <div class="concatOur">联系我们</div>
        </div>
      </div> -->

    <!-- </div> -->
    <el-dialog title="联系我们" :close-on-click-modal="false" :visible.sync="infoShow" width="800px" custom-class="g-dialog">
          <el-form :model="feedback" size="medium" label-width="100px">
            <el-form-item label="姓名:" >李玉冰</el-form-item>
            <el-form-item label="工号:">00004409</el-form-item>
            <el-form-item label="电话:">010414134</el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="infoShow= false">关闭</el-button>
          </span>
    </el-dialog>
    <el-dialog title="提交意见" :close-on-click-modal="false" :visible.sync="feedbackDlgShow" width="800px" custom-class="g-dialog">
          <el-form ref="feedbackForm" :model="feedback" :rules="feedbackRules" size="medium" label-width="100px">
            <el-form-item label="意见类型" prop="type">
              <el-select v-model="feedback.type" placeholder="请选择意见类型">
                <el-option label="关于内容" value="关于内容"></el-option>
                <el-option label="关于平台操作" value="关于平台操作"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="content">
              <el-input v-model="feedback.content" rows="10" type="textarea" placeholder="尽量的详细描述问题" :maxlength="500" show-word-limit clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="feedbackDlgShow= false">取 消</el-button>
            <el-button type="primary" @click="submitFeedback">提 交</el-button>
          </span>
    </el-dialog>
    <addQuestion ref="addQuestion" @sure="sure"></addQuestion>
    <el-dialog title="创建文章" :visible.sync="diagSync" top="14vh" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
      <editItems v-if="diagSync" :jumpLimit="false" :editForm="{}" @success="saveSuccess"></editItems>
    </el-dialog>
  </div>
</template>

<script>
  import WxEditor from "@/components/Editor/index.vue";
  import addQuestion from '@/components/Qa/addQuestion.vue'
  import feedbackApi from '@/api/modules/feedback.js'
  import editItems from '@/components/Article/editItems.vue';
  import { mapGetters } from 'vuex';
export default {
  components:{WxEditor,addQuestion,editItems},
  data() {
    return {
      infoShow:false,
      feedback:{
        type:'',
        content:''
      },
      feedbackRules:{
        type: [{ required: true, message: '请选择意见类型', trigger: 'blur' }],
        content: [{ required: true, message: '请输入意见描述', trigger: 'blur' }]
      },
      feedbackDlgShow:false,
      diagSync:false,
    }
  },
  computed: {
      ...mapGetters(['identity','userInfo'])
  },
  methods: {
    saveSuccess(){
      // this.$emit('update',true);
      this.diagSync = false;
    },
    toPage(url) {
      this.$router.push({ path: url })
    },
    showFeedback(){
      this.feedback.type = '';
      this.feedback.content = '';
      this.feedbackDlgShow=true;
    },
    submitFeedback(){
      this.$refs.feedbackForm.validate(valid => {
          if (valid) {
            feedbackApi.save(this.feedback).then(res => {
              if (res.status == 200) {
                this.$message(
                {
                  type:'success',
                  message:'提交意见成功'
                });
                this.feedbackDlgShow=false;

                let event = {
                  key: "Feedback",//后台的事件key
                  title: "意见反馈",//事件的标题
                  parameters:"",//用户自定义参数 name:value,name:value
                  content: '意见反馈',//事件的内容
                  objId: res.result.id,//关联的id
                  objType:'99',//关联的类型
                  objInfo: "意见反馈",
                  aid: this.userInfo.aid, //当前登录人的id
                  aname: this.userInfo.name,//当前人的姓名
                  status: 1 //状态，直接写1
                }
                this.$store.dispatch("userTrigger", event);
              } else {
                this.$message({
                  type:'error',
                  message:'提交意见失败'
                });
              }
            }).catch(err=>{
              this.message({
                message:'提交意见失败',
                type:'error'
              })
            });
          }
        });
    },
    /**
     * 回到顶部功能实现过程：
     * 1. 获取页面当前距离顶部的滚动距离（虽然IE不常用了，但还是需要考虑一下兼容性的）
     * 2. 计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是做一个减法
     * 3. 用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
     * 4. 最后记得在移动到顶部时，清除定时器
     */
    backtop() {
      var timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop
        let ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 30)
    },
    sure(){
      this.$emit('sure',true)
    },
    toAddArticle(){
      this.diagSync=true;
      // this.$router.push('/article/add')
    },
    toNeedCourse(){
      // 需要先切换标签
      console.log('this.identity='+this.identity);
      if(this.identity==5 || this.identity==2){
        this.$store.dispatch('SetCurIdentity',2);
        // this.$router.push('/need/course?open=new');
        location.href =`${this.webBaseUrl}/need/course?open=new`
      }else if(this.identity==3){
        this.$store.dispatch('SetCurIdentity',3);
        this.$router.push('/course/manage?open=new');
      }
    }
  },
}
</script>
<style scoped lang="scss">
  .popper-class{
    background-color: #ccc;
  }
  .float-tools{
    position: fixed;
    // background: white;
    // box-shadow:0px 0px 10px #999;
    border-radius: 4px;
    // border: 1px solid #f0f0f0;
    right: 15px;//由24修改为15
    bottom: 126px;
    // padding:0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    .float-tool-icon{
      background: white;
      padding:8px;
      cursor: pointer;
      // padding: 8px 0;
      // border-bottom: 1px solid #999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size:12px;
      font-weight: 600;
      &:last-of-type{
        border-bottom: 0;
      }
      span{
          padding-top: 5px;
        }
      .float-img{
         width: 16px;
         height: 16px;

         img{
           width: 100%;
           height: 100%;
         }
      }

      .svg-icon{
        font-size: 20px;
      }
    }
  }
//   .icon{
//     width: 20px;
//     height: 20px;
//   }
// .float-tools {
//   position: fixed;
//   right: 10px;
//   bottom: 40px;
//   padding:0 10px;
//   .float-tool {
//     padding: 2px;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     width: 55px;
//     height: 55px;
//     border-radius: 65px;
//     text-align: center;
//     color: #409eff;
//     text-align: center;
//     font-size: 20px;
//     box-shadow: 0 0 6px rgb(0 0 0 / 12%);
//     cursor: pointer;
//     z-index: 5;
//     background-color: transparent;
//     margin-top: 15px;
//     >.svg-icon{
//       padding: 12px;
//       border-radius: 50%;
//       box-sizing: content-box;
//       background: rgba(192,192,192,.3);
//     }
//     .float-tool-icon{
//       padding: 12px;
//       // line-height: 65px;
//       display: flex;
//       // justify-content: center;
//       align-items: center;
//       background: rgba(192,192,192,.3);
//       border-radius: 50%;
//       a{
//         display: flex;
//         justify-content: center;
//         align-items: center;
//       }
//     }
//   }
//   .float-tool:last-of-type{
//     padding: 5px;
//     >div{
//       height: 100%;
//       width: 100%;
//       border-radius: 65px;
//       background: rgba(192,192,192,.3);
//       background-blend-mode: multiply;
//       flex-direction: column;
//       justify-content: space-between;
//       align-items: center;
//       .float-tool-icon{
//         background: transparent;
//       }
//       .concatOur{
//         padding: 0px 5px;
//         // text-align: center;
//         writing-mode: horizontal-tb;
//         // writing-mode:tb-rl;
//       }
//     }
//   }
// }

// .avatar-uploader .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
// .avatar-uploader .el-upload--picture-card{
//   width: 200px;
// }
// .avatar-uploader .el-upload:hover {
//   border-color: #409EFF;
// }
// .avatar-uploader-icon {
//   font-size: 28px;
//   color: #8c939d;
//   text-align: center;
//   margin-top: 50px;
//   display: block;
// }
// .icon-text{
//   font-size: 14px;
//   display: block;
//   height: 30px;
//   line-height: 35px;
// }
// .avatar {
//   width: 250px;
//   height: 178px;
//   display: block;
// }
</style>
