<template>
  <div class="product-analysis-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.label}}</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="right">
        <ul>
          <li :class="{ active: item.type === selected }" v-for="(item, index) in list" :key="index" @click="handleClick(item)">{{item.label}}</li>
        </ul>
        <el-button type="primary" size="medium" plain style="margin-left:20px;" @click="handleGo">选好了</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      caseList: [
        { label: '股票型基金案例：广发银行优选股票A', id: '111' },
        { label: '股票型基金案例：广发银行优选股票B', id: '222' },
        { label: '股票型基金案例：广发银行优选股票C', id: '333' },
        { label: '股票型基金案例：广发银行优选股票D', id: '444' }
      ],
      caseSelect: '111',
      list: [
        { label: '股票型基金', type: '1' },
        { label: '债券型基金', type: '2' },
        { label: '混合型基金', type: '3' },
        { label: '货币性基金', type: '4' },
        { label: 'FOF基金', type: '5' },
        { label: 'LOF基金', type: '6' },
        { label: '指数基金', type: '7' }
      ],
      selected: '1'
    }
  },
  methods: {
    handleClick(item) {
      this.selected = item.type
    },
    handleGo() {
      this.$router.push({ path: '/product-analysis/report', query: { id: this.caseSelect } })
    }
  }
}
</script>
<style scoped>
.product-analysis-case-select{
  background:#eaf0f0;
  height:548px;
  margin:24px 30px 60px 30px;
  padding-top:32px;
  position:relative;
}
.inner{
  display: flex;
  height:500px;
  width:1080px;
  margin:0 auto;
  background:url('@/assets/images/product_analysis_case.png') no-repeat left center;
}
.left{
  width:810px;
  padding:35px 20px 80px 225px;
}
.case{
  height:100%;
  width:100%;
  position:relative;
}
.case .el-radio-group{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}
.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>
