<template>
	<!-- 门店-门店订单 -->
	<div>
		<Card :bordered="false" dis-hover class="mt15 ivu-mt" :padding="0">
			<div class="new_card_pd">
				<!-- 查询条件 -->
				<Form ref="orderData" :model="orderData" :label-width="labelWidth" :label-position="labelPosition"
					class="tabform" inline @submit.native.prevent>
					<FormItem label="选择门店：">
						<Select v-model="orderData.store_id" clearable filterable @on-change="userSearchs"
							class="input-add">
							<Option v-for="item in staffData" :value="item.id" :key="item.id">{{ item.name }}
							</Option>
						</Select>
					</FormItem>
					<FormItem label="创建时间：">
						<DatePicker :editable="false" @on-change="onchangeTime" :value="timeVal" format="yyyy/MM/dd"
							type="datetimerange" placement="bottom-start" placeholder="自定义时间" class="input-add"
							:options="options"></DatePicker>
					</FormItem>
					<FormItem v-if="currentTab == 4" label="会员类型：">
						<Select v-model="vipData.member_type" clearable @on-change="userSearchs" class="input-add">
							<Option v-for="item in treeSelect" :value="item.id" :key="item.id">{{ item.label }}</Option>
						</Select>
					</FormItem>
					<FormItem v-if="currentTab != 4" label="活动类型：">
						<Select v-model="orderData.type" class="input-add" clearable placeholder="全部">
							<Option value="0">普通订单</Option>
							<Option value="1">秒杀订单</Option>
							<Option value="2">砍价订单</Option>
							<Option value="3">拼团订单</Option>
							<Option value="4">套餐订单</Option>
							<Option value="8">预售订单</Option>
							<Option value="9">新人订单</Option>
							<Option value="10">抽奖订单</Option>
							<Option value="11">拼单订单</Option>
							<Option value="12">桌码订单</Option>
						</Select>
					</FormItem>

					<FormItem label="订单状态：">
						<Select v-model="orderData.status" class="input-add">
							<Option value="">全部</Option>
							<Option value="0">未支付</Option>
							<Option value="1">待配送</Option>
							<Option value="2">配送中</Option>
							<Option value="3">待评价</Option>
							<Option value="5">待核销</Option>
							<Option value="6">已核销</Option>
							<Option value="4">已完成</Option>
							<Option value="-4">已删除</Option>
						</Select>
					</FormItem>
					<FormItem label="订单搜索：" label-for="real_name"
						v-if="currentTab == 6 || currentTab == 7 || currentTab == 5">
						<Input placeholder="订单号/商品名称" v-model="orderData.real_name" class="input-add" />
					</FormItem>
					<FormItem label="用户搜索：" label-for="nickname" v-if="currentTab == 3 || currentTab == 4">
						<Input placeholder="请输入用户名" v-model="rechargeData.nickname" class="input-add" />
					</FormItem>
					<FormItem>
						<Button type="primary" @click="orderSearch()" class="ml75">查询</Button>
					</FormItem>
				</Form>
			</div>
		</Card>
		<Card :bordered="false" dis-hover class="mt15 ivu-mt">
			<!-- Tab栏切换 -->
			<div class="new_tab">
				<Tabs v-model="currentTab" @on-click="onClickTab">
					<TabPane label="收银台订单" name="6" />
					<TabPane label="配送订单" name="7" />
					<TabPane label="核销订单" name="5" />
					<TabPane label="充值订单" name="3" />
					<TabPane label="付费会员订单" name="4" />
				</Tabs>
			</div>
			<!-- 表格 -->
			<Table :columns="
          currentTab == 6 || currentTab == 7 || currentTab == 5
            ? columns
            : currentTab == 3
            ? rechargeColumns
            : vipColumns
        " :data="tableList" ref="table" :loading="loading" highlight-row no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果">
				<template slot-scope="{ row }" slot="order_id">
					<span v-text="row.order_id" style="display: block"></span>
					<span v-show="row.is_del === 1" class="span-del">用户已删除</span>
				</template>
				<template slot-scope="{ row }" slot="userInfo">
					<div v-if="currentTab == 6 || currentTab == 7 || currentTab == 5">
						<a @click="showUserInfo(row)" v-if="row.uid">
							{{ row.nickname }}
							<span class="ml5">/{{ row.uid }}</span>
						</a>
						<span v-else>游客<span class="ml5">/{{ row.uid }}</span></span>
					</div>
					<div class="tabBox" v-if="currentTab == 3">
						<div class="tabBox_img" v-viewer>
							<img v-lazy="row.avatar" />
						</div>
						<span class="tabBox_tit">{{ row.nickname }}</span>
					</div>
					<div class="tabBox" v-if="currentTab == 4 && row.user">
						<div class="tabBox_img" v-viewer>
							<img v-lazy="row.user.avatar" />
						</div>
						<span class="tabBox_tit">{{ row.user.nickname }}</span>
					</div>
				</template>
				<template slot-scope="{ row }" slot="info">
					<Tooltip theme="dark" max-width="300" :delay="600">
						<div class="tabBox" v-for="(val, i) in row._info" :key="i">
							<div class="tabBox_img" v-viewer>
								<img v-lazy="
                    val.cart_info.productInfo.attrInfo
                      ? val.cart_info.productInfo.attrInfo.image
                      : val.cart_info.productInfo.image
                  " />
							</div>
							<span class="info_title line1">
								<span class="font-color-red" v-if="val.cart_info.is_gift">赠品</span>
								{{ val.cart_info.productInfo.store_name + " | " }}
								{{val.cart_info.productInfo.attrInfo ? val.cart_info.productInfo.attrInfo.suk : ""}}
							</span>
							<!-- <span class="tabBox_pice"> {{ "￥" + val.cart_info.truePrice + " x " + val.cart_info.cart_num}}</span> -->
						</div>
						<div slot="content">
							<div v-for="(val, i) in row._info" :key="i">
								<p class="font-color-red" v-if="val.cart_info.is_gift">赠品</p>
								<p>{{ val.cart_info.productInfo.store_name }}</p>
								<p> {{val.cart_info.productInfo.attrInfo ? val.cart_info.productInfo.attrInfo.suk: ""}}
								</p>
								<p class="tabBox_pice">
									{{ "￥" + val.cart_info.truePrice + " x " + val.cart_info.cart_num }}</p>
							</div>
						</div>
					</Tooltip>
				</template>
				<template slot-scope="{ row }" slot="statusName">
					<Tag color="red" size="medium" v-if="row.status_name && row.status == 0">
						{{row.status_name.status_name}}</Tag>
					<Tag color="green" size="medium" v-if="row.status_name && row.status !== 0">
						{{row.status_name.status_name}}</Tag><br />
					<Tag color="orange" size="medium" v-if="!row.is_all_refund && row.refund.length">部分退款中</Tag>
					<Tag color="orange" size="medium"
						v-if="row.is_all_refund && row.refund.length && row.refund_type != 6">退款中</Tag>
					<!-- <div class="pictrue-box" v-if="row.status_name">
            <div
              v-viewer
              v-for="(item, index) in row.status_name.pics || []"
              :key="index"
            >
              <img class="pictrue mr10" v-lazy="item" :src="item" />
            </div>
          </div> -->
				</template>
				<template slot-scope="{ row }" slot="pay_price">
					{{ row.paid > 0 ? row.pay_price : 0 }}
				</template>
				<template slot-scope="{ row }" slot="action">
					<span v-if="currentTab == 6">
						<a @click="detail(row)">订单详情</a>
					</span>
					<span v-if="currentTab == 7">
						<a :disabled="openErp" v-if="row._status == 2" @click="distribution(row)">分配</a>
						<Divider v-if="row._status == 2" type="vertical" />
						<a @click="detail(row)">详情</a>
						<!-- <Divider type="vertical" /> -->
					</span>
					<span v-if="currentTab == 5">
						<a :disabled="openErp" v-if="row._status == 11" @click="distribution(row)">分配</a>
						<Divider v-if="row._status == 11" type="vertical" />
						<a @click="detail(row)">详情</a>
					</span>
					<a @click="remark(row)" v-if="currentTab == 3 || currentTab == 4">备注</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="orderData.page" show-elevator show-total @on-change="pageChange"
					:page-size="orderData.limit" />
			</div>
		</Card>
		<Distribution ref="distshow"></Distribution>
		<!-- 用户详情-->
		<user-details ref="userDetails" fromType="order"></user-details>
		<!-- 编辑 配送信息表单数据 退款 退积分 不退款-->
		<edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from>
		<!-- 详情 -->
		<details-from ref="detailss" :orderDatalist="orderDatalist" :orderId="orderId" :row-active="rowActive"
			:currentTab="currentTab" :openErp="openErp"></details-from>
		<!-- 备注 -->
		<order-remark ref="remarks" :orderId="orderId" @submitFail="submitFail"></order-remark>
		<!-- 记录 -->
		<order-record ref="record"></order-record>
		<!-- 发送货 -->
		<order-send ref="send" :orderId="orderId" :status="status" :pay_type="pay_type" @submitFail="submitFail">
		</order-send>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import Distribution from "./components/distribution.vue";
	import expandRow from "./components/tableExpand.vue";
	import userDetails from "@/pages/user/list/handle/userDetails";
	import editFrom from "@/components/from/from";
	import orderSend from "./components/orderSend";
	import detailsFrom from "./components/orderDetails";
	import orderRecord from "./components/orderRecord";
	import orderRemark from "./components/orderRemark";
	import {
		orderList,
		orderChart,
		orderHeader,
		orderRecharge,
		orderVip,
		getOrdeDatas, //编辑表单数据
		getDistribution,
		writeUpdate,
		getDataInfo,
		orderExport,
		staffListInfo,
	} from "@/api/store";
	import {
		erpConfig
	} from "@/api/erp";
	import timeOptions from "@/utils/timeOptions";
	import Setting from '@/setting'
	// import {
	// 	staffListInfo
	// } from '@/api/staff';
	export default {
		name: "index",
		components: {
			userDetails,
			editFrom,
			detailsFrom,
			orderRecord,
			orderRemark,
			orderSend,
			expandRow,
			Distribution,
		},
		data() {
			return {
				roterPre: Setting.roterPre,
				openErp: false,
				distshow: false, //分配的弹窗
				delfromData: {},
				pay_type: "",
				status: 0, //发货状态判断
				FromData: null,
				orderDatalist: null,
				orderId: 0,
				treeSelect: [{
						id: "free",
						label: "试用",
					},
					{
						id: "month",
						label: "月卡",
					},
					{
						id: "quarter",
						label: "季卡",
					},
					{
						id: "year",
						label: "年卡",
					},
					{
						id: "ever",
						label: "永久",
					},
					{
						id: "card",
						label: "卡密激活",
					},
				],
				staffData: [],
				tablists: {},
				orderChartType: {},
				options: timeOptions,
				timeVal: [],
				// 订单列表
				orderData: {
					page: 1,
					limit: 10,
					type: '',
					status: "",
					time: "",
					real_name: "",
					store_id: "",
					order_type: 6,
				},
				// 充值订单搜索
				rechargeData: {
					nickname: "",
					limit: 15,
				},
				// 会员订单搜索
				vipData: {
					member_type: "",
					limit: 15,
				},
				currentTab: "6",
				tableList: [],
				total: 0,
				loading: false,
				rechargeColumns: [{
						title: "ID",
						key: "id",
						width: 60,
					},
					{
						title: "订单号",
						key: "order_id",
						minWidth: 180,
					},
					{
						title: "用户信息",
						slot: "userInfo",
						minWidth: 160,
					},
					{
						title: "支付金额",
						key: "price",
						minWidth: 110,
					},
					{
						title: "充值类型",
						key: "_recharge_type",
						minWidth: 100,
					},
					{
						title: "支付时间",
						key: "_pay_time",
						minWidth: 130,
					},
					{
						title: "关联店员",
						key: "_recharge_type",
						minWidth: 100,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						minWidth: 200,
						align: "center",
					},
				],
				vipColumns: [{
						title: "订单号",
						key: "order_id",
						minWidth: 180,
					},
					{
						title: "用户信息",
						slot: "userInfo",
						minWidth: 180,
					},
					{
						title: "会员类型",
						key: "member_type",
						minWidth: 100,
					},
					{
						title: "有效期限（天）",
						minWidth: 100,
						render: (h, params) => {
							return h(
								"span",
								params.row.vip_day === -1 ? "永久" : params.row.vip_day
							);
						},
					},
					{
						title: "支付金额",
						key: "pay_price",
						minWidth: 100,
					},
					{
						title: "支付方式",
						key: "pay_type",
						minWidth: 100,
					},
					{
						title: "购买时间",
						key: "pay_time",
						minWidth: 130,
					},
					{
						title: "关联店员",
						key: "pay_time",
						minWidth: 130,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						minWidth: 200,
						align: "center",
					},
				],
				columns: [{
						type: "expand",
						width: 30,
						render: (h, params) => {
							return h(expandRow, {
								props: {
									row: params.row,
								},
							});
						},
					},
					{
						title: "订单号",
						slot: "order_id",
						minWidth: 160,
					},
					{
						title: "用户信息",
						slot: "userInfo",
						minWidth: 120,
					},
					{
						title: "商品信息",
						slot: "info",
						minWidth: 350,
					},
					{
						title: "实际支付",
						slot: "pay_price",
						minWidth: 120,
					},
					{
						title: "支付方式",
						key: "pay_type_name",
						minWidth: 120,
					},
					{
						title: "收银店员",
						key: "clerk_name",
						minWidth: 120,
					},
					{
						title: "下单时间",
						key: "add_time",
						minWidth: 150,
					},
					{
						title: "订单状态",
						slot: "statusName",
						minWidth: 120,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						minWidth: 200,
						align: "center",
					},
				],
				rowActive: {},
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getErpConfig();
			this.getTabs();
			this.getChart();
			this.staffList();
			this.getList();
		},
		mounted() {},
		methods: {
			getErpConfig() {
				erpConfig().then(res => {
					this.openErp = res.data.open_erp;
				}).catch(err => {
					this.$Message.error(err.msg);
				})
			},
			remark(row) {
				this.orderId = row.id;
				this.$refs.remarks.modals = true;
				switch (this.currentTab) {
					case "3":
					case "4":
						this.$refs.remarks.currentTab(this.currentTab, row.remarks);
						break;
					default:
						this.$refs.remarks.currentTab(this.currentTab, row.remark);
				}
			},
			detail(row) {
				this.orderId = row.id;
				this.getData(row.id);
				this.rowActive = row;
			},
			distribution(row) {
				this.$refs.distshow.modals = true;
				this.$refs.distshow.getList(row.id);
			},
			record(row) {
				this.orderId = row.id;
				this.$refs.record.modals = true;
				this.$refs.record.getList(row.id);
			},
			// 查看子订单
			splitOrderDetail(row) {
				this.$router.push({
					path: this.roterPre + "split_list",
					query: {
						id: row.id,
					},
				});
			},
			// 删除单条订单
			delOrder(row, data) {
				if (row.is_del === 1) {
					this.$modalSure(data)
						.then((res) => {
							this.$Message.success(res.msg);
							this.getList();
						})
						.catch((res) => {
							this.$Message.error(res.msg);
						});
				} else {
					const title = "错误！";
					const content =
						"<p>您选择的的订单存在用户未删除的订单，无法删除用户未删除的订单！</p>";
					this.$Modal.error({
						title: title,
						content: content,
					});
				}
			},
			// 获取详情表单数据
			getData(id, type) {
				getDataInfo(id)
					.then(async (res) => {
						if (!type) {
							this.$refs.detailss.modals = true;
						}
						this.$refs.detailss.activeName = "detail";
						this.orderDatalist = res.data;
						if (this.orderDatalist.orderInfo.refund_reason_wap_img) {
							try {
								this.orderDatalist.orderInfo.refund_reason_wap_img = JSON.parse(
									this.orderDatalist.orderInfo.refund_reason_wap_img
								);
							} catch (e) {
								this.orderDatalist.orderInfo.refund_reason_wap_img = [];
							}
						}
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 立即核销
			bindWrite(row) {
				let self = this;
				this.$Modal.confirm({
					title: "提示",
					content: "确定要核销该订单吗？",
					cancelText: "取消",
					closable: true,
					maskClosable: true,
					onOk: function() {
						writeUpdate(row.order_id).then((res) => {
							self.$Message.success(res.msg);
							self.getList();
						});
					},
					onCancel: () => {},
				});
			},
			// 配送信息表单数据
			delivery(row) {
				getDistribution(row.id)
					.then(async (res) => {
						this.FromData = res.data;
						this.$refs.edits.modals = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 编辑
			edit(row) {
				this.getOrderData(row.id);
			},
			// 获取编辑表单数据
			getOrderData(id) {
				getOrdeDatas(id)
					.then(async (res) => {
						if (res.data.status === false) {
							return this.$authLapse(res.data);
						}
						this.$authLapse(res.data);
						this.FromData = res.data;
						this.$refs.edits.modals = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 修改成功(编辑只有未支付时出现)
			submitFail() {
				this.status = 0;
				if (this.currentTab == 3) {
					this.getRecharge();
				} else if (this.currentTab == 4) {
					this.getVipOrder();
				} else {
					this.getList();
					this.getData(this.orderId, 1);
				}
			},
			// 发送货
			sendOrder(row) {
				this.$store.commit("admin/order/setSplitOrder", row.total_num);
				this.$refs.send.modals = true;
				this.orderId = row.id;
				this.status = row._status;
				this.pay_type = row.pay_type;
				this.$refs.send.getList();
				this.$refs.send.getDeliveryList();
				this.$nextTick((e) => {
					this.$refs.send.getCartInfo(row._status, row.id);
				});
			},
			// 详情
			showUserInfo(row) {
				this.$refs.userDetails.modals = true;
				this.$refs.userDetails.activeName = "info";
				this.$refs.userDetails.getDetails(row.uid);
			},
			// 初始化数据
			clearData() {
				this.orderData = {
					page: 1,
					limit: 15,
					type: '',
					status: "",
					time: "",
					real_name: "",
					store_id: "",
					order_type: 6,
				};
				this.rechargeData = {
					nickname: "",
					limit: 15,
				};
				this.vipData = {
					member_type: "",
					limit: 15,
				};
			},
			// 店员列表
			staffList() {
				let data = {
					page: 0,
					limit: 0,
				};
				staffListInfo()
					.then((res) => {
						this.staffData = res.data;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			// 获取门店订单头部统计
			getTabs() {
				orderHeader()
					.then((res) => {
						this.tablists = res.data;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			// 订单头部数据
			getChart() {
				orderChart({
						type: this.currentTab
					})
					.then((res) => {
						this.orderChartType = res.data;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			// 编辑
			edit(row) {
				this.getOrderData(row.id);
			},
			//点击切换头部
			onClickTab() {
				this.clearData();
				this.orderData.order_type = this.currentTab;
				this.orderData.page = 1;
				this.timeVal = [];
				this.getChart();
				this.searchList();
			},
			// 不同类型订单调用列表；
			searchList() {
				if (this.currentTab == 3) {
					this.getRecharge();
				} else if (this.currentTab == 4) {
					this.getVipOrder();
				} else {
					this.getList();
				}
			},
			// 搜索店员或店员选择
			userSearchs() {
				this.orderData.page = 1;
				this.searchList();
			},
			// 切换订单状态
			selectStatus() {
				this.orderData.page = 1;
				this.getList();
			},
			// 付费会员订单列表
			getVipOrder() {
				this.loading = true;
				this.tableList = [];
				this.vipData.name = this.rechargeData.nickname;
				this.vipData.add_time = this.orderData.time;
				this.vipData.store_id = this.orderData.store_id;
				this.vipData.page = this.orderData.page;
				orderVip(this.vipData)
					.then((res) => {
						let data = res.data;
						this.tableList = data.list;
						this.total = data.count;
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
						this.$Message.error(err.msg);
					});
			},
			// 充值订单
			getRecharge() {
				this.loading = true;
				this.tableList = [];
				this.rechargeData.data = this.orderData.time;
				this.rechargeData.store_id = this.orderData.store_id;
				this.rechargeData.page = this.orderData.page;
				orderRecharge(this.rechargeData)
					.then((res) => {
						let data = res.data;
						this.tableList = data.list;
						this.total = data.count;
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
						this.$Message.error(err.msg);
					});
			},
			// 一般订单
			getList() {
				this.loading = true;
				this.tableList = [];
				orderList(this.orderData)
					.then((res) => {
						let data = res.data;
						data.data.forEach((item) => {
							if (item.id == this.orderId) {
								this.rowActive = item;
							}
						});
						this.tableList = data.data;
						this.total = data.count;
						this.loading = false;
					})
					.catch((err) => {
						this.loading = false;
						this.$Message.error(err.msg);
					});
			},
			pageChange(index) {
				this.orderData.page = index;
				this.searchList();
			},
			// 搜索
			orderSearch() {
				this.orderData.page = 1;
				this.searchList();
			},
			// 具体日期
			onchangeTime(e) {
				this.timeVal = e;
				this.orderData.time = this.timeVal[0] ? this.timeVal.join("-") : "";
				this.orderData.page = 1;
				if (!e[0]) {
					this.orderData.time = "";
				}
				this.searchList();
			},
			// 选择时间
			selectChange() {
				this.orderData.page = 1;
				this.timeVal = [];
				this.searchList();
			},
			getExcelData(excelData) {
				return new Promise((resolve, reject) => {
					let type = 1;
					if (
						this.currentTab == 6 ||
						this.currentTab == 7 ||
						this.currentTab == 5
					) {
						type = 1;
					} else if (this.currentTab == 3) {
						type = 2;
					} else {
						type = 3;
					}
					orderExport(excelData, type).then((res) => {
						return resolve(res.data);
					});
				});
			},
		},
	};
</script>

<style lang="stylus" scoped>
	.input-add {
		width: 250px;
	}

	.span-del {
		color: #ed4014;
		display: block
	}

	.ml75 {
		margin-left: -75px;
	}

	.cardCon {
		/deep/.ivu-card-body {
			padding: 14px 20px 0 0px !important;
		}

		/deep/.ivu-tabs-bar {
			margin-bottom: 0 !important;
			border-bottom: 1px solid #E9E9E9 !important;
		}
	}

	.pictrue-box {
		display: flex;
		align-item: center;
	}

	.pictrue {
		width: 25px;
		height: 25px;
	}

	img {
		height: 36px;
		display: block;
	}

	.tabBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;

		.tabBox_img {
			width: 30px;
			height: 30px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.tabBox_tit {
			width: 60%;
			height: 46px;
			line-height: 23px;
			font-size: 12px !important;
			margin: 0 2px 0 10px;
			letter-spacing: 1px;
			padding: 5px 0;
			box-sizing: border-box;
		}

		.info_title {
			width: 290px;
			height: 30px;
			line-height: 30px;
			font-size: 12px !important;
			margin: 0 2px 0 10px;
			letter-spacing: 1px;
			box-sizing: border-box;
		}
	}

	.tabBox+.tabBox {
		margin-top: 5px;
	}

	.trip {
		color: orange;
	}

	.new_tab {
		>>>.ivu-tabs-nav .ivu-tabs-tab {
			padding: 4px 16px 20px !important;
			font-weight: 500;
		}
	}
</style>