<template>
    <div class="app-container">
        <el-form :model="listQuery" size="small" :inline="true" label-position="top">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="商品名称">
                        <el-input clearable placeholder="商品名称" v-model="listQuery.productName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="商品简称">
                        <el-input clearable placeholder="商品简称" v-model="listQuery.productShortForm"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="商品类别">
                        <el-cascader clearable placeholder="商品类别" style="width: 100%" v-model="listQuery.categoryId"
                            :options="categoryOptions" :props="{
                                label: 'categoryName',
                                value: 'id',
                                emitPath: false,
                                checkStrictly: true
                            }" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="品牌">
                        <el-select v-model="listQuery.brandId" filterable placeholder="品牌" style="width: 100%">
                            <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="状态">
                        <el-select v-model="listQuery.status" clearable placeholder="状态" style="width: 100%">
                            <el-option :key="item.type" v-for="item in goodsStatusList" :label="item.name"
                                :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="搜索">
                        <el-button style="width: 100%;" type="primary" icon="el-icon-search"
                            @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="重置">
                        <el-button style="width: 100%;" icon="el-icon-refresh" type="primary"
                            @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" class="editButton" size="small" icon="el-icon-plus"
                    @click="handleAdd">添加</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" icon="el-icon-upload2" size="small" @click="handleImport">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="small" @click="handleDownLoad">导出</el-button>
            </el-col>
        </el-row>
        <div class="border-card">
             <!-- 查询结果 -->
        <el-table height="450" size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
            highlight-current-row>
            <el-table-column type="index" label="序号" header-align="center" align="center">
            </el-table-column>
            <el-table-column align="center" min-width="120px" label="商品编号" prop="productCode">
            </el-table-column>
            <el-table-column align="center" min-width="200px" label="商品名称" prop="productName">
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="商品简称" prop="productShortForm">
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="商品类别" prop="categoryName">
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="品牌" prop="brandName">
            </el-table-column>
            <el-table-column align="center" min-width="100px" label="主图" prop="imgUrl">
                <template slot-scope="scope">
                    <img class="good-img" :src="scope.row.imgUrl ? scope.row.imgUrl : require('@/assets/avatar.gif')">
                </template>
            </el-table-column>
            <el-table-column align="center" min-width="80px" label="状态">
                <template slot-scope="props">
                    <span v-if="props.row.status == 0" style="color: #67C23A;font-weight: bold;">启用</span>
                    <span v-if="props.row.status == 1" style="color: #E6A23C;font-weight: bold;">停用</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="text" icon="el-icon-delete" class="deleteText" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        </div>
       
        <!-- 添加或修改对话框 -->
        <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible"
            width="70%">
            <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left"
                label-width="100px" style='margin: 0 50px;'>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                        <el-form-item label="商品名称" prop="productName">
                            <el-input v-model="dataForm.productName" placeholder="请输入商品名称"></el-input>
                        </el-form-item>
                        <el-form-item label="商品编号" prop="productCode">
                            <el-input placeholder="请输入商品编号" v-model="dataForm.productCode"></el-input>
                        </el-form-item>
                        <el-form-item label="商品简称" prop="productShortForm">
                            <el-input v-model="dataForm.productShortForm" placeholder="请输入商品简称"></el-input>
                        </el-form-item>


                        <el-form-item label="商品类别" prop="categoryId">
                            <el-cascader placeholder="请选择商品类别" style="width: 100%;" v-model="dataForm.categoryId"
                                :options="categoryOptions" :props="{
                                    label: 'categoryName',
                                    value: 'id',
                                    emitPath: false,
                                    checkStrictly: true
                                }" />
                            <!-- <treeselect default-expand-all v-model="dataForm.categoryId" :options="categoryOptions"
                                :normalizer="normalizer" placeholder="请选择商品类别" /> -->
                        </el-form-item>

                        <el-form-item label="品牌" prop="brandId">
                            <el-select style="width: 100%" v-model="dataForm.brandId" filterable placeholder="请选择品牌">
                                <el-option v-for="item in brandOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="零售价(元)" prop="price">
                            <el-input v-model="dataForm.price" placeholder="请输入零售价"></el-input>
                        </el-form-item>
                        <el-form-item label="销售价(元)" prop="salePrice">
                            <el-input v-model="dataForm.salePrice" placeholder="请输入销售价"></el-input>
                        </el-form-item>
                        <el-form-item label="成本价(元)" prop="costPrice">
                            <el-input v-model="dataForm.costPrice" placeholder="请输入成本价"></el-input>
                        </el-form-item>
                        <el-form-item label="重量(g)" prop="weight">
                            <!-- <el-input v-model="dataForm.weight" placeholder="请输入重量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input> -->
                            <el-input-number v-model="dataForm.weight" :min="1" label="请输入重量"></el-input-number>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="dataForm.status">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item style="width: 800px" label="商品图片" prop="imgUrl">
                            <el-upload :limit="1" :action="fileImgUrl" list-type="picture-card"
                                :file-list="dataForm.images" :on-success="handleImgSucess" :on-exceed="handleExceed"
                                :before-upload="beforeUploadImg" :on-remove="handleRemoveImg">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>

                    </el-tab-pane>
                    <el-tab-pane label="茶叶属性" name="second">
                        <!-- <el-form-item label="茶叶品牌">
                            <el-select v-model="dataForm.teaTypeId" filterable placeholder="请选择" style="width: 100%">
                                <el-option :key="item.dictLabel" v-for="item in tea_type" :label="item.dictLabel"
                                    :value="item.dictLabel">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="茶叶级别">
                            <el-select v-model="dataForm.teaLevel" filterable placeholder="请选择茶叶级别" style="width: 100%">
                                <el-option :key="item.dictLabel" v-for="item in tea_level" :label="item.dictLabel"
                                    :value="item.dictLabel">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="茶叶系列">
                            <el-select v-model="dataForm.teaSeries" filterable placeholder="请选择茶叶系列"
                                style="width: 100%">
                                <el-option :key="item.dictLabel" v-for="item in tea_series" :label="item.dictLabel"
                                    :value="item.dictLabel">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="包装形式">
                            <el-select v-model="dataForm.teaPackageFormat" multiple filterable placeholder="请选择包装形式"
                                style="width: 100%">
                                <el-option :key="item.dictLabel" v-for="item in tea_package_format"
                                    :label="item.dictLabel" :value="item.dictLabel">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产地">
                            <el-input v-model="dataForm.teaOrigin" placeholder="请输入产地"></el-input>
                        </el-form-item>
                        <el-form-item label="采摘季节">
                            <el-radio-group v-model="dataForm.teaGetSeason">
                                <el-radio v-for="item in tea_get_season" :key="item.dictLabel"
                                    :label="item.dictLabel"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="保质期">
                            <el-input placeholder="数值" v-model="dataForm.teaGuaranteeNumber"
                                onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" class="input-with-select">
                                <el-select style="width: 100px;" v-model="dataForm.teaGuaranteeUnit" slot="prepend"
                                    placeholder="请选择">
                                    <el-option label="年" value="年"></el-option>
                                    <el-option label="月" value="月"></el-option>
                                    <el-option label="日" value="日"></el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="生产日期">
                            <el-date-picker style="width: 100%;" v-model="dataForm.productDate" type="date"
                                placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="年份">
                            <el-input v-model="dataForm.teaAgingYear" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                placeholder="请输入年份"></el-input>
                        </el-form-item>
                        <el-form-item label="溯源信息" prop="teaFiles">
                            <el-upload :limit="1" :action="fileImgUrl" :file-list="dataForm.files"
                                :on-success="handleFileSuccess" :before-upload="beforeUploadFile"
                                :on-remove="handleRemoveFile">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                            <span style="color: #F56C6C;">备注：如有机认证、质检报告等</span>
                        </el-form-item>
                        <el-form-item label="存储要求">
                            <el-checkbox-group v-model="dataForm.teaStorageRequire">
                                <el-checkbox v-for="item in tea_storage_require" :key="item.dictLabel"
                                    :label="item.dictLabel" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
                <el-button v-else type="primary" @click="updateData">确定</el-button>
            </div>
        </el-dialog>
        <!-- 商品导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
                :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
                :on-success="handleProductTemplate" :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                        @click="importTemplate">下载模板</el-link>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { createItem, updateItem, goodsList, removeItem } from '@/api/goodsManage'
import { listDept } from '@/api/goodsTypeList'
import { listBrand } from '@/api/brand'
import { getToken } from '@/utils/auth' // getToken from cookie
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { dataTypeList } from '@/api/public'
import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'goodsList',
  components: { Treeselect },
  directives: { waves },
  data() {
    return {
      // 商品导入参数
      upload: {
        // 是否显示弹出层（商品导入）
        open: false,
        // 弹出层标题（商品导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.BASE_API + '/product/import'
      },
      tea_type: [],
      tea_level: [],
      tea_series: [],
      tea_package_format: [],
      tea_get_season: [],
      tea_storage_require: [],
      // 树选项
      categoryOptions: [],
      activeName: 'first',
      brandOptions: [],
      goodsStatusList: [
        {
          type: 0,
          name: '启用'
        },
        {
          type: 1,
          name: '停用'
        }
      ],
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        productName: '',
        productShortForm: '',
        categoryId: undefined,
        brandId: '',
        status: ''
      },
      listBrandQuery: {
        limit: 1000,
        sort: '+id'
      },
      dataForm: {
        productName: undefined,
        productCode: undefined,
        productShortForm: undefined,
        categoryId: undefined,
        brandId: undefined,
        price: undefined,
        salePrice: undefined,
        costPrice: undefined,
        weight: 1,
        status: 0,
        imgUrl: undefined,
        teaTypeId: undefined,
        teaLevel: undefined,
        teaSeries: undefined,
        teaPackageFormat: [],
        teaOrigin: undefined,
        teaGetSeason: undefined,
        teaGuaranteeNumber: undefined,
        teaGuaranteeUnit: '年',
        productDate: undefined,
        teaAgingYear: undefined,
        teaFiles: undefined,
        files: [],
        teaStorageRequire: []
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑商品',
        create: '添加商品'
      },
      rules: {
        productName: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
        productCode: [
          { required: true, message: '请填写商品编号', trigger: 'blur' }
          // { min: 14, max: 14, message: "商品编号必须为14位", trigger: "blur" },
          // { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{14,}$/, message: "商品编号必须为14位字母加数字", trigger: "blur" }
        ],
        productShortForm: [{ required: true, message: '请填写商品简称', trigger: 'blur' }],
        categoryId: [{ required: true, message: '请选择商品类别', trigger: 'blur' }],
        price: [
          { required: true, message: '请填写零售价', trigger: 'blur' },
          {
            pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,2})?$/,
            message: '请输入合法的金额数字，最多两位小数',
            trigger: 'blur'
          }
        ],
        salePrice: [
          { required: true, message: '请填写销售价', trigger: 'blur' },
          {
            pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,2})?$/,
            message: '请输入合法的金额数字，最多两位小数',
            trigger: 'blur'
          }
        ],
        costPrice: [
          { required: true, message: '请填写成本价', trigger: 'blur' },
          {
            pattern: /^(([1-9]{1}\d{0,9})|(0{1}))(\.\d{1,2})?$/,
            message: '请输入合法的金额数字，最多两位小数',
            trigger: 'blur'
          }
        ],
        weight: [
          { required: true, message: '请填写重量', trigger: 'blur' }

        ],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      dialogListVisible: false,
      fileImgUrl: this.upLoadUrl
    }
  },
  created() {
    this.getListCategory()
    this.getBrandList()
    this.getDictType()
    this.getList()
  },
  methods: {
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '商品导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      window.location.href = process.env.BASE_API + '/product/down/productTemplate'
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleProductTemplate(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    handleDownLoad() {
      window.location.href = process.env.BASE_API + '/product/export?productName=' + this.listQuery.productName + '&productShortForm=' + this.listQuery.productShortForm
    },
    getListCategory() {
      listDept().then(response => {
        this.categoryOptions = this.handleTree(response.data.data, 'id')
      })
    },
    /** 转换证书数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.categoryName,
        children: node.children
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getDictType() {
      // 茶叶品牌tea_type
      dataTypeList({ dictType: 'tea_type' }).then(response => {
        this.tea_type = response.data.data
      })
      // 茶叶级别tea_level
      dataTypeList({ dictType: 'tea_level' }).then(response => {
        this.tea_level = response.data.data
      })
      // 茶叶系列tea_series
      dataTypeList({ dictType: 'tea_series' }).then(response => {
        this.tea_series = response.data.data
      })
      // 包装形式tea_package_format
      dataTypeList({ dictType: 'tea_package_format' }).then(response => {
        this.tea_package_format = response.data.data
      })
      // 采摘季节tea_get_season
      dataTypeList({ dictType: 'tea_get_season' }).then(response => {
        this.tea_get_season = response.data.data
      })
      // 存储要求tea_storage_require
      dataTypeList({ dictType: 'tea_storage_require' }).then(response => {
        this.tea_storage_require = response.data.data
      })
    },
    handleRemoveFile(file, fileList) {
      console.log(file, fileList)
      const teaFiles = []
      for (const i in fileList) {
        const id = fileList[i].response.data.id
        teaFiles.push(id)
      }
      this.dataForm.teaFiles = teaFiles.join(',')
    },
    beforeUploadFile(file) {
      console.log(file)
      const size = file.size / 1024 / 1024
      console.log(size)
      if (size > 10) {
        this.$message.error('文件大小不能超过10MB！')
        return false
      }
    },
    handleFileSuccess(res, file, fileList) {
      console.log(file, fileList)
      console.log('------', '==========')
      console.log('res = ', res)

      const teaFiles = []
      for (const i in fileList) {
        const response = fileList[i].response
        if (response.errno && response.errno != '0') {
          this.$message.error('该文件上传失败,已被移除,请重新上传!')
          // 上传失败移除该 file 对象
          fileList.splice(i, 1)
        } else {
          const id = fileList[i].response.data.id
          teaFiles.push(id)
        }
      }
      this.dataForm.teaFiles = teaFiles.join(',')
    },
    handleRemoveImg(file, fileList) {
      console.log(file, fileList)
      const images = []
      for (const i in fileList) {
        const response = fileList[i].response
        const url = response.data.url
        images.push(url)
        this.dataForm.imgUrl = images.join(',')
      }
    },
    beforeUploadImg(file) {
      const isJPGs = file.type === 'image/jpeg'
      console.log(isJPGs)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件！，共选择了 ${files.length + fileList.length
        } 个文件`
      )
    },
    handleImgSucess(res, file, fileList) {
      this.dataForm.imgUrl = '' // 清空画廊图片数组

      const images = []
      for (const i in fileList) {
        const response = fileList[i].response
        if (response.errno && response.errno != '0') {
          this.$message.error('该图片上传失败,已被移除,请重新上传!')
          // 上传失败移除该 file 对象
          fileList.splice(i, 1)
        } else {
          const url = response.data.url
          images.push(url)
        }
      }

      this.dataForm.imgUrl = images.join(',')
    },
    resetForm() {
      this.dataForm = {
        productName: undefined,
        productCode: undefined,
        productShortForm: undefined,
        categoryId: undefined,
        brandId: undefined,
        price: undefined,
        salePrice: undefined,
        costPrice: undefined,
        weight: 1,
        status: 0,
        imgUrl: undefined,
        images: [],
        teaTypeId: undefined,
        teaLevel: undefined,
        teaSeries: undefined,
        teaPackageFormat: [],
        teaOrigin: undefined,
        teaGetSeason: undefined,
        teaGuaranteeNumber: undefined,
        teaGuaranteeUnit: '年',
        productDate: undefined,
        teaAgingYear: undefined,
        teaFiles: undefined,
        files: [],
        teaStorageRequire: []
      }
    },
    handleAdd() {
      this.activeName = 'first'
      this.resetForm()

      this.dialogFormVisible = true
      this.dialogStatus = 'create'

      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          console.log(this.dataForm)
          createItem(this.dataForm)
            .then((response) => {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.reload()
            })
            .catch(() => { })
        }
      })
    },
    handleUpdate(row) {
      this.activeName = 'first'
      this.dataForm = Object.assign({}, row)
      if (this.dataForm.imgUrl) {
        const images = this.dataForm.imgUrl.split(',')
        this.dataForm.images = []
        for (const i in images) {
          const url = images[i]
          const name = 'image_' + i

          this.dataForm.images.push({
            name: name,
            url: url,
            response: { error: '0', data: { url: url }}
          })
        }
      }
      if (this.dataForm.teaFiles) {
        const files = this.dataForm.files
        this.dataForm.files = []
        for (const i in files) {
          const url = files[i].url
          const name = files[i].oldName
          const id = files[i].id

          this.dataForm.files.push({
            name: name,
            url: url,
            response: { error: '0', data: { url: url, id: id }}
          })
        }
      }
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateItem(this.dataForm).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    handleDelete(id) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeItem({ id: id }).then(response => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })
      }).catch(() => {

      })
    },
    getBrandList() {
      // 获取品牌信息
      listBrand(this.listBrandQuery).then(response => {
        this.brandOptions = response.data.data.items.map((item) => {
          return { value: item.id, label: item.name }
        })
      }).catch(() => {
        this.brandOptions = []
      })
    },
    getList() {
      this.listLoading = true
      goodsList(this.listQuery).then(response => {
        this.list = response.data.data.items
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => { })
    },

    handleQuery() {
      this.listQuery.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.listQuery = {
        page: 1,
        limit: 10,
        productName: '',
        productShortForm: '',
        categoryId: '',
        brandId: '',
        status: ''
      }
      this.handleQuery()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>
<style>
.good-img {
    width: 50px;
    height: 50px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>