<template>
  <a-modal
    :width="1000"
    height="auto"
    :visible="editVisible" @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="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="userName" label="姓名" prop="userName">
          <a-input
              placeholder="请输入姓名"
              v-model="submitData.userName"
              @blur="
             () => {
               $refs.userName.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="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="age" label="年龄" prop="age">
          <a-input
              placeholder="请输入年龄"
              v-model="submitData.age"
              @blur="
             () => {
               $refs.age.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="marriage" label="婚姻" prop="marriage">
          <a-select
              style="width: 100%"
              @change="handleMarriage"
              v-model="submitData.marriage"
              :defaultValue="submitData.marriage"
              placeholder="请选择婚姻">
            <a-select-option v-for="(item,index) in marriageOptions" :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="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="birthPlace" label="出生地" prop="birthPlace">
          <a-input
              placeholder="请输入出生地"
              v-model="submitData.birthPlace"
              @blur="
             () => {
               $refs.birthPlace.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="presentAddress" label="现住址" prop="presentAddress">
          <a-input
              placeholder="请输入现住址"
              v-model="submitData.presentAddress"
              @blur="
             () => {
               $refs.presentAddress.onFieldBlur();
             }"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="workUnit" label="工作单位" prop="workUnit">
          <a-input
              placeholder="请输入工作单位"
              v-model="submitData.workUnit"
              @blur="
             () => {
               $refs.workUnit.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="phoneNum" label="电话" prop="phoneNum">
          <a-input
              placeholder="请输入电话"
              v-model="submitData.phoneNum"
              @blur="
             () => {
               $refs.phoneNum.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="admittedTime" label="入院时间" prop="admittedTime">
          <a-date-picker
              v-model="submitData.admittedTime"
              :valueFormat="timeFormat"
              placeholder="请选择入院时间" />
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="recordTime" label="记录时间" prop="recordTime">
          <a-date-picker
              v-model="submitData.recordTime"
              :valueFormat="timeFormat"
              placeholder="请选择入院时间"/>
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="text-area-view" ref="allergicCondition" label="过敏状况" prop="allergicCondition">
          <a-textarea
              placeholder="清输入过敏状况" v-model="submitData.allergicCondition" :rows="4"
              @blur="
                () => {
                  $refs.allergicCondition.onFieldBlur();
                }"/>
        </a-form-model-item>
      </div>
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="text-area-view" ref="historyNarrative" label="病史叙述" prop="historyNarrative">
          <a-textarea
              placeholder="清输入病史叙述" v-model="submitData.historyNarrative" :rows="4"
              @blur="
             () => {
               $refs.historyNarrative.onFieldBlur();
             }"/>
        </a-form-model-item>
      </div>
      <a-divider v-if="false">填写内容</a-divider>
      <Editor @change="getEditorContent" :value="editorContent" :isClear="true" v-if="false"></Editor>
    </a-form-model>
  </a-modal>
</template>
<script>
import locale from 'ant-design-vue/es/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: 'ItemEdit',
  components: {
    Editor:Editor,
    moment:moment,
    baseUtils:baseUtils,
  },
  props: {

  },
  data () {
    return {
      locale:locale,
      editorContent:``,
      genderOptions:this.$commonConstants.genderOptions,
      marriageOptions:this.$commonConstants.marriageOptions,
      authUserIdOption:[],
      submitUrl:'api/v1/medicalHistory/updateItem', //提交URL
      timeFormat:'YYYY-MM-DD', //时间格式
      beginAndEndTimeFormat:'YYYY-MM', //时间格式
      uploadUrl: process.env.BASE_API+'/api/systemFile/uploadFile', //文件时上传
      submitData:{
        authUserId:'',
        userName:'',
        gender:'',
        age:'',
        marriage:'',
        nation:'',
        occupation:'',
        birthPlace:'',
        presentAddress:'',
        workUnit:'',
        idCardNum:'',
        phoneNum:'',
        admittedTime:'',
        recordTime:'',
        allergicCondition:'',
        historyNarrative:'',
      },
      editVisible:false,
      //校验规则
      validateRules: {
        authUserId: [
          { required: true, message: '请选择用户', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '请规范填写姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请规范填写性别', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请规范填写年龄',pattern: new RegExp(/^[1-9]\d*$/, "g"),  trigger: 'blur' }
        ],
        marriage: [
          { required: true, message: '请规范填写婚姻', trigger: 'blur' }
        ],
        nation: [
          { required: true, message: '请规范填写民族', trigger: 'blur' }
        ],
        occupation: [
          { required: true, message: '请规范填写职业', trigger: 'blur' }
        ],
        birthPlace: [
          { required: true, message: '请规范填写出生地', trigger: 'blur' }
        ],
        presentAddress: [
          { required: true, message: '请规范填写现住址', trigger: 'blur' }
        ],
        workUnit: [
          { required: true, message: '请规范填写工作单位', trigger: 'blur' }
        ],
        idCardNum: [
          { required: true, message: '请规范填写身份证号', trigger: 'blur' }
        ],
        phoneNum: [
          { required: true, message: '请规范填写电话', pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        admittedTime: [
          { required: true, message: '请规范填写入院时间', trigger: 'change' }
        ],
        recordTime: [
          { required: true, message: '请规范填写记录时间', trigger: 'change' }
        ],
        allergicCondition: [
          { required: true, message: '请规范填写过敏状况', trigger: 'blur' }
        ],
        historyNarrative: [
          { required: true, message: '请规范填写病史叙述', trigger: 'blur' }
        ],
      },
      formItemLayout,
      dictDataList:[], //字典数据集合
      //上传文件的时候必须带上的token
      uploadHeader:{
          "Authentication":store.state.account.token
      },
      previewVisible: false,
      previewImage: '',
      labelCol: {
          span: 5,
      },
      wrapperCol: {
          span: 15,
      },
      loading: false,
    }
  },
  methods: {
    moment, //时间处理
    async handleMarriage(value){
      this.submitData.marriage = value
    },
    async handleGenderChange(value){
      this.submitData.gender = value
    },
    getEditorContent(textValue) {
      this.editorContent = textValue
      console.log('textValue : ' + textValue)
      console.log('editorContent : ' + this.editorContent)
    },
    async showEdit(data){
      this.submitData = {...data}
      let itemContent = data.itemContent
      if(!this.$isNull(itemContent)){
        this.editorContent = itemContent
      }
      await this.setOtherData();
      this.editVisible = true
    },
    async setOtherData(){
      this.authUserIdOption = await this.$commonConstants.authUserIdOption()
    },
    handleAuthUserChange(value){
      this.submitData.authUserId = value
    },
    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.submitData = {
        authUserId:'',
        userName:'',
        gender:'',
        age:'',
        marriage:'',
        nation:'',
        occupation:'',
        birthPlace:'',
        presentAddress:'',
        workUnit:'',
        idCardNum:'',
        phoneNum:'',
        admittedTime:'',
        recordTime:'',
        allergicCondition:'',
        historyNarrative:'',
      }
      this.editVisible = false
    },
    //验证方法
    validate(successStatus,object){
      console.log(successStatus)
      console.log(object)
    },
    //重置表单
    async resetForm() { //重置表单
      this.$refs.ruleForm.resetFields();
    },
    //处理提交
    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);
          }*/
          /*if(!this.$isNull(this.editorContent)){
              this.submitData.itemContent = this.editorContent
          }else{
              this.$message.error('请填写内容');
          }*/
          this.loading = true
          //从表单里面拿到值
          this.$putBodyRequest(this.submitUrl, {
            ...this.submitData
          }).then(() => {
            this.loading = false
            this.resetForm()
            this.clearAll();
            this.$emit('success')
          }).catch(() => {
             this.$message.error('更新出现错误')
             this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  watch: { //监控弹窗的变化

  }
}
</script>
<style lang="less" scoped>
    /*使用~@引入*/
    @import "~@/utils/utils.less";
    .text-area-view{
      width:100%;
    }
</style>
