<template>
  <a-modal
    :width="1000"
    height="auto" :visible="addVisible" @cancel="handleClose"
    cancelText="取消" okText="提交" @ok="handleSubmit">
    <a-form-model
      class="a-form-model"
      ref="ruleForm"
      :model="submitData"
      :rules="validateRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      @validate="validate">
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="gender" label="性别" prop="gender">
          <a-select
              style="width: 100%"
              @change="handleGenderChange"
              v-model="submitData.gender"
              :defaultValue="submitData.gender"
              placeholder="请选择性别">
            <a-select-option v-for="(item,index) in genderOptions" :key="item.value">{{item.text}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="birthday" label="生日" prop="birthday">
          <a-date-picker
              v-model="submitData.birthday"
              :valueFormat="timeFormat"
              placeholder="请选择生日"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="realName" label="真实姓名" prop="realName">
          <a-input
              placeholder="请输入真实姓名"
              v-model="submitData.realName"
              @blur="
             () => {
               $refs.realName.onFieldBlur();
             }"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="nation" label="民族" prop="nation">
          <a-input
              placeholder="请输入民族"
              v-model="submitData.nation"
              @blur="
             () => {
               $refs.nation.onFieldBlur();
             }"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="occupation" label="职业" prop="occupation">
          <a-input
              placeholder="请输入职业"
              v-model="submitData.occupation"
              @blur="
             () => {
               $refs.occupation.onFieldBlur();
             }"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="address" label="住址" prop="address">
          <a-input
              placeholder="请输入住址"
              v-model="submitData.address"
              @blur="
             () => {
               $refs.address.onFieldBlur();
             }"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="idCardNum" label="身份证号" prop="idCardNum">
          <a-input
              placeholder="请输入身份证号"
              v-model="submitData.idCardNum"
              @blur="
             () => {
               $refs.idCardNum.onFieldBlur();
             }"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="contactsName" label="联系人姓名" prop="contactsName">
          <a-input
              placeholder="请输入联系人姓名"
              v-model="submitData.contactsName"
              @blur="
             () => {
               $refs.contactsName.onFieldBlur();
             }"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="contactsPhone" label="联系人电话" prop="contactsPhone">
          <a-input
              placeholder="请输入联系人电话"
              v-model="submitData.contactsPhone"
              @blur="
             () => {
               $refs.contactsPhone.onFieldBlur();
             }"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="temperature" label="体温" prop="temperature">
          <a-input
              placeholder="请输入体温"
              v-model="submitData.temperature"
              @blur="
             () => {
               $refs.temperature.onFieldBlur();
             }"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="respiratoryRate" label="呼吸频率" prop="respiratoryRate">
          <a-input
              placeholder="请输入呼吸频率"
              v-model="submitData.respiratoryRate"
              @blur="
             () => {
               $refs.respiratoryRate.onFieldBlur();
             }"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="pulse" label="脉率" prop="pulse">
          <a-input
              placeholder="请输入脉率"
              v-model="submitData.pulse"
              @blur="
             () => {
               $refs.pulse.onFieldBlur();
             }"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="weight" label="体重" prop="weight">
          <a-input
              placeholder="请输入体重"
              v-model="submitData.weight"
              @blur="
             () => {
               $refs.weight.onFieldBlur();
             }"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="leftBloodPressure" label="左侧血压" prop="leftBloodPressure">
          <a-input
              placeholder="请输入左侧血压"
              v-model="submitData.leftBloodPressure"
              @blur="
             () => {
               $refs.leftBloodPressure.onFieldBlur();
             }"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="rightBloodPressure" label="右侧血压" prop="rightBloodPressure">
          <a-input
              placeholder="请输入右侧血压"
              v-model="submitData.rightBloodPressure"
              @blur="
             () => {
               $refs.rightBloodPressure.onFieldBlur();
             }"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="residenceType" label="常住类型" prop="residenceType">
          <a-select
              style="width: 100%"
              @change="handleResidenceTypeChange"
              v-model="submitData.residenceType"
              :defaultValue="submitData.residenceType"
              placeholder="请选择常住类型">
            <a-select-option v-for="(item,index) in residenceTypeOptions" :key="item.value">{{item.text}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="authUserId" label="关联人员" prop="authUserId">
          <a-select
              style="width: 100%"
              @change="handleAuthUserChange"
              v-model="submitData.authUserId"
              :defaultValue="submitData.authUserId"
              placeholder="请选择关联人员">
            <a-select-option v-for="(item,index) in authUserIdOption" :key="item.value">{{item.text}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="stature" label="身高" prop="stature">
          <a-input
              placeholder="请输入身高"
              v-model="submitData.stature"
              @blur="
             () => {
               $refs.stature.onFieldBlur();
             }"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="beginTime" label="开始时间" prop="beginTime">
          <a-date-picker
              v-model="submitData.beginTime"
              :valueFormat="timeFormat"
              placeholder="请选择开始时间"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="endTime" label="结束时间" prop="endTime">
          <a-date-picker
              v-model="submitData.endTime"
              :valueFormat="timeFormat"
              placeholder="请选择结束时间"
          />
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="gridUnitId" label="网格信息" prop="gridUnitId">
          <a-select
              style="width: 100%"
              @change="handleGridUnitChange"
              v-model="submitData.gridUnitId"
              :defaultValue="submitData.gridUnitId"
              placeholder="请选择网格信息">
            <a-select-option v-for="(item,index) in gridUnitOptions" :key="item.value">{{item.text}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </div>
    </a-form-model>
  </a-modal>
</template>
<script>

import locale from 'ant-design-vue/lib/date-picker/locale/zh_CN'
import Editor from '@/components/editor/Editor'
import store from '@/store'
import moment from 'moment'
import baseUtils from '@/utils/baseUtils'
moment.locale('zh-cn')

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}
export default {
  name: 'ItemAdd',
  props: {

  },
  components:{
    Editor:Editor,
    moment:moment,
    baseUtils:baseUtils,
  },
  data () {
    return {
      gridUnitOptions:[],
      genderOptions:this.$commonConstants.genderOptions,
      residenceTypeOptions:this.$commonConstants.residenceTypeOptions,
      locale:locale,
      authUserIdOption:[],
      submitUrl:'api/v1/healthArchives/addItem', //提交URL
      queryAllGridUnitUrl:'api/v1/gridUnit/queryAllGridUnit',
      timeFormat:'YYYY-MM-DD', //时间格式
      beginAndEndTimeFormat:'YYYY-MM', //时间格式
      submitData: {
        gender:'',
        birthday:'',
        realName:'',
        nation:'',
        occupation:'',
        address:'',
        idCardNum:'',
        contactsName:'',
        contactsPhone:'',
        temperature:'',
        stature:'',
        respiratoryRate:'',
        pulse:'',
        weight:'',
        leftBloodPressure:'',
        rightBloodPressure:'',
        residenceType:'',
        authUserId:'',
        beginTime:'',
        endTime:'',
        gridUnitId:'',
      },
      addVisible:false,
      uploadUrl: process.env.BASE_API+'/api/systemFile/uploadFile', //文件时上传
      //校验规则
      validateRules: {
        gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birthday: [
            { required: true, message: '请选择生日', trigger: 'change' }
        ],
        realName: [
            { required: true, message: '请规范填写真实姓名', trigger: 'blur' }
        ],
        nation: [
            { required: true, message: '请规范填写民族', trigger: 'blur' }
        ],
        occupation: [
            { required: true, message: '请规范填写职业', trigger: 'blur' }
        ],
        address: [
            { required: true, message: '请规范填写住址', trigger: 'blur' }
        ],
        idCardNum: [
            { required: true, message: '请规范填写身份证号', trigger: 'blur' }
        ],
        contactsName: [
            { required: true, message: '请规范填写联系人姓名', trigger: 'blur' }
        ],
        contactsPhone: [
            { required: true, message: '请规范填写联系人电话',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        temperature: [
            { required: true, message: '请规范填写体温',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        stature: [
            { required: true, message: '请规范填写身高',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        respiratoryRate: [
            { required: true, message: '请规范填写呼吸频率',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        pulse: [
            { required: true, message: '请规范填写脉率',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        weight: [
            { required: true, message: '请规范填写体重',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        leftBloodPressure: [
            { required: true, message: '请规范填写左侧血压',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        rightBloodPressure: [
            { required: true, message: '请规范填写右侧血压',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        residenceType: [
            { required: true, message: '请选择常住类型', trigger: 'change' }
        ],
        authUserId: [
            { required: true, message: '请选择关联人员', trigger: 'change' }
        ],
        beginTime: [
            { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
            { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
        gridUnitId: [
          { required: true, message: '请选择网格信息', trigger: 'change' }
        ],
      },
      dictDataList:[], //字典数据集合
      //上传文件的时候必须带上的token
      uploadHeader:{
        "Authentication":store.state.account.token
      },
      previewVisible: false,
      previewImage: '',
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 15,
      },
      loading: false,
      formItemLayout,
    }
  },
  methods: {
    moment, //时间处理
    handleGridUnitChange(value){
      this.submitData.gridUnitId = value
    },
    async handleGenderChange(value){
      this.submitData.gender = value
    },
    handleResidenceTypeChange(value){
      this.submitData.residenceType = value
    },
    async showAdd(data){
      this.submitData = {...data}
      await this.setOtherData();
      this.addVisible = true
    },
    async setOtherData(){
      this.gridUnitOptions = await this.queryAllGridUnit();
      this.authUserIdOption = await this.$commonConstants.authUserIdOption()
    },
    handleAuthUserChange(value){
      this.submitData.authUserId = value
    },
    async queryAllGridUnit(){
      this.$get(this.queryAllGridUnitUrl, {

      }).then(async (res) => {
        let data = res.data
        console.log('网格信息:'+JSON.stringify(data))
        if(data && data.code == 200){
          let dataList = data.data
          let optionList = new Array();
          dataList.map(item => {
            let option = {
              text:item.unitName,
              value:item.gridUnitId,
            }
            optionList.push(option);

          })
          this.gridUnitOptions = optionList;
        }
      }).catch((err) => {
        this.$message.error('初始化信息出现错误:'+err)
        this.gridUnitOptions = []
      })
    },
    onEndTimeChange(value, dateString){
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.submitData.endTime = dateString
    },
    onBeginTimeChange(value, dateString){
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.submitData.beginTime = dateString
    },
    onTimeOK(value){
      console.log('onOk: ', value);
    },
    //删除文件集合里面的文件
    removeFileFromList(arrayList,uid){
      if(arrayList && uid){
        let newArr = arrayList.reduce((total, current) => {
          current.uid !== uid && total.push(current);
          return total;
        }, []);
        return newArr;
      }
    },
    //处理关闭
    async handleClose(){
      await this.resetForm()
      await this.clearAll();
      this.$emit('close')
    },
    //清除所有
    async clearAll(){
      console.log('clearAll')
      this.authUserIdOption.splice(0,this.authUserIdOption.length);
      this.gridUnitOptions.splice(0,this.gridUnitOptions.length);
      this.submitData = {
        gender:'',
        birthday:'',
        realName:'',
        nation:'',
        occupation:'',
        address:'',
        idCardNum:'',
        contactsName:'',
        contactsPhone:'',
        temperature:'',
        stature:'',
        respiratoryRate:'',
        pulse:'',
        weight:'',
        leftBloodPressure:'',
        rightBloodPressure:'',
        residenceType:'',
        authUserId:'',
        beginTime:'',
        endTime:'',
        gridUnitId:'',
      }
      this.addVisible = false
    },
    //验证方法
    validate(successStatus,object){
      console.log(successStatus)
      console.log(object)
    },
    //重置表单
    async resetForm() { //重置表单
      this.$refs.ruleForm.resetFields();
    },
    //处理提交
    async handleSubmit () { //处理提交
      let that = this
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          //格式化时间
          /*if(this.submitData.beginTime){
              this.submitData.beginTime = moment(this.submitData.beginTime).format(this.beginAndEndTimeFormat);
          }
          if(this.submitData.endTime){
              this.submitData.endTime = moment(this.submitData.endTime).format(this.beginAndEndTimeFormat);
          }*/
          this.loading = true
          //从表单里面拿到值
          this.$postBodyRequest(this.submitUrl, {
            ...this.submitData
          }).then(async (res) => {
            let data = res.data
            console.log(JSON.stringify(data))
            if(data && data.code == 200){
              this.loading = false
              await this.handleClose();
              this.$emit('success')
            }
          }).catch((err) => {
            this.$message.error('新增出现错误')
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  mounted () {

  },
  computed:{
    $video(){
      return this.$refs.vueMiniPlayer.$video;
    }
  },
  watch: {

  }
}
</script>
<style lang="less" scoped>
    /*使用~@引入*/
    @import "~@/utils/utils.less";
</style>
