<template>
  <div class="user-family">
    <p class="family-title">{{ title }}</p>
    <cr-form ref="form" class="family-form" @submit="modal.confirm = true" @failed="onFailed">
      <cr-field
        class="family-form-item"
        v-model="formData.nameMask"
        :readonly="readOnlyProperty.nameMask"
        name="姓名"
        label="姓名"
        placeholder="请输入投保人姓名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <cr-field
        class="family-form-item"
        v-model="formData.idNoMask"
        :readonly="readOnlyProperty.idNoMask"
        type="password"
        name="身份证号"
        label="身份证号"
        placeholder="请填写家人身份证号"
        :rules="[{ required: true, message: '请填写身份证号' }]"
      />
      <cr-field
        @click.native="showPopups"
        class="family-form-item"
        v-model="formData.relation"
        :readonly="true"
        name="与本人的关系"
        label="与本人的关系"
        placeholder="请选择与本人的关系"
        :rules="[{ required: true, message: '请选择与本人的关系' }]"
      />
      <div class="family-form-radio">
        <div class="Ff-radio-title">
          <span class="Ffr-title-text">有无社保</span>
          <svg-icon
            icon-class="doubt"
            @click.native="modal.question = true"
            class-name="Ffr-title-svg"
          />
        </div>
        <cr-field class="Ff-radio-options" name="社保">
          <cr-radio-btn slot="input" v-model="formData.socialSecurity" :radio-data="planOptions" />
        </cr-field>
      </div>
      <cr-button class="family-form-button" native-type="submit">
        {{ saveText }}
      </cr-button>
      <cr-button class="family-form-button_deleted" @click="modal.delete = true" v-if="isShowDel">
        删除成员
      </cr-button>
    </cr-form>
    <Modal
      class="family-modal"
      v-model="modal.question"
      :closeable="false"
      @confirm="modal.question = false"
      cancel-btn=""
      title="我们常说的社保都包括哪些？"
      confirm-btn="我知道了"
    >
      常见的社保包括农村合作医疗(新农合)、城镇居民社保、城镇职工医保、少儿医保等政府主导的基本医疗保障项目，满足最基本的医疗保障要求。
    </Modal>
    <Modal
      v-model="modal.confirm"
      :closeable="false"
      @confirm="onSubmit"
      @cancel="modal.confirm = false"
      cancel-btn="取消"
      confirm-btn="确认无误"
      title="信息确认"
    >
      <div class="family-confirm-modal">
        <div class="Fc-modal-item">
          <span v-html="'姓&#12288;&#12288;名:'"></span>
          <span>{{ formData.nameMask }}</span>
        </div>
        <div class="Fc-modal-item">
          <span>身份证号:</span>
          <span>{{ formData.idNoMask }}</span>
        </div>
        <div class="Fc-modal-item">
          <span>与您关系:</span>
          <span>{{ formData.relation }}</span>
        </div>
        <div class="Fc-modal-item">
          <span>有无社保:</span>
          <span>{{ formData.socialSecurity === "true" ? "有社保" : "无社保" }}</span>
        </div>
      </div>
    </Modal>
    <Modal
      class="family-modal"
      v-model="modal.delete"
      @confirm="modal.delete = false"
      @cancel="delFamily"
      :closeable="false"
      cancel-btn="确认删除"
      confirm-btn="继续保留"
      title="删除确认"
      >确认删除【{{
        information.nameMask
      }}】的个人信息吗？为提供全面的家庭保障，建议您保留家庭成员信息。
    </Modal>
    <cr-popup v-model="showPopup" position="bottom">
      <cr-picker
        ref="picker"
        show-toolbar
        :columns="relations"
        @confirm="onConfirm"
        @cancel="showPopup = false"
      />
    </cr-popup>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import formValidMixin from "@/mixins/formValidate.mixin";
import { addFamily, updateFamily, delFamily } from "@/api/user";
import CrRadioBtn from "@/components/CrRadioBtn";
import Modal from "@/components/Modal";
import _ from "lodash";

const relations = ["本人", "配偶", "父母", "子女"];
const planOptions = [
  { label: "有社保", value: "true" },
  { label: "无社保", value: "false" }
];
const defaultFormData = {
  userInfoSecId: "",
  nameMask: "",
  idNoMask: "",
  socialSecurity: "",
  relation: ""
};

export default {
  name: "FamilyForm",
  components: {
    CrRadioBtn,
    Modal
  },
  mixins: [formValidMixin],
  props: {
    title: {
      type: String,
      default: "为家人添加保障"
    },
    type: {
      type: String,
      default: "add"
    },
    information: {
      type: Object,
      default: () => defaultFormData
    }
  },
  data() {
    return {
      showPopup: false,
      relations,
      planOptions,
      modal: {
        question: false,
        confirm: false,
        delete: false
      },
      formData: _.cloneDeep(this.information),
      isCollapse: true
    };
  },
  computed: {
    ...mapState("user", ["familyList"]),
    readOnlyProperty() {
      if (this.type === "add") return {};
      let result = { relation: true };
      if (this.formData?.relation === "本人") {
        result = {
          ...result,
          ...{
            nameMask: true,
            idNoMask: true
          }
        };
      }
      return result;
    },
    saveText() {
      return this.type === "add" ? "生成保障方案" : "保存修改";
    },
    isShowDel() {
      return this.type === "update" && this.formData.relation !== "本人" ? true : false;
    }
  },
  watch: {
    information(value) {
      this.formData = _.cloneDeep(value);
    }
  },
  methods: {
    ...mapActions("user", ["setFamilyList"]),
    async onSubmit() {
      this.modal.confirm = false;
      // 组件不支持boolean,需转换
      const params = {
        ...this.formData,
        socialSecurity: this.formData?.socialSecurity === "true" ? true : false
      };
      if (this.type === "add") {
        await addFamily(params);
      } else {
        await updateFamily(params);
      }
      await this.setFamilyList();
      this.formData = _.cloneDeep(defaultFormData);
    },
    onConfirm(picker, res) {
      this.formData.relation = res[0];
      this.showPopup = false;
    },
    showPopups() {
      if (this.readOnlyProperty.relation) return;
      this.showPopup = true;
      if (!this.refreshed) {
        this.$refs.picker.refreshColumns();
        this.refreshed = true;
      }
    },
    async delFamily() {
      this.modal.delete = false;
      await delFamily();
      this.$router.push("/user/family");
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
