<template>
  <div>
    <Modal v-model="showFamily" title="家庭成员信息管理" width="800">
      <Form v-if="showFamily" ref="form" :label-width="80">
        <Card v-if="item.del_flag != '1'" v-for="(item, index) in familyList" :key="index" class="renyuan-item-box">
          <p slot="title">成员信息</p>
          <p slot="extra" @click="deleteUserFamily(item, index)" style="color: #FF0000;cursor: pointer;">删除</p>
          <Row :gutter="16">
            <Col span="12">
              <FormItem label="姓名" required style="margin-bottom: 10px;">
                <Input type="text" v-model="item.name" placeholder="请输入姓名"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="身份证号" required :label-width="110" style="margin-bottom: 10px;">
                <Input type="text" v-model="item.cardno" placeholder="请输入身份证号"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="联系方式" style="margin-bottom: 10px;">
                <Input type="text" v-model="item.tel" placeholder="请输入联系方式"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="与特殊人员关系" required :label-width="110" style="margin-bottom: 10px;">
                <Select v-model="item.relationship" placeholder="与特殊人员关系">
                  <Option :value="item1.value" v-for="(item1, index1) in relationList" :key="index1">{{item1.label}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="地址" style="margin-bottom: 0px;">
                <Input type="text" v-model="item.address" placeholder="请输入地址"></Input>
              </FormItem>
            </Col>
          </Row>
        </Card>
      </Form>
      <div style="text-align: center;">
        <Button type="primary" icon="md-add" @click="addNewUser">添加家庭成员</Button>
      </div>
      <div slot="footer">
        <Button type="text" @click="showFamily=false">取消</Button>
        <Button type="primary" @click="familyConfirm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { saveUserFamily, selectFamilyList, selectUserFamilyList } from '@/api/peopleInfo.js'
export default {
  name: 'familyManage',
  props: {
    peopleInfo: Object
  },
  data () {
    return {
      showFamily: false,
      familyList: [],
      relationList: []
    }
  },
  mounted () {},
  methods: {
    addNewUser () {
      this.familyList.push({
        name: '',
        cardno: '',
        tel: '',
        address: '',
        relationship: '',
        user_id: this.peopleInfo.id
      })
    },
    deleteUserFamily (data, index) {
      this.$Modal.confirm({
        title: '确认删除此成员吗？',
        content: '请仔细核对后再操作',
        onOk: async () => {
          if (data.id) {
            this.$set(data, 'del_flag', '1')
          } else {
            this.familyList.splice(index, 1)
          }
        }
      })
    },
    familyConfirm () {
      if (!this.familyList.length) {
        return this.$Message.error('请至少添加一位家庭成员')
      }
      let mark = false
      this.familyList.forEach(item => {
        if (!item.name || !item.cardno || !item.relationship) {
          mark = true
        }
      })
      if (mark) {
        return this.$Message.error('请补全家庭人员必填信息')
      }
      saveUserFamily({
        familyList: this.familyList
      }).then(res => {
        if (res.data.errcode === 0) {
          this.getFamilyList()
          this.$Message.success('操作成功')
          this.showFamily = false
        } else {
          this.$Message.error(res.data.errmsg)
        }
      })
    },
    getFamilyList () {
      selectUserFamilyList({
        user_id: this.peopleInfo.id
      }).then(res => {
        if (res.data.errcode === 0) {
          this.familyList = res.data.data
        } else {
          this.$Message.error(res.data.errmsg)
        }
      })
    },
    init () {
      this.familyList = []
      if (this.peopleInfo.id) {
        selectFamilyList().then(res => {
          if (res.data.errcode === 0) {
            this.relationList = res.data.data
            this.$nextTick(() => {
              this.getFamilyList()
              this.showFamily = true
            })
          } else {
            this.$Message.error(res.data.errmsg)
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
  .renyuan-item-box{
    margin-bottom: 16px;
  }
  /deep/ .ivu-card-bordered{
    border: 2px solid #EEEEEE;
  }
</style>
