<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="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="recorderId"
            label="记录者"
            prop="recorderId">
            <a-select
                style="width: 100%"
                @change="handleRecorderIdChange"
                v-model="queryParams.recorderId"
                :defaultValue="queryParams.recorderId"
                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="monitorSubject"
            label="监测要素名称"
            prop="monitorSubject">
            <a-input
              placeholder="请输入监测要素名称"
              v-model="queryParams.monitorSubject"
              @blur="
                () => {
                  $refs.monitorSubject.onFieldBlur();
                }"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12"
          style="display: block">
          <a-form-model-item
            has-feedback
            ref="resultValue"
            label="结果值"
            prop="resultValue">
            <a-input
              placeholder="请输入结果值"
              v-model="queryParams.resultValue"
              @blur="
                () => {
                  $refs.resultValue.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:'',
        recorderId:'',
        monitorSubject:'',
        resultValue:'',
      },
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 15,
      },
      //是否展开
      expandStatus: false,
      //校验规则
      validateRules: {
        authUserId: [
          { required: false, message: '请规范填写被监测者', trigger: 'blur' }
        ],
        recorderId: [
          { required: false, message: '请规范填写记录者', trigger: 'blur' }
        ],
        monitorSubject: [
          { required: false, message: '请规范填写监测要素名称', trigger: 'blur' }
        ],
        resultValue: [
          { required: false, message: '请规范填写结果值', trigger: 'blur' }
        ],
      }
    }
  },
  created () {
    this.setOtherData()
  },
  computed: {

  },
  methods:{
    moment, //时间处理
    handleRecorderIdChange(value){
      this.queryParams.recorderId = value
    },
    handleAuthUserChange(value){
      this.queryParams.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>
