<template>
  <!--右侧画笔工具栏-->
  <div class="tools">
    <ul id="tool2">
     
      <li value="menu" title="菜单" class="active" @click="handleMenu()">
        <!--<li value="menu" title="菜单" class="active">-->
        <span class="fontbox">
          <svg-icon icon-class="hi" class="fill-icon" />
        </span>
      </li>
    
      <!--<li value="check" title="选择" @click="Tools('check')">-->
      <!--<li value="check" title="选择">
          <span :class="['fontbox',mode=='check'?'active' : '']">
              <font-awesome-icon icon="mouse-pointer" />
          </span>
    </li>-->
      <li value="check" title="选择" class="vertical-tools">
        <Poptip content="content" placement="left-start" trigger="click">
          <span :class="['fontbox', mode == 'check' ? 'active' : '']">
            <font-awesome-icon v-if="this.$store.state.checkvalue=='hand'" icon="hand-rock" class="handrock-icon"  />
             <svg-icon  v-else icon-class="select" class="stroke-icon" @click="tx = true" />
          </span>
          <div slot="content">
            <CheckBox></CheckBox>
          </div>
        </Poptip>
      </li>
        <li value="undo" title="撤回" class="active">
        <span class="fontbox">
          <svg-icon icon-class="undo" class="stroke-icon" />
        </span>
      </li>

      <li value="pencil-alt" title="画笔" class="pop_box" @click="hb()">
        <Poptip content="content" placement="left-start" trigger="click">
          <span :class="['fontbox', mode == 'pencil-alt' ? 'active' : '']">
            <font-awesome-icon :icon="penType ? penType : 'pencil-alt'" @click="alert = true" />
          </span>
          <div slot="content">
            <ColorPicker></ColorPicker>
          </div>
        </Poptip>
      </li>
      <!--<li value="laser" title="镭射笔">-->
      <!--<Poptip content="content" placement="left-start" trigger="hover">-->
      <!--<span class="fontbox">-->
      <!--<font-awesome-icon icon="magic" @click="alert = true"/>-->
      <!--</span>-->
      <!--<div slot="content">-->
      <!--<LaserPicker></LaserPicker>-->
      <!--</div>-->
      <!--</Poptip>-->
      <!--</li>-->
      <li value="shape" title="图形" class="pop_box" @click="hb()">
        <Poptip content="content" placement="left-start" trigger="click">
          <span :class="['fontbox', mode == 'shape' ? 'active' : '']">
            <svg-icon v-if="shapeTypeIcon == 'shapes' || shapeTypeIcon == ''" icon-class="shap" class="stroke-icon" />
            <q-icon v-else-if="shapeTypeIcon == 'trending_flat' || shapeTypeIcon == 'remove'" :name="shapeTypeIcon" style="transform: rotate(-45deg)" />
            <q-icon v-else-if="shapeType == 'ellipse'" style="transform: scaleX(1.2);" :name="shapeTypeIcon" />
            <q-icon v-else :name="shapeTypeIcon" />
          </span>
          <div slot="content">
            <shapes></shapes>
          </div>
        </Poptip>
      </li>
      <li value="text" title="文字" @click="hb()">
        <Poptip content="content" placement="left-start" trigger="click">
          <span :class="['fontbox', mode == 'text' ? 'active' : '']">
            <svg-icon icon-class="text" class="stroke-icon" />
          </span>
          <div slot="content">
            <TextPicker></TextPicker>
          </div>
        </Poptip>
      </li>
      <li value="eraser" title="橡皮擦" class="vertical-tools">
        <Poptip content="content" placement="left-start" trigger="click">
          <span :class="['fontbox', mode == 'eraser' ? 'active' : '']">
            <font-awesome-icon :icon="this.$store.state.eraser == 'eraser'?'eraser':'trash-alt'" @click="tx = true" />
          </span>
          <div slot="content">
            <Eraser></Eraser>
          </div>
        </Poptip>
      </li>
      <!--<li value="clear" title="清空">-->
      <!--<span class="fontbox">-->
      <!--<font-awesome-icon icon="trash-alt"/>-->
      <!--</span>-->
      <!--</li>-->
      <!--<li value="hand" title="抓手">-->
      <!--<span class="fontbox">-->
      <!--<font-awesome-icon icon="hand-rock"/>-->
      <!--</span>-->
      <!--</li>-->
      <li value="zooms" title="缩放工具" class="pop_box">
        <Poptip content="content" placement="left-start" trigger="click">
          <span :class="['fontbox', mode == 'zooms' ? 'active' : '']">
              <svg-icon icon-class="zoom" class="fill-icon"  @click="tx = true" />
          
          </span>
          <div slot="content">
            <Zoom></Zoom>
          </div>
        </Poptip>
      </li>
      <li>
        <span title="回到原始比例"  class="fontbox zoomToDefault-btn" @click="zoomToDefault"><p>1:1</p></span>
      </li>
      <li title="上一页">
        <span class="fontbox" @click="previousPage()">
          <svg-icon icon-class="prev" class="stroke-icon" />
        </span>
      </li>
      <li title="新建一页" @click="addNew">
        <span class="fontbox">
          <svg-icon icon-class="new-page" class="stroke-icon" />
        </span>
      </li>
      <li title="下一页">
        <span class="fontbox" @click="nextPage()">
          <svg-icon icon-class="next" class="stroke-icon" />
        </span>
      </li>
    </ul>
    <ul>
      <li title="挑人" @click="handlePick()">
        <span class="fontbox">
          <svg-icon icon-class="choose-student" class="stroke-icon" />
        </span>
      </li>
      <li title="定时器" @click="handleTimer()">
        <span class="fontbox">
          <svg-icon icon-class="timer" class="stroke-icon" />
        </span>
      </li>
      <li title="IRS即问即答" @click="irsstart('irs')" v-show="students!=''">
        <span class="fontbox">
          <svg-icon icon-class="irs-icon" class="fill-icon irs-icon" />
        </span>
      </li>
      <li title="IRS填空" @click="irsstart('text')" v-show="students!=''">
        <span class="fontbox">
          <!--<img src="@/statics/iconsvg/interaction/irstext.svg"/>-->
          <!--<font-awesome-icon icon="fa-edit" />-->
          <svg-icon icon-class="irs-text" class="stroke-icon" />
        </span>
      </li>
      <li title="IRS作品收集" @click="irsstart('irsGather')" v-show="students!=''">
        <span class="fontbox">
          <!--<img src="@/statics/iconsvg/interaction/irstext.svg"/>-->
          <!--<font-awesome-icon icon="fa-edit" />-->
          <svg-icon icon-class="collate" class="fill-icon" />
        </span>
      </li>
    </ul>
    <!--ul id="tool4" v-show="students!=''"-->
      <!--<li title="推送" @click="irsNews()">-->
      <!--<span class="fontbox">-->
      <!--<font-awesome-icon icon="file-upload"/>-->
      <!--</span>-->
      <!--</li>-->

      <!--<li title="计分板" @click="handleRang()">-->
      <!--<span class="fontbox">-->
      <!--<font-awesome-icon icon="thumbs-up"/>-->
      <!--</span>-->
      <!--</li>-->

      <!--<li title="提问" @click="handQuestion()">-->
      <!--<span class="fontbox">-->
      <!--<i class="fab fa-quora"></i>-->
      <!--</span>-->
      <!--</li>-->
      <!--<li title="提问" class="vertical-tools">
        <Poptip content="content" placement="left-start" trigger="click">
          <span class="fontbox">
               <i class="fab fa-quora"></i>
          </span>
          <div slot="content">
            <Ques></Ques>
          </div>
        </Poptip>

      </li>-->
      <!-- <li title="翻牌" @click="handleFan()" >
        <span class="fontbox">
          <font-awesome-icon icon="user-friends" />
        </span>
      </li> -->
      <!--<li title="条形图" @click="handleEchart()">-->
      <!--<span class="fontbox">-->
      <!--<font-awesome-icon icon="chart-bar"/>-->
      <!--</span>-->
      <!--</li>-->
      <!--<li title="饼图" @click="handlePie()">-->
      <!--<span class="fontbox">-->
      <!--<font-awesome-icon icon="chart-pie"/>-->
      <!--</span>-->
      <!--</li>-->
    <!-- </ul> -->

    <!--<ul id="tool3">-->
    <!--<li title="新建一页">-->
    <!--<span class="fontbox">-->
    <!--<font-awesome-icon icon="file-medical"/>-->
    <!--</span>-->
    <!--</li>-->
    <!--<li title="上一页">-->
    <!--<span class="fontbox">-->
    <!--<font-awesome-icon icon="long-arrow-alt-up"/>-->
    <!--&lt;!&ndash;<q-btn push round dense color="orange" text-color="black" icon="arrow_left" @click="$refs.carousel.previous()"/>&ndash;&gt;-->
    <!--</span>-->
    <!--</li>-->
    <!--<li title="下一页">-->
    <!--<span class="fontbox">-->
    <!--<font-awesome-icon icon="long-arrow-alt-down"/>-->
    <!--</span>-->
    <!--</li>-->
    <!--</ul>-->
    <Card :styleObj="styleObj" :componentIndex="componentIndex" v-if="isShowCard"></Card>
  </div>
</template>

<script>
import Card from './Card.vue'
import ColorPicker from './ColorPop/ColorPicker.vue'
import LaserPicker from './ColorPop/LaserPicker.vue'
import TextPicker from './ColorPop/TextPicker.vue'
import shapes from './ColorPop/Shapes.vue'
import Zoom from './ColorPop/Zoom.vue'
import Eraser from './ColorPop/Eraser.vue'
import Ques from './ColorPop/Ques.vue'
import CheckBox from './ColorPop/Checkbox.vue'
import SvgIcon from '../views/SvgIcon.vue'
export default {
  name: 'toolBox',
  components: {
    Card,
    ColorPicker,
    LaserPicker,
    TextPicker,
    shapes,
    Zoom,
    Eraser,
    Ques,
    CheckBox,
    SvgIcon
  },
  data() {
    return {
      mode: '',
      penType: this.$store.state.penType,
      shapeType: this.$store.state.shapeType,
      shapeTypeIcon: this.$store.state.shapeTypeIcon,
      color: '',
      stroke: '#0000ff',
      shapeColor: '#0000ff',
      shapeStroke: '#0000ff',
      componentIndex: 0,
      list: [],
      isShowCard: false,
      styleObj: {
        isShow: false,
        width: '0px',
        height: '0px',
        // maxWidth: "0px",
        // marginLeft: "0px",
        marginTop: '0px',
        backgroundColor: 'unset',
        boxShadow: 'unset'
      },
      carousel: this.$store.state.carousel,
      students: this.$store.state.students
    }
  },
  methods: {
    //IRS即问即答和填空
    zoomToDefault(){
        this.$store.state.zoomType = 'same'
         this.$store.state.zoom = 1
    },
    async irsstart(name) {
      if (this.$parent.irshint == false) {
        await this.addNew()
        this.$parent.irshint =true
        this.$Message.info('此页已有题目，自動新增一页开启互动')
        this.irsstart(name)
        return
      }
      var times = new Date().getTime()
      //关于irs即问即答和文字
      var msgInitiative = {
        action: 'State.Get',
        clientType: 'HiTeachCC',
        sender: localStorage.getItem('user').sub,
        timestamp: times,
        waitReturn: false,
        payload: ''
      }

      if (name === 'irs') {
        console.log(this.$parent, '父级内容')
        this.handleFan()
        this.$parent.singnalRMessage(msgInitiative, '8888', '', 'irsImmediately')
        this.$parent.irshint = false
      } else if (name === 'text') {
        this.handleFan()
        this.$parent.singnalRMessage(msgInitiative, '8888', '', 'irsText')
        this.$parent.irshint = false
      } else if (name === 'irsGather') {
        this.$parent.workStatus = true
        this.$parent.singnalRMessage(msgInitiative, '8888', '', 'irsGather')
      }
    },
    // 工具切换
    Tools(mode) {
      console.log(mode)
      let that = this
      let stage = that.stage
      let layer = that.layer
      // let tools = document.getElementById('tool2').getElementsByTagName('li')
      // for (let i = 0; i < tools.length; i++) {
      //   tools[i].addEventListener('click', function () {
      let val = mode
      // console.log(val)
      if (!val) {
        return
      }
      that.$store.state.mode = val
      // console.log(that.$store.state.mode)
      if (val === 'eraser') {
        if (val === that.$store.state.eraser) {
          that.mode = 'eraser'
        } else {
          that.$store.state.eraser = 'eraser'
          // layer.children.length = 0
          // layer.batchDraw()
        }
      } else {
        that.mode = val
        // stage.find('Transformer').destroy()
        // layer.draw()
      }
      if (val === 'zooms') {
        let zoomType = that.$store.state.zoomType
        console.log(zoomType)
        if (zoomType === 'hand') {
          that.mode = that.$store.state.zoomType
          console.log(that.mode, 3333)
        }
      }

      // if (val == 'pencil-alt') {
      //   if (that.$store.state.penType2) {
      //     that.$store.state.penType = that.$store.state.penType2
      //   } else {
      //     that.$store.state.penType = 'pencil-alt'
      //   }
      //   // anim.stop();
      // } else {
      //   that.$store.state.penType2 = that.$store.state.penType
      //   that.$store.state.penType = ''
      // }
      // console.log(that.$store.state.penType)
      // })

      // }
    },
    // 菜单
    handleMenu() {
      // this.styleObj.isShow = true
      // this.styleObj.width = '1000px'
      // this.styleObj.height = '600px'
      // // this.styleObj.maxWidth = "400px";
      // // this.styleObj.marginLeft = "0px";
      //this.styleObj.marginLeft = '0px'
      // this.styleObj.marginTop = '0px'
      // this.styleObj.backgroundColor = '#fff'
      // this.componentIndex = 10
      // this.isShowCard = true
      this.$emit('HiisShow', true)
    },
    // 菜单
    irsNews(index) {
      this.styleObj.isShow = true
      this.styleObj.width = '1000px'
      this.styleObj.height = '600px'
      // this.styleObj.maxWidth = "400px";
      // this.styleObj.marginLeft = "0px";
      this.styleObj.marginTop = '-50px'
      this.styleObj.backgroundColor = '#fff'
      this.componentIndex = 11
      this.isShowCard = true
    },
    // 挑人
    handlePick() {
      this.$emit('handleToolPick', 1)
      document.body.classList.remove('cursor-fdj')
    },
    // 倒计时
    handleTimer() {
      this.$emit('handleToolPick', 2)
      document.body.classList.remove('cursor-fdj')
    },
    // 翻牌
    handleRang() {
      this.styleObj.isShow = true
      this.styleObj.width = '1800px'
      this.styleObj.height = '400px'
      this.styleObj.maxWidth = '1800px'
      //this.styleObj.marginLeft = '0px'
      //this.styleObj.marginTop = '420px'
      this.styleObj.backgroundColor = '#f9f9f9'
      this.componentIndex = 7
      this.isShowCard = true
    },

    // 翻牌
    handleFan() {
      this.styleObj.isShow = true
      this.styleObj.width = '100%'
      this.styleObj.height = '300px'
      this.styleObj.maxWidth = '100%'
      this.styleObj.marginLeft = '0px'
      this.styleObj.marginTop = '0px'
      //this.styleObj.position= 'fixed'
      //this.styleObj.bottom='0px'
      this.styleObj.backgroundColor = '#EDEDED'
      this.styleObj.boxShadow = '0px 0px 10px 6px #707070'
      //this.styleObj.overflow='hidden'
      this.componentIndex = 1
      this.isShowCard = true
    },

    // 柱状图
    handleEchart() {
      this.styleObj.isShow = true
      this.styleObj.width = '1400px'
      this.styleObj.height = '400px'
      this.styleObj.maxWidth = '1400px'
      this.styleObj.marginLeft = '0px'
      this.styleObj.marginTop = '420px'
      this.styleObj.backgroundColor = '#f9f9f9'
      this.componentIndex = 4
      this.isShowCard = true
    },

    // 饼图
    handlePie() {
      this.styleObj.isShow = true
      this.styleObj.width = '1400px'
      this.styleObj.height = '400px'
      this.styleObj.maxWidth = '1400px'
      this.styleObj.marginLeft = '0px'
      this.styleObj.marginTop = '420px'
      this.styleObj.backgroundColor = '#f9f9f9'
      this.componentIndex = 5
      this.isShowCard = true
    },
    //下一页
    nextPage() {
      var cfilStatus = localStorage.getItem('fileType')
      var nPage = localStorage.getItem('slide')
      var allPage = this.$store.state.totalpage
      if (cfilStatus === 'pdf') {
        // this.carousel.next()
        if(this.$store.state.carouselSlide<this.$store.state.imgArr.length){
           this.$store.state.carouselSlide = this.$store.state.carouselSlide + 1
        }
        else{
          this.$Message.warning('目前已經是最後一頁!')
        }
       
      } else if (cfilStatus === 'ppt') {
        if (nPage !== allPage) {
          this.$store.state.carouselSlide = this.$store.state.carouselSlide + 1
        }
      }
    },
    //上一页
    previousPage() {
      var cfilStatus = localStorage.getItem('fileType')
      var nPage = localStorage.getItem('slide')
      if (cfilStatus === 'pdf') {
        // this.carousel.previous()
        console.log(this.$store.state.carouselSlide)
        if(this.$store.state.carouselSlide>1){
           this.$store.state.carouselSlide = this.$store.state.carouselSlide - 1
        }
       
      } else if (cfilStatus === 'ppt') {
        if (nPage > 1) {
          this.$store.state.carouselSlide = this.$store.state.carouselSlide - 1
        }
      }
    },
    addNew() {
      this.$store.state.addNew = true
    },
    hb() {
      document.body.classList.remove('cursor-fdj')
    }
  },
  created() {},
  mounted() {},
  computed: {
    watchUrl() {
      return this.$store.state.penType
    },
    watchShapeType() {
      return this.$store.state.shapeType
    },
    watchCarousel() {
      return this.$store.state.carousel
    },
    watchMode() {
      return this.$store.state.mode
    }
  },
  watch: {
    watchUrl(e) {
      if (e) {
        this.penType = this.$store.state.penType
      }
    },
    watchShapeType(e) {
      if (e) {
        console.log(e)
        this.shapeType = this.$store.state.shapeType
        this.shapeTypeIcon = this.$store.state.shapeTypeIcon
      }
    },
    watchCarousel(e) {
      if (e) {
        this.carousel = this.$store.state.carousel
      }
    },
    watchMode(e) {
      if (e) {
        this.mode = this.$store.state.mode
      }
    }
  }
}
</script>

<style lang="less">
.vertical-tools {
  .ivu-poptip-popper {
    left: -75px !important;
    min-width: 0 !important;
  }

  .ivu-radio-wrapper {
    display: block !important;
    margin-bottom: 5px !important;
  }
  .slider_box {
    width: 20px !important;
  }

  .secondary_title {
    text-align: left;
  }
  .shapes_icon {
    margin: 12px 0;
  }
}

.q-color-picker__palette-rows--editable .q-color-picker__cube {
  border-radius: 50%;
  margin: 4px;
  width: 20px !important;
  height: 20px;
  border: 2px solid #fff;
}

.q-color-picker__palette-rows--editable .q-color-picker__cube {
}

.q-color-picker {
  box-shadow: none !important;
}

.shapes_icon {
  cursor: pointer;
}
/*.q-card {
    max-width: 1920px !important;
    max-height: 1080px !important;
  }*/
.ivu-slider-button {
}
.ivu-slider-button-wrap {
  top: -1px !important;
}
/*.q-gutter-y-sm > *, .q-gutter-sm > *{margin-left:1px !important;}*/
.ivu-poptip-popper {
  left: -260px !important;
  min-height: 0;
}
</style>
