<template>
  <div class="user-study">
    <h5>请为您的目标人群选择特征</h5>
    <div class="container">
      <div class="left">
        <div class="top-bar">
          <el-button v-show="!showTool" type="primary" size="medium" round @click="showTool = true">编程工具</el-button>
          <el-button v-show="showTool" type="primary" size="medium" round @click="showTool = false">关闭工具</el-button>
        </div>
        <div class="questions" v-if="!showTool">
          <multiple-choice :choice="current.choice" v-if="status !== 1">
            <template #btn-prev v-if="status === 0">
              <el-button v-if="current.index !== 0" size="medium" @click="handlePrev" round>上一题</el-button>
            </template>
            <template #btn-center v-if="status === 2">
              <el-button size="medium" @click="handleReturn" round>返回</el-button>
            </template>
            <template #btn-next v-if="status === 0">
              <el-button v-if="current.index < questions.length - 1" type="primary" size="medium" @click="handleNext" round>下一题</el-button>
              <el-button v-else type="primary" size="medium" @click="handleComplete" round>完成选择</el-button>
            </template>
          </multiple-choice>
          <div v-else class="complete">
            <p>根据您选择的目标人群特征分析，此类受众并不适合当前的金融产品,请重新选择！</p>
            <answer-list :list="questions" @select="handleSelect"></answer-list>
            <div style="text-align:center;">
              <el-button type="primary" size="medium" @click="handleFinish" round>完成报告</el-button>
            </div>
          </div>
        </div>
        <div class="tool" v-else>
          <codemirror class="code" v-model="code"></codemirror>
          <div style="text-align:center;padding-top:15px;">
            <el-button type="primary" size="medium" @click="handleSubmit" round>确认提交</el-button>
          </div>
        </div>
      </div>
      <div class="right">
        <tabs v-model="tabActive" :list="list" @tab-click="handleTabClick"></tabs>
        <div class="echart-cont" v-show="tabActive === '1'">
          <echart-bar :value="current.choice"/>
        </div>
        <user-table v-show="tabActive === '2'" />
      </div>
    </div>
  </div>
</template>

<script>
// 组件
import MultipleChoice from '../components/MultipleChoice.vue'
import Tabs from '../components/Tabs.vue'
import AnswerList from '../components/AnswerList.vue'
import UserTable from '../components/UserTable.vue'
import EchartBar from '../components/EchartBar.vue'
// api
import { getQuestions } from '../api'
export default {
  components: { MultipleChoice, Tabs, AnswerList, UserTable, EchartBar },
  data() {
    return {
      showTool: false,
      questions: [
        {
          id: '111',
          title: '消费者年龄',
          options: [
            { label: '18岁以下', value: 1 },
            { label: '18-30岁', value: 2 },
            { label: '31-45岁', value: 3 },
            { label: '46-60岁', value: 4 }
          ],
          selection: [],
          index: 1
        }
      ],
      selection: [],
      current: {
        index: 0,
        choice: {}
      },
      status: 0, // 0未完成，1，已完成，2，修改
      code: '',
      tabActive: '1',
      list: [
        { label: '数据展示', value: '1' },
        { label: '数据列表', value: '2' }
      ]
    }
  },
  created() {
    window.setTimeout(() => {
      this.current.index = 0
      this.current.choice = this.questions[0]
    }, 1000)
    this.fetchQuestions()
  },
  methods: {
    handlePrev() {
      this.current.index--
      this.current.choice = this.questions[this.current.index]
    },
    handleNext() {
      if (this.current.index < this.questions.length - 1) {
        this.current.index++
        this.current.choice = this.questions[this.current.index]
      }
    },
    handleComplete() {
      console.log(this.questions)
      this.status = 1
    },
    handleTabClick() {},
    handleSelect(val) {
      this.current.index = val.index - 1
      this.current.choice = val
      this.status = 2
    },
    handleReturn() {
      this.status = 1
    },
    handleFinish() {},
    handleSubmit() {},
    fetchQuestions() {
      getQuestions().then(res => {
        if (res.code === 0 && res.data && Array.isArray(res.data.items)) {
          const list = res.data.items
          list.forEach((item, index) => {
            item.selection = []
            item.index = index + 1
          })
          this.questions = list
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-study{
  width:1260px;
  padding-bottom:40px;
  /* height:calc(100vh - 86px); */
  margin:0 auto;
}
h5{
  font-size:22px;
  line-height:68px;
  font-weight:normal;
  color:#585858;
}
.container{
  display:flex;
}
.container .left{
  width:43%;
  background:#fff;
  height:538px;
}
.top-bar{
  padding:20px 30px 0;
  text-align:right;
}
.top-bar .el-button, .complete .el-button, .tool .el-button{
  padding:8px 30px;
}
.questions{
  height: calc(100% - 52px);
  overflow-y: auto;
  &::-webkit-scrollbar{
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-button{
    width: 0;
    height: 0;
  }
  &::-webkit-scrollbar-track{
  }
  &::-webkit-scrollbar-thumb{
    border-radius: 8px;
    background-color: #c3e3db;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: #68b8a4;
  }
  &::-webkit-scrollbar-thumb:active {
    background-color: #68b8a4;
  }
}
.complete{
  padding:20px 25px;
}
.complete>p{
  font-size:16px;
  line-height:30px;
  color:#333;
  user-select: none;
}
.tool{
  padding:15px 20px;
}
.code ::v-deep.CodeMirror {
  height: 398px;
}
.container .right{
  width:calc(57% - 20px);
  margin-left:20px;
  background:#fff;
}
.echart-cont{
  padding:30px 30px 20px;
  height:calc(100% - 54px);
}
</style>
