<template>
  <div>
    <el-dialog title="高级查询" :visible="moreQueryVisible" @close="close" width="66%">
      <el-form inline ref="queryForm" label-position="top" :model="formData">
        <el-form-item label="合同编号" prop="contractNo">
          <el-input v-model="formData.contractNo"></el-input>
        </el-form-item>
        <el-form-item label="合同名称" prop="contractName">
          <el-input v-model="formData.contractName"></el-input>
        </el-form-item>
        <el-form-item label="合同类型" prop="contractType">
          <el-select multiple v-model="formData.contractType">
            <el-option label="客户" value="CUSTOMER"></el-option>
            <el-option label="外租仓库" value="WH"></el-option>
            <el-option label="装卸队" value="HANDING"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户" prop="customerCode">
          <PublicQuery
            title="客户"
            baseUrl="/chg_web/chgweb"
            cfgKey="chgWmsCustomerByOwner"
            :valueField.sync="formData.customerCode"
          ></PublicQuery>
        </el-form-item>
        <el-form-item label="合同文件号" prop="fileNo">
          <el-input v-model="formData.fileNo"></el-input>
        </el-form-item>
        <el-form-item label="审核人" prop="auditOp">
          <PublicQuery
            title="审核人"
            baseUrl="/chg_web/chgweb"
            cfgKey="chgWmsOperator"
            :valueField.sync="formData.auditOp"
          ></PublicQuery>
        </el-form-item>
        <el-form-item label="创建人" prop="creator">
          <PublicQuery
            title="创建人"
            baseUrl="/chg_web/chgweb"
            cfgKey="chgWmsOperator"
            :valueField.sync="formData.creator"
          ></PublicQuery>
        </el-form-item>
        <el-form-item label="修改人" prop="modifier">
          <PublicQuery
            title="修改人"
            baseUrl="/chg_web/chgweb"
            cfgKey="chgWmsOperator"
            :valueField.sync="formData.modifier"
          ></PublicQuery>
        </el-form-item>
        <el-form-item label="生效日期">
          <el-date-picker
            v-model="date1"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="getTime1"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期">
          <el-date-picker
            v-model="date2"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="getTime2"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="延期日期">
          <el-date-picker
            v-model="date3"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="getTime3"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="审核时间">
          <el-date-picker
            v-model="date4"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="getTime4"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="more-query-btn">
        <el-button v-auth="50600020103" type="primary" @click="submitForm">查询</el-button>
        <el-button v-auth="50600020104" @click="resetForm">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { time } from 'apec-fe-utils'
import { today, yesterday, week, month, twoMonths, threeMonths } from '@/config/shortcuts'
export default {
  data () {
    return {
      formData: {},
      pickerOptions2: {
        shortcuts: [today, yesterday, week, month, twoMonths, threeMonths]
      },
      date1: '',
      date2: '',
      date3: '',
      date4: '',
    }
  },
  props: {
    moreQueryVisible: Boolean
  },
  methods: {

    // 获得生效时间
    getTime1 (val) {
      this.formData.effectiveTimeFm = val[0]
      this.formData.effectiveTimeTo = val[1]
    },
    // 获得失效时间
    getTime2 (val) {
      this.formData.expirationTimeFm = val[0]
      this.formData.expirationTimeTo = val[1]
    },
    // 获得延期时间
    getTime3 (val) {
      this.formData.extensionTimeFm = val[0]
      this.formData.extensionTimeTo = val[1]
    },
    // 获得审核时间
    getTime4 (val) {
      this.formData.auditTimeFm = val[0]
      this.formData.auditTimeTo = val[1]
    },

    // 关闭弹窗
    close () {
      this.$emit('close')
    },

    // 提交表单
    submitForm () {
      this.$emit('toGetList', this.formData)
      this.$refs.queryForm.resetFields()
    },

    // 重置表单
    resetForm () {
      this.$refs.queryForm.resetFields()
    },

    // 格式化对象数据
    // format () {
    //   for (const key in this.formData) {
    //     if (this.formData.hasOwnProperty(key)) {
    //       const element = this.formData[key]
    //       if (Array.isArray(element)) {
    //         this.formData[key] = element.join(',')
    //       }
    //     }
    //   }
    //   return this.formData
    // }
  }
}
</script>
