<template>
  <div class="rate-container">
    <cr-sticky class="rate-head">
      <cr-radio-btn v-model="titleIndex" :radio-data="titleOptions" />
      <cr-tabbar v-model="amountIndex" active-color="#333" inactive-color="#666">
        <cr-tabbar-item v-for="(item, index) in amountOptions" :key="index">
          {{ item }}
        </cr-tabbar-item>
      </cr-tabbar>
    </cr-sticky>
    <div class="rate-body">
      <table class="rate-table">
        <thead>
          <tr>
            <th style="width: 40%">投保年龄</th>
            <th style="width: 30%">男</th>
            <th style="width: 30%">女</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in listOptions.age" :key="index">
            <th>{{ item }}</th>
            <td>{{ listOptions.list[0][index] || "-" }}</td>
            <td>{{ listOptions.list[1][index] || "-" }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import crRadioBtn from "@/components/CrRadioBtn";
import detail from "@/api/detail.rate.mock";
export default {
  name: "GoodsDetail",
  components: {
    crRadioBtn
  },
  data() {
    return {
      detail,
      titleIndex: 0,
      amountIndex: 0
    };
  },
  computed: {
    titleOptions() {
      return this.detail.map((item, index) => {
        return {
          label: item.title,
          value: index
        };
      });
    },
    amountOptions() {
      const { detail, titleIndex } = this;
      const _length = detail[titleIndex].list.length;
      return detail[titleIndex].list.map((item, index) => `${_length - index}0万保额`);
    },
    listOptions() {
      const { detail, titleIndex, amountIndex } = this;
      return {
        age: detail[titleIndex].age,
        list: detail[titleIndex].list[amountIndex]
      };
    }
  },
  methods: {}
};
</script>
<style lang="less" src="./rate.less" scoped></style>
