<template>
  <a-modal
    :title="modalTitle"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleCancel"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-divider orientation="left">基本信息</a-divider>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item style="display: none;">
              <a-input v-decorator="['id']" />
            </a-form-item>

            <a-form-item style="display: none;">
              <a-input v-decorator="['userId']" />
            </a-form-item>

            <a-form-item
              label="用户名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input placeholder="请输入用户名" readOnly v-decorator="['userName', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24" >
          <a-form :form="form">
            <a-form-item
              label="姓名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input placeholder="请输入姓名" readOnly v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="身份证"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input placeholder="请输入身份证" readOnly v-decorator="['idCardNo', {rules: [{required: true, message: '请输入身份证！'}]}]" @blur="idCardNoBlur"/>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="年龄"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input readOnly v-decorator="['age']" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="性别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-radio-group disabled v-decorator="['sex',{rules: [{ required: true, message: '请选择性别！' }]}]" >
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="手机号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input placeholder="请输入手机号" readOnly v-decorator="['phone',{rules: [{ required: true, message: '请输入手机号！' }]}]" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="岗位"
              :labelCol="{span: 3}"
              :wrapperCol="{span: 20}"
              has-feedback
            >
              <a-select style="width: 100%" disabled placeholder="请选择岗位" v-decorator="['jobs',{rules: [{ required: true, message: '请选择岗位！' }]}]" >
                <a-select-option v-for="(item,index) in jobsData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="工种"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-select style="width: 100%" disabled placeholder="请选择工种" v-decorator="['workType',{rules: [{ required: true, message: '请选择工种！' }]}]" >
                <a-select-option v-for="(item,index) in workTypeData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="学历"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-select style="width: 100%" disabled placeholder="请选择学历" v-decorator="['degreeId',{rules: [{ required: true, message: '请选择学历！' }]}]" >
                <a-select-option v-for="(item,index) in degreeData" :key="index" :value="item.value" >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="人员类型"
              :labelCol="{span: 3}"
              :wrapperCol="{span: 20}"
            >
              <a-checkbox-group disabled v-decorator="['type',{rules: [{ required: true, message: '请选择人员类型！' }]}]">
                <a-checkbox name="type" v-for="(item,index) in typeData" :key="index" :value="item.value" >
                  {{ item.name }}
                </a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="部门信息"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input readOnly v-decorator="['orgName',{rules: [{ required: true, message: '请选择机构！' }]}]" />
            </a-form-item>
            <a-form-item style="display: none;">
              <a-input v-decorator="['orgId']" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>

      <a-divider orientation="left">身份证信息</a-divider>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="身份证正面"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <img alt="image" :src="idPhotoFace" style="width: 50%;" v-if="idPhotoFace"/>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form :form="form">
            <a-form-item
              label="身份证反面"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <img alt="image" :src="idPhotoBack" style="width: 50%;" v-if="idPhotoBack" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>

      <a-divider orientation="left">变动信息</a-divider>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(record) => record.id"
        :pagination="{ pageSize: 5 }"
        :showSizeChanger="false"
      >
        <template slot="createTime" slot-scope="text, record">
          {{ record.createTime | moment('YYYY-MM-DD') }}
        </template>
      </s-table>
    </a-spin>

  </a-modal>
</template>

<script>
  import { STable } from '@/components'
  import { personGet, personChangeLogPage } from '@/api/person/person'
  import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
  export default {
    components: {
      STable
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        modalTitle: '人员详情',
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        jobsData: [],
        workTypeData: [],
        degreeData: [],
        typeData: [],
        idPhotoFace: '',
        idPhotoBack: '',
        // 查询参数
        queryParam: { },
        // 表头
        columns: [
          {
            title: '日期',
            dataIndex: 'createTime',
            scopedSlots: { customRender: 'createTime' }
          },
          {
            title: '人员变动信息',
            dataIndex: 'changeType'
          },
          {
            title: '部门信息',
            dataIndex: 'orgName'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return personChangeLogPage(Object.assign(parameter, this.queryParam)).then((res) => {
            return res
          })
        }
      }
    },
    mounted () {
      this.dictionaryDropDown()
    },
    methods: {
      // 编辑初始化方法
      detail (record) {
        this.confirmLoading = true
        this.visible = true

        console.log(record)
        this.queryParam.userId = record.userId
        this.queryParam.orgId = record.orgId

        // 基本信息加入表单
        personGet({ id: record.id }).then((res) => {
         if (res.code === 200) {
           const data = res.data

           // 默认选中的多选框
           const type = data.type.split(',')
           const typeIntArr = []// 保存转换后的整型字符串
           type.forEach(item => {
               typeIntArr.push(+item)
           })
           this.form.getFieldDecorator('type', { valuePropName: 'checked', initialValue: typeIntArr })

           this.idPhotoFace = data.idPhotoFace
           this.idPhotoBack = data.idPhotoBack
           this.form.setFieldsValue(
             {
               id: data.id,
               userId: data.userId,
               name: data.name,
               userName: data.userName,
               idCardNo: data.idCardNo,
               // age: data.age,
               // sex: data.sex,
               phone: data.phone,
               jobs: parseInt(data.jobs),
               workType: parseInt(data.workType),
               degreeId: data.degreeId,
               orgId: data.orgId,
               orgName: data.orgName
             }
           )
           // 动态赋值年龄和性别
           this.analyzeIdCardNo(data.idCardNo)
         } else {
           this.$message.error('查询失败：' + res.msg)
         }
        })
        this.confirmLoading = false
      },

      /**
       * 获取字典数据
       */
      dictionaryDropDown () {
        this.formLoading = true
        // 岗位
        dictionaryDropDown({ dictionaryCode: '0002' }).then((res) => {
          this.jobsData = res.data
        })
        // 工种
        dictionaryDropDown({ dictionaryCode: '0003' }).then((res) => {
          this.workTypeData = res.data
        })
        // 学历
        dictionaryDropDown({ dictionaryCode: '0004' }).then((res) => {
          this.degreeData = res.data
        })
        // 人员类型
        dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => {
          this.typeData = res.data
          this.formLoading = false
        })
      },
      idCardNoBlur (event) {
        const idCardNo = event.target.value
        this.analyzeIdCardNo(idCardNo)
      },
      analyzeIdCardNo (idCardNo) {
        // 如果用户身份证号码为undefined则返回空
        if (!idCardNo) {
          return
        }

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

        // 获取出生日期
        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--
        }
        console.log(age)
        // 得到年龄
        this.form.setFieldsValue({ age })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
