<template>
    <div class="filter-container">
      <el-input v-model="searchDatas.productId" placeholder="商品id" class="filter-item"></el-input>
      <el-cascader v-model="parentids" :options="commodityTypeLists" :props="typeDropProps" clearable filterable @change="commodityTypeChange" ref="myCascader" placeholder="请选择商品分类"></el-cascader>
      <el-input v-model="searchDatas.productName" placeholder="商品名称" class="filter-item"></el-input>
      <el-input v-model="searchDatas.pinyinShort" placeholder="拼音简写" class="filter-item"></el-input>
      <el-input v-model="searchDatas.productNumber" placeholder="商品款号" class="filter-item"></el-input>
      <el-input v-model="searchDatas.productShortName" placeholder="商品副标题" class="filter-item"></el-input>
      <el-input v-model="searchDatas.tag" placeholder="商品标签" class="filter-item"></el-input>
      <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
    </div>
</template>

<script>
import { pickerOptions } from '@/utils'

export default {
  name: 'SearchFilter',
  props: {
    searchDatas: {
      required: true,
      type: Object,
      default() {
        return {
          productId: '', //商品id
          classId: '', //商品类型id
          className: '', //商品类型
          productName: '', //商品名称
          pinyinShort: '', //拼音缩写
          productNumber: '', //商品编码
          productShortName: '', //商品副标题
          tag: '', //商品标签
        }
      }
    },
    selectedId: Array,
    commodityTypeLists: Array,
  },
  data() {
    return {
      parentids:[],
      // 自定义菜单下拉数据的key值
      typeDropProps: {
        value: 'id',
        label: 'text'
      },
      props: {
        // 自定义省市下拉数据的key值
        value: 'code',
        label: 'name',
        children: 'entityJson'
      },
      pickerOptions // 日期数据
    }
  },
  created() {
  },
  methods: {
    btn_search() {
      this.$emit('search', this.searchDatas)
    },
    btn_export() {
      this.$emit('export', this.searchDatas)
    },
    btn_deletes() {
      this.$emit('delorders')
    },
    commodityTypeChange(item) {
      this.searchDatas.classId = this.parentids[this.parentids.length - 1]
      this.searchDatas.className = this.$refs['myCascader'].currentLabels[this.parentids.length - 1]
    },
  }
}
</script>

<style rel="stylesheet/scss" scoped>
.filter-container .filter-item.el-select{
  margin-right: 10px;
}
.filter-container .filter-item.el-date-editor{
  margin-right: 10px;
}
</style>
