<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">
        <a-col
          :span="12"
          style="display: block">
          <a-form-model-item
            has-feedback
            ref="gender"
            label="性别"
            prop="gender">
            <a-select
                style="width: 100%"
                @change="handleGenderChange"
                v-model="queryParams.gender"
                :defaultValue="queryParams.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-col>
        <a-col
          :span="12"
          style="display: block">
          <a-form-model-item
            has-feedback
            ref="realName"
            label="真实姓名"
            prop="realName">
            <a-input
              placeholder="请输入真实姓名"
              v-model="queryParams.realName"
              @blur="
                () => {
                  $refs.realName.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="gender"
              label="网格信息"
              prop="gender">
            <a-select
                style="width: 100%"
                v-model="queryParams.gridUnitId"
                :defaultValue="queryParams.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>
        </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="address"
            label="住址"
            prop="address">
            <a-input
              placeholder="请输入住址"
              v-model="queryParams.address"
              @blur="
                () => {
                  $refs.address.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="contactsName"
            label="联系人姓名"
            prop="contactsName">
            <a-input
              placeholder="请输入联系人姓名"
              v-model="queryParams.contactsName"
              @blur="
                () => {
                  $refs.contactsName.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="contactsPhone"
            label="联系人电话"
            prop="contactsPhone">
            <a-input
              placeholder="请输入联系人电话"
              v-model="queryParams.contactsPhone"
              @blur="
                () => {
                  $refs.contactsPhone.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="temperature"
            label="体温"
            prop="temperature">
            <a-input
              placeholder="请输入体温"
              v-model="queryParams.temperature"
              @blur="
                () => {
                  $refs.temperature.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="stature"
            label="身高"
            prop="stature">
            <a-input
              placeholder="请输入身高"
              v-model="queryParams.stature"
              @blur="
                () => {
                  $refs.stature.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="respiratoryRate"
            label="呼吸频率"
            prop="respiratoryRate">
            <a-input
              placeholder="请输入呼吸频率"
              v-model="queryParams.respiratoryRate"
              @blur="
                () => {
                  $refs.respiratoryRate.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="pulseMin"
            label="脉率最小值"
            prop="pulse">
            <a-input
              placeholder="请输入脉率最小值"
              v-model="queryParams.pulseMin"
              @blur="
                () => {
                  $refs.pulseMin.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
            :span="12"
            :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
              has-feedback
              ref="pulseMax"
              label="脉率最大值"
              prop="pulse">
            <a-input
                placeholder="请输入脉率最大值"
                v-model="queryParams.pulseMax"
                @blur="
                () => {
                  $refs.pulseMax.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="weight"
            label="体重"
            prop="weight">
            <a-input
              placeholder="请输入体重"
              v-model="queryParams.weight"
              @blur="
                () => {
                  $refs.weight.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
            :span="12"
            :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
              has-feedback
              ref="leftBloodPressureMin"
              label="左侧血压最小值"
              prop="leftBloodPressureMin">
            <a-input
                placeholder="请输入左侧血压最小值"
                v-model="queryParams.leftBloodPressureMin"
                @blur="
                () => {
                  $refs.leftBloodPressureMin.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
            :span="12"
            :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
              has-feedback
              ref="leftBloodPressureMax"
              label="左侧血压最大值"
              prop="leftBloodPressureMax">
            <a-input
                placeholder="请输入左侧血压最大值"
                v-model="queryParams.leftBloodPressureMax"
                @blur="
                () => {
                  $refs.leftBloodPressureMax.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="leftBloodPressure"
            label="左侧血压"
            prop="leftBloodPressure">
            <a-input
              placeholder="请输入左侧血压"
              v-model="queryParams.leftBloodPressure"
              @blur="
                () => {
                  $refs.leftBloodPressure.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="rightBloodPressure"
            label="右侧血压"
            prop="rightBloodPressure">
            <a-input
              placeholder="请输入右侧血压"
              v-model="queryParams.rightBloodPressure"
              @blur="
                () => {
                  $refs.rightBloodPressure.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
            :span="12"
            :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
              has-feedback
              ref="rightBloodPressureMin"
              label="右侧血压最小值"
              prop="rightBloodPressureMin">
            <a-input
                placeholder="请输入右侧血压最小值"
                v-model="queryParams.rightBloodPressureMin"
                @blur="
                () => {
                  $refs.rightBloodPressureMin.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
            :span="12"
            :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
              has-feedback
              ref="rightBloodPressureMax"
              label="右侧血压最大值"
              prop="rightBloodPressureMax">
            <a-input
                placeholder="请输入右侧血压最大值"
                v-model="queryParams.rightBloodPressureMax"
                @blur="
                () => {
                  $refs.rightBloodPressureMax.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="residenceType"
            label="常住类型"
            prop="residenceType">
            <a-input
              placeholder="请输入常住类型"
              v-model="queryParams.residenceType"
              @blur="
                () => {
                  $refs.residenceType.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <a-form-model-item
            has-feedback
            ref="authUserId"
            label="关联人员"
            prop="authUserId">
            <a-input
              placeholder="请输入关联人员"
              v-model="queryParams.authUserId"
              @blur="
                () => {
                  $refs.authUserId.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          :style="{ display: expandStatus ? 'block' : 'none' }">
          <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: expandStatus ? 'block' : 'none' }">
          <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-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 {
      contrastFactorOption:this.$commonConstants.contrastFactorOption,
      gridUnitOptions:[],
      queryAllGridUnitUrl:'api/v1/gridUnit/queryAllGridUnit',
      genderOptions:this.$commonConstants.genderOptions,
      residenceTypeOptions:this.$commonConstants.residenceTypeOptions,
      locale:locale,
      dataBeginAndEndTimeFormat:this.$commonConstants.dataBeginAndEndTimeFormat,
      setupTimeFormat:'YYYY-MM-DD',
      contrastParams: { //查询参数
        //对比查询条件
        contrastList:[],
      },
      queryParams: {
        gender:'',
        birthday:'',
        realName:'',
        nation:'',
        occupation:'',
        address:'',
        idCardNum:'',
        contactsName:'',
        contactsPhone:'',
        temperature:'',
        stature:'',
        respiratoryRate:'',
        pulse:'',
        pulseMin:'',
        pulseMax:'',
        weight:'',
        leftBloodPressure:'',
        leftBloodPressureMin:'',
        leftBloodPressureMax:'',
        rightBloodPressure:'',
        rightBloodPressureMin:'',
        rightBloodPressureMax:'',
        residenceType:'',
        authUserId:'',
        beginTime:'',
        endTime:'',
        gridUnitId:'',
      },
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 15,
      },
      //是否展开
      expandStatus: false,
      //校验规则
      validateRules: {
        gender: [
          { required: false, message: '请规范填写性别', trigger: 'blur' }
        ],
        birthday: [
          { required: false, message: '请规范填写生日', trigger: 'blur' }
        ],
        realName: [
          { required: false, message: '请规范填写真实姓名', trigger: 'blur' }
        ],
        nation: [
          { required: false, message: '请规范填写民族', trigger: 'blur' }
        ],
        occupation: [
          { required: false, message: '请规范填写职业', trigger: 'blur' }
        ],
        address: [
          { required: false, message: '请规范填写住址', trigger: 'blur' }
        ],
        idCardNum: [
          { required: false, message: '请规范填写身份证号', trigger: 'blur' }
        ],
        contactsName: [
          { required: false, message: '请规范填写联系人姓名', trigger: 'blur' }
        ],
        contactsPhone: [
          { required: false, message: '请规范填写联系人电话',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        temperature: [
          { required: false, message: '请规范填写体温',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        stature: [
          { required: false, message: '请规范填写身高',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        respiratoryRate: [
          { required: false, message: '请规范填写呼吸频率',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        pulse: [
          { required: false, message: '请规范填写脉率',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        pulseMin: [
          { required: false, message: '请规范填写脉率最小值',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        pulseMax: [
          { required: false, message: '请规范填写脉率最大值',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        weight: [
          { required: false, message: '请规范填写体重',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        leftBloodPressureMin: [
          { required: false, message: '请规范填写左侧血压最小值',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        leftBloodPressureMax: [
          { required: false, message: '请规范填写左侧血压最大值',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        leftBloodPressure: [
          { required: false, message: '请规范填写左侧血压',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        rightBloodPressure: [
          { required: false, message: '请规范填写右侧血压',pattern: new RegExp(/^[1-9]\d*$/, "g"), trigger: 'blur' }
        ],
        residenceType: [
          { required: false, message: '请规范填写常住类型', trigger: 'blur' }
        ],
        authUserId: [
          { required: false, message: '请规范填写关联人员', trigger: 'blur' }
        ],
        beginTime: [
          { required: false, message: '请规范填写开始时间', trigger: 'blur' }
        ],
        endTime: [
          { required: false, message: '请规范填写结束时间', trigger: 'blur' }
        ],
        dataType: [
          {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
          },
        ],
        resource: [
          { required: true, message: 'Please select activity resource', trigger: 'change' },
        ],
      }
    }
  },
  created () {
    this.setOtherData()
  },
  computed: {

  },
  methods:{
    moment, //时间处理
    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 = []
      })
    },
    async handleGenderChange(value){
      this.queryParams.gender = value
    },
    handleResidenceTypeChange(value){
      this.queryParams.residenceType = 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
    },
    async initQueryParams(){
      await this.queryAllGridUnit();
      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))
    },
    handleCorpChange(value){
      console.log(JSON.stringify(value))
      if(baseUtils.isNull(value)){
        this.queryParams.corpBaseDataId = null;
        return;
      }
      let key = value.key;
      this.queryParams.corpBaseDataId = key
    },
    reset(){
      // 重置查询参数
      this.initQueryParams();
      this.$emit("reset")
    },
    handleSearch(){
      let queryParams = this.queryParams
      let dataBeginAndEndTimeFormat = this.dataBeginAndEndTimeFormat
      let setupTimeFormat = this.setupTimeFormat
      //格式化时间
      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.initQueryParams();
    },
  },
  watch: {

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