<template>
  <div class="policy">
    <cr-sticky class="policy-tab">
      <cr-tabbar v-model="active" active-color="#333" inactive-color="#666">
        <cr-tabbar-item>全部</cr-tabbar-item>
        <cr-tabbar-item>本人</cr-tabbar-item>
        <cr-tabbar-item>父母</cr-tabbar-item>
        <cr-tabbar-item>配偶</cr-tabbar-item>
        <cr-tabbar-item>子女</cr-tabbar-item>
      </cr-tabbar>
    </cr-sticky>
    <policy-item
      :class="{ placeholder: hasPolicy }"
      :hasPolicy.sync="hasPolicy"
      :type="active"
    ></policy-item>
    <cr-divider v-if="hasPolicy" class="policy-divider">我是有底线的</cr-divider>
    <insurance-recommend></insurance-recommend>
  </div>
</template>
<script>
import InsuranceRecommend from "./modules/InsuranceRecommend";
import PolicyItem from "./modules/PolicyItem";
import routerMixin from "./mixin/router.mixin";

export default {
  name: "PolicyList",
  mixins: [routerMixin],
  components: {
    InsuranceRecommend,
    PolicyItem
  },
  data() {
    return {
      active: 0,
      hasPolicy: false
    };
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
