<template>
	<!-- 商品-商品分类 -->
	<div class="article-manager">
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
				<Form ref="artFrom" :model="artFrom" :label-width="labelWidth" inline :label-position="labelPosition"
					@submit.native.prevent>
					<!-- <FormItem label="商品分类：" prop="pid" label-for="pid">
						<Select v-model="artFrom.id" @on-change="userSearchs" clearable class="input-add">
							<Option v-for="item in treeSelect" :value="item.id" :key="item.id">{{ item.cate_name }}
							</Option>
						</Select>
					</FormItem> -->
					<FormItem label="状态：" label-for="is_show">
						<Select v-model="artFrom.is_show" placeholder="请选择" clearable @on-change="userSearchs"
							class="input-add">
							<Option value="-1">全部</Option>
							<Option value="1">显示</Option>
							<Option value="0">隐藏</Option>
						</Select>
					</FormItem>
					<!-- <FormItem label="分类名称：" label-for="status2">
						<Input placeholder="请输入" v-model="artFrom.cate_name" class="input-add mr14" />
						<Button type="primary" @click="userSearchs()">查询</Button>
					</FormItem> -->
				</Form>
			</div>
		</Card>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 相关操作 -->
			<div>
				<Button v-auth="['product-save-cate']" type="primary" class="bnt" @click="addClass">添加仓库</Button>
			</div>
			<!-- 商品分类表格 -->
			<vxe-table :data="tableData" ref="xTable" class="ivu-mt" highlight-hover-row :loading="loading"
				header-row-class-name="false" row-id="id"
				 :tree-config="{transform: true, rowField: 'id', parentField: 'pid'}">
				<vxe-table-column field="id" title="ID" tooltip width="80"></vxe-table-column>
				<vxe-table-column field="title" tree-node title="仓库名称" min-width="250"></vxe-table-column>
				<vxe-table-column field="address"  title="省市区地址" min-width="300"></vxe-table-column>
				<vxe-table-column field="phone"  title="手机号" min-width="200"></vxe-table-column>
				<vxe-table-column field="detailed_address"  title="详细地址" min-width="250"></vxe-table-column>
				<vxe-table-column field="latitude"  title="经度" min-width="200"></vxe-table-column>
				<vxe-table-column field="longitude"  title="纬度" min-width="200"></vxe-table-column>
				<vxe-table-column field="self_support" title="是否自营" min-width="100" tooltip="true">
					<template v-slot="{ row }">
						{{row.self_support? '是': '否'}}
						</template>
				</vxe-table-column>
				<vxe-table-column field="is_show" title="是否显示" min-width="120">
					<template v-slot="{ row }">
						<i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0"
							@on-change="onchangeIsShow(row)" size="large">
							<span slot="open">显示</span>
							<span slot="close">隐藏</span>
						</i-switch>
					</template>
				</vxe-table-column>
				<vxe-table-column field="date" title="操作" width="250" align="left">
					<template v-slot="{ row, index }">
						<a @click="edit(row)">编辑</a>
						<Divider type="vertical" />
						<a @click="lookMore(row)">详情</a>
						<!-- <a @click="del(row,'删除商品分类',index)">删除</a> -->
					</template>
				</vxe-table-column>
			</vxe-table>
			<!--            <div class="acea-row row-right page" v-if="total">-->
			<!--                <Page :total="total" :current="artFrom.page" show-elevator show-total @on-change="pageChange"-->
			<!--                      :page-size="artFrom.limit"/>-->
			<!--            </div>-->
		</Card>
		<!-- 添加 编辑表单-->
		<edit-from ref="edits" :FromData="FromData" @submitFail="userSearchs"></edit-from>
		<godown-detail ref="godownDetail" :group-list="groupList"></godown-detail>
	</div>
</template>

<script>
	import godownDetail from './godownDetail.vue'
	
	import {
		mapState
	} from 'vuex';
	import {
		getGodownList,
		getUserInfo,
		createGodown
	} from "@/api/erp";
	import {
		productListApi,
		productCreateApi,
		productEditApi,
		setShowApi,
		treeListApi
	} from '@/api/product';
	import editFrom from '../../../components/from/from';
	import Setting from '@/setting';
	export default {
		name: 'product_productClassify',
		components: {
			editFrom,
			godownDetail
		},
		data() {
			return {
				groupList: [],
				roterPre: Setting.roterPre,
				columns1: [{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "仓库名称",
						key: "title",
						minWidth: 90,
					},
					{
						title: "上级编号",
						key: "pid",
						minWidth: 90,
					},
					{
						title: "省市区",
						slot: "pca",
						minWidth: 90,
					},
					{
						title: "详细地址",
						key: "detailed_address",
						minWidth: 90,
					},
					{
						title: "经纬度",
						slot: "ln",
						minWidth: 90,
					},
					{
						title: "是否自营",
						slot: "self_support",
						minWidth: 90,
					},
					{
						title: "是否显示",
						slot: "is_show",
						minWidth: 90,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						width: 200,
					},
				],
				treeSelect: [],
				FromData: null,
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24
				},
				loading: false,
				artFrom: {
					// pid: 0,
					is_show: '-1',
					page: 1,
					cate_name: '',
					limit: 10000,
					id: 0
				},
				total: 0,
				tableData: []
			}
		},
		computed: {
			...mapState('admin/layout', [
				'isMobile'
			]),
			...mapState('admin/userLevel', [
				'categoryId'
			]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'right';
			}
		},
		mounted() {
			this.goodsCategory();
			this.getList();
		},
		methods: {
			lookMore(row) {
				this.$refs.godownDetail.modals = true;
				this.$refs.godownDetail.id = row.id
				this.$refs.godownDetail.activeName = "position";
				this.$refs.godownDetail.getGodownInfo(row.id);
			},
			// 商品分类；
			goodsCategory() {
				treeListApi(0).then(res => {
					this.treeSelect = res.data;
				}).catch(res => {
					this.$Message.error(res.msg);
				})
			},
			// 列表
			getList() {
				this.loading = true;
				this.artFrom.is_show = this.artFrom.is_show || '';
				getGodownList(this.artFrom).then(async res => {
					let data = res.data
					this.tableData = data.data;
					this.total = data.count;
					this.loading = false;
				}).catch(res => {
					this.loading = false;
					this.$Message.error(res.msg);
				})
			},
			loadChildrenMethod({
				row
			}) {
				return new Promise((resolve, reject) => {
					productListApi({
						pid: row.id
					}).then(res => {
						let arr = res.data.list;
						resolve(arr);
					})
				})
			},
			pageChange(index) {
				this.artFrom.page = index;
				this.getList();
			},
			// 添加
			addClass() {
				this.$router.push({ path: this.roterPre + "/erp/add_godown/" + 0 });
			},
			// 编辑
			edit(row) {
				this.$router.push({ path: this.roterPre + "/erp/add_godown/" + row.id });
			},
			findSupId(data, supplierId, res) {
				var fun = function(i, n) {
					if (i && i.length > 0) {
						for (let v in i) {
							if (i[v].id == n) {
								i[v].cate_name = res.data.cate_name
								i[v].is_show = res.data.is_show
								i[v].sort = res.data.sort
								i[v].pic = res.data.pic
								return
							} else {
								if (i[v].children && i[v].children.length > 0) {
									fun(i[v].children, n)
								}
							}
						}
					}
				}
				fun(data, supplierId);
			},

			// 修改状态
			onchangeIsShow(row) {
				// let data = {
				// 	id: row.id,
				// 	is_show: row.is_show
				// }
				createGodown(row.id,row).then(async res => {
					this.$Message.success(res.msg);
					// this.artFrom.pid = 0;
					this.getList()
				}).catch(res => {
					this.$Message.error(res.msg);
				})
			},
			// 下拉树
			handleCheckChange(data) {
				let value = ''
				let title = ''
				this.list = []
				this.artFrom.pid = 0;
				data.forEach((item, index) => {
					value += `${item.id},`
					title += `${item.title},`
				});
				value = value.substring(0, value.length - 1)
				title = title.substring(0, title.length - 1)
				this.list.push({
					value,
					title
				});
				this.artFrom.pid = value;
				this.getList();
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `product/category/${row.id}`,
					method: 'DELETE',
					ids: ''
				};
				this.$modalSure(delfromData).then((res) => {
					this.$Message.success(res.msg);
					this.artFrom.pid = 0;
					this.getList();
					this.goodsCategory();
				}).catch(res => {
					this.$Message.error(res.msg);
				});
			},
			// 表格搜索
			userSearchs() {
				// this.artFrom.pid = 0;
				this.artFrom.page = 1;
				this.getList();
			}
		}
	}
</script>
<style scoped lang="stylus">
	.treeSel>>>.ivu-select-dropdown-list {
		padding 0 10px !important box-sizing border-box
	}
	.tabBox_img {
		width 36px height 36px border-radius:4px cursor pointer img {
			width 100% height 100%
		}
	}
	/deep/.ivu-input {
		font-size 14px !important
	}
</style>