<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" scoped>
@import "../../style/var.less";

.rate-container {
  background-color: @white;
}
.rate-head {
  width: 100% !important;
  @{deep} & > div {
    width: 100% !important;
    z-index: 100;
  }
  @{deep} .cr-tabbar {
    font-size: @font-size-16;
    padding: @padding-lg+1 0;
    &-item {
      position: relative;
      &::after {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 26px;
        // transition: width .2s linear;
        content: " ";
        display: block;
        width: 0;
        height: 4px;
        background: @orange-light;
        border-radius: @border-radius-lx;
      }
      &--active {
        font-weight: 600;
        &::after {
          width: 32px;
        }
      }
    }
  }
  .cr-radio-group {
    margin-top: 10px;
  }
}

.rate-body {
  padding: 15px 0;
}
.rate-table {
  margin: 0;
  width: 100%;
  thead {
    th {
      color: @gray-5;
      font-size: @font-size-12;
      font-weight: @font-weight-bold;
      padding: @padding-sm + 2 @padding-md + 2;
      text-align: left;
      background-color: @gray-1;
      &:first-child {
        border-top-left-radius: @border-radius-lg;
        border-bottom-left-radius: @border-radius-lg;
        padding-left: 30px;
      }
      &:last-child {
        border-top-right-radius: @border-radius-lg;
        border-bottom-right-radius: @border-radius-lg;
      }
    }
  }
  tbody {
    th {
      color: @black;
      font-size: @font-size-12;
      font-weight: @font-weight-bold;
      padding: @padding-sm + 2 @padding-md + 2;
      text-align: left;
      padding-left: 30px;
    }
    td {
      color: @black;
      font-size: @font-size-12;
      padding: @padding-sm + 2 @padding-md + 2;
      text-align: left;
    }
  }
}
</style>
