<template>
  <el-dialog title="选择商品" :visible.sync="show" :show-close="false" width="1000px" :close-on-click-modal="false">
    <div class="dialog-container clearfix">
      <div class="left fl">
        <div class="item" @click="changeClassify('')">全部分类</div>
        <div class="group" v-for="(item, index) in classifyList" :key="index">
          <div class="item" @click="toggleOpen(index)">
            <i :class="item.isOpen ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i> {{ item.name }}
          </div>
          <div class="child" v-if="item.isOpen">
            <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex"
              @click="changeClassify(childItem.categoryId)">{{ childItem.name }}</div>
          </div>
        </div>
      </div>
      <div class="right fl">
        <div class="search">
          <el-input placeholder="请输入商品名称进行搜索" v-model="goods_keyword" class="input-with-select" clearable size="small"
            style="width: 250px">
            <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
          </el-input>
        </div>
        <div class="table" style="margin: 10px 0 20px;">
          <el-table v-loading="goodsTable_listLoading" :data="goodsTable_dataList" element-loading-text="Loading"
            tooltip-effect="dark" style="width: 100%" max-height="270" @selection-change="handleChooseGoods">
            <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
            <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200"
              show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
            <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
          </el-table>
        </div>
        <div class="pagination clearfix">
          <div class="fr">
            <el-pagination @current-change="goodsTableCurrentChange" :current-page="goodsTable_currentPage"
              :page-size="goodsTable_pageSize" background layout="prev, pager, next" :total="goodsTable_listTotal">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitAddGoods">保 存</el-button>
      <el-button @click="cancelAddGoods">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getClassifyList, getGoodsList } from "@/api/coupon";
export default {
  props: {
    goodsList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show:true,
      maxGoodsCount: 10000000,
      classifyList: [],
      classifyCurrent: '',
      goods_keyword: '',
      goodsTable_dataList: null, // 列表数据
      goodsTable_listLoading: true, // 列表加载loading
      goodsTable_currentPage: 1, // 当前页码
      goodsTable_pageSize: 10, // 每页数量
      goodsTable_listTotal: 0, // 列表总数
      goodsTable_choose: [], // table中 当前选择商品
    }
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    // 获取分类列表
    getClassifyList() {
      getClassifyList({ categoryLevel: 1, status: true }).then(res => {
        res.data.forEach(item => {
          item.isOpen = false;
        });
        this.classifyList = res.data;
        this.classifyCurrent = '';
        this.getGoodsList();
      })
    },

    // 展开/收起 分类
    toggleOpen(index) {
      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
    },

    // 切换分类
    changeClassify(cid) {
      if (this.goodsTable_choose.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分类');
      }
      this.classifyCurrent = cid;
      this.goodsTable_currentPage = 1;
      this.getGoodsList();
    },

    // 搜索
    getGoodsListByScreen() {
      if (this.goodsTable_choose.length > 0) {
        return this.$errorMsg('当前已选择商品，不可搜索');
      }
      this.goodsTable_currentPage = 1;
      this.getGoodsList();
    },

    // 获取商品列表
    getGoodsList() {
      getGoodsList({
        pageNum: this.goodsTable_currentPage,
        pageSize: this.goodsTable_pageSize,
        keyword: this.goods_keyword,
        categoryId: this.classifyCurrent,
      }).then(res => {
        let oldGoodsList = [...this.goodsList];
        let newGoodsList = res.data.records;
        for (let i = 0; i < oldGoodsList.length; i++) {
          let oldItem = oldGoodsList[i]
          for (let j = 0; j < newGoodsList.length; j++) {
            let newItem = newGoodsList[j]
            if (newItem.goodsId === oldItem.goodsId) {
              newGoodsList[j].selected = true;
              break;
            }
          }
        }
        this.goodsTable_dataList = newGoodsList;
        this.goodsTable_listTotal = res.data.total;
        this.goodsTable_listLoading = false;
      })
    },

    // 查询重复值并禁选
    checkboxSelect(row, rowIndex) {
      if (row.selected) {
        return false // 禁用
      } else {
        return true // 不禁用
      }
    },

    // 更改列表当前页
    goodsTableCurrentChange(val) {
      if (this.goodsTable_choose.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分页');
      }
      this.goodsTable_currentPage = val;
      this.getGoodsList();
    },

    // table点击选择商品
    handleChooseGoods(val) {
      this.goodsTable_choose = val;
    },

    // 取消 选择会员
    cancelAddGoods() {
      this.$emit("cancelSelectGoods")
    },

    // 提交 选择会员
    submitAddGoods() {
      this.$emit("selectGoodsPass", [...this.goodsList, ...this.goodsTable_choose])
      this.$nextTick(() => {
        this.$emit("cancelSelectGoods")
      })
    },
  }
}
</script>

<style scoped lang="scss">
.dialog-container {
  .left {
    width: 140px;
    height: 350px;
    overflow-y: scroll;

    .group {
      margin-top: 10px;
    }

    .child {
      margin-top: 5px;

      .item {
        padding-left: 18px;
      }
    }

    .item {
      cursor: pointer;
      line-height: 24px;
    }
  }

  .right {
    width: calc(100% - 140px);
    height: 350px;
    box-sizing: border-box;
    padding-left: 20px;
  }
}
</style>
