<template>
  <card class="insure-form-switch-card">
    <div class="insure-form-switch" slot="header">
      <h5 class="card-title">开通次年自动续保</h5>
      <cr-tag type="warning">小果建议您开通</cr-tag>
      <div class="insure-form-switch-option">
        <span class="insure-form-switch-label">{{ auto ? "已" : "未" }}开通</span>
        <cr-switch v-model="auto" active-color="#FFC842" size="23.5px" />
      </div>
    </div>
    <compactCellGroup :cell-data="cellData" :no-val="true" @click="openIframe" />
  </card>
</template>

<script>
import Card from "@/components/Card";
import CompactCellGroup from "@/components/CompactCellGroup";
const DATA_CHANGE_EVENT = "input";
const CELL_CLICK_EVENT = "cell-click";
export default {
  name: "AutoDeduct",
  components: {
    CompactCellGroup,
    Card
  },
  props: {
    value: null,
    cellData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      auto: false
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.auto = val;
      }
    },
    auto: {
      handler(val) {
        this.$emit(DATA_CHANGE_EVENT, val);
      }
    }
  },
  methods: {
    openIframe() {
      this.$emit(CELL_CLICK_EVENT, 7);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../../style/var.less";
.insure-form {
  &-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    &-card {
      padding-top: 0;
    }
    &-label {
      font-size: @font-size-12;
      color: @black;
      margin-right: 4px;
    }
    .cr-switch {
      @{deep} &__control {
        box-shadow: none;
      }
    }
    .cr-tag {
      margin: 0 auto 0 8px;
      color: @white !important;
    }
    &-option {
      display: flex;
      align-items: center;
      justify-content: right;
    }
  }
}
</style>
