<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-on-select @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>
      <el-button v-permission="'HY_add'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
      <el-button v-permission="'HY_change_product_category'" type="primary" class="filter-item" @click="btn_change_product_category">更改商品分类</el-button>
      <el-button v-permission="'HY_change_shipping_template'" type="primary" class="filter-item" @click="btn_change_shipping_template">更改运费模板</el-button>
      <el-button v-permission="'HY_label'" type="primary" class="filter-item" @click="btn_label">打标签</el-button>
      <el-button v-permission="'HY_unified_inventory'" type="primary" class="filter-item" @click="btn_unified_inventory">统一库存</el-button>
      <el-button v-permission="'HY_bulk_listing'" type="primary" class="filter-item" @click="btn_bulk_listing">批量上架</el-button>
      <el-button v-permission="'HY_bulk_removal'" type="primary" class="filter-item" @click="btn_bulk_removal">批量下架</el-button>
      <el-button type="primary" class="filter-item" @click="btn_import"><svg-icon icon-class="daoru" />导入</el-button>
      <el-button v-permission="'HY_export'" type="primary" class="filter-item" @click="btn_export">导出</el-button>
      <el-button v-permission="'HY_batch_delete'" type="primary" class="filter-item" @click="btn_batch_delete">批量删除</el-button>
    </div>
</template>

<script>
import { deleteCommodityList } from '@/api/commodityManagement/commodityList'
import { pickerOptions } from '@/utils'
import addOrEdit from './addOrEdit'
import changeProductCategory from './changeProductCategory'
import changeShippingTemplate from './changeShippingTemplate'
import editLabel from './editLabel'
import unifiedInventory from './unifiedInventory'
import bulkListing from './bulkListing'
import bulkRemoval from './bulkRemoval'
import importFile from './importFile'


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')
    },
    btn_add() {
      this.$layer.iframe({
        content: {
          content: addOrEdit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': '' }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['80%', '90%'],
        title: '添加商品'
      })
    },
    btn_change_product_category() {
      this.$layer.iframe({
        content: {
          content: changeProductCategory, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': this.selectedId }// props
        },
        area: ['80%', '90%'],
        title: '更改商品分类'
      })
    },
    btn_change_shipping_template() {
      this.$layer.iframe({
        content: {
          content: changeShippingTemplate, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': this.selectedId }// props
        },
        area: ['80%', '90%'],
        title: '更改运费模板'
      })
    },
    btn_label() {
      this.$layer.iframe({
        content: {
          content: editLabel,
          parent: this,
          data: { 'rowid': this.selectedId }
        },
        area: ['80%', '90%'],
        title: '打标签'
      })
    },
    btn_unified_inventory() {
      this.$layer.iframe({
        content: {
          content: unifiedInventory, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': this.selectedId }// props
        },
        area: ['80%', '90%'],
        title: '统一库存'
      })
    },
    btn_bulk_listing() {
      this.$layer.iframe({
        content: {
          content: bulkListing, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': this.selectedId }// props
        },
        area: ['80%', '90%'],
        title: '批量上架'
      })
    },
    btn_bulk_removal() {
      this.$layer.iframe({
        content: {
          content: bulkRemoval, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': this.selectedId }// props
        },
        area: ['80%', '90%'],
        title: '批量下架'
      })
    },
    btn_import() {
      this.$layer.iframe({
        content: {
          content: importFile, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': this.selectedId }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '380px'],
        shadeClose: false,
        title: '导入商品'
      })
    },
    btn_batch_delete() {
      this.$confirm('商品删除有风险，可能影响与之有关业务（如果误添加的可以删除，今日订单系统的可能会出现问题）', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.selectedId.length === 0) {
          this.$message({
            message: '请选择一条数据!',
            type: 'warning'
          })
          return
        }
        let deleteIds = this.selectedId.join(',')
        const data = {
          ids: ',' + deleteIds + ','
        }
        deleteCommodityList(data).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.$parent.getList() // 重新加载父级数据
            this.$message.success('删除成功!')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    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>
