<template>
	<a-card :bordered="false" class="goodsClass-page-info">
		<!-- 搜索框 -->
		<div class="goodsClass-search">
			<a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
				<a-row :gutter="20">
					<a-col :md="6" :sm="24">
						<a-form-item label="商品分类名称" :label-col="{ span:8 }" :wrapper-col="{ span: 16 }">
							<a-input allowClear v-model="searchData.name" :maxLength="30" placeholder="请输入" id="goodsClass-name" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="24">
						<a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="goodsClass-refresh">查询</a-button>
						<a-button type="" @click="resetForm" id="goodsClass-resetForm">重置</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<div class="add">
			<a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="goodsClass-showModal" v-hasPermission="'B_goodsClass_add'">新增</a-button>
		</div>
		<!-- table列表 -->
		<s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
			<span slot="action" slot-scope="text, record">
				<a-icon v-hasPermission="'B_goodsClass_edit'" type="edit" id="goodsClass-handleEdit" title="编辑" class="actionBtn icon-blues"
				 @click="handleEdit(record)" />
				<span v-if="!$hasPermissions('B_goodsClass_edit')">--</span>
			</span>
			<span slot="state" slot-scope="text, record">
				<a-switch v-hasPermission="'B_goodsClass_enable'" checkedChildren="启用" unCheckedChildren="禁用" id="goodsClass-changeFlagHandle"
				 :checked="record.state == 1 ? true : false" @change="changeFlagHandle(text, record)" />
				<span v-if="!$hasPermissions('B_goodsClass_enable')">--</span>
			</span>
			<!-- 排序 -->
			<template slot="sort" slot-scope="text, record, index">
				<span v-hasPermission="'B_goodsClass_changeSort'">
					<a-icon title="下移" v-if="index != list.length-1" :style="{ fontSize: '18px', color: '#1891FF', cursor: 'pointer',padding:'0 10px' }"
					 @click="changeSort(index,record,0)" type="arrow-down" />
					<a-icon title="上移" v-if="index != 0" :style="{ fontSize: '18px', color: '#1891FF',cursor: 'pointer', padding:'0 10px' }"
					 @click="changeSort(index,record,1)" type="arrow-up" />
					<span v-if="list.length===1">--</span>
				</span>
				<span v-if="!$hasPermissions('B_goodsClass_changeSort')">--</span>
			</template>
		</s-table>
		<add-goodsClass-modal :itemId="itemId" :itemData="itemData" :openGoodClassModal="openGoodClassModal" @refresh="$refs.table.refresh(true)"
		 @close="cancel"></add-goodsClass-modal>
	</a-card>
</template>

<script>
	import {
		Upload,
		STable,
		VSelect
	} from '@/components'
	import addGoodsClassModal from './addGoodsClassModal.vue'
	import {
		getGoodsClassList,
		changeGoodsStatus,
		goodsChangeSort
	} from '@/api/shopSetting.js'

	export default {
		components: {
			STable,
			Upload,
			VSelect,
			addGoodsClassModal
		},
		data() {
			return {
				searchData: {
					name: ''
				},
				openGoodClassModal: false, // 默认关闭弹窗
				itemId: null, // 编辑行id
				itemData: {}, // 编辑行数据
				formLayout: 'horizontal',
				list: [], // 列表数据
				form: this.$form.createForm(this),
				// 表头
				columns: [{
						title: '序号',
						dataIndex: 'no',
						width: 60,
						align: 'center'
					},
					{
						title: '商品分类名称',
						width: 100,
						dataIndex: 'name',
						align: 'center'
					},
					{
						title: '订单起购金额',
						width: 100,
						dataIndex: 'goldLimit',
						align: 'center'
					},
					{
						title: '商城主页显示数量',
						width: 100,
						dataIndex: 'popularizeGoodsLimit',
						align: 'center'
					},
					{
						title: '状态',
						width: 100,
						dataIndex: 'state',
						align: 'center',
						scopedSlots: {
							customRender: 'state'
						}
					},
					{
						title: '备注',
						width: 100,
						dataIndex: 'remarks',
						align: 'center',
						customRender: (text) => {
							return text || '--'
						}
					},
					{
						title: '排序',
						width: 200,
						align: 'center',
						scopedSlots: {
							customRender: 'sort'
						}
					},
					{
						title: '操作',
						align: 'center',
						width: 100,
						scopedSlots: {
							customRender: 'action'
						}
					}
				],
				// 加载数据方法 必须为 Promise 对象
				loadData: parameter => {
					return getGoodsClassList(
						Object.assign(parameter, this.searchData)
					).then(res => {
						this.list = res.data.list || []
						const no = (res.data.pageNo - 1) * res.data.pageSize
						if (res.status == 200) {
							for (let i = 0; i < res.data.list.length; i++) {
								const _item = res.data.list[i]
								_item.no = no + i + 1
							}
							return res.data
						}
					})
				}
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this, {
				name: 'validate_other'
			})
		},
		methods: {
			showModal() {
				console.log('---新增')
				this.itemId = null
				this.itemData = {}
				this.openGoodClassModal = true
			},
			// 编辑
			handleEdit(record) {
				this.itemId = record.id
				this.itemData = record
				console.log(this.itemId, '-------编辑')
				this.openGoodClassModal = true
			},
			// 重置
			resetForm() {
				this.searchData.name = ''
				this.$refs.table.refresh(true)
			},
			//
			cancel() {
				this.itemId = null
				this.openGoodClassModal = false
			},
			// 更改启用禁用状态
			changeFlagHandle(text, record) {
				console.log(text)
				const _this = this
				const _data = {
					id: record.id,
					flag: record.state == 1 ? '0' : '1'
				}
				if (record.state == 1) {
					this.$confirm({
						title: '提示',
						centered: true,
						content: '商品分类被禁用后，该分类将不在显示给用户，确定禁用吗?',
						okText: '确定',
						cancelText: '取消',
						onOk() {
							changeGoodsStatus(_data).then(res => {
								if (res.status == 200) {
									_this.$message.success(res.message)
									_this.$refs.table.refresh()
								}
							})
						}
					})
				} else {
					changeGoodsStatus(_data).then(res => {
						if (res.status == 200) {
							_this.$message.success(res.message)
							_this.$refs.table.refresh()
						} else {
							record.state = !record.state
						}
					})
				}
			},
			// 上移 下移 排序 index:下标  item:数据  type：类型 0 下移 1 上移
			changeSort(index, item, type) {
				const indexThat = type === 0 ? index + 1 : index - 1
				const params = {
					'currentId': item.id,
					'id': this.list[indexThat].id,
				}
				goodsChangeSort(params).then(res => {
					if (res.status == 200) {
						this.$refs.table.refresh()
					} else {
						this.$message.error(res.message)
					}
				})
			}
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				vm.resetForm()
			})
		}
	}
</script>

<style lang="less">
	.goodsClass-page-info {
		.goodsClass-search {
			margin-bottom: 15px;
		}

		.w-e-toolbar {
			flex-wrap: wrap;
		}

		.addBtn {
			margin-bottom: 20px;
		}
	}
</style>
