<template>
  <a-card :bordered="false" :title="title">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <!-- <a-divider orientation="left">基本信息</a-divider> -->
      <a-row>
        <a-col :span="12">
          <a-form-model-item ref="name" label="姓名" prop="name">
            <a-input disabled v-model="form.name" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item ref="idCardNo" label="身份证号" prop="idCardNo">
            <a-input disabled v-model="form.idCardNo" @blur="idCardNoBlur" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="12">
          <a-form-model-item ref="sex" label="性别" prop="sex">
            <a-radio-group v-model="form.sex" disabled>
              <a-radio :value="1">
                男
              </a-radio>
              <a-radio :value="0">
                女
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item ref="age" label="年龄" prop="age">
            <a-input v-model="form.age" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="12">
          <a-form-model-item ref="phone" label="联系方式" prop="phone">
            <a-input disabled v-model="form.phone" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col>
          <a-form-model-item ref="homeAddress" label="家庭住址" prop="homeAddress" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
            <a-input disabled v-model="form.homeAddress" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="12">
          <a-form-model-item ref="jobs" label="岗位" prop="jobs">
            <a-select disabled v-model="form.jobs" style="width: 100%" placeholder="请选择岗位">
              <a-select-option v-for="(item, index) in jobsData" :key="index" :value="item.value" :lable="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item ref="maritalStatus" label="婚姻状况" prop="maritalStatus">
            <a-select disabled v-model="form.maritalStatus" style="width: 100%" placeholder="请选择婚姻状况">
              <a-select-option v-for="(item, index) in maritalStatusData" :key="index" :value="item.value" :lable="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item ref="nativePlace" label="籍贯" prop="nativePlace">
            <a-input disabled v-model="form.nativePlace" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item ref="nation" label="民族" prop="nation">
            <a-input disabled v-model="form.nation" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="12">
          <a-form-model-item ref="politicalOutlook" label="政治面貌" prop="politicalOutlook">
            <a-select disabled v-model="form.politicalOutlook" style="width: 100%" placeholder="请选择政治面貌">
              <a-select-option v-for="(item, index) in politicalOutlookData" :key="index" :value="item.value" :lable="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col>
          <a-form-model-item ref="health" label="身体状况" prop="health" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
            <a-input disabled v-model="form.health" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col>
          <a-form-model-item ref="diseaseHistory" label="疾病史" prop="diseaseHistory" :label-col="{ span: 2 }"
            :wrapper-col="{ span: 21 }">
            <a-input disabled v-model="form.diseaseHistory" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col>
          <a-form-model-item ref="awards" label="获得奖项" prop="awards" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
            <a-textarea disabled :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.awards" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-model-item ref="punish" label="受到处罚" prop="punish" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
            <a-textarea disabled :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.punish" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-model-item ref="train" label="参加培训" prop="train" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
            <a-textarea disabled :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.train" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <a-form-model-item ref="certificate" label="获得证书" prop="certificate" :label-col="{ span: 2 }" :wrapper-col="{ span: 21 }">
            <a-textarea disabled :autoSize="{ minRows: 2, maxRows: 5 }" v-model="form.certificate" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-divider orientation="left">家庭成员</a-divider>
      <a-table ref="table" :columns="columns" :data-source="form.familyList" :rowKey="(record) => record.id"
        :pagination="false">
      </a-table>

      <div class="draw-button-container align-center" style="bottom: auto;">
        <a-button @click="onCancel">返回</a-button>
      </div>
    </a-form-model>
  </a-card>
</template>

<script>
  import {
    personServiceDetail,
    personServiceAddOrUpdate
  } from '@/api/person/personService'
  import {
    dictionaryDropDown
  } from '@/api/sys/dictionaryItem'
  import DbDynamic from '@/components/DbDynamic/DbDynamic.vue'
  const PARTONE = 'partOne'

  export default {
    props: {
      id: {
        type: String,
        default: undefined
      }
    },
    components: {
      DbDynamic
    },
    data() {
      return {
        title: '服务人员详情',
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 18
        },
        PARTONE,
        childForm: this.$form.createForm(this),
        form: {
          type: this.$route.query.type,
          id: '',
          name: '',
          idCardNo: '',
          age: null,
          sex: null,
          phone: '',
          politicalOutlook: null,
          maritalStatus: null,
          familyList: []
        },
        maritalStatusData: [],
        politicalOutlookData: [],
        jobsData: [],
        rules: {
          name: [{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            },
            {
              min: 2,
              message: '长度不能小于2',
              trigger: 'blur'
            },
            {
              max: 20,
              message: '长度不能超过20',
              trigger: 'blur'
            }
          ],
          idCardNo: [{
            required: true,
            message: '请输入身份证号',
            trigger: 'blur'
          }]
        },
        // 表头
        columns: [{
            title: '姓名',
            dataIndex: 'familyName'
          },
          {
            title: '关系',
            dataIndex: 'relation'
          },
          {
            title: '联系方式',
            dataIndex: 'phone'
          },
          {
            title: '工作单位',
            dataIndex: 'workInfo'
          }
        ]
      }
    },
    mounted() {

    },
    created() {
      this.init()
    },
    methods: {
      async init() {
        await this.dictionaryDropDown()
        this.editDetail()
      },
      editDetail() {
        const id = this.$route.query.id
        if (!id) {
          return
        }
        personServiceDetail({
          id: id
        }).then(data => {
          console.log(data)
          const form = data.data
          this.form = form

          // 动态回显身份证号相关信息
          this.idCardNoBlur()
        /*  this.form.maritalStatus = parseInt(form.maritalStatus)*/
				})
      },
      onSubmit(e) {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const {
              childForm: {
                validateFields
              }
            } = this
            validateFields((errors, values) => {
              if (!errors) {
                const partOneArr = [];
                (values[`${PARTONE}FamilyName`]).forEach((item, index) => {
                  const obj = {
                    familyName: item,
                    id: values[`${PARTONE}Id`][index],
                    relation: values[`${PARTONE}Relation`][index],
                    phone: values[`${PARTONE}Phone`][index],
                    workInfo: values[`${PARTONE}WorkInfo`][index]
                  }
                  partOneArr.push(obj)
                })
                this.form.familyList = partOneArr
              }
            })

            console.log(this.form)
            personServiceAddOrUpdate(this.form).then(data => {
              this.$message.info('保存成功')
              this.onCancel()
            })
          } else {
            return false
          }
        })
      },
      onCancel() {
        this.$refs.ruleForm.resetFields()
        delete this.form.id
        this.goback()
      },
      onReset() {
        this.$refs.ruleForm.resetFields()
      },
      idCardNoBlur() {
        const idCardNo = this.form.idCardNo
        console.log(idCardNo)
        // 如果用户身份证号码为undefined则返回空
        if (!idCardNo) {
          return
        }

        // 获取性别
        if (parseInt(idCardNo.substr(16, 1)) % 2 === 1) {
          this.form.sex = 1
        } else {
          this.form.sex = 0
        }

        // 获取出生日期
        var yearBirth = idCardNo.substring(6, 10)
        var monthBirth = idCardNo.substring(10, 12)
        var dayBirth = idCardNo.substring(12, 14)
        // 获取当前年月日并计算年龄
        var myDate = new Date()
        var monthNow = myDate.getMonth() + 1
        var dayNow = myDate.getDate()
        var age = myDate.getFullYear() - yearBirth
        if (monthNow < monthBirth || (monthNow === monthBirth && dayNow < dayBirth)) {
          age--
        }
        // 得到年龄
        this.form.age = age
      },
      /**
       * 获取字典数据
       */
      dictionaryDropDown() {
        // 婚姻状况
        dictionaryDropDown({
          dictionaryCode: '0030'
        }).then(res => {
          this.maritalStatusData = res.data
        })
        // 岗位
        dictionaryDropDown({
          dictionaryCode: '0050'
        }).then(res => {
          this.jobsData = res.data
        })
        // 政治面貌
        dictionaryDropDown({
          dictionaryCode: '0060'
        }).then(res => {
          this.politicalOutlookData = res.data
        })
      },
      // 返回
      goback() {
        this.$router.push({
          path: '/person/service',
          query: {}
        })
      }
    }
  }
</script>

<style>
</style>
