<template>
	<view class="content">
		<wd-notify />

		<wd-search @search="search" v-model="params.keywords" hide-cancel>
			<template #prefix>
				<wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
					<view class="search-type">
						<text>{{ searchType }}</text>
						<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
					</view>
				</wd-popover>
			</template>
		</wd-search>

		<myTable ref="table" :apiObj="goods.list" :params="params">
			<wd-table-col fixed prop="id" width="60" align="center" label="ID"></wd-table-col>
			<wd-table-col prop="name" width="180" label="商品名称"></wd-table-col>
			<wd-table-col prop="stock_num" align="center" width="80" label="库存">
				<template #value="{ row }">
					<view class="custom-class">
						<wd-tag v-if="row.stock_num > 0" type="primary">{{ row.stock_num }}</wd-tag>
						<wd-tag v-else type="warning">{{ row.stock_num }}</wd-tag>
					</view>
				</template>
			</wd-table-col>
			<wd-table-col prop="stock_num" align="center" width="80" label="状态">
				<template #value="{ row }">
					<view class="custom-class">
						<wd-switch @change="changeS(row)" v-model="row.status" :inactive-value="0" :active-value="1" size="16px" />
					</view>
				</template>
			</wd-table-col>

			<wd-table-col width="120" align="center" label="操作">

				<template #value="{ row }">
					<view class="custom-class">
						<wd-button :round="false" size="small">编辑</wd-button>
					</view>
				</template>

			</wd-table-col>
		</myTable>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import myTable from "/components/myTable/index.vue"
import goods from '@/api/store/goods.js'
import utils from '@/utils/utils.js'
import { useNotify } from '@/uni_modules/wot-design-uni'
const { showNotify, closeNotify } = useNotify()

const params = {
	keywords: "",
	calssify_id: "",
	status: "",
}

const searchType = ref('全部')
const popover = ref(false)

const menu = ref([
	{
		content: '全部'
	},
	{
		content: '已上架'
	},
	{
		content: '已下架'
	}
])

const table = ref(null)
const search = ({ value }) => {
	table.value.upData({
		keywords: value
	})
}

function changeSearchType({ item, index }) {
	searchType.value = item.content

	if (item.content == '全部') {
		params.status = ""
	}

	if (item.content == '已上架') {
		params.status = 1
	}

	if (item.content == '已下架') {
		params.status = 0
	}

	search({
		value: ""
	})
}

const changeS = (row) => {
	goods.goodsEditAttribute({
		id: row.id,
		value: [1, 0][row.status],
		type: "status"
	}).then(res => {

		if (res.code == 0) {
			showNotify({ type: 'primary', message: '操作成功' })
		} else {
			showNotify({ type: 'error', message: '出错了' })
		}

	})
}

</script>

<style lang="scss" scoped>
.search-type {
	position: relative;
	height: 30px;
	line-height: 30px;
	padding: 0 8px 0 16px;
	font-size: 24rpx;
	color: rgba(0, 0, 0, .45);
}

.search-type::after {
	position: absolute;
	content: '';
	width: 1px;
	right: 0;
	top: 5px;
	bottom: 5px;
	background: rgba(0, 0, 0, 0.25);
}

.search-type {
	:deep(.icon-arrow) {
		display: inline-block;
		font-size: 20px;
		vertical-align: middle;
	}
}
</style>
