<template>
  <div class="apply-claims">
    <template v-if="goodsList.length">
      <div class="apply-claims-container" v-for="item in goodsList" :key="item.id">
        <div class="Ac-container-left">
          <p
            :class="[
              { 'Acc-left-icon_medical': item.itype === 'mi' },
              { 'Acc-left-icon_illness': item.itype === 'cii' },
              { 'Acc-left-icon_casualty': item.itype === 'ai' },
              { 'Acc-left-icon_life': item.itype === 'li' },
              'Acc-left-icon'
            ]"
          >
            {{ item.guarantee_title }}
          </p>
          <p class="Acc-left-text">{{ item.title }}</p>
        </div>
        <cr-button class="Ac-container-right" @click="showIframe(item.id)">
          申请理赔
        </cr-button>
      </div>
    </template>
    <template v-else>
      <div class="apply-claims-none">
        <cr-image
          class="Ac-none-image"
          round
          width=""
          height=""
          src="@/assets/images/policy/policy-default@2x.png"
        />
        <p class="Ac-none-title">暂无可申请理赔的有效保单</p>
      </div>
      <insurance-recommend class="apply-claims-recommend"></insurance-recommend>
    </template>
    <popup-with-iframe v-model="popupShow" title="理赔流程">
      <cps-process-detail :process-data="processDetail" />
    </popup-with-iframe>
  </div>
</template>
<script>
import goodsList from "@/api/goodsList.mock";
import bainian from "@/api/detail.bainian.zhongshen";
import huagui from "@/api/detail.huagui.shouxian";
import huatai from "@/api/detail.huatai.zhongjixian";
import taikang from "@/api/detail.taikang.yiliaobaozhang";
import zhongan from "@/api/detail.zhongan.yiwai";
import PopupWithIframe from "@/components/PopupWithIframe";
import CpsProcessDetail from "@/views/Goods/Detail/modules/CpsProcessDetail";
import { getPolicyList } from "@/api/policy";
import policyStatusMixin from "@/views/Policy/mixin/policyStatus.mixin";
import InsuranceRecommend from "@/views/Policy/modules/InsuranceRecommend";

export default {
  name: "ApplyClaims",
  mixins: [policyStatusMixin],
  components: {
    PopupWithIframe,
    CpsProcessDetail,
    InsuranceRecommend
  },
  data() {
    return {
      goodsList: [],
      processDetail: [],
      claims: {
        TKYLX001: taikang.processDetail,
        HTDQZJX001: huatai.processDetail,
        ZAYWX001: zhongan.processDetail,
        BNZJX001: bainian.processDetail,
        HGSX001: huagui.processDetail
      },
      popupShow: false
    };
  },
  async created() {
    const policyList = await getPolicyList();
    this.goodsList = goodsList.filter(goods => {
      const datafiltered = policyList.filter(
        policy => policy.productNo === goods.id && ["1", "2"].includes(this.findKey(policy))
      );

      return datafiltered.length;
    });
  },
  methods: {
    showIframe(id) {
      this.popupShow = true;
      this.processDetail = this.claims[id];
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
