<template>
<el-row class="query">
  <div class="query__operations">
    <!--查询条件-->
    <el-select v-if="!isInBlock" style="width: 180px" v-model="queryBy" value-key="type" @change="selectTerm">
      <el-option v-for="item in terms" :key="item.id" :value="item" :label="item.name"></el-option>
    </el-select>
    <!--<span v-else>冻结记录明细</span>-->

    <el-button v-auth="queryBy.authNos.transaction" class="query__item" type="primary" @click="viewTransaction">查看库存交易</el-button>

    <template v-if="queryBy.type === 'queryInvSku'">
      <el-button class="query__item" type="primary" @click="toStockOut">新增发运订单</el-button>
    </template>
    <template v-if="queryBy.type === 'queryInvLotLocId'">
      <el-button class="query__item" v-auth="queryBy.authNos.blockLog" type="primary" @click="blockLog">查询冻结库存</el-button>
      <el-dropdown v-auth="queryBy.authNos.print" class="query__item" @command="toPrint">
        <el-button type="primary">
          打印<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="50310060108">打印带信息码盘标签</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>

  </div>
  <div class="query__retrieve">
    <el-input
      class="query__item"
      v-for="item in queryBy.inputs"
      :key="item.shortcut"
      v-model="quickQuery[item.shortcut]"
      :placeholder="item.placeholder"
      @keyup.enter.native="quickQueryChange"
    ></el-input>

    <template v-if="queryBy.type === 'queryInvLotLocId' || queryBy.type === 'queryInvLotNum'">
      <el-button v-auth="queryBy.authNos.more" class="query__item" type="primary" @click="moreQuery">更多</el-button>
    </template>

    <el-button v-auth="queryBy.authNos.refresh" icon="el-icon-refresh" class="query__item" type="primary" @click="refresh" plain circle></el-button>
    <el-button v-auth="50100030101" icon="el-icon-download" v-if="false" type="primary" @click="handleExcel" plain circle></el-button>
    <MoreQuery
      :type="queryBy.type"
      :query="queryParams"
      :showMore="showMore"
      @close="showMore = false"
      @toGetList="toGetList"
    ></MoreQuery>
  </div>
</el-row>
</template>

<script>
import MoreQuery from './MoreQuery'
import terms from '../config/terms'

export default {
  components: { MoreQuery },
  props: ['selection', 'isInBlock', 'queryParams', 'trigger'],
  watch: {
    isInBlock (val) {
      this.queryBy = val ? terms[5] : terms[0]
    },
    trigger (val) {
      this.selectTerm(this.queryBy)
    }
  },
  created () {
    this.terms = terms
  },
  mounted () {
  },

  data () {
    return {
      queryBy: terms[0],
      // 主页面给的查询参数, 一般是路由提供的, 非路由提供时主页面默认为 {}
      query: { ...this.queryParams }, // 查询条件
      showMore: false, // 显示更多查询
      quickQuery: {}, // 快捷查询, 该变量存在的意义是为所有快捷查询值加上%%
      moreData: {}
    }
  },
  methods: {
    // 选择条件
    selectTerm (queryBy) {
      !this.isInBlock && (this.query = {}) // 重置更多查询子组件的查询条件
      this.$emit('selectTerm', queryBy, this.isInBlock) // isInBlock 告知父组件是否要保留 query 参数
      this.$emit('toGetList')
      this.quickQuery = {}
    },
    // 检查是否有勾选
    checkSelections () {
      if (!this.selection.length) {
        this.$message.error('请选择记录')
        return false
      } else {
        return true
      }
    },
    // 刷新
    refresh () {
      this.toGetList()
    },
    // 打开新 tab 菜单
    openNewTab (routeName) {
      const rootMenu = { ...this.$store.state.framework.rootMenu }
      Object.entries(rootMenu).find(item => {
        const name = item[1].immutableName || item[1].route.name
        if (name === routeName) {
          this.$store.commit('framework/addTabControlMenu', {
            index: item[1].index,
            route: item[1].route,
            name: item[1].$el.innerText,
            immutableName: item[1].immutableName, // 原始路由名, 设置即不变
          })
          this.$nextTick(() => {
            this.$store.commit('framework/changeActiveMenu', item[1].index)
          })
        }
        return name === routeName
      })
    },
    // 查看库存交易
    viewTransaction () {
      if (this.checkSelections()) {
        this.openNewTab('transaction')
        this.$router.push({
          name: 'transaction',
          params: {
            // 查询字段
            queryParams: this.connectParams(),
            type: this.queryBy.name + '查询' // 按哪个条件查询
          },
        })
      }
    },
    // 拼接查询字段, type为
    connectParams (type = 'tfParams') {
      const map = this.queryBy[type]
      const result = {
        isInvJump: true,
      }
      for (const mapItem of Object.entries(map)) {
        // 取得查询接口所需的值拼接为字符串
        result[mapItem[0]] = this.selection.map(item => item[mapItem[1]]).join(',')
      }
      return result
    },
    // 查询冻结库存
    blockLog () {
      if (this.checkSelections()) {
        this.openNewTab('block')
        this.$router.push({
          name: 'block',
          params: {
            // 查询字段
            queryParams: this.connectParams('blockParams'),
          },
        })
      }
    },
    // 打印
    toPrint (command, vmNode) {
      if (this.checkSelections()) {
        const param = {
          title: vmNode.$el.innerHTML,
          qs: `_functionCode=${command}&planId=${this.selection.map(item => item.traceId).join(';')}`
        }
        this.$print(param)
      }
    },
    // 快捷查询变化
    quickQueryChange (val) {
      Object.entries(this.quickQuery).map(item => {
        this.query[item[0]] = `%${item[1]}%`
      })
      this.toGetList(this.query)
    },
    // 告知父组件查询
    toGetList (query) {
      this.moreData = query
      this.$emit('mergeQuery', query)
      this.$emit('toGetList')
    },
    // 点击更多查询
    moreQuery () {
      this.showMore = true
    },
    // 新增发运订单
    toStockOut () {
      if (this.selection.length > 1) {
        this.$message.error('只能选一条记录')
        return false
      }
      const queryParams = this.selection[0]
      this.openNewTab('sendOrder')
      this.$router.push({
        name: 'sendOrderAdd',
        params: {
          queryParams
        },
      })
    },
    handleExcel () {
      const url = this.$API.inventoryQuery.queryByTerms[this.queryBy.type]
      const options = this.moreData
      this.$exportExcel(url, options)
    },
  },
}
</script>

<style lang="scss" scoped>
  .query {
    &__operations {
      float: left;
    }
    &__retrieve {
      float: right;
      .el-input {
        max-width: 180px;
      }
    }
    &__item {
      margin-left: 10px;
    }
  }
</style>
