<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix" ref="headerBox">
        <div class="container" v-hasPermi="['merchant:seckill:product:list']">
          <el-form size="small" inline>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商品名称：">
                  <el-input v-model="goodsName" placeholder="请输入商品名称" class="selWidth" clearable>
                    <el-button slot="append" icon="el-icon-search" @click="getListByGoodsName" />
                  </el-input>
                </el-form-item>
                <el-form-item label="限购状态：" class="inline">
                  <el-select
                    v-hasPermi="['merchant:seckill:product:list']"
                    v-model="enabled"
                    clearable
                    placeholder="请选择"
                    class="selWidth"
                    @change="searchByStatus"
                  >
                    <el-option label="不启用" :value="false" />
                    <el-option label="启用" :value="true" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-button
          size="small"
          @click="openLimitedGoodsListDialog"
          type="primary"
          class="mr10"
          v-hasPermi="['merchant:seckill:product:add']"
          >新增限购商品</el-button
        >
      </div>
      <el-table
        v-loading="listLoading"
        :data="limitedGoodsList"
        style="width: 100%"
        size="small"
        ref="multipleTable"
        row-key="id"
        :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="100" />
        <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="price" label="商品售价" min-width="90" align="center" />
        <el-table-column prop="stock" label="商品库存" min-width="90" align="center" />
        <el-table-column label="限购状态" min-width="90">
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.enabled"
                active-color="#409eff"
                inactive-color="#dcdfe6"
                @change="changeLimitedStatus($event, scope.row)">
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="oneQuota" label="单次限购" min-width="100" align="center" />
        <el-table-column prop="allQuota" label="总数限购" min-width="100" align="center" />
        <el-table-column label="操作" min-width="180" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="openLimitedSettingDialog(scope.row)"
              >限购设置</el-button
            >
            <el-button type="danger" size="small" v-if="scope.row.id" @click="delLimitedRecord(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size.sync="limit"
          :current-page.sync="page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>

    <limitedGoodsListDialog :showLimitedGoodsListDialog="showLimitedGoodsListDialog" @closeLimitedGoodsListDialog="closeLimitedGoodsListDialog" @addChooseGoodsList="addChooseGoodsList" />
    <limitedSettingDialog :showLimitedSettingDialog="showLimitedSettingDialog" :productId="productId" :limitedSettingInfo="limitedSettingInfo" @closeLimitedSettingDialog="closeLimitedSettingDialog" />
  </div>
</template>

<script>
import {
  limitedGoodsPageApi,
  updateLimitedRecordApi,
  deleteLimitedRecordApi
} from '@/api/marketing';
import limitedGoodsListDialog from '../../../components/limited/limitedGoodsListDialog';
import limitedSettingDialog from '../../../components/limited/limitedSettingDialog.vue'


export default {
  name: 'Limited',
  components: { limitedGoodsListDialog, limitedSettingDialog },

  data() {
    return {
      listLoading: false,
      showLimitedGoodsListDialog: false,
      showLimitedSettingDialog: false,
      limitedGoodsList: [],
      productId: null,
      goodsName: '',
      enabled: null,
      total: 0,
      totalPage: 0,
      page: 1,
      limit: 20
    };
  },

  mounted() {
    this.getLimitedGoodsList();
  },

  methods: {
    getLimitedGoodsList() {
      let params = {
        page: this.page,
        limit: this.limit
      };
      this.goodsName ? params.name = this.goodsName : null;
      this.enabled === null ? null : params.enabled = this.enabled;

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

        console.info('limit', res);

        this.page = page;
        this.totalPage = totalPage;
        this.total = total;
        this.limitedGoodsList = list;
      });
    },

    getListByGoodsName() {
      this.page = 1;
      this.getLimitedGoodsList();
    },

    searchByStatus() {
      this.page = 1;
      this.getLimitedGoodsList();
    },

    openLimitedGoodsListDialog() {
      this.showLimitedGoodsListDialog = true;
    },

    closeLimitedGoodsListDialog() {
      this.showLimitedGoodsListDialog = false;
    },

    changeLimitedStatus(index, val) {
      if (!val.id) return;

      let params = {
        id: val.id,
        enabled: val.enabled,
        allQuota: val.allQuota,
        oneQuota: val.oneQuota,
        productId: val.productId
      }

      updateLimitedRecordApi(params).then(res => {
        let { code } = res;

        if (code && code !== 200) return;
      }).catch(() => {});
    },

    openLimitedSettingDialog(row) {
      this.productId = row.id;
      this.limitedSettingInfo = row;
      this.showLimitedSettingDialog = true;
    },

    closeLimitedSettingDialog(data) {
      if (!data) {
        this.showLimitedSettingDialog = false;
        return;
      }

      let { productId } = data;
      this.showLimitedSettingDialog = false;
      if (productId) {
        this.getLimitedGoodsList()
      }
    },

    delLimitedRecord(id) {
      deleteLimitedRecordApi(id).then(res => {
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        let idx = this.limitedGoodsList.findIndex(el => el.id === id);
        this.limitedGoodsList.splice(idx, 1);
        this.total -= 1;
      }).catch(err => {});
    },

    pageChange(page) {
      this.page = page;
      this.getLimitedGoodsList();
    },

    handleSizeChange(val) {
      this.limit = val
      this.getLimitedGoodsList();
    },

    addChooseGoodsList(data) {
      let productIds = [];
      this.limitedGoodsList.forEach(el => {
        productIds.push(el.productId);
      });
      data.forEach(el => {
        if (productIds.indexOf(el.productId) < 0) {
          this.limitedGoodsList.unshift(el);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.row_title {
  width: 246px;
}

.demo-drawer__content {
  padding: 0 30px;
}

.title {
  margin-bottom: 14px;
  color: #303133;
  font-weight: 500;
  font-size: 14px;
}

.description {
  &-term {
    display: table-cell;
    padding-bottom: 5px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
    color: #606266;
  }
  ::v-deep .el-divider--horizontal {
    margin: 12px 0 !important;
  }
}
</style>