<template>
<el-dialog
  class="more-query"
  title="高级查询"
  width="80%"
  :visible="showMore"
  @close="close"
>
  <el-form
    inline
    label-position="top"
    :model="query"
    ref="queryForm"
  >
    <!--个性查询-->
    <div>
      <el-form-item label="交易类型">
        <el-select multiple :value="tranType" @change="tranTypeChange">
          <el-option
            v-for="item in $keys.inventoryQuery.transaction.tranType"
            :key="item.id"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单据号" prop="orderNo">
        <el-input v-model="query.orderNo"></el-input>
      </el-form-item>
      <el-form-item label="交易时间" class="date-item">
        <el-date-picker
          v-model="dateTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '23:59:59']"
          :clearable="false"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="dateTimeChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="操作人" prop="tranOp">
        <PublicQuery
          title="操作人"
          :baseUrl="baseUrl"
          cfgKey="invWmsOperator"
          :valueField.sync="query.tranOp"
          :textField.sync="query.tranOpName"
        ></PublicQuery>
      </el-form-item>
    </div>
    <!--遍历通用信息查询组-->
    <template v-for="group in queryGroup">
      <div :key="group.prefix">
        <template v-for="item in publicQueries">
          <el-form-item :key="item.valueField" :label="group.prefixText + item.label" :prop="group.prefix + item.valueField + group.suffix">
            <PublicQuery
              :title="group.prefixText + item.label"
              :baseUrl="baseUrl"
              :cfgKey="item.cfgKey"
              :valueField.sync="query[group.prefix + item.valueField + group.suffix]"
              :textField.sync="query[group.prefix + item.textField + group.suffix]"
            ></PublicQuery>
          </el-form-item>
        </template>
        <template v-for="item in inputs">
          <el-form-item :key="item.prop" :label="group.prefixText + item.label" :prop="group.prefix + item.valueField + group.suffix">
            <el-input v-model="query[group.prefix + item.prop + group.suffix]"></el-input>
          </el-form-item>
        </template>
      </div>
    </template>
  </el-form>
  <div class="more-query__btn">
    <el-button v-auth="50310070103" type="primary" @click="submitForm">查询</el-button>
    <el-button v-auth="50310070104" @click="resetForm('queryForm')">重置</el-button>
  </div>
</el-dialog>
</template>

<script>
import { time } from 'apec-fe-utils'
import * as shortcuts from '@/config/shortcuts'
export default {
  props: ['showMore', 'queryProp'],
  created () {
  },
  mounted () {
    this.setDefaultTime()
  },
  watch: {
    queryProp: {
      immediate: true,
      handler (val) {
        this.query.fmToOwnerNameArr = this.query.ownerCode
        this.query.fmToSkuNameArr = this.query.skuCode
      }
    }
  },

  data () {
    return {
      query: { ...this.queryProp },
      tranType: [], // 交易类型
      dateTime: '', // 时间
      pickerOptions: {
        shortcuts: { ...shortcuts } // element的shortcuts同时支持数组和对象格式
      },
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      selectors: [
        { label: '状态', prop: 'status', result: [] },
      ],
      // 查询组设置, 目前是三块
      queryGroup: [
        { prefix: 'fmTo', prefixText: '', suffix: 'Arr' },
        { prefix: 'fm', prefixText: '源', suffix: '' },
        { prefix: 'to', prefixText: '目标', suffix: '' },
      ],
      // 通用查询配置, 每一块的内容都类似, 3 publicQueries + 2 inputs, 注意代码拼接前后缀
      publicQueries: [
        { label: '货主', valueField: 'Owner', textField: 'OwnerName', cfgKey: 'invWmsCustomer' },
        { label: '商品', valueField: 'Sku', textField: 'SkuName', cfgKey: 'invWmsSku' },
        { label: '库位', valueField: 'Loc', textField: 'LocName', cfgKey: 'invWmsLoc' },
      ],
      inputs: [
        { label: '批次号', prop: 'Lot' },
        { label: '跟踪号', prop: 'Id' },
      ],
    }
  },
  methods: {
    setDefaultTime () {
      // 设置默认时间
      const startTime = new Date().getTime() - 6 * 24 * 60 * 60 * 1000
      this.dateTime = [ time.formatDate(new Date(startTime)) + ' 00:00:00', time.formatDate(new Date()) + ' 23:59:59' ]
      this.query.tranTimeFrom = this.dateTime[0]
      this.query.tranTimeTo = this.dateTime[1]
    },
    // 关闭弹窗
    close () {
      this.$emit('close')
    },
    // 处理表单数据
    handleQuery () {
      this.query.ownerCode = this.query.fmToOwnerNameArr
      this.query.skuCode = this.query.fmToSkuNameArr
      delete this.query.fmToOwnerNameArr
      delete this.query.fmToSkuNameArr
      delete this.query.fmToLocNameArr
    },
    // 提交表单
    submitForm () {
      this.handleQuery()
      this.$emit('toGetList', this.query)
      this.close()
    },
    // 重置表单
    resetForm (formName) {
      for (const item of this.selectors) {
        // 因选择框是另外操作的逻辑, 单独重置选择框
        this.query[item.prop] = undefined
        item.result = []
      }
      this.tranType = []
      this.query.tranType = ''
      this.setDefaultTime()
      this.$refs[formName].resetFields()
    },
    // 多选变化
    selectChange (selector, val) {
      const copy = [...val]
      this.$set(selector, 'result', val) // 深层修改页面渲染值对象
      Object.assign(this.query, { [selector.prop]: copy.join(',') }) // 以接口规定的传值格式合并query
    },
    // 时间变化
    dateTimeChange (val) {
      this.query.tranTimeFrom = val ? val[0] : ''
      this.query.tranTimeTo = val ? val[1] : ''
    },
    tranTypeChange (tranType) {
      this.tranType = tranType
      this.query.tranType = tranType.slice().join(',')
    }
  },
}
</script>

<style lang="scss" scoped>
  .el-form--inline .el-form-item {
    width: 18%;
    &.date-item {
      width: 37%;
      .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
        width: 100%;
      }
    }
  }
</style>
