<template>
  <div id="advanced-search-div">
    <a-form-model class="ant-advanced-search-form"
      ref="ruleForm"
      :model="queryParams"
      :rules="validateRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      @validate="validate">
      <a-row :gutter="5">
        <!--每一列占用8，超过24则换行-->
        <!--<a-col
              :span="12"
              :style="{ display: 'block' }">
            <a-form-model-item has-feedback ref="beginTime" label="开始时间" prop="beginTime">
              <a-month-picker
                :locale="locale"
                v-model="queryParams.beginTime"
                placeholder="请选择开始时间"
                @change="onBeginTimeChange"
                @ok="onTimeOK" />
            </a-form-model-item>
        </a-col>-->
        <!--<a-col
              :span="12"
              :style="{ display: 'block' }">
            <a-form-model-item has-feedback ref="endTime" label="结束时间" prop="endTime">
              <a-month-picker
                :locale="locale"
                v-model="queryParams.endTime"
                placeholder="请选择结束时间"
                @change="onEndTimeChange"
                @ok="onTimeOK" />
            </a-form-model-item>
        </a-col>-->
        <a-col
          :span="12"
          :style="{  display: 'block' }">
          <a-form-model-item
            has-feedback
            ref="authUserId"
            label="关联用户"
            prop="authUserId">
            <a-select
                style="width: 100%"
                @change="handleAuthUserChange"
                v-model="queryParams.authUserId"
                :defaultValue="queryParams.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-col>
        <a-col
          :span="12"
          :style="{  display: 'block' }">
          <a-form-model-item
            has-feedback
            ref="userName"
            label="姓名"
            prop="userName">
            <a-input
              placeholder="请输入姓名"
              v-model="queryParams.userName"
              @blur="
                () => {
                  $refs.userName.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{  display: 'block' }">
          <a-form-model-item
            has-feedback
            ref="age"
            label="年龄"
            prop="age">
            <a-input
              placeholder="请输入年龄"
              v-model="queryParams.age"
              @blur="
                () => {
                  $refs.age.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{  display: 'block' }">
          <a-form-model-item
            has-feedback
            ref="nation"
            label="民族"
            prop="nation">
            <a-input
              placeholder="请输入民族"
              v-model="queryParams.nation"
              @blur="
                () => {
                  $refs.nation.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
            :span="12"
            :style="{  display: 'block' }">
          <a-form-model-item
              has-feedback
              ref="beginTime"
              label="开始时间"
              prop="beginTime">
            <a-input
                placeholder="请输入开始时间"
                v-model="queryParams.beginTime"
                @blur="
                () => {
                  $refs.beginTime.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
            :span="12"
            :style="{  display: 'block' }">
          <a-form-model-item
              has-feedback
              ref="endTime"
              label="结束时间"
              prop="endTime">
            <a-input
                placeholder="请输入结束时间"
                v-model="queryParams.endTime"
                @blur="
                () => {
                  $refs.endTime.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="occupation"
            label="职业"
            prop="occupation">
            <a-input
              placeholder="请输入职业"
              v-model="queryParams.occupation"
              @blur="
                () => {
                  $refs.occupation.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="birthPlace"
            label="出生地"
            prop="birthPlace">
            <a-input
              placeholder="请输入出生地"
              v-model="queryParams.birthPlace"
              @blur="
                () => {
                  $refs.birthPlace.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="presentAddress"
            label="现住址"
            prop="presentAddress">
            <a-input
              placeholder="请输入现住址"
              v-model="queryParams.presentAddress"
              @blur="
                () => {
                  $refs.presentAddress.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="workUnit"
            label="工作单位"
            prop="workUnit">
            <a-input
              placeholder="请输入工作单位"
              v-model="queryParams.workUnit"
              @blur="
                () => {
                  $refs.workUnit.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="idCardNum"
            label="身份证号"
            prop="idCardNum">
            <a-input
              placeholder="请输入身份证号"
              v-model="queryParams.idCardNum"
              @blur="
                () => {
                  $refs.idCardNum.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="phoneNum"
            label="电话"
            prop="phoneNum">
            <a-input
              placeholder="请输入电话"
              v-model="queryParams.phoneNum"
              @blur="
                () => {
                  $refs.phoneNum.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="admittedTime"
            label="入院时间"
            prop="admittedTime">
            <a-input
              placeholder="请输入入院时间"
              v-model="queryParams.admittedTime"
              @blur="
                () => {
                  $refs.admittedTime.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="recordTime"
            label="记录时间"
            prop="recordTime">
            <a-input
              placeholder="请输入记录时间"
              v-model="queryParams.recordTime"
              @blur="
                () => {
                  $refs.recordTime.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="allergicCondition"
            label="过敏状况"
            prop="allergicCondition">
            <a-input
              placeholder="请输入过敏状况"
              v-model="queryParams.allergicCondition"
              @blur="
                () => {
                  $refs.allergicCondition.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="historyNarrative"
            label="病史叙述"
            prop="historyNarrative">
            <a-input
              placeholder="请输入病史叙述"
              v-model="queryParams.historyNarrative"
              @blur="
                () => {
                  $refs.historyNarrative.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit" @click="handleSearch">
              搜索
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="reset">
              重置
          </a-button>
          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggleExpand">
              展开 <a-icon :type="expandStatus ? 'up' : 'down'" />
          </a>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import baseUtils from '@/utils/baseUtils'
import locale from 'ant-design-vue/lib/date-picker/locale/zh_CN'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'ItemFactor',
  components: {
    baseUtils:baseUtils,
    moment:moment,
  },
  data () {
    return {
      locale:locale,
      authUserIdOption:[],
      dataBeginAndEndTimeFormat:this.$commonConstants.dataBeginAndEndTimeFormat,
      timeFormat:'YYYY-MM-DD',
      contrastParams: { //查询参数
        //对比查询条件
        contrastList:[],
      },
      queryParams: {
        authUserId:'',
        userName:'',
        gender:'',
        age:'',
        marriage:'',
        nation:'',
        occupation:'',
        birthPlace:'',
        presentAddress:'',
        workUnit:'',
        idCardNum:'',
        phoneNum:'',
        beginTime:'',
        endTime:'',
        admittedTime:'',
        recordTime:'',
        allergicCondition:'',
        historyNarrative:'',
      },
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 15,
      },
      //是否展开
      expandStatus: false,
      //校验规则
      validateRules: {
        authUserId: [
          { required: false, message: '请规范填写关联用户', trigger: 'blur' }
        ],
        userName: [
          { required: false, message: '请规范填写姓名', trigger: 'blur' }
        ],
        gender: [
          { required: false, message: '请规范填写性别', trigger: 'blur' }
        ],
        age: [
          { required: false, message: '请规范填写年龄', trigger: 'blur' }
        ],
        marriage: [
          { required: false, message: '请规范填写婚姻', trigger: 'blur' }
        ],
        nation: [
          { required: false, message: '请规范填写民族', trigger: 'blur' }
        ],
        occupation: [
          { required: false, message: '请规范填写职业', trigger: 'blur' }
        ],
        birthPlace: [
          { required: false, message: '请规范填写出生地', trigger: 'blur' }
        ],
        presentAddress: [
          { required: false, message: '请规范填写现住址', trigger: 'blur' }
        ],
        workUnit: [
          { required: false, message: '请规范填写工作单位', trigger: 'blur' }
        ],
        idCardNum: [
          { required: false, message: '请规范填写身份证号', trigger: 'blur' }
        ],
        phoneNum: [
          { required: false, message: '请规范填写电话', trigger: 'blur' }
        ],
        admittedTime: [
          { required: false, message: '请规范填写入院时间', trigger: 'blur' }
        ],
        recordTime: [
          { required: false, message: '请规范填写记录时间', trigger: 'blur' }
        ],
        allergicCondition: [
          { required: false, message: '请规范填写过敏状况', trigger: 'blur' }
        ],
        historyNarrative: [
          { required: false, message: '请规范填写病史叙述', trigger: 'blur' }
        ],
      }
    }
  },
  created () {
    this.setOtherData()
  },
  computed: {

  },
  methods:{
    moment, //时间处理
    handleAuthUserChange(value){
      this.submitData.authUserId = value
    },
    onTimeOK(value){
      console.log('onOk: ', value);
    },
    onSetupEndTimeChange(value, dateString){
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.queryParams.setupEndTime = dateString
    },
    onSetupBeginTimeChange(value, dateString){
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.queryParams.setupBeginTime = dateString
    },
    onEndTimeChange(value, dateString){
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.queryParams.endTime = dateString
    },
    onBeginTimeChange(value, dateString){
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.queryParams.beginTime = dateString
    },
    initQueryParams(){
      //console.log('initQueryParams:this.queryParams开始 : '+JSON.stringify(this.queryParams))
      //把原来的固定的对比条件赋值给查询参数
      let contrastParams = this.contrastParams
      //清除对象
      Object.getOwnPropertyNames(contrastParams).forEach((item) => {
        let data = contrastParams[item]
        //console.log(item + ":contrastParams是否为数组"+Array.isArray(data))
        //如果为数组则清除数据
        if(Array.isArray(data)){
          data.splice(0,data.length)
        }
        this.queryParams[item] = data
      })
      //清除原来的查询参数里面的数组信息和对象信息
      let queryParams = this.queryParams
      Object.getOwnPropertyNames(queryParams).forEach((item) => {
        let data = queryParams[item]
        //console.log(item + ":queryParams是否为数组"+Array.isArray(data))
        //console.log(item + " : 是否是字符串"+(baseUtils.isString(data)))
        //如果为数组则清除数据
        if(Array.isArray(data)) {
          data.splice(0, data.length)
          this.queryParams[item] = data
        }else if(baseUtils.isString(data)){
          this.queryParams[item] = ""
        }else{
          this.queryParams[item] = {}
        }
      })
      //console.log('initQueryParams:this.queryParams结束 : '+JSON.stringify(this.queryParams))
    },
    reset(){
      // 重置查询参数
      this.initQueryParams();
      this.$emit("reset")
    },
    handleSearch(){
      let queryParams = this.queryParams
      let dataBeginAndEndTimeFormat = this.dataBeginAndEndTimeFormat
      let timeFormat = this.timeFormat
      //格式化时间
      if(queryParams.beginTime){
        queryParams.beginTime = moment(queryParams.beginTime).format(dataBeginAndEndTimeFormat);
      }
      if(queryParams.endTime){
        queryParams.endTime = moment(queryParams.endTime).format(dataBeginAndEndTimeFormat);
      }
      this.$emit("handleSearch",queryParams)
    },
    //数字组合条件字段校验
    factorValidator(rule, value, callback){
      /*console.log('rule : '+JSON.stringify(rule))
      console.log('value : '+JSON.stringify(value))*/
      //字段对比条件
      let contrastFactor = value.contrastFactor
      //字段对比值
      let contrastValue = value.contrastValue
      //当前操作的字段值
      let itemName = rule.fullField
      value.itemName = itemName
      if(baseUtils.isNull(contrastFactor) && !baseUtils.isNull(contrastValue)){
        callback(new Error('条件和条件值同时必选择'))
      }
      if(!baseUtils.isNull(contrastFactor) && baseUtils.isNull(contrastValue)){
        callback(new Error('条件和条件值同时必选择'))
      }
      if(!baseUtils.isNumberString(value.contrastValue)){
        callback(new Error('请输入数字'))
      }
      let dataList = this.queryParams.contrastList
      let item = { //可以新增的条件参数
        itemName:itemName,
        contrastFactor:contrastFactor,
        contrastValue:contrastValue,
      }
      let handleResultList = this.$validator.factorContrastData(item,dataList);
      this.queryParams.contrastList = handleResultList
      console.log('this.queryParams : '+JSON.stringify(this.queryParams))
      callback()
    },
    validate(successStatus,object){
      console.log(successStatus)
      console.log(object)
    },
    //是否展开
    toggleExpand() {
      this.expandStatus = !this.expandStatus;
    },
    async setOtherData(){
      this.authUserIdOption = await this.$commonConstants.authUserIdOption()
      this.initQueryParams();
    },
  },
  watch: {

  }
}
</script>
<style lang="less" scoped>
    @import "~@static/less/Common";
</style>
