<template>
  <box title="风险收益特征" :isErrorBtn="isErrorBtn()" @errorResolution="errorResolution">
    <div class="tag-box">
      <slick-list :transitionDuration="transitiTime" @sort-start="dragStart" @sort-end="dragEnd" axis="x" v-model="dragList" class="tag-flex">
        <slick-item v-for="(item, index) in dragList" :key="index" :index="index">
          <div class="tag" v-if="item">{{ item }}</div>
        </slick-item>
      </slick-list>
    </div>
    <div class="content-box">
      <div class="answer-tag">
        <slick-list :transitionDuration="transitiTime" v-model="dragTagList" @input="dragInput" @sort-start="dragListStart" @sort-end="dragListEnd">
          <slick-item v-for="(item, index) in dragTagList" :key="index" :index="index" :class="isTagShow[index].show ? '' : 'hide'" :id="data.completions[index].id">
            <div class="height-box">
              <div :class="`input-id${index + 1} ${item ? 'tag-input2' : 'tag-input'} client-dom ${isClass(data.completions[index].is_correct)}`">
                {{ item || '请拖拽标签到此处' }}
              </div>
            </div>
          </slick-item>
        </slick-list>
      </div>
    </div>
  </box>
</template>

<script>
import $ from 'jquery'
import { SlickList, SlickItem } from 'vue-slicksort'
import Box from './Box.vue'
export default {
  components: { Box, SlickList, SlickItem },
  props: {
    data: { type: Object }
  },
  data() {
    return {
      isTagShow: [
        { show: true },
        { show: true },
        { show: true },
        { show: true }
      ],
      isShow: true,
      value: '',
      dragList: ['股票型基金', '混合型基金', '债券型基金', '货币型基金'],
      dragTagText: '',
      dragTagList: ['', '', '', ''],
      transitiTime: 0,
      True: true,
      False: false
    }
  },
  created() {
    this.data.completions.forEach((item, index) => {
      this.dragTagList[index] = item.commit_answer
      // item.commit_answer
      const cIndex = this.dragList.findIndex(cItem => { return cItem === item.commit_answer })
      this.dragList[cIndex] = ''
    })
  },
  methods: {
    isErrorBtn() {
      const findErr = this.data.completions.findIndex(item => !item.is_correct)
      return findErr + 1
    },
    errorResolution() {
      this.$emit('errorResolution', this.data)
    },
    isClass(item) {
      if (this.$route.path === '/product-analysis/result') {
        return item ? '' : 'active-red'
      }
      return ''
    },
    dragStart(event) {
      // 记录被拖的name
      this.dragTagText = this.dragList[event.index]
    },
    dragEnd(event) {
      // 记录竖排tag位置
      const domInfo = []
      $('.client-dom').each(function (index) {
        domInfo.push({
          index: index,
          top: $(this).offset().top - $(window).scrollTop()
        })
      })
      // 查找横排tag被拽到竖排的那个框里
      const clientData = this.findNearestNumber(domInfo, event.event.clientY)
      // 判断tag是否拖到指定的区域内  x
      const isItemClientX = $('.client-dom').eq(clientData.index).offset().left < event.event.clientX
      if (isItemClientX) {
        // 判断拖拽  终点位置有没有tag
        const isDragEndVal = this.dragTagList[clientData.index]
        // 横排tag被拽的索引
        const dragTagIndex = this.dragList.findIndex(item => { return item === this.dragTagText })
        if (isDragEndVal === '') {
          // 没有tag的情况，横排减少一个tag，竖排增加一个
          this.dragList[dragTagIndex] = ''
          this.dragTagList[clientData.index] = this.dragTagText
        } else {
          // 有tag的情况，互换tag位置
          this.dragList[dragTagIndex] = this.dragTagList[clientData.index]
          this.dragTagList[clientData.index] = this.dragTagText
        }
      }
      this.data.completions.map((item, index) => {
        item.commit_answer = this.dragTagList[index]
        return item
      })
    },
    dragInput() {
      this.data.completions.map((item, index) => {
        item.commit_answer = this.dragTagList[index]
        return item
      })
    },
    dragListStart(event) {
      this.isTagShow.map(item => {
        item.show = false
        return item
      })
      this.isTagShow[event.index].show = true
    },
    dragListEnd() {
      this.isTagShow.map(item => {
        item.show = true
        return item
      })
    },
    findNearestNumber(arr, target) {
      return arr.reduce((pre, curr) => {
        return Math.abs(pre.top - target) > Math.abs(curr.top - target) ? curr : pre
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-box {
  margin-top: 5px;
  height: 32px;
  .tag-flex {
    display: flex;
    justify-content: right;
  }
}
.tag {
  font-size: 14px;
  line-height: 100%;
  color: #666666;
  padding: 9px 12px;
  border: 1px solid #cbcbcb;
  border-radius: 20px;
  margin-left: 5px;
}
.content-box {
  position: relative;
  margin: 22px 0 0 19px;
  width: 491px;
  height: 325px;
  background: url(https://webapp-pub.ezijing.com/x-training-new/features-bg.png);
  background-size: 100% 100%;
}
.answer-tag{
  position: absolute;
  top: 30px;
  left: 350px;
  width: 300px;
  height: 280px;
}
.tag-input {
  font-size: 16px;
  background: none;
  outline: none;
  font-size: 12px;
  line-height: 32px;
  height: 32px;
  color: #b7b7b7;
  border-bottom: 1px solid #72b5a4;
}
.hide{
  opacity: 0;
}
.tag-input2{
  height: 32px;
  background: rgba(48,153,127, .1);
  border: 1px solid #68B8A4 !important;
  border-radius: 16px;
  font-size: 14px;
  color: #30997F;
  opacity: 1;
  line-height: 32px;
  padding: 0 12px;
  box-sizing: border-box;
  &.active-red{
    color: rgba(219, 38, 38, 1);
    border: 1px solid #D95D5D !important;
    background: rgba(219, 38, 38, .1);
  }
}
.input-id1 {
  margin-left: 40px;
}
.input-id2 {
  margin-left: 75px;
}
.input-id3 {
  margin-left: 110px;
}
.input-id4 {
  margin-left: 150px;
}
.height-box{
  // background: #000;
  display: flex;
  padding: 15px 0;
}
</style>
