<template>
  <div>
    <template v-if="list.length">
      <div
        class="policy-item"
        v-for="(item, index) in list"
        :key="index"
        @click="goDetail(item.orderNo)"
      >
        <div class="policy-item-pro">
          <p class="policy-item-pro-name">{{ item.title }}</p>
          <p
            :class="[
              { 'policy-item-pro-type_medical': item.itype === 'mi' },
              { 'policy-item-pro-type_illness': item.itype === 'cii' },
              { 'policy-item-pro-type_casualty': item.itype === 'ai' },
              { 'policy-item-pro-type_life': item.itype === 'li' },
              'policy-item-pro-type'
            ]"
          >
            {{ item.guarantee_title }}
          </p>
          <p class="policy-item-pro-status" v-if="!showStatusText(item.cardConfig.statusText)">
            {{ item.cardConfig.statusText }}
          </p>
        </div>
        <p class="policy-item-recognizee">{{ item.cardConfig.title }}</p>
        <p class="policy-item-time">{{ item.cardConfig.contend }}</p>
        <div class="policy-item-operation">
          <cr-button
            :class="[
              { 'policy-item-operation-button_paid': ['去支付', '开通自动续费'].includes(button) },
              'policy-item-operation-button'
            ]"
            v-for="button in item.cardConfig.buttons"
            :key="button"
            @click.stop="goNext(button, item)"
            >{{ button }}</cr-button
          >
          <p
            class="policy-item-operation-desc"
            :class="
              ['13', '14'].includes(item.cardConfig.key)
                ? 'policy-item-operation-desc_wait'
                : 'policy-item-operation-desc_result'
            "
            v-if="item.stateDesc"
          >
            {{ item.stateDesc }}
          </p>
        </div>
        <cr-image
          class="policy-item-operation-image"
          width=""
          height=""
          fit="cover"
          src="@/assets/images/policy/guarantee@2x.png"
          v-if="showStatusText(item.cardConfig.statusText)"
        />
      </div>
    </template>
    <div class="policy-none" v-else>
      <cr-image
        class="policy-none-image"
        round
        width=""
        height=""
        src="@/assets/images/policy/policy-default@2x.png"
      />
      <p class="policy-none-title">暂无保单</p>
      <p class="policy-none-desc">赶紧去看看有哪些精品保险吧</p>
    </div>
  </div>
</template>
<script>
import _ from "lodash";
import GOODS_LIST from "@/api/goodsList.mock";
import { getPolicyList } from "@/api/policy";
import policyStatusMixin from "../mixin/policyStatus.mixin";
import detailPayMixin from "@/views/Goods/Detail/modules/detailPay.mixin";

// SELF(0, "本人"),
// PARENT(1, "父母"),
// SPOUSE(2, "配偶"),
// CHILDREN(3, "子女");
const relations = [-1, 0, 1, 2, 3];

export default {
  name: "InsuranceRecommend",
  mixins: [policyStatusMixin, detailPayMixin],
  props: {
    type: {
      type: Number,
      default: () => 0
    }
  },
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getList(this.type);
  },
  watch: {
    type(val) {
      this.getList(val);
    }
  },
  methods: {
    async getList(type) {
      let list = await getPolicyList();
      this.list = list
        .filter(
          v =>
            _.some(GOODS_LIST, { id: v.productNo }) &&
            (type === 0 ? true : v.insuredRelation === relations[type]) &&
            this.findKey(v)
        )
        .map(this.getData);
    },
    showStatusText(text) {
      return text === "保障中";
    },
    goNext(text, item) {
      if (["为家人投保", "重新投保"].includes(text)) {
        this.$router.push({
          path: "/goods/detail",
          query: { id: item.id, type: item.itype }
        });
      } else if (text === "电子保单") {
        this.$router.push({ path: "/policy/virtual-detail", query: { url: item.policyUrl } });
      } else if (text === "去支付") {
        this.orderInfo = {
          payOrderNo: item?.payInfo?.payOrderNo,
          payType: item?.payInfo?.payType,
          orderNo: item?.orderNo
        };
        this.goPay();
        // eslint-disable-next-line
      } else if (text === "联系客服") {}
    },
    goDetail(orderNo) {
      const policy = this.list.find(v => v.orderNo === orderNo);
      if (["9", "15"].includes(policy.cardConfig.key)) return;
      this.$router.push(`/policy/detail/${orderNo}`);
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
