<template> 
  <div class="limited-dialog">
    <el-dialog title="商品列表" :visible.sync="showLimitedGoodsListDialog" @close="onClose">
      <div class="choose-condition">
        <el-form>
          <div class="name-category">
            <el-form-item label="商品搜索：" style="flex:1;">
              <el-input v-model.trim="keywords" placeholder="请输入商品名称" style="width: 230px;">
                <el-button slot="append" icon="el-icon-search" @click="searchByKeywords" />
              </el-input>
            </el-form-item>
            <el-form-item label="商品分类：" style="flex:1;">
              <el-cascader v-model="categoryId" :options="platformCategoryList" :props="props1" @change="searchByCategoryId"></el-cascader>
            </el-form-item>
          </div>
          <div class="merch-status">
            <el-form-item label="商品状态：" style="flex:1;">
              <el-select v-model="status" placeholder="请选择" @change="searchByType">
                <el-option label="上架" :value="1"></el-option>
                <el-option label="下架" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="table-container">
        <el-table
          v-loading="listLoading"
          :data="goodsList"
          style="width: 100%"
          size="small"
          ref="multipleTable"
          row-key="id"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ fontWeight: 'bold' }"
        >
          <el-table-column type="selection" :reserve-selection="true" width="45"></el-table-column>
          <el-table-column prop="productId" label="ID" min-width="50"></el-table-column>
          <el-table-column label="商品图" min-width="80">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 36px; height: 36px"
                  :src="scope.row.image"
                  :preview-src-list="[scope.row.image]"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" min-width="180" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column prop="categoryName" label="商品分类" min-width="180" :show-overflow-tooltip="true"> </el-table-column>
          <el-table-column label="商品状态：" min-width="180" :show-overflow-tooltip="true"> 
            <template slot-scope>
              <span>{{ status === 2 ? '下架' : '上架' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-container">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="limit"
          :current-page="page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { productLstApi, categoryApi } from '@/api/product';

export default {
  name: 'limitedGoodsListDialog',
  props: ['showLimitedGoodsListDialog'],

  data() {
    return {
      listLoading: false,
      formInfo: {
        title: '',
        category: null,
      },
      platformCategoryList: [],
      goodsList: [],
      limit: 20,
      page: 1,
      totalPage: null,
      total: 0,
      checkedList: [],
      keywords: '',
      status: null, // 1、上架 2、下架
      categoryId: null, // 平台分类id
      props1: {
        children: 'childList',
        label: 'name',
        value: 'id',
        multiple: false,
        emitPath: false,
      }, // 级联选择器数据格式配置选项
    };
  },

  mounted() {
    this.getPlatformCategory();
    this.getGoodsList();
  },

  methods: {
    getPlatformCategory() {
      categoryApi().then(res => {
        this.platformCategoryList = this.changeNodes(res);
      });
    },

    /** tree去除 childList=[] 的结构**/
    changeNodes (data) {
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (!data[i].isShow) {
            data[i].disabled = true;
          }
          if (!data[i].childList || data[i].childList.length < 1) {
            data[i].childList = undefined;
          } else {
            this.changeNodes(data[i].childList);
          }
        }
      }

      return data;
    },

    getGoodsList() {
      let params = {
        type: 1,
        page: this.page,
        limit: this.limit
      };

      this.keywords ? params.keywords = this.keywords : null;
      this.status ? params.type = this.status : null;
      this.categoryId ? params.categoryId = this.categoryId : null;

      productLstApi(params).then(res => {
        let { page, totalPage, list, limit, total } = res;

        list.forEach(el => {
          el.productId = el.id;
          delete el.id;
        })
        this.goodsList = list;
        this.page = page;
        this.totalPage = totalPage;
        this.total = total;
        this.limit = limit;
        console.info('list', res);
      }).catch(err => {
        console.info(err)
      });
    },

    onClose() {
      this.$emit('closeLimitedGoodsListDialog');
    },

    searchByKeywords() {
      this.page = 1;
      this.getGoodsList();
    },

    searchByCategoryId() {
      this.page = 1;
      this.getGoodsList();
    },

    searchByType() {
      this.page = 1;
      this.getGoodsList();
    },

    handleSelectionChange(selection) {
      this.checkedList = selection;
    },

    onConfirm() {
      this.$emit('addChooseGoodsList', this.checkedList);
      this.onClose();
      this.$refs.multipleTable.clearSelection();
    },

    changePageSize(val) {
      this.limit = val;
      this.getGoodsList();
    },

    changePage(page) {
      this.page = page;
      this.getGoodsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.limited-dialog {
  .choose-condition {
    .name-category,
    .merch-status {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
    }
  }
}
</style>