<template>
  <div>
    <div class="policy-item" v-for="item in list" :key="item.orderNo">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button">为家人投保</cr-button>
        <cr-button class="policy-item-operation-button">电子保单</cr-button>
      </div>
      <cr-image
        class="policy-item-operation-image"
        width=""
        height=""
        fit="cover"
        src="@/assets/images/policy/guarantee@2x.png"
      />
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万意外险</p>
        <p class="policy-item-pro-type policy-item-pro-type_casualty">意外保障</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button policy-item-operation-button_paid"
          >开启自动续费</cr-button
        >
        <cr-button class="policy-item-operation-button">电子保单</cr-button>
        <p class="policy-item-operation-desc policy-item-operation-desc_result">
          有XX.X元扣费失败，请立即开通自动续费
        </p>
      </div>
      <cr-image
        class="policy-item-operation-image"
        width=""
        height=""
        fit="cover"
        src="@/assets/images/policy/guarantee@2x.png"
      />
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_medical">医疗保障</p>
        <p class="policy-item-pro-status">待生效</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button">为家人投保</cr-button>
        <cr-button class="policy-item-operation-button">电子保单</cr-button>
      </div>
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_illness">重疾保障</p>
        <p class="policy-item-pro-status">待支付</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button policy-item-operation-button_paid"
          >去支付</cr-button
        >
      </div>
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
        <p class="policy-item-pro-status">退款中</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button">联系客服</cr-button>
        <p class="policy-item-operation-desc policy-item-operation-desc_result">
          退保退款中，请注意查收
        </p>
      </div>
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
        <p class="policy-item-pro-status">出单中</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <cr-button class="policy-item-operation-button">联系客服</cr-button>
        <p class="policy-item-operation-desc policy-item-operation-desc_wait">
          正在出单，请耐心等待…
        </p>
      </div>
    </div>
    <div class="policy-item">
      <div class="policy-item-pro">
        <p class="policy-item-pro-name">国民保·百万医疗险</p>
        <p class="policy-item-pro-type policy-item-pro-type_life">寿险保障</p>
        <p class="policy-item-pro-status">投保失败</p>
      </div>
      <p class="policy-item-recognizee">被保人：王*闹</p>
      <p class="policy-item-time">保障期限：2020.5.31至2021.5.30</p>
      <div class="policy-item-operation">
        <p class="policy-item-operation-desc policy-item-operation-desc_result">
          很抱歉，被保人的核保未通过
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import GOODS_LIST from "@/api/goodsList.mock";
import { getPolicyList } from "@/api/policy";

export default {
  name: "InsuranceRecommend",
  data() {
    return {
      list: []
    };
  },
  async created() {
    const goodsList = GOODS_LIST.reduce((pre, next) => {
      return pre.concat(next.children);
    }, []);
    let list = await getPolicyList();
    this.list = list.map(v => goodsList.find(goods => goods.id === +v.productNo));
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
