<template>
	<!-- 订单-售后订单 -->
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
				<!-- 筛选条件 -->
				<Form ref="pagination" inline :model="pagination" :label-width="labelWidth"
					:label-position="labelPosition" @submit.native.prevent>
					<FormItem label="订单状态：">
						<Select v-model="pagination.status" class="input-add">
							<Option v-for="(item, index) in num" :value="item.value" :key="index">{{ item.name }}
							</Option>
						</Select>
					</FormItem>
					<FormItem label="订单搜索：" label-for="title">
						<Input v-model="pagination.order_id" placeholder="请输入订单号" class="input-add mr14" />
						<Button type="primary" @click="orderSearch()">查询</Button>
					</FormItem>
				</Form>
			</div>
		</Card>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 售后订单表格 -->
			<Table :columns="thead" :data="tbody" 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 && row.delete_time == null" class="span-del">用户已删除</span>
				</template>
				<template slot-scope="{ row }" slot="nickname">
					<div>用户名：{{ row.real_name }}</div>
					<div>手机号：{{ row.user_phone }}</div>
				</template>
				<template slot-scope="{ row, index }" slot="kf">
					<span class="tabBox_pice">{{showName(row.work_member_id)}}</span>
				</template>
				<template slot-scope="{ row }" slot="info">
					<div class="tabBox" v-for="(val, i) in row.info" :key="i">
						<div class="tabBox_img" v-viewer>
							<img v-lazy="val.slider_image" />
						</div>
						<span class="tabBox_tit">{{ val.store_name }}</span>
						<span class="tabBox_pice">{{'￥' + val.pay_price}}</span>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="pay_price">
					<span class="tabBox_pice">{{'￥' + showPrice(row.info)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="reservation_time">
					<span class="tabBox_pice">{{showTime(row.reservation_time)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="store">
					<span class="tabBox_pice">{{row.store.name}}</span>
				</template>

				<template slot-scope="{ row }" slot="status">
					<Tag color="blue" size="medium" v-if="row.status == -1">退款</Tag>
					<Tag color="blue" size="medium" v-if="row.status == 0">待服务</Tag>
					<Tag color="blue" size="medium" v-if="row.status == 2">已完成</Tag>
				</template>

				<template slot-scope="{ row }" slot="statusName">
					<Tooltip theme="dark" max-width="300" :delay="600">
						<div v-html="row.refund_reason" class="pt5"></div>
						<div slot="content">
							<div class="pt5">退款原因：{{row.refund_explain}}</div>
							<div v-if="row.refund_goods_explain" class="pt5">退货原因：{{row.refund_goods_explain}}</div>
						</div>
					</Tooltip>
					<div class="pictrue-box" v-if="row.refund_img">
						<div v-viewer v-for="(item, index) in row.refund_img || []" :key="index">
							<img class="pictrue mr10" v-lazy="item" :src="item" />
						</div>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="add_time">
					<span class="tabBox_pice">{{showTime(row.add_time)}}</span>
				</template>
				<!-- <template slot-scope="{ row }" slot="statusGoodName">
          <div v-html="row.refund_goods_explain" class="pt5"></div>
          <div class="pictrue-box" v-if="row.refund_goods_img">
            <div
              v-viewer
              v-for="(item, index) in row.refund_goods_img || []"
              :key="index"
            >
              <img class="pictrue mr10" v-lazy="item" :src="item" />
            </div>
          </div>
        </template> -->
				<template slot-scope="{ row }" slot="action">
					<a @click="changeMenu(row)" v-if="row.status == 0">修改服务员工</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="pagination.page" show-elevator show-total @on-change="pageChange"
					:page-size="pagination.limit" />
			</div>
		</Card>
		<!-- 编辑 退款 退积分 不退款-->
		<edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from>
		<!-- 详情 -->
		<details-from ref="detailss" :orderDatalist="orderDatalist" :orderId="orderId" :rowActive="rowActive"
			:openErp="openErp"></details-from>
		<!-- 备注 -->
		<order-remark ref="remarks" remarkType="refund" :orderId="orderId" @submitFail="submitFail"></order-remark>
		<!-- 记录 -->
		<order-record ref="record"></order-record>
		<Modal v-model="modals" scrollable title="选择员工" class="order_box" :closable="false">
			<Form :label-width="80">
				<FormItem label="员工：" prop="chooseId">
					<Select v-model="chooseId" style="width: 250px">
						<Option v-for="item in ygList" :key="item.id" :value="item.id">{{ item.name }}</Option>
					</Select>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="primary" @click="goCancal">提交</Button>
				<Button @click="cancal">取消</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		orderRefundList,
		orderList,
		getOrdeDatas,
		getDataInfo,
		getRefundDataInfo,
		getRefundFrom,
		getRefundOrderFrom,
		getnoRefund,
		refundIntegral,
		getDistribution,
		writeUpdate,
		getServeOrder,
		member_update
	} from "@/api/order";
	import {
		getYgList
	} from "@/api/store"
	import {
		erpConfig
	} from "@/api/erp";
	import editFrom from "@/components/from/from";
	import detailsFrom from "../orderList/handle/orderDetails";
	import orderRemark from "../orderList/handle/orderRemark";
	import orderRecord from "../orderList/handle/orderRecord";
	import timeOptions from "@/utils/timeOptions";
	export default {
		components: {
			editFrom,
			detailsFrom,
			orderRemark,
			orderRecord
		},
		data() {
			return {
				modals: false,
				order_id: '',
				ygList: [],
				chooseId: 0,
				openErp: false,
				thead: [{
						title: "订单号",
						align: "center",
						slot: "order_id",
						minWidth: 150,
					},
					{
						title: "用户信息",
						slot: "nickname",
						minWidth: 130,
					},
					{
						title: "预约员工",
						slot: "kf",
						minWidth: 130,
					},
					{
						title: "商品信息",
						slot: "info",
						minWidth: 300,
					},
					{
						title: "实际支付",
						slot: "pay_price",
						minWidth: 70,
					},
					{
						title: "预约时间",
						slot: "reservation_time",
						minWidth: 110,
					},
					{
						title: "订单状态",
						slot: "status",
						minWidth: 110,
					},
					{
						title: "退款状态",
						slot: "refund_status",
						minWidth: 110,
					},
					{
						title: "预约门店",
						slot: "store",
						minWidth: 110,
					},
					{
						title: "下单时间",
						slot: "add_time",
						minWidth: 110,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						minWidth: 150,
						align: "center",
					},
				],
				tbody: [],
				num: [{
						name: '待服务',
						value: 0
					},
					{
						name: '已完成',
						value: 2
					}, {
						name: '退款',
						value: -1
					},
				],
				orderDatalist: null,
				loading: false,
				FromData: null,
				total: 0,
				orderId: 0,
				animal: 1,
				pagination: {
					page: 1,
					limit: 15,
					order_id: "",
					time: "",
					status: 0
				},
				options: timeOptions,
				timeVal: [],
				modal: false,
				qrcode: null,
				name: "",
				spin: false,
				rowActive: {},
			};
		},
		computed: {
			...mapState("order", ["orderChartType"]),
			// ...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getYgList()
			this.getErpConfig();
			this.getOrderList();
		},
		methods: {
			showName( id) {
				let yg = this.ygList.find(item => {
					return item.id == id
				})
				console.log(yg,'ygygygyg')
				return yg? yg.name: ''
			},
			getYgList() {
				getYgList({
					page: 1,
					limit: 1000
				}).then(res => {
					this.ygList = res.data.list
				})
			},
			showTime(time) {
				var date = new Date(time * 1000);
				var year = date.getFullYear(); // 获取年份
				var month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份（注意月份从 0 开始，需要加 1）
				var day = ("0" + date.getDate()).slice(-2); // 获取日期
				var hours = ("0" + date.getHours()).slice(-2); // 获取小时
				var minutes = ("0" + date.getMinutes()).slice(-2); // 获取分钟
				var seconds = ("0" + date.getSeconds()).slice(-2); // 获取秒钟
				var dateString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; // 自定义时间格式
				return dateString
			},
			showPrice(list) {
				let price = 0;
				list.forEach(item => {
					price += item.pay_price * 1
				})
				return price.toFixed(2)
			},
			//erp配置
			getErpConfig() {
				erpConfig().then(res => {
					this.openErp = res.data.open_erp;
				}).catch(err => {
					this.$Message.error(err.msg);
				})
			},
			onchangeCode(e) {
				this.animal = e;
				this.qrcodeShow();
			},
			// 具体日期搜索()；
			onchangeTime(e) {
				this.pagination.page = 1;
				this.timeVal = e;
				this.pagination.time = this.timeVal[0] ? this.timeVal.join("-") : "";
			},
			// 获取详情表单数据
			getData(id, type) {
				getRefundDataInfo(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_img) {
						//   try {
						//     this.orderDatalist.orderInfo.refund_img = JSON.parse(
						//       this.orderDatalist.orderInfo.refund_img
						//     );
						//   } catch (e) {
						//     this.orderDatalist.orderInfo.refund_img = [];
						//   }
						// }
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 操作
			changeMenu(row, name) {
				console.log('dddddddddddddddd')
				this.modals = true
				this.order_id = row.id
			},
			cancal() {
				this.modals = false
				this.remark = ''
			},
			getygList() {
				getYgList().then(res => {
					console.log(res)
					this.ygList = res.data.list
				})
			},
			//goCancal
			goCancal() {
				if (this.chooseId == '') {
					return this.$Message.error('请选择员工')
				}
				this.modals = false
				member_update({
					id: this.order_id,
					work_member_id: this.chooseId
				}).then(res => {
					this.$Message.success(res.msg)
					this.getOrderList()
				}).catch(err => {
					this.$Message.error(err.msg)
				})

			},
			// 获取退款表单数据
			getRefundData(id, refund_type) {
				if (refund_type == 2) {
					this.delfromData = {
						title: "是否立即退货",
						url: `/refund/agree/${id}`,
						method: "get",
					};
					this.$modalSure(this.delfromData)
						.then((res) => {
							this.$Message.success(res.msg);
							this.getOrderList();
							this.getData(this.orderId, 1);
						})
						.catch((res) => {
							this.$Message.error(res.msg);
						});
				} else {
					this.$modalForm(getRefundOrderFrom(id)).then(() => {
						this.getOrderList();
						this.getData(this.orderId, 1);
						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);
					});
			},
			// 删除单条订单
			delOrder(row, data) {
				if (row.is_del === 1) {
					this.$modalSure(data)
						.then((res) => {
							this.$Message.success(res.msg);
							this.getOrderList();
						})
						.catch((res) => {
							this.$Message.error(res.msg);
						});
				} else {
					const title = "错误！";
					const content =
						"<p>您选择的的订单存在用户未删除的订单，无法删除用户未删除的订单！</p>";
					this.$Modal.error({
						title: title,
						content: content,
					});
				}
			},
			// 修改成功
			submitFail() {
				this.getOrderList();
				this.getData(this.orderId, 1);
			},
			// 订单选择状态
			selectChange2(tab) {
				this.pagination.page = 1;
				this.pagination.refund_type = tab;
				this.getOrderList(tab);
			},
			// 不退款表单数据
			getNoRefundData(id) {
				this.$modalForm(getnoRefund(id)).then(() => {
					this.getOrderList();
					this.getData(this.orderId);
					this.$emit("changeGetTabs");
				});
			},
			// 订单列表
			getOrderList() {
				this.loading = true;
				getServeOrder(this.pagination)
					.then((res) => {
						this.loading = false;
						const {
							count,
							list,
							num
						} = res.data;
						this.total = count;
						this.tbody = list;
						// this.num = num;
						list.forEach((item) => {
							if (item.id == this.orderId) {
								this.rowActive = item;
							}
						});
					})
					.catch((err) => {
						this.loading = false;
						this.$Message.error(err.msg);
					});
			},
			// 分页
			pageChange(index) {
				this.pagination.page = index;
				this.getOrderList();
			},
			nameSearch() {
				this.pagination.page = 1;
				this.getOrderList();
			},
			// 订单搜索
			orderSearch() {
				this.pagination.page = 1;
				this.getOrderList();
			},
			// 配送信息表单数据
			delivery(row) {
				getDistribution(row.id)
					.then(async (res) => {
						this.FromData = res.data;
						this.$refs.edits.modals = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
		},
	};
</script>

<style lang="stylus" scoped>
	.span-del {
		color: #ed4014;
		display: block
	}

	.code {
		position: relative;
	}

	.QRpic {
		width: 180px;
		height: 259px;

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

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

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

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

		.tabBox_tit {
			width: 245px;
			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;
	}

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

	.pictrue {
		width: 25px;
		height: 25px;
	}
</style>