<template>
  <modal v-model="show" :closeable="true" cancel-btn="" confirm-btn="同意并继续" @confirm="go">
    <h4 slot="title" class="pay-title">立即拥有<br />{{ title }}</h4>
    <compactCellGroup class="pay-det" :cell-data="payInfo" :text-bold="true" />
    <slot>
      <div class="pay-tip">*不满意可随时退保</div>
      <div class="pay-protocol">
        <div class="pay-protocol-tip">投保前请阅读并同意</div>
        <div class="pay-protocol-link">
          <a
            href="javascript:;"
            @click="openIframePupop(item.id)"
            v-for="(item, index) in protocolData"
            :key="index"
          >
            {{ item.title }}
          </a>
        </div>
      </div>
    </slot>
  </modal>
</template>

<script>
import CompactCellGroup from "@/components/CompactCellGroup";
import Modal from "@/components/Modal";
const DIALOG_CHANGE_EVENT = "input";
const DIALOG_CONFIRM_EVENT = "confirm";
const READ_PROTOCOL_EVENT = "read-protocol";
export default {
  name: "GoInsureDialog",
  components: {
    CompactCellGroup,
    Modal
  },
  props: {
    value: null,
    title: {
      type: String,
      default: ""
    },
    payData: {
      type: Array,
      default() {
        return [];
      }
    },
    protocolData: {
      type: Array,
      default() {
        return [
          { title: "保险条款", id: 0 },
          { title: "健康告知", id: 1 },
          { title: "投保须知与声明", id: 2 },
          { title: "服务协议", id: 3 }
        ];
      }
    }
  },
  data() {
    return {
      show: false
    };
  },
  watch: {
    value(val) {
      this.show = val;
    },
    show(val) {
      this.$emit(DIALOG_CHANGE_EVENT, val);
    }
  },
  computed: {
    payInfo() {
      if (this.payData[1] && this.payData[1].value) {
        return this.payData;
      }
      return [this.payData[0]];
    }
  },
  methods: {
    openIframePupop(index) {
      this.$emit(READ_PROTOCOL_EVENT, index);
    },
    go() {
      this.$emit(DIALOG_CONFIRM_EVENT);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../../style/var.less";

.pay {
  &-title {
    color: @black;
    font-size: @font-size-18;
    font-weight: @font-weight-bold;
    line-height: @line-height-lg + 1;
  }
  &-det {
    padding-left: 34px;
    position: relative;
    @{deep} .cr-cell {
      position: relative;
      overflow: initial;
      &::after,
      &::before {
        content: " ";
        display: block;
        position: absolute;
      }
      &::before {
        left: -18px;
        top: 7px;
        width: 8px;
        height: 8px;
        border-radius: @border-radius-max;
        z-index: 201;
        border: 1px solid @black;
        background-color: @white;
      }
      &:first-child::before {
        background-color: @orange-light;
      }
      &::after {
        left: -13px;
        top: 16px;
        height: 20px;
        width: 0;
        z-index: 200;
        border-right: 1px dotted @gray-4;
      }
      &:last-child::after {
        display: none;
      }
    }
  }
  &-tip {
    font-size: @font-size-12;
    color: @gray-4;
    line-height: @line-height-lg;
    margin: 12px 0;
  }
  &-protocol {
    margin-bottom: 18px;
    &-tip {
      font-size: @font-size-12;
      color: @black;
      line-height: @line-height-lg;
      margin-bottom: 4px;
    }
    &-link {
      line-height: 15px;
      a {
        font-size: @font-size-12;
        vertical-align: middle;
        &::after {
          display: inline-block;
          content: " ";
          width: 0;
          height: 12px;
          border-right: 1px @blue solid;
          margin: 0 0px 0 2px;
          vertical-align: -2px;
        }
        &:last-child::after {
          display: none;
        }
      }
    }
  }
}
</style>
