<template>
  <div id="product_info" v-loading="loading" element-loading-text="拼命加载中......请稍等" style="display: flex">
    <div style="width: 300px">
      <div style="height: 50px; display: flex; justify-content: space-between; align-items: center">
        <span>商品分组列表</span>
        <el-button style="margin-right: 5px" v-on:click="createGroupClass" type="primary">新建分组</el-button>
      </div>
      <div style="display: flex">
        <el-input
            clearable
            style="margin-right: 5px"
            placeholder="请输入要查询的分类名称"
            prefix-icon="el-icon-search"
            v-model="className"
            v-on:clear="groupClassSearch">
        </el-input>
        <el-button v-on:click="groupClassSearch" style="margin-right: 5px" type="primary">查询</el-button>
      </div>
      <div>
        <el-tree :data="groupClassList" :props="defaultProps" node-key="key" default-expand-all
                 :default-checked-keys="[0]"
                 @node-click="getSelectGroupClass" :highlight-current="true" style="width: 270px">
          <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="classNameSpan">{{ node.label }}</span>
          <span style="margin-left: 10px" v-if="data.key !== 0">
            <el-button type="text" size="mini" @click="() => editGroupList(data)">编辑</el-button>
          <el-button type="text" size="mini" @click="() => deleteGroupClass(node, data)">删除</el-button>
          </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div style="display: flex; flex: 1; flex-direction: column; margin-left: 10px">
      <div style="margin-bottom: 10px">
        <span style="font-weight: 500; color: #0b0e16">商品信息分类</span>
      </div>
      <div style="display: flex; flex-direction: row; margin-bottom: 10px; width: 60%; justify-content: space-between">
        <div style="display: flex">
          <el-input
              style="margin-right: 5px"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="search.productName" clearable
              v-on:clear="handleSearch">
          </el-input>
          <el-button style="margin-right: 5px" type="primary" v-on:click="handleSearch">查询</el-button>
        </div>
        <div style="margin-right: 0px">
          <el-button style="margin-right: 5px" type="primary" v-on:click="handleShowProductAddDialog">新增</el-button>
          <el-button style="margin-right: 5px" type="primary" v-on:click="handleSearchResultDeleteChecked">删除
          </el-button>
          <el-button style="margin-right: 5px" type="primary" v-on:click="handleShowBatchSetTaxationCateCodeDialog">
            批量赋码
          </el-button>
          <el-button style="margin-right: 5px" type="primary" v-on:click="moveProductClassShow">移动到</el-button>
        </div>
      </div>
      <div>
        <el-table
            :height="tableHeight"
            ref="searchResultMultipleTable"
            :data="search.resultList"
            @selection-change="handleSearchResultCheckChange"
            border
            stripe
            style="width: 60%"
        >
          <el-table-column
              type="selection"
              align="center"
              width="40"
          ></el-table-column>
          <el-table-column
              type="index"
              :index="pageIndex"
              align="center"
              label="序号"
              width="45"
          ></el-table-column>
          <el-table-column
              prop="productName"
              label="产品名称"
              width="180"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="shortCode"
              label="简码"
              width="120"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="taxRate"
              label="税率"
              width="50"
              :formatter="fmtTaxRate"
          ></el-table-column>
          <el-table-column
              prop="specsModel"
              label="规格型号"
              width="100"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="100"
              show-overflow-tooltip
              :formatter="fmtPrice"
          ></el-table-column>
          <el-table-column prop="unit" label="计量单位"></el-table-column>
          <el-table-column
              prop="taxPriceFlag"
              label="含税价标志"
              width="90"
              :formatter="fmtTaxPriceFlag"
          ></el-table-column>
          <el-table-column
              prop="taxationCateCode"
              label="税收分类编码"
              width="160"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="taxationCateName"
              label="税收分类名称"
              width="120"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="taxationCateAbbr"
              label="税收分类简称"
              width="120"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="preferentialFlag"
              label="使用优惠政策"
              width="95"
              :formatter="fmtPreferentialFlag"
          ></el-table-column>
          <el-table-column
              prop="preferentialType"
              label="优惠政策类型"
              width="95"
              show-overflow-tooltip
          ></el-table-column>
          <el-table-column
              prop="zeroRateFlag"
              label="零税率标识"
              width="95"
              :formatter="fmtZeroRateFlag"
          ></el-table-column>
          <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="90"
          >
            <template slot-scope="scope">
              <el-button
                  @click="handleShowProductModifyDialog(scope.row)"
                  type="primary"
                  size="small"
              >编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="height: 50px; width: 60%; display: flex; justify-content: flex-end; align-items: center">
        <el-pagination
            @size-change="handleSearchResultSizeChange"
            @current-change="handleSearchResultCurrentChange"
            :current-page="search.resultPagination.currentPage"
            :page-sizes="search.resultPagination.pageSizes"
            :page-size="search.resultPagination.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="search.resultPagination.total"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
        title="新增商品"
        :visible.sync="productAddData.dialogVisible"
        center
        @close="handleCloseDialog('productAddForm')"
    >
      <product-form
          ref="productAddForm"
          :inputProductInfo="productAddData.inputProductInfo"
      ></product-form>
      <span slot="footer">
                <el-button
                    type="primary"
                    @click="handleProductModifyOrAddSubmit('productAddForm')"
                >立即添加</el-button
                >
                <el-button @click="productAddData.dialogVisible = false"
                >取 消</el-button
                >
            </span>
    </el-dialog>
    <el-dialog
        title="编辑商品"
        :visible.sync="productModifyData.dialogVisible"
        center
        @close="handleCloseDialog('productModifyForm')"
    >
      <product-form
          ref="productModifyForm"
          :inputProductInfo="productModifyData.inputProductInfo"
      ></product-form>
      <span slot="footer">
                <el-button
                    type="primary"
                    @click="handleProductModifyOrAddSubmit('productModifyForm')"
                >立即修改</el-button
                >
                <el-button @click="productModifyData.dialogVisible = false"
                >取 消</el-button
                >
            </span>
    </el-dialog>
    <el-dialog
        title="批量赋码商品查询"
        :visible.sync="sdfmSearchProduct.dialogVisible"
        width="55%"
        center
        append-to-body
    >
      <el-container
          v-loading="sdfmSearchProduct.loading"
          element-loading-text="拼命加载中......请稍等"
      >
        <el-aside width="350px">
          <div style="100%">
            <el-row :gutter="10">
              <el-col :span="14">
                <el-input
                    v-model="
                                        sdfmSearchProduct.search.productName
                                    "
                    prefix-icon="el-icon-search"
                    placeholder="输入关键字进行搜索"
                ></el-input>
              </el-col>
              <el-col :span="10">
                <el-button
                    type="primary"
                    @click="handleSDFMSearchProduct"
                >搜索
                </el-button
                >
                <el-button @click="handleSDFMResetTree"
                >重置
                </el-button
                >
              </el-col>
            </el-row>
          </div>
          <br/>
          <el-scrollbar style="width: 100%; height: 500px">
            <el-tree
                v-show="sdfmSearchProduct.search.showSearchTree"
                :data="sdfmSearchProduct.search.resultList"
                :props="sdfmSearchProduct.props"
                :highlight-current="true"
                :default-expand-all="true"
                @node-click="handleSDFMSelecteProduct"
                style="width: 500px"
            ></el-tree>
            <el-tree
                v-show="!sdfmSearchProduct.search.showSearchTree"
                :data="sdfmSearchProduct.productList"
                :props="sdfmSearchProduct.props"
                :highlight-current="true"
                lazy
                :load="handleLoadSDFMNode"
                @node-click="handleSDFMSelecteProduct"
                style="width: 500px"
            ></el-tree>
          </el-scrollbar>
        </el-aside>
        <el-main style="background-color: #f8f8ff; margin-left: 20px">
          <el-row :gutter="20">
            <el-col :span="24">
              <div>商品分类编码：</div>
              <br/>
              <el-input
                  v-model="sdfmSearchProduct.selectNode.code"
                  :readonly="true"
              ></el-input>
            </el-col>
          </el-row>
          <br/>
          <el-row :gutter="20">
            <el-col :span="12">
              <div>商品名称：</div>
              <br/>
              <el-input
                  v-model="sdfmSearchProduct.selectNode.name"
                  :readonly="true"
              ></el-input>
            </el-col>
            <el-col :span="12">
              <div>简称：</div>
              <br/>
              <el-input
                  v-model="sdfmSearchProduct.selectNode.cateName"
                  :readonly="true"
              ></el-input>
            </el-col>
          </el-row>
          <br/>
          <el-row :gutter="20">
            <el-col :span="24">
              <div>税率：</div>
              <br/>
              <el-input
                  v-model="sdfmSearchProduct.selectNode.rate"
                  :readonly="true"
              ></el-input>
            </el-col>
          </el-row>
          <br/>
          <el-row :gutter="20">
            <el-col :span="24">
              <div>描述：</div>
              <br/>
              <el-input
                  type="textarea"
                  :rows="5"
                  v-model="sdfmSearchProduct.selectNode.desc"
                  :readonly="true"
              ></el-input>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <el-divider style="margin: 0, 10"></el-divider>
      <div style="text-align: right">
        <el-button
            @click="sdfmSearchProduct.dialogVisible = false"
            style="margin-left: 10px"
        >取消
        </el-button
        >
        <el-button
            type="primary"
            @click="handleSDFMOk"
            style="margin-left: 10px"
        >确定
        </el-button
        >
      </div>
    </el-dialog>
    <el-dialog
        title="商品分类信息"
        :visible.sync="isShowClass"
        width="30%"
        :before-close="groupClassClose">
      <div style="display: flex; justify-content: center; align-items: center">
        <span style="color: red">*</span>
        <span style="width: 90px">分类名称：</span>
        <el-input v-model="groupName" placeholder="请输入分类名称"></el-input>
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px">
        <span style="width: 90px">分类描述：</span>
        <el-input
            style="margin-left: 5px"
            type="textarea"
            :rows="2"
            placeholder="请输入分类描述"
            v-model="groupDesc">
        </el-input>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-button @click="groupClassClose">取 消</el-button>
        <el-button type="primary" v-on:click="saveGroupClass">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
        title="商品分类移动"
        :visible.sync="isShowMoveClass"
        width="30%"
        :before-close="moveClassClose">
      <div style="display: flex; justify-content: center; align-items: center">
        <span><span style="color: red">*</span>分类名称：</span>
        <el-select v-model="selectClassName" v-on:change="classNameChange" placeholder="请选择">
          <el-option
              v-for="item in groupClassList[0].children"
              :key="item.key"
              :label="item.label"
              :value="item.key">
          </el-option>
        </el-select>
      </div>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-button @click="moveClassClose">取 消</el-button>
        <el-button type="primary" v-on:click="moveProductClass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  searchEntProduct,
  productModifyOrAdd,
  deleteProduct,
} from '@/api/user_config'

import ProductForm from './components/product-form'

import {
  GetProductChildCateCodes,
  GetProductCateCodeTree,
  ProductBatchSaveCode,
} from '@/api/product'

import cache from '@/utils/cache'
import { AxiosRequestData } from '@/data/axios_request'

export default {
  name: 'product_info',
  components: {
    'product-form': ProductForm,
  },
  data() {
    return {
      loading: false,
      search: {
        productName: '',
        resultList: [],
        resultMultipleSelection: [],
        resultPagination: {
          currentPage: 1,
          pageSizes: [10, 30, 50, 100],
          pageSize: 10,
          total: 0,
        },
      },
      productAddData: {
        dialogVisible: false,
        inputProductInfo: {}, // 绑定后，用于清空上次的输入
      },
      productModifyData: {
        dialogVisible: false,
        inputProductInfo: {}, // 要编辑的产品信息
      },
      sdfmSearchProduct: {
        dialogVisible: false,
        loading: false,
        productList: [], // 商品列表
        props: {
          label: 'name',
          children: 'children',
        },
        search: {
          showSearchTree: false,
          productName: '', // 产品名称
          resultList: [], // 查询结果列表
        },
        selectNode: {
          code: '',
          name: '',
          cateName: '',
          rate: '',
          desc: '',
        },
        batchSaveCodeList: [], // 批量赋码商品id集合
      },
      tableHeight: '',
      groupClassList: [
        {
          key: 0,
          label: '全部',
          children: []
        }
      ],
      token: '',
      className: '',
      entTaxId: '',
      isShowClass: false,
      groupName: '',
      groupDesc: '',
      groupSort: 0,
      groupId: '',
      selectClassItem: {},
      classNumber: 0,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      isShowMoveClass: false,
      productClassList: [],
      selectClassName: ''
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 250
    this.callSearchEntProduct(
        this.search.resultPagination.currentPage,
        this.search.resultPagination.pageSize
    )
    let company = JSON.parse(cache.getSession('company'))
    this.entTaxId = company.entTaxId
    this.token = cache.getToken()
    this.getCommodityClassList(false)
  },
  mounted() {
    this.tableHeight = window.innerHeight - 250
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 250
      })()
    }
  },
  methods: {
    pageIndex(index) {
      let currentPage = this.search.resultPagination.currentPage // 当前页码，具体看组件取值
      let pageSize = this.search.resultPagination.pageSize // 每页条数，具体是组件取值
      return index + 1 + (currentPage - 1) * pageSize
    },
    fmtTaxRate(row, column, cellValue) {
      return Number.parseFloat(cellValue) * 100 + '%'
    },
    fmtPrice(row, column, cellValue) {
      return cellValue != null ? '￥' + cellValue : ''
    },
    fmtTaxPriceFlag(row, column, cellValue) {
      if (cellValue) {
        return '含税'
      } else {
        return '不含税'
      }
    },
    fmtPreferentialFlag(row, column, cellValue) {
      if (cellValue == 0) {
        return '不使用'
      } else if (cellValue == 1) {
        return '使用'
      }
      return cellValue
    },
    fmtZeroRateFlag(row, column, cellValue) {
      if (cellValue == null) {
        return '无'
      } else if (cellValue == 1) {
        return '免税'
      } else if (cellValue == 2) {
        return '不征收'
      } else if (cellValue == 3) {
        return '普通零税率'
      }
      return cellValue
    },
    handleSearch() {
      this.callSearchEntProduct(1, this.search.resultPagination.pageSize)
    },
    handleShowProductAddDialog() {
      if (!this.groupId) {
        this.$message({
          message: '请先选择分组信息，再点击新增按钮！',
          type: 'warning'
        })
        return
      }
      // 设置空对象，覆盖弹窗中的产品信息；
      this.productAddData.inputProductInfo = {}
      this.productAddData.dialogVisible = true
    },
    handleShowProductModifyDialog(row) {
      // 浅拷贝针对同一个产品信息多次编辑；
      this.productModifyData.inputProductInfo = { ...row }
      this.productModifyData.dialogVisible = true
    },
    handleCloseDialog(refName) {
      // 取消验证提示
      this.$refs[refName].resetFormFields()
    },
    handleSearchResultCheckChange(val) {
      this.search.resultMultipleSelection = val
      console.log('选中数据')
      console.log(this.search.resultMultipleSelection)
    },
    handleSearchResultDeleteChecked() {
      let entTaxId = JSON.parse(cache.getSession('company')).entTaxId
      let originalDelList = this.search.resultMultipleSelection
      if (originalDelList.length > 0) {
        let delList = new Array()
        for (let index = 0; index < originalDelList.length; index++) {
          const element = originalDelList[index]
          delList[index] = {
            productId: element.productId,
            productCode: element.productCode,
            entTaxId: entTaxId,
          }
        }
        deleteProduct(delList)
            .then((val) => {
              this.callSearchEntProduct(
                  this.search.resultPagination.currentPage,
                  this.search.resultPagination.pageSize
              )
              this.$message.success(val.msg)
            })
            .catch((err) => {
              this.$message.error(err)
            })
      } else {
        this.$message({
          message: '请选择需要删除的商品信息！',
          type: 'warning'
        })
      }
    },
    handleSearchResultUncheckAll() {
      console.log(this.search.resultMultipleSelection)
      this.$refs.searchResultMultipleTable.clearSelection()
    },
    handleSearchResultSizeChange(val) {
      this.callSearchEntProduct(1, val)
    },
    handleSearchResultCurrentChange(val) {
      this.callSearchEntProduct(
          val,
          this.search.resultPagination.pageSize
      )
    },
    handleProductModifyOrAddSubmit(refName) {
      console.log('产品修改和添加 参数：' + refName)
      this.$refs[refName]
          .getProductInfo()
          .then((val) => {
            productModifyOrAdd({
              taxationCateCode: val.taxationCateCode,
              taxationCateName: val.taxationCateName,
              taxationCateAbbr: val.taxationCateAbbr,
              productId: val.productId,
              productName: val.productName,
              shortCode: val.shortCode,
              specsModel: val.specsModel,
              price: val.price,
              unit: val.unit,
              taxPriceFlag: val.taxPriceFlag,
              taxRate: val.taxRate,
              zeroRateFlag: val.zeroRateFlag,
              preferentialFlag: val.preferentialFlag,
              preferentialType: val.preferentialType,
              groupId: this.groupId
            })
                .then((val) => {
                  // 成功关闭弹窗
                  this.productAddData.dialogVisible = false
                  this.productModifyData.dialogVisible = false
                  this.callSearchEntProduct(
                      1,
                      this.search.resultPagination.pageSize
                  )
                  this.$message.success(val.msg)
                })
                .catch((err) => {
                  this.$message.error(err)
                })
          })
          .catch((err) => {
            this.$message.error(err)
          })
    },
    /**
     * 搜索企业的产品
     * @param {Number} pageNum : 当前页码
     * @param {Number} pageSize : 每页数量
     */
    callSearchEntProduct(pageNum, pageSize) {
      searchEntProduct({
        productName: this.search.productName,
        pageNum: pageNum,
        pageSize: pageSize,
        groupId: this.groupId
      })
          .then((val) => {
            this.search.resultPagination.total = val.data.total
            this.search.resultPagination.pageSize = val.data.size
            this.search.resultPagination.currentPage = val.data.current
            this.search.resultList = val.data.records
          })
          .catch((_) => {
            this.$message.error(val.msg)
          })
    },
    handleShowBatchSetTaxationCateCodeDialog() {
      let originalList = this.search.resultMultipleSelection
      if (originalList && originalList.length > 0) {
        let paramList = new Array()
        for (let index = 0; index < originalList.length; index++) {
          const element = originalList[index]
          paramList[index] = element.productId
        }
        this.sdfmSearchProduct.batchSaveCodeList = paramList
        this.sdfmSearchProduct.dialogVisible = true
      } else {
        this.$message({
          message: '请选择需要批量赋码的商品信息！',
          type: 'warning'
        })
      }
    },
    handleSDFMSearchProduct() {
      let productName = this.sdfmSearchProduct.search.productName
      if (productName != '') {
        this.sdfmSearchProduct.search.showSearchTree = true
        // 清空tree
        this.sdfmSearchProduct.search.resultList = []
        GetProductCateCodeTree(productName)
            .then((val) => {
              this.sdfmSearchProduct.search.resultList = this.getSDFMOriginalChildren(
                  val.data
              )
            })
            .catch((err) => {
              this.$message.error(err)
            })
      } else {
        this.sdfmSearchProduct.search.showSearchTree = false
      }
    },
    // 获取手动赋码原数据的信息。
    getSDFMOriginalChildren(children) {
      let fmtNode = []
      for (const item of children) {
        let tempNode = {
          name: item.name,
          original: item, // 自定义添加字段，存储节点原始信息
        }
        if (item.children != null && item.children.length > 0) {
          tempNode.children = this.getSDFMOriginalChildren(
              item.children
          )
        }
        fmtNode.push(tempNode)
      }
      return fmtNode
    },
    handleSDFMResetTree() {
      this.sdfmSearchProduct.search.productName = ''
      this.sdfmSearchProduct.search.resultList = []
      this.sdfmSearchProduct.search.showSearchTree = false
    },
    callGetProductChildCateCodes(parentCode, resolve) {
      let resultNodes = new Array()
      GetProductChildCateCodes(parentCode)
          .then((val) => {
            if (val.data != null && val.data.length > 0) {
              for (const item of val.data) {
                resultNodes.push({
                  name: item.name,
                  original: item, // 自定义添加字段，存储节点原始信息
                })
              }
            }
            resolve(resultNodes)
          })
          .catch((err) => {
            this.$message.error(err)
            resolve([])
          })
    },
    handleLoadSDFMNode(node, resolve) {
      let parentCode = ''
      if (node.level !== 0) parentCode = node.data.original.code
      return this.callGetProductChildCateCodes(parentCode, resolve)
    },
    handleSDFMSelecteProduct(data, node) {
      // if (!node.isLeaf) return
      if (node.data.original != null) {
        this.sdfmSearchProduct.selectNode.code =
            node.data.original.code
        this.sdfmSearchProduct.selectNode.name =
            node.data.original.name
        this.sdfmSearchProduct.selectNode.cateName =
            node.data.original.cateName
        this.sdfmSearchProduct.selectNode.rate =
            node.data.original.rate
        this.sdfmSearchProduct.selectNode.desc =
            node.data.original.desc
      }
    },
    handleSDFMOk() {
      if (!this.sdfmSearchProduct.selectNode.code) {
        this.$message.error('请选择商品分类项目！')
        return false
      }
      if (
          this.sdfmSearchProduct.selectNode.rate == null ||
          this.sdfmSearchProduct.selectNode.rate == ''
      ) {
        this.$message.error('选择商品分类项目不是末级项目！')
        return false
      }
      let _this = this
      _this.sdfmSearchProduct.loading = true
      ProductBatchSaveCode(
          _this.sdfmSearchProduct.batchSaveCodeList,
          _this.sdfmSearchProduct.selectNode.code,
          _this.sdfmSearchProduct.selectNode.name,
          _this.sdfmSearchProduct.selectNode.cateName
      )
          .then((val) => {
            _this.sdfmSearchProduct.loading = false
            _this.sdfmSearchProduct.dialogVisible = false
            _this.callSearchEntProduct(
                _this.search.resultPagination.currentPage,
                _this.search.resultPagination.pageSize
            )
          })
          .catch((err) => {
            _this.sdfmSearchProduct.loading = false
            _this.$message.error(err)
          })
    },
    // 获取商品分类列表
    async getCommodityClassList(status) {
      const url = '/sys/product/group/findPage'
      if (this.token) {
        this.loading = true
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              groupName: this.className,
              entTaxId: this.entTaxId,
              pageNum: 1,
              pageSize: 1000
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.loading = false
            this.classNumber = response.data.total + 2
            let groupList = []
            let group = {}
            // if (!status) {
            //   group = {
            //     key: 0,
            //     name: '全部',
            //     desc: '全部',
            //     sort: 0
            //   }
            //   groupList = groupList.concat(group)
            // }
            response.data.records.forEach((item, index) => {
              group = {
                key: item.groupId,
                label: item.groupName,
                desc: item.groupDesc,
                sort: item.sort
              }
              groupList = groupList.concat(group)
            })
            this.groupClassList[0].children = groupList
            // this.$refs.classTable.setCurrentRow(this.groupClassList[0])
          } else {
            this.loading = false
          }
        }
      }
    },
    // 获取选中分类的数据
    getSelectGroupClass(row) {
      this.selectClassItem = row
      if (row.key === 0) {
        this.groupId = ''
      } else {
        this.groupId = row.key
      }
      this.callSearchEntProduct(1, 10)
    },
    // 分类数据查询
    groupClassSearch() {
      if (this.className) {
        this.getCommodityClassList(true)
      } else {
        this.getCommodityClassList(false)
      }
    },
    // 新增分类数据页面显示
    createGroupClass() {
      this.isShowClass = true
    },
    // 编辑分类信息页面显示
    editGroupList(row) {
      this.isShowClass = true
      this.groupName = row.label
      this.groupDesc = row.desc
      this.groupId = row.key
      this.groupSort = row.sort
      this.classNumber = row.sort
    },
    // 分类页面弹框关闭后调用
    groupClassClose() {
      this.isShowClass = false
      this.groupName = ''
      this.groupDesc = ''
      this.groupId = ''
      this.groupSort = 0
      this.classNumber = 0
    },
    // 保存分类信息
    async saveGroupClass() {
      if (!this.groupName) {
        this.$message({
          message: '分类名称不允许为空！',
          type: 'warning'
        })
        return null
      }
      const url = '/sys/product/group/save'
      if (this.token) {
        this.loading = true
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              groupId: this.groupId,
              groupName: this.groupName,
              groupDesc: this.groupDesc,
              sort: this.classNumber,
              entTaxId: this.entTaxId,
              reqChannel: 4
            },
            false,
            1
        )
        if (response) {
          if (response.code === 0) {
            this.loading = false
            this.isShowClass = false
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
            this.groupName = ''
            this.groupDesc = ''
            await this.getCommodityClassList(false)
          } else {
            this.loading = false
            this.$message.error(response.msg)
          }
        }
      }
    },
    // 删除分类信息
    async deleteGroupClass(row) {
      this.$confirm('确认删除当前分类名称吗？')
          .then(async (_) => {
            // done()
            const url = '/sys/product/group/delete'
            if (this.token) {
              this.loading = true
              let response = await AxiosRequestData(
                  url,
                  this.token,
                  {
                    delList: [row.key]
                  },
                  false,
                  1
              )
              if (response) {
                if (response.code === 0) {
                  this.loading = false
                  this.$message({
                    message: '删除成功！',
                    type: 'success'
                  })
                  await this.getCommodityClassList(false)
                } else {
                  this.loading = false
                  this.$message.error(response.msg)
                }
              }
            }
          })
          .catch((_) => {
          })
    },
    // 移动商品分类页面显示
    moveProductClassShow() {
      let originalDelList = this.search.resultMultipleSelection
      if (originalDelList && originalDelList.length > 0) {
        this.isShowMoveClass = true
        let productList = []
        originalDelList.forEach((item, index) => {
          let product = {
            productId: item.productId,
            groupId: ''
          }
          productList = productList.concat(product)
        })
        this.productClassList = productList
        this.handleSearch()
      } else {
        this.$message({
          message: '请选择需要移动的商品信息',
          type: 'warning'
        })
      }
    },
    // 移动商品分类
    async moveProductClass() {
      if (this.selectClassName) {
        this.productClassList.forEach((item, index) => {
          item.groupId = this.selectClassName
        })
        const url = '/sys/product/changeGroup'
        if (this.token) {
          this.loading = true
          let response = await AxiosRequestData(
              url,
              this.token,
              this.productClassList,
              false,
              1
          )
          if (response) {
            if (response.code === 0) {
              this.loading = false
              this.isShowMoveClass = false
              this.$message({
                message: '移动成功！',
                type: 'success'
              })
            } else {
              this.loading = false
              this.$message.error('移动失败')
            }
          }
        }
      } else {
        this.$message({
          message: '请选择分类信息！',
          type: 'warning'
        })
      }
    },
    // 关闭移动分类页面
    moveClassClose() {
      this.isShowMoveClass = false
    },
    // 分类名称选择
    classNameChange(data) {
      this.selectClassName = data
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.classNameSpan {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
</style>
