<template>
	<div>
		<Table :columns="columns" :data="orderList" ref="table" :loading="loading" highlight-row no-data-text="暂无数据"
			no-filtered-data-text="暂无筛选结果" @on-select="handleSelectRow" @on-select-cancel="handleCancelRow"
			@on-select-all="handleSelectAll" @on-select-all-cancel="handleSelectAll" class="orderData mt25">
			<template slot-scope="{ row, index }" slot="order_id">
				<div>{{ row.order_id }}</div>
				<div class="pink_name">{{ row.pink_name }}</div>
				<span v-show="row.is_del === 1" style="color: #ed4014; display: block">用户已删除</span>
			</template>
			<template slot-scope="{ row, index }" slot="nickname">
				<span class="nickname">{{ row.nickname }}</span> |
				<span class="uid">{{ row.uid }}</span>
			</template>
			<template slot-scope="{ row, index }" slot="pay_price">
				<span>{{ row.paid ? row.pay_price : '未支付' }}</span>
			</template>
			<template slot-scope="{ row, index }" slot="info">
				<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="tabBox_tit">{{ 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>
			</template>
			<template slot-scope="{ row, index }" slot="statusName">
				<div v-html="row.status_name.status_name" class="pt5"></div>
				<div v-if="!row.is_all_refund && row.refund.length" class="trip">部分退款中</div>
				<div v-if="row.refund_status == 0 && row.is_all_refund && row.refund.length && row.refund_type != 6"
					class="trip">
					退款中
				</div>
				<div class="img">
					<div v-viewer v-if="row.status_name.pics" class="pictrue"
						v-for="(item, index) in row.status_name.pics || []" :key="index">
						<img v-lazy="item" :src="item" />
					</div>
				</div>
			</template>
			<template slot-scope="{ row, index }" slot="action">
				<a @click="edit(row)" v-if="row._status === 1 && row.is_del !== 1">编辑</a>
				<a @click="sendOrder(row)" v-if="
            (row.status === 4 || row._status === 2 || row._status === 8) &&
            row.shipping_type === 1 &&
            (row.pinkStatus === null || row.pinkStatus === 2) &&
            row.is_del !== 1
          ">发送货</a>
				<a @click="delivery(row)" v-if="row._status === 4 && !row.split.length">配送信息</a>
				<a @click="bindWrite(row)"
					v-if="row.shipping_type == 2 && row.status == 0 && row.paid == 1 && row.refund_status === 0">立即核销</a>
				<Divider type="vertical"
					v-if="(row._status === 8 || row.status === 0 || row.status === 4) && row.split.length && row.is_del !== 1" />
				<a @click="splitOrderDetail(row)" v-if="row.split.length && row.is_del !== 1">查看子订单</a>
				<Divider type="vertical" v-if="
            (row._status === 2 && row.shipping_type === 1 && row.pinkStatus === 2) ||
            (row.split.length && row.is_del !== 1)
          " />
				<Divider type="vertical" v-if="
            row.refund_type !== 4 &&
            row.refund_type !== 5 &&
            (row._status === 1 ||
              row._status === 3 ||
              (row._status === 2 && !row.pinkStatus) ||
              row._status === 4 ||
              (row.shipping_type == 2 && row.status == 0 && row.paid == 1 && row.refund_status === 0)) &&
            row.is_del !== 1
          " />
				<template>
					<Dropdown @on-click="changeMenu(row, $event)" :transfer="true">
						<a href="javascript:void(0)">更多
							<Icon type="ios-arrow-down"></Icon>
						</a>
						<DropdownMenu slot="list">
							<DropdownItem name="1" ref="ones"
								v-show="row._status === 1 && row.paid === 0 && row.pay_type === 'offline' && row.is_del !== 1">
								确认付款</DropdownItem>
							<DropdownItem name="2">订单详情</DropdownItem>
							<DropdownItem name="3">订单记录</DropdownItem>
							<DropdownItem name="11" v-show="row._status >= 3 && row.express_dump">电子面单打印</DropdownItem>
							<DropdownItem name="10" v-show="row._status >= 2">小票打印</DropdownItem>
							<DropdownItem name="4" v-show="
                  row._status !== 1 ||
                  (row._status === 3 && row.use_integral > 0 && row.use_integral >= row.back_integral)
                ">订单备注</DropdownItem>
							<!-- <DropdownItem
                name="5"
                v-show="
                  row._status !== 1 &&
                  (parseFloat(row.pay_price) > parseFloat(row.refund_price) ||
                    (row.pay_price == 0 &&
                      [0, 1].indexOf(row.refund_status) !== -1))
                "
                >立即退款</DropdownItem
              > -->
							<!--                            <DropdownItem name="6"  v-show='row._status !==1 && (row.use_integral > 0 && row.use_integral >= row.back_integral) '>退积分</DropdownItem>-->
							<!--                            <DropdownItem name="7"  v-show='row._status === 3'>不退款</DropdownItem>-->
							<DropdownItem name="8" v-show="row._status === 4">已收货</DropdownItem>
							<DropdownItem name="9">删除订单</DropdownItem>
							<DropdownItem name="12" v-show="row.kuaidi_label">快递面单打印</DropdownItem>
						</DropdownMenu>
					</Dropdown>
				</template>
			</template>
		</Table>
		<div class="acea-row row-right page">
			<Page :total="page.total" :current="page.pageNum" show-elevator show-total @on-change="pageChange"
				:page-size="page.pageSize" @on-page-size-change="limitChange" />
		</div>
		<!-- 编辑 退款 退积分 不退款-->
		<edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from>
		<!-- 详情 -->
		<details-from ref="details" :orderDatalist="orderDatalist" :orderId="orderId"></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" :virtual_type="virtual_type"
			@submitFail="submitFail" @clearId="
        () => {
          orderId = 0;
        }
      "></order-send>
	</div>
</template>
<script>
	import expandRow from './tableExpand.vue';
	import printJS from 'print-js';
	import {
		orderList,
		getOrdeDatas,
		getDataInfo,
		getRefundFrom,
		getnoRefund,
		refundIntegral,
		getDistribution,
		writeUpdate,
	} from '@/api/order';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import editFrom from '../../../../components/from/from';
	import detailsFrom from '../handle/orderDetails';
	import orderRemark from '../handle/orderRemark';
	import orderRecord from '../handle/orderRecord';
	import orderSend from '../handle/orderSend';

	export default {
		name: 'table_list',
		components: {
			expandRow,
			editFrom,
			detailsFrom,
			orderRemark,
			orderRecord,
			orderSend,
		},
		data() {
			return {
				delfromData: {},
				modal: false,
				orderList: [],
				orderCards: [],
				loading: false,
				orderId: 0,
				total_num: 0,
				virtual_type: 0,
				status: 0,
				pay_type: '',
				columns: [{
						type: 'expand',
						width: 30,
						render: (h, params) => {
							return h(expandRow, {
								props: {
									row: params.row,
								},
							});
						},
					},
					{
						type: 'selection',
						width: 40,
						align: 'center',
					},
					{
						title: '订单号 | 类型',
						align: 'center',
						slot: 'order_id',
						width: 200,
					},
					{
						title: '用户昵称 | ID',
						slot: 'nickname',
						align: 'center',
						width: 150,
					},
					{
						title: '商品信息',
						slot: 'info',
						minWidth: 330,
					},
					{
						title: '实际支付',
						slot: 'pay_price',
						align: 'center',
						width: 100,
					},
					{
						title: '支付方式',
						key: 'pay_type_name',
						width: 80,
					},
					{
						title: '支付时间',
						key: '_pay_time',
						align: 'center',
						minWidth: 75,
						maxWidth: 160,
					},
					{
						title: '订单状态',
						key: 'statusName',
						slot: 'statusName',
						align: 'center',
						width: 100,
					},
					{
						title: '操作',
						slot: 'action',
						fixed: 'right',
						width: 170,
						align: 'center',
					},
				],
				page: {
					total: 0, // 总条数
					pageNum: 1, // 当前页
					pageSize: 10, // 每页显示条数
				},
				data: [],
				FromData: null,
				orderDatalist: null,
				// modalTitleSs: '',
				selectedIds: new Set(), //选中合并项的id
			};
		},
		computed: {
			...mapState('order', ['orderPayType', 'orderStatus', 'orderTime', 'orderNum', 'fieldKey', 'orderType']),
		},
		mounted() {},
		created() {
			this.getList();
		},
		watch: {
			orderType: function() {
				this.page.pageNum = 1;
				this.getList();
			},
		},
		methods: {
			...mapMutations('order', ['getIsDel', 'getisDelIdListl']),
			// 操作
			changeMenu(row, name) {
				this.orderId = row.id;
				switch (name) {
					case '1':
						this.delfromData = {
							title: '修改立即支付',
							url: `/order/pay_offline/${row.id}`,
							method: 'post',
							ids: '',
						};
						this.$modalSure(this.delfromData)
							.then((res) => {
								this.$Message.success(res.msg);
								this.$emit('changeGetTabs');
								this.getList();
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
						// this.modalTitleSs = '修改立即支付';
						break;
					case '2':
						this.getData(row.id);
						break;
					case '3':
						this.$refs.record.modals = true;
						this.$refs.record.getList(row.id);
						break;
					case '4':
						this.$refs.remarks.modals = true;
						this.$refs.remarks.formValidate.remark = row.remark;
						break;
					case '5':
						this.getRefundData(row.id);
						break;
					case '6':
						this.getRefundIntegral(row.id);
						break;
					case '7':
						this.getNoRefundData(row.id);
						break;
					case '8':
						this.delfromData = {
							title: '修改确认收货',
							url: `/order/take/${row.id}`,
							method: 'put',
							ids: '',
						};
						this.$modalSure(this.delfromData)
							.then((res) => {
								this.$Message.success(res.msg);
								this.getList();
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
						// this.modalTitleSs = '修改确认收货';
						break;
					case '10':
						this.delfromData = {
							title: '立即打印订单',
							info: '您确认打印此订单吗?',
							url: `/order/print/${row.id}`,
							method: 'get',
							ids: '',
						};
						this.$modalSure(this.delfromData)
							.then((res) => {
								this.$Message.success(res.msg);
								this.$emit('changeGetTabs');
								this.getList();
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
						break;
					case '11':
						this.delfromData = {
							title: '立即打印电子面单',
							info: '您确认打印此电子面单吗?',
							url: `/order/order_dump/${row.id}`,
							method: 'get',
							ids: '',
						};
						this.$modalSure(this.delfromData)
							.then((res) => {
								this.$Message.success(res.msg);
								this.getList();
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
						break;
					case '12':
						this.printImg(row.kuaidi_label);
						break;
					default:
						this.delfromData = {
							title: '删除订单',
							url: `/order/del/${row.id}`,
							method: 'DELETE',
							ids: '',
						};
						// this.modalTitleSs = '删除订单';
						this.delOrder(row, this.delfromData);
				}
			},
			printImg(url) {
				printJS({
					printable: url,
					type: 'image',
					documentTitle: '快递信息',
					style: `img{
          width: 100%;
          height: 476px;
        }`,
				});
			},
			// 立即支付 /确认收货//删除单条订单
			submitModel() {
				this.getList();
			},
			pageChange(index) {
				this.page.pageNum = index;
				this.getList();
			},
			limitChange(limit) {
				this.page.pageSize = limit;
				this.getList();
			},
			// 订单列表
			getList(res) {
				this.page.pageNum = res === 1 ? 1 : this.page.pageNum;
				this.loading = true;
				orderList({
						page: this.page.pageNum,
						limit: this.page.pageSize,
						status: this.orderStatus,
						pay_type: this.orderPayType,
						data: this.orderTime,
						real_name: this.orderNum,
						field_key: this.fieldKey,
						type: this.orderType === 0 ? '' : this.orderType,
					})
					.then(async (res) => {
						let data = res.data;
						this.orderList = data.data;
						this.orderCards = data.stat;
						this.page.total = data.count;
						this.$nextTick(() => {
							//确保dom加载完毕
							this.setChecked();
						});
						this.$emit('on-changeCards', data.stat);
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			// 全选
			// onSelectTab (selection) {
			//     let isDel = selection.some(item => {
			//         return item.is_del === 1
			//     });
			//     this.getIsDel(isDel);
			//     this.getisDelIdListl(selection);
			// },
			//全选和取消全选时触发
			handleSelectAll(selection) {
				if (selection.length === 0) {
					//获取table的数据；
					let data = this.$refs.table.data;
					data.forEach((item) => {
						if (this.selectedIds.has(item.id)) {
							this.selectedIds.delete(item.id);
						}
					});
				} else {
					selection.forEach((item) => {
						this.selectedIds.add(item.id);
					});
				}
				this.isDel(selection);
				this.$nextTick(() => {
					//确保dom加载完毕
					this.setChecked();
				});
			},
			//  选中某一行
			handleSelectRow(selection, row) {
				this.isDel(selection);
				this.selectedIds.add(row.id);
				this.$nextTick(() => {
					//确保dom加载完毕
					this.setChecked();
				});
			},
			//  取消某一行
			handleCancelRow(selection, row) {
				this.isDel(selection);
				this.selectedIds.delete(row.id);
				this.$nextTick(() => {
					//确保dom加载完毕
					this.setChecked();
				});
			},
			setChecked() {
				//将new Set()转化为数组
				let ids = [...this.selectedIds];
				this.getisDelIdListl(ids);
				// 找到绑定的table的ref对应的dom，找到table的objData对象，objData保存的是当前页的数据
				let objData = this.$refs.table.objData;
				for (let index in objData) {
					if (this.selectedIds.has(objData[index].id)) {
						objData[index]._isChecked = true;
					}
				}
			},
			isDel(selection) {
				if (selection.findIndex((target) => target.is_del === 0) == -1) {
					this.getIsDel(1);
				} else {
					this.getIsDel(0);
				}
			},
			// 编辑
			edit(row) {
				this.getOrderData(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,
					});
				}
			},
			splitOrderDetail(row) {
				this.$router.push({
					path: 'split_list',
					query: {
						id: 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);
					});
			},
			// 获取详情表单数据
			getData(id) {
				getDataInfo(id)
					.then(async (res) => {
						this.$refs.details.modals = true;
						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);
					});
			},
			// 修改成功
			submitFail() {
				this.getList();
				this.$emit('changeGetTabs');
			},
			// 获取退款表单数据
			getRefundData(id) {
				this.$modalForm(getRefundFrom(id)).then(() => {
					this.getList();
					this.$emit('changeGetTabs');
				});
			},
			// 获取退积分表单数据
			getRefundIntegral(id) {
				refundIntegral(id)
					.then(async (res) => {
						this.FromData = res.data;
						this.$refs.edits.modals = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 不退款表单数据
			getNoRefundData(id) {
				this.$modalForm(getnoRefund(id)).then(() => {
					this.getList();
					this.$emit('changeGetTabs');
				});
			},
			// 发送货
			sendOrder(row) {
				this.$refs.send.total_num = row.total_num;
				this.$refs.send.modals = true;
				this.orderId = row.id;
				this.status = row._status;
				this.pay_type = row.pay_type;
				this.virtual_type = row.virtual_type;
				this.$refs.send.getList();
				this.$refs.send.getDeliveryList();
				this.$nextTick((e) => {
					this.$refs.send.getCartInfo(row._status, row.id);
				});
			},
			// 配送信息表单数据
			delivery(row) {
				getDistribution(row.id)
					.then(async (res) => {
						this.FromData = res.data;
						this.$refs.edits.modals = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			change(status) {},
			// 数据导出；
			exportData: function() {
				this.$refs.table.exportCsv({
					filename: '商品列表',
				});
			},
			// 核销订单
			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();
							})
							.catch((res) => {
								self.$Message.error(res.msg);
							});
					},
				});
			},
		},
	};
</script>

<style scoped lang="stylus">
	img {
		height: 36px;
		display: block;
	}

	.tabBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 2px;

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

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

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

	.orderData>>>.ivu-table-cell {
		padding-left: 0 !important;
	}

	.vertical-center-modal {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nickname {}

	.uid {
		color: #2d8cf0;
	}

	.pink_name {
		color: #666;
	}

	.img {
		display: flex;
		flex-wrap: wrap;

		img {
			width: 30px;
			height: 30px;
			margin-right: 3px;
		}
	}
</style>