<template>
  <div class="user-family">
    <p class="family-title">{{ title }}</p>
    <cr-form ref="form" class="family-form" @submit="showModal" @failed="onFailed">
      <cr-field
        class="family-form-item"
        v-model="formData.name"
        :readonly="readOnlyProperty.name"
        name="姓名"
        label="姓名"
        placeholder="请填写家人姓名"
        :rules="[{ required: true, message: '请填写家人姓名' }]"
      />
      <cr-field
        class="family-form-item"
        v-model="formData.idNo"
        :readonly="readOnlyProperty.idNo"
        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"
            :disabled="readOnlyProperty.socialSecurity"
            v-model="formData.socialSecurity"
            :radio-data="planOptions"
          />
        </cr-field>
      </div>
      <cr-button class="family-form-button_confirm" 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.name }}</span>
        </div>
        <div class="Fc-modal-item">
          <span>身份证号:</span>
          <span>{{ formData.idNo }}</span>
        </div>
        <div class="Fc-modal-item">
          <span>与您关系:</span>
          <span>{{ formData.relation }}</span>
        </div>
        <div class="Fc-modal-item" v-if="formData.socialSecurity">
          <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.name
      }}】的个人信息吗？为提供全面的家庭保障，建议您保留家庭成员信息。
    </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 { cloneDeep } from "lodash-es";

const relations = ["本人", "配偶", "父母", "子女"];
const planOptions = [
  { label: "有社保", value: "true" },
  { label: "无社保", value: "false" }
];
const defaultFormData = {
  userInfoSecId: "",
  name: "",
  idNo: "",
  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,
          ...{
            name: true,
            idNo: true,
            socialSecurity: false
          }
        };
      } else if (this.formData?.relation === "未知") {
        result = {
          ...result,
          relation: false
        };
      }
      return result;
    },
    saveText() {
      return this.type === "add" ? "生成保障方案" : "保存修改";
    },
    isShowDel() {
      return this.type === "update" && this.formData.relation !== "本人" ? true : false;
    }
  },
  watch: {
    information(value) {
      console.log(value);
      this.formData = cloneDeep(value);
    }
  },
  methods: {
    ...mapActions("user", ["setFamilyList"]),
    async onSubmit() {
      this.modal.confirm = false;
      // 组件不支持boolean,需转换
      const params = {
        name: this.formData?.name,
        idNo: this.formData?.idNo,
        relation: this.getReletion(this.formData?.relation)
      };

      // 转换参数类型
      if (this.formData?.socialSecurity !== "") {
        params.socialSecurity = this.formData?.socialSecurity === "true" ? true : false;
      }
      if (this.type === "add") {
        await addFamily(params);
        this.$notify({ type: "success", message: "添加成功" });
        await this.setFamilyList();
        this.formData = cloneDeep(defaultFormData);
      } else {
        params.userInfoSecId = this.information?.userInfoSecId;
        await updateFamily(params);
        this.$notify({ type: "success", message: "修改成功" });
        this.$router.back(-1);
      }
    },
    onConfirm(picker, res) {
      this.formData.relation = res[0];
      this.showPopup = false;
    },
    showPopups() {
      if (this.readOnlyProperty.relation) return;
      this.showPopup = true;
      const timer = setTimeout(() => {
        this.$refs.picker.refreshColumns();
      }, 500);
      this.$once("hook:beforeDestroy", () => {
        clearTimeout(timer);
      });
    },
    async delFamily() {
      this.modal.delete = false;
      await delFamily({ userInfoSecId: this.information?.userInfoSecId });
      this.$router.back(-1);
    },
    getReletion(relation) {
      let result = -1;

      if (["父亲", "母亲", "父母"].includes(relation)) {
        result = 2;
      } else if (["女儿", "儿子", "子女"].includes(relation)) {
        result = 4;
      } else if (relation === "本人") {
        result = 1;
      } else if (relation === "配偶") {
        result = 3;
      }

      return result;
    },
    showModal() {
      if (this.formData?.relation === "未知") {
        this.$notify({ type: "warning", message: "请选择与本人的关系" });
        return;
      }
      this.modal.confirm = true;
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
