<template>
  <div :class="$style.form">
    <a-form-model
      ref="form"
      :class="$style.antAdvancedSearchForm"
      :model="form"
      v-bind="formItemLayout"
    >
      <a-row :gutter="24" :class="$style.antformitem" type="flex" justify="start">
        <a-col :span="!expand ? 8 : 12">
          <a-form-model-item label="是否请求成功" prop="isRequestSuccess">
            <a-select v-model="form.isRequestSuccess" allow-clear>
              <a-select-option value="true">
                是
              </a-select-option>
              <a-select-option value="false">
                否
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="!expand ? 8 : 12">
          <a-form-model-item label="是否执行成功" has-feedback prop="isSuccess">
            <a-select v-model="form.isSuccess" allow-clear>
              <a-select-option value="true">
                是
              </a-select-option>
              <a-select-option value="false">
                否
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col v-if="!expand" :span="8" style="padding:0">
          <div :class="$style.searchbtn">
            <a-button :style="'margin-right: 10px'" @click="resetForm('form')">
              重置
            </a-button>
            <a-button type="primary" @click="submitForm">
              查询
            </a-button>
          </div>
        </a-col>
      </a-row>
      <a :class="$style.filterbtn" @click="changeexpand">
        {{ expand ? '收起' : '展开' }}
        <a-icon :type="expand ? 'up' : 'down'" :class="$style.expandicon" />
      </a>
      <a-row v-if="expand" :gutter="24" :class="$style.antformitem" justify="start">
        <a-col :span="12">
          <a-form-model-item label="接口类型" prop="methodName">
            <a-input v-model="form.methodName" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="来源业务系统" prop="sourceSys">
            <a-input v-model="form.sourceSys" allow-clear />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="expand" :gutter="24" :class="$style.antformitem" type="flex" justify="start">
        <a-col :span="12">
          <a-form-model-item label="创建时间" prop="fldQiCaoRQ">
            <a-range-picker v-model="form.fldQiCaoRQ" show-time format="YYYY/MM/DD HH:mm:ss" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="源文件ID" prop="sourceId">
            <a-input v-model="form.sourceId" allow-clear />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="expand" :gutter="24" :class="$style.antformitem" type="flex" justify="start">
        <a-col :span="12">
          <a-form-model-item label="返回信息" has-feedback prop="message">
            <a-input v-model="form.message" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="是否重置成功" has-feedback prop="isRebuildSuccess">
            <a-select v-model="form.isRebuildSuccess" allow-clear>
              <a-select-option value="true">
                是
              </a-select-option>
              <a-select-option value="false">
                否
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="expand" :gutter="24" :class="$style.antformitem" type="flex" justify="start">
        <a-col :span="12" style="padding:0"> </a-col>
        <a-col :span="12" style="padding:0">
          <div :class="$style.searchbtn">
            <a-button :style="'margin-right: 10px'" @click="resetForm('form')">
              重置
            </a-button>
            <a-button type="primary" @click="submitForm">
              查询
            </a-button>
          </div>
        </a-col>
      </a-row>
      <!-- <div :class="$style.searchbtn"> </div> -->
    </a-form-model>
  </div>
</template>

<script>
import moment from 'moment'
import components from './_import-components/xm-log-info-component-import'

export default {
  name: 'XmLogInfoComponent',
  metaInfo: {
    title: 'XmlogInfoComponent',
  },
  components,
  props: {
    expressions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      form: {
        sourceId: '',
        sourceSys: '',
        methodName: '',
        isSuccess: '',
        isRequestSuccess: '',
        isRebuildSuccess: '',
        fldQiCaoRQ: [],
        message: '',
      },

      expressionscpy: [...this.expressions],
      expand: false, // 默认搜索条件为展开状态
    }
  },
  methods: {
    // 展开或收起
    changeexpand() {
      this.expand = !this.expand
    },
    // 查询
    submitForm() {
      this.expressionscpy = []
      if (this.form.sourceId) {
        this.expressionscpy.push({
          dataType: 'str',
          name: 'sourceId',
          op: 'like',
          stringValue: '%' + this.form.sourceId + '%',
        })
      }
      if (this.form.sourceSys) {
        this.expressionscpy.push({
          dataType: 'str',
          name: 'sourceSys',
          op: 'like',
          stringValue: '%' + this.form.sourceSys + '%',
        })
      }
      if (this.form.methodName) {
        this.expressionscpy.push({
          dataType: 'str',
          name: 'methodName',
          op: 'like',
          stringValue: '%' + this.form.methodName + '%',
        })
      }
      if (this.form.isSuccess) {
        this.expressionscpy.push({
          dataType: 'str',
          name: 'isSuccess',
          op: 'eq',
          stringValue: this.form.isSuccess,
        })
      }
      if (this.form.isRequestSuccess) {
        this.expressionscpy.push({
          dataType: 'str',
          name: 'isRequestSuccess',
          op: 'eq',
          stringValue: this.form.isRequestSuccess,
        })
      }
      if (this.form.isRebuildSuccess) {
        this.expressionscpy.push({
          dataType: 'str',
          name: 'isRebuildSuccess',
          op: 'eq',
          stringValue: this.form.isRebuildSuccess,
        })
      }
      if (this.form.fldQiCaoRQ.length > 0) {
        let creationTimeStart = '' // 开始时间
        let creationTimeEnd = '' // 结束时间

        creationTimeStart = moment(this.form.fldQiCaoRQ[0]).format('YYYY-MM-DD')
        creationTimeStart = moment(creationTimeStart).valueOf()

        creationTimeEnd = moment(this.form.fldQiCaoRQ[1])
          .add(1, 'days')
          .format('YYYY-MM-DD')
        creationTimeEnd = moment(creationTimeEnd).valueOf()
        this.expressionscpy.push(
          {
            dataType: 'long',
            name: 'visitDate',
            op: 'gt',
            longValue: creationTimeStart,
          },
          {
            dataType: 'long',
            name: 'visitDate',
            op: 'lt',
            longValue: creationTimeEnd,
          }
        )
      }
      if (this.form.message) {
        this.expressionscpy.push({
          dataType: 'str',
          name: 'message',
          op: 'like',
          stringValue: '%' + this.form.message + '%',
        })
      }
      this.$emit('lsexpressions', this.expressionscpy)
    },
    // 重置
    resetForm(form) {
      this.$refs[form].resetFields()
      this.expressions = {}
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.antformitem {
  :global(.ant-form-item) {
    margin-bottom: 5px;
  }
  :global(.ant-col) {
    padding: 0 !important;
  }
  .searchbtn {
    margin-right: 20px;
    text-align: right;
  }
}
.ant-advanced-search-form button {
  /* float: right; */
  padding: 0 8px;
  margin-right: 2px;
}
// 按钮靠右
.searchbutton {
  text-align: right;
}
.expand {
  min-height: 56%;
}
.noexpand {
  min-height: 90%;
}
.ant-advanced-search-form {
  position: relative;
  padding: 10px 0 20px 0;
}
.filterbtn {
  position: absolute;
  bottom: 0;
  left: 45%;
  z-index: 999;
}
.rowline {
  :global(.ant-col) {
    :global(.ant-row) {
      margin-bottom: 5px;
    }
  }
}
</style>
