<template>
<el-row class="query">
  <el-form
    inline
    label-position="top"
    :model="query"
    ref="queryForm"
  >
    <el-form-item class="btn">
      <el-button v-auth="50920080101" type="primary" @click="toGetData">查询</el-button>
      <el-button v-auth="50920080102" type="primary" @click="reset">重置</el-button>
    </el-form-item>
    <div>
      <el-form-item label="统计方式" prop="groupType">
      <el-radio-group v-model="query.groupType" @change="groupTypeChange">
        <el-radio label="yyyy">年</el-radio>
        <el-radio label="yyyy-mm">月</el-radio>
        <el-radio label="yyyy-mm-dd">日</el-radio>
      </el-radio-group>
    </el-form-item>
    </div>
    <div>
    <el-form-item label="年份从" prop="yearFrom">
      <el-select v-model="query.yearFrom">
        <el-option value="2016" label="前年"></el-option>
        <el-option value="2017" label="去年"></el-option>
        <el-option value="2018" label="今年"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="年份到" prop="yearTo">
      <el-select v-model="query.yearTo">
        <el-option value="2016" label="前年"></el-option>
        <el-option value="2017" label="去年"></el-option>
        <el-option value="2018" label="今年"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="月份从" prop="monthFrom">
      <el-select v-model="query.monthFrom" :disabled="query.groupType === 'yyyy'">
        <template v-for="i in 12">
          <el-option :key="i" :value="i < 10 ? '0' + i : i" :label="i + '月'"></el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="月份到" prop="monthTo">
      <el-select v-model="query.monthTo" :disabled="query.groupType === 'yyyy'">
        <template v-for="i in 12">
          <el-option :key="i" :value="i < 10 ? '0' + i : i" :label="i + '月'"></el-option>
        </template>
      </el-select>
    </el-form-item>
    </div>

    <el-form-item label="货主" prop="ownerCodes">
      <PublicQuery
        title="货主"
        cfgKey="repWmsCustomer"
        :baseUrl="baseUrl"
        :valueField.sync="query.ownerCodes"
        :textField.sync="query.ownerName"
      ></PublicQuery>
    </el-form-item>
    <el-form-item label="商品" prop="skuCodes">
      <PublicQuery
        title="商品"
        cfgKey="repWmsSku"
        :baseUrl="baseUrl"
        :valueField.sync="query.skuCodes"
        :textField.sync="query.skuName"
      ></PublicQuery>
    </el-form-item>
    <el-form-item label="库位" prop="locCodes">
      <PublicQuery
        title="库位"
        cfgKey="repWmsLoc"
        :baseUrl="baseUrl"
        :valueField.sync="query.locCodes"
        :textField.sync="query.locCode"
      ></PublicQuery>
    </el-form-item>
  </el-form>
</el-row>
</template>

<script>
export default {
  created () {
  },
  mounted () {
    this.toGetData()
  },

  data () {
    return {
      query: {
        groupType: 'yyyy', // 默认按年查
      }, // 查询条件
      baseUrl: '/rep_web/repweb'
    }
  },
  methods: {
    // 查询
    toGetData () {
      this.$emit('getData', this.query)
    },
    // 重置
    reset () {
      this.$refs.queryForm.resetFields()
      this.toGetData()
    },
    // 统计方式变化
    groupTypeChange (val) {
      if (val === 'yyyy') {
        this.$set(this.query, 'monthFrom', undefined)
        this.$set(this.query, 'monthTo', undefined)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
  .query {
    .btn {
      float: right;
      margin-top: 36px;
    }
  }
</style>
