<template>
  <div class="case-select">
    <div class="inner">
      <div class="left">
        <div class="case">
          <el-radio-group v-model="caseSelect">
            <el-radio :label="item.id" v-for="(item, index) in caseList" :key="index">{{item.name}}</el-radio>
          </el-radio-group>
          <!-- <el-radio-group v-model="caseSelect">
            <el-radio label="item.id" v-for="(item, index) in 15" :key="index">1111</el-radio>
          </el-radio-group> -->
        </div>
      </div>
      <div class="right">
        <ul>
          <li :class="{ active: index === selected }" v-for="(item, index) in list" :key="index" @click="handleClick(item, index)">{{item.name}}</li>
        </ul>
        <el-button type="primary" size="medium" plain style="margin-left:20px;" @click="handleGo">选好了</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategories, getCasesList } from './api'
import { selectCase } from '@/api/base'
export default {
  data() {
    return {
      caseList: [
        { label: '股票型基金案例：广发银行优选股票A', id: '111' },
        { label: '股票型基金案例：广发银行优选股票B', id: '222' },
        { label: '股票型基金案例：广发银行优选股票C', id: '333' },
        { label: '股票型基金案例：广发银行优选股票D', id: '444' }
      ],
      caseSelect: '',
      list: [],
      selected: 0
    }
  },
  mounted() {
    this.getCategories()
  },
  methods: {
    getCategories() {
      getCategories(1).then(res => {
        this.getCasesList(res.data.items[0].id)
        this.list = res.data.items
      })
    },
    handleClick(item, index) {
      this.selected = index
      this.getCasesList(item.id)
    },
    handleGo() {
      if (Array.isArray(this.$store.state.case)) {
        this.selectConfirm()
      } else {
        // this.$confirm('切换案例，当前填写的内容不会保存', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   this.selectCase()
        // })
        this.selectCase()
      }
    },
    selectConfirm() {
      const data = this.caseList.find(item => { return item.id === this.caseSelect })
      this.$store.commit('setCase', data)
      this.selectCase(data.id)
    },
    getCasesList(id) {
      getCasesList(id).then(res => {
        this.caseList = res.data.items
        this.caseSelect = res.data.items[0].id
      })
    },
    selectCase() {
      const data = this.caseList.find(item => { return item.id === this.caseSelect })
      selectCase(data.id).then(res => {
        let msg = '选择'
        if (this.$store.state.case.id) msg = '切换'
        this.$message.success(msg + '案例成功！')
        this.$store.commit('setCase', data)
        this.$emit('select', data)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.case-select{
  height:548px;
  // margin:24px 30px 60px 30px;
  padding-top:32px;
  position:relative;
}
.inner{
  display: flex;
  height:500px;
  width:100%;
  margin:0 auto;
}
.left{
  flex:1;
  padding:35px 18px 80px 225px;
  background:url('@/assets/images/product_analysis_case.png') no-repeat left center;
}
.case{
  height:100%;
  width:100%;
  position:relative;
  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;
  }
}
.case .el-radio-group{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  max-height:100%;
}
.case ::v-deep.el-radio{
  display:block;
  margin-bottom:20px;
}
.case ::v-deep.el-radio.all .el-radio__input.is-checked .el-radio__inner{
  border-color:#636363;
  background:#636363;
}
.right{
  width:280px;
  margin-top:32px;
  flex-wrap:wrap;
  flex-direction: column;
}
ul{
  display:flex;
  flex-wrap:wrap;
  flex-direction: row;
  align-content: flex-start;
  height:380px;
}
li{
  width:122px;
  height:40px;
  font-size:16px;
  line-height:40px;
  text-align:center;
  color:#666;
  margin:0 0 10px 10px;
  cursor:pointer;
  background:#f8f8f8;
}
li.active{
  background:#68B8A4;
  color:#fff;
}
</style>
