<template>
  <div>
    <div class="cardTitle">
      <span>商品管理</span>
    </div>
    <searchForm :formItem="formItem" @getSearch="getData($event)"></searchForm>
    <a-table
      :columns="columns"
      :data-source="tableData"
      :pagination="pagination"
      :scroll="{ x: 2400 }"
      @change="handleTableChange"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: selectionChoosed,
      }"
      :row-key="
        (record, index) => {
          return record.id;
        }
      "
    >
      <span slot="action" slot-scope="text, row">
        <a-space>
          <a class="ant-dropdown-link" @click="onSell([row.id])">上架</a>
          <a class="ant-dropdown-link" @click="offSell([row.id])">下架</a>
          <a class="ant-dropdown-link" @click="edit(row.id)">修改商品信息</a>
        </a-space>
      </span>
      <span slot="mainPhoto" slot-scope="text, row">
        <img :src="row.mainPhoto" class="table-img" alt="" />
      </span>
    </a-table>
    <div class="action">
      <a-dropdown :disabled="!hasSelected">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="on"> 批量上架 </a-menu-item>
          <a-menu-item key="off"> 批量下架 </a-menu-item>
        </a-menu>
        <a-button> 批量操作 <a-icon type="down" /> </a-button>
      </a-dropdown>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `已选择 ${selectedRowKeys.length} 条` }}
        </template>
      </span>
    </div>
    <addForm
      :show="drawer.show"
      @success="success"
      @addClose="addClose"
      :goodsId="goodsId"
    ></addForm>
  </div>
</template>

<script>
import { columns, pagination, formItem } from "./depend/config.js";
import { shopPushList,offShelf,onShelf} from "@/api/shop/goods/index.js";
import addForm from "./depend/form.vue";
export default {
	components: {
		addForm,
	},
	data() {
		return {
			drawer: {
				show: false,
			},
			searchForm: {
				skuId: undefined,
				skuName: undefined,
			},
			columns,
			goodsId:null,
			pagination,
			formItem,
			tableData: [],
			selectedRowKeys: [],
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData(data) {
			if (data !== undefined) {
				console.log(data);
				this.searchForm = data;
				console.log(this.searchForm);
			}
			shopPushList({
				...this.searchForm,
				pageNum: this.pagination.current,
				size: this.pagination.pageSize,
			}).then((res) => {
				this.tableData = res.data.rows;
				this.pagination.total = res.data.total;
			});
		},
		selectionChoosed(data) {
			console.log(data);
			this.selectedRowKeys = data;
		},
		handleTableChange(pagination) {
			console.log(pagination);
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
			this.getData();
		},
		edit(id) {
			this.goodsId = id;
			this.drawer.show = true;
		},
		onSell(ids) {
			console.log(ids);
			this.$confirm({
				title: "是否上架",
				icon: "caret-up",
				onOk: async () => {
					let res = await onShelf({ ids: ids });
					if (res.code === 200) {
						this.$message.success(res.msg);
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				},
			});
		},
		offSell(ids) {
			console.log(ids);
			this.$confirm({
				title: "是否下架",
				icon: "caret-down",
				onOk: async () => {
					let res = await offShelf({ ids: ids });
					if (res.code === 200) {
						this.$message.success(res.msg);
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				},
			});
		},
		handleMenuClick(data) {
			console.log(data);
			if (data.key === "on") {
				this.onSell(this.selectedRowKeys);
			} else if (data.key === "off") {
				this.offSell(this.selectedRowKeys);
			}
		},
		addClose() {
			this.drawer.show = false;
			this.goodsId = null;
		},
		success() {
			this.getData();
		},
	},
	computed: {
		hasSelected() {
			return this.selectedRowKeys.length > 0;
		},
	},
};
</script>

<style lang="less" scoped>
.table-img {
  width: 40px;
  height: 40px;
}
</style>
