<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"
        v-if="!isAi && !isMi"
      >
        <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="table rate-table rate-table-padding" v-if="!isAi">
        <thead>
          <tr>
            <th style="width: 40%">{{ thOptions[0] }}</th>
            <th style="width: 30%">{{ thOptions[1] }}</th>
            <th style="width: 30%">{{ thOptions[2] }}</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>
      <table class="table rate-table" v-else>
        <thead>
          <tr>
            <th style="width: 25%;">投保年龄</th>
            <th style="width: 25%">100万保额</th>
            <th style="width: 25%">50万保额</th>
            <th style="width: 25%">10万保额</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in rateData[0].list" :key="index">
            <th>{{ item[0] }}</th>
            <td>{{ item[1] || "-" }}</td>
            <td>{{ item[2] || "-" }}</td>
            <td>{{ item[3] || "-" }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import crRadioBtn from "@/components/CrRadioBtn";
export default {
  name: "GoodsDetail",
  components: {
    crRadioBtn
  },
  props: {
    rateData: {
      type: Array,
      default() {
        return [];
      }
    },
    isAi: {
      type: Boolean,
      default: false
    },
    isMi: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      titleIndex: 0,
      amountIndex: 0
    };
  },
  computed: {
    titleOptions() {
      return this.rateData.map((item, index) => {
        return {
          label: item.title,
          value: index
        };
      });
    },
    thOptions() {
      const { rateData, titleIndex } = this;
      return rateData[titleIndex || 0].th;
    },
    amountOptions() {
      const { rateData, titleIndex } = this;
      if (this.isAi) {
        return [];
      } else if (this.isMi) {
        return [];
      } else {
        const _length = rateData[titleIndex || 0].list.length;
        return rateData[titleIndex || 0].list.map((item, index) => `${_length - index}0万保额`);
      }
    },
    listOptions() {
      if (this.isAi) {
        return [];
      } else if (this.isMi) {
        const { rateData, titleIndex } = this;
        return {
          age: rateData[titleIndex || 0].age,
          list: rateData[titleIndex || 0].list
        };
      } else {
        const { rateData, titleIndex, amountIndex } = this;
        return {
          age: rateData[titleIndex || 0].age,
          list: rateData[titleIndex || 0].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 {
      &:first-child {
        padding-left: 10px;
      }
    }
  }
  tbody {
    th {
      padding-left: 10px;
    }
  }
  &-padding {
    thead {
      th {
        &:first-child {
          padding-left: 30px;
        }
      }
    }
    tbody {
      th {
        padding-left: 30px;
      }
    }
  }
}
</style>
