<template>
  <el-row class="query">
    <el-form inline label-position="top" :model="query" ref="queryForm">
      <el-form-item class="btn">
        <el-button v-auth="50920090101" type="primary" @click="toGetData">查询</el-button>
        <el-button v-auth="50920090102" 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>
