<template>
	<div class="app-container">

		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">


			<el-form-item label="开始日期" prop="beginTime">
				<div class="block">
					<el-date-picker v-model="queryParams.beginTime" value-format="yyyy-MM-dd" type="date"
						placeholder="选择日期" style="width: 200px;">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-form-item label="结束日期" prop="endTime">
				<div class="block">
					<el-date-picker v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" style="width: 200px;">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-form-item label="分销编号" prop="channelId">
				<el-input v-model="queryParams.channelId" style="width: 200px;" placeholder="请输入分销编号" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="销售渠道" prop="distributionChannel">
				<el-select v-model="queryParams.distributionChannel" style="width: 200px" clearable
					placeholder="请选择销售渠道">
					<el-option v-for="(item,index) in dict.type.game_platform_mapping" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品编号" prop="goodsId">
				<el-input v-model="queryParams.goodsId" style="width: 200px;" placeholder="请输入商品编号" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="店铺名称" prop="shopName">
				<el-autocomplete class="inline-input" v-model="queryParams.shopName" :fetch-suggestions="querySearch"
					placeholder="请输入店铺名称" @select="handleSelect" :trigger-on-focus="false"></el-autocomplete>
			</el-form-item>
			<el-form-item label="付款方式" prop="paymentMethod">
				<el-select v-model="queryParams.paymentMethod" style="width: 200px" clearable placeholder="请选择付款状方式">
					<el-option v-for="(item,index) in options12" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>



			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
				</el-button>
				<el-button style="margin-left: 20px;" icon="el-icon-refresh" size="mini" @click="resetQuery">重置
				</el-button>
				<el-button type="danger" plain icon="el-icon-refresh" size="mini" @click="handleStatistics8"
					v-hasPermi="['system:goodsPayment:tongji']">退款状态
				</el-button>
			</el-form-item>
		</el-form>


		<el-row :gutter="10" class="mb8">
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>
		<el-table :row-class-name="tableRowClassName" border :data="tableData" style="width: 100%">
			<el-table-column prop="createTime" label="订单时间">
				<template slot-scope="scope">
					<span>{{scope.row.createTime.slice(0,10)}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="deptName" label="部门">
			</el-table-column>
			<el-table-column prop="shopName" label="店铺">
			</el-table-column>
			<el-table-column prop="goodsId" label="商品编号">
				<template slot-scope="scope">
					<span style="color:blue;cursor: pointer" v-if="scope.row.goodsId!=null"
						@click="openspbh(scope.row)">{{scope.row.goodsId}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="distributionChannel" label="销售渠道">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.game_platform_mapping" :value="scope.row.distributionChannel" />
				</template>
				
			</el-table-column>
			<el-table-column prop="channelId" label="分销编号">
			</el-table-column>
			<el-table-column prop="fxProfit" label="分销利润">
			</el-table-column>
			<el-table-column prop="originalPrice" label="成本价">
			</el-table-column>
			<el-table-column prop="salesPrice" label="销售价">
				<template slot-scope="scope">
					<span style="color:red;cursor: pointer" v-if="scope.row.priceRecords!=null"
						@click="openXq(scope.row)">{{scope.row.salesPrice}}</span>
					<span v-else>{{scope.row.salesPrice}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="paidinPrice" label="到手金额">
			</el-table-column>




			<el-table-column prop="settlementPrice" label="结算价格">
			</el-table-column>
			<el-table-column v-if="bpLr" prop="isSecurity" label="包赔服务">
				<template slot-scope="scope">
					<span v-if="scope.row.isSecurity=='Y'">是</span>
					<span v-if="scope.row.isSecurity=='N'">否</span>
				</template>
			</el-table-column>
			<el-table-column prop="securityRate" label="包赔利率">
			</el-table-column>
			<el-table-column prop="securityPrice" label="包赔费用">
			</el-table-column>
			<el-table-column prop="partnerHandlingFee" label="费率">
			</el-table-column>
			<el-table-column prop="platformProfit" label="利润">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="利润=销售价x手续费+分销利润" placement="top-start">
						<span>{{(Number(scope.row.platformProfit)+Number(scope.row.fxProfit)).toFixed(2)}}</span>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="isMultiple" label="多倍包赔">
				<template slot-scope="scope">
					<span v-if="scope.row.isMultiple=='is_multiple_0'">是</span>
					<span v-if="scope.row.isMultiple=='is_multiple_1'">否</span>
				</template>
			</el-table-column>
			<el-table-column prop="multiplePrice" label="多倍包赔利润">
			</el-table-column>
			<el-table-column prop="byStages" label="分期购买">
				<template slot-scope="scope">
					<span v-if="scope.row.byStages=='by_stages_0'">分期客服-辉提</span>
					<span v-if="scope.row.byStages=='by_stages_1'">分期客服-苗提</span>
					<span v-if="scope.row.byStages=='by_stages_2'">没购买分期</span>
				</template>
			</el-table-column>
			<el-table-column prop="paymentStatus" label="状态">
				<template slot-scope="scope">
					<span v-if="scope.row.paymentStatus=='SH'">待审核</span>
					<span v-if="scope.row.paymentStatus=='T'">退款</span>
				</template>
			</el-table-column>
			<el-table-column prop="paymentVoucher" label="付款凭证">
				<template slot-scope="scope">
					<span style="color:blue;cursor: pointer" v-if="scope.row.paymentVoucher!=null"
						@click="openFkpz(scope.row)">已上传</span>
				</template>
			</el-table-column>

			<el-table-column prop="paymentMethod" label="付款方式">
				<template slot-scope="scope">
					<span v-if="scope.row.paymentMethod=='pay_type_4'">线下支付</span>
					<span v-if="scope.row.paymentMethod=='pay_type_0'">微信</span>
					<span v-if="scope.row.paymentMethod=='pay_type_1'">支付宝</span>
				</template>
			</el-table-column>


			<el-table-column label="操作" width="200px" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<div>
						<el-button size="small" type="success" @click="handleUpdate2(scope.row)">通过
						</el-button>
						<el-button size="small" type="danger" @click="handleUpdate3(scope.row)">驳回
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<!-- 付款凭证信息 -->
		<el-dialog v-if="openFkpz1" title="付款凭证" :visible.sync="openFkpz1" append-to-body width="800px">
			<div style="display: flex;flex-wrap: wrap;">
				<div style="padding: 10px;overflow: auto;" v-for="(item,index) in carouselImg" :key="item.id">
					<el-image style="width: 200px;height: 200px;" :preview-src-list="srcList"
						:src="pictureServerPath+item" :key="index">
					</el-image>
				</div>
			</div>


			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="openFkpz1=false">确 定</el-button>
				<el-button @click="openFkpz1=false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 销售价修改详情 -->
		<el-dialog v-if="openXq1" title="销售价修改详情" :visible.sync="openXq1" append-to-body width="500px">
			<div>
				<p>原价：{{priceRecordsData.oldPrice}}</p>
				<p>现价：<span style="color: red;">{{priceRecordsData.newPrice}}</span></p>
				<p>修改日期：<span style="color: blue;">{{priceRecordsData.date}}</span></p>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="openXq1=false">关闭</el-button>
			</div>
		</el-dialog>
		<!-- 驳回信息 -->
		<el-dialog v-if="tuikuan" title="驳回" :visible.sync="tuikuan" append-to-body width="800px">
			<div style="display: flex;flex-wrap: wrap;">
				<el-form ref="form" :model="form" :rules="rules">
					<el-row>
						<el-col :span="12">
							<el-form-item label="驳回原因" prop="remark">
								<el-input style="width: 500px;" v-model="queryParams.remark" type="textarea" :rows="2"
									placeholder="请输入驳回原因" />
							</el-form-item>
						</el-col>

					</el-row>


				</el-form>
				<el-form>

				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="bh">确 定</el-button>
				<el-button @click="tuikuan=false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 付款凭证信息 -->
		<el-dialog v-if="spbh" title="商品编码" :visible.sync="spbh" append-to-body width="300px">
			<div style="display: flex;flex-wrap: wrap;">
				<el-form>
					<el-row>
						<el-col :span="24">
							<el-form-item label="商品编码" prop="channelId">
								<el-input v-model="form1.xgoodsId" placeholder="请输入需要修改的商品编码" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm3">确 定</el-button>
				<el-button @click="spbh=false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog v-if="tongji14" :before-close="canceltj" title="修改退款状态" :visible.sync="tongji14" append-to-body
			width="1000px">
			<div>
				<el-input v-model="formXgtk.goodsId" placeholder="请输入商品编号"/>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFormxgTk">确 定</el-button>
				<el-button @click="canceltj">关闭</el-button>
			</div>
		</el-dialog>
		

	</div>
</template>

<script>
	import {
		updateProductCode,
	} from "@/api/data/goodsPayment";
	import {
		goodsPayment,
		updatepartnerlist,
		getInitGoodsManager,
		getPaymentInfo,
		updateOriginalPrice,
		confirm,
		repulse,
		queryTBusShop,
	} from "@/api/data/shenhe";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import {
		deptTreeSelect
	} from '@/api/system/user';
	import {
		getDeptInfo,
		updateStatus
	} from "@/api/data/goodsPayment";
	import Cookies from 'js-cookie';
	import {
		getToken
	} from "@/utils/auth";
	export default {
		components: {
			Treeselect
		},
		dicts: ['game_platform_mapping'],
		data() {
			return {
				spbh:false,
				form1:{},
				uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/uploadNew", // 上传的图片服务器地址
				headers: {
					Authorization: "Bearer " + getToken(),
				},
				// electronicDataList: [],
				// 表单参数
				form: {
					electronicDataList: [],
					// electronicDataList: '',
					gamePicture: [],
					//创建一个游戏属性数值
					arrayLIst: []
				},
				// 统计
				originalprice: 0,
				salesprice: 0,
				paidinprice: 0,
				lr: 0,
				//付款凭证
				carouselImg: [],
				//店铺名称
				restaurants: [],
				srcList: [],
				openFkpz1: false,
				// 商家类型
				deptOptions: [],
				deptOptions1: [],
				deptOptions2: [],
				deptOptions3: undefined,
				// 筛选
				// activeNames: ['1'],
				cs: 0,
				cs1: 0,
				cs2: 0,
				cs3: 0,
				//退款信息
				tuikuan: false,
				tkje: 0,
				input: '',
				yxbh: false,
				yxdq: false,
				// spbh: false,
				sjbh: false,
				disabled: true,
				block: false,
				originalPrice1open: false,
				originalPriceopen: false,
				open1: false,
				openPicture: false,
				cbj: false,
				cbj1: false,
				cbj2: true,
				fl: false,
				bp: false,
				zybd: true,
				sjbd: false,
				bpLr: false,
				bpLr2: true,
				openXq1: false,
				// 付款凭证
				attach_list: [],
				//付款方式
				options12: [{
						value: "pay_type_0",
						label: '微信'
					}, {
						value: "pay_type_1",
						label: '支付宝'
					},
					{
						value: "pay_type_4",
						label: '线下'
					}
				],
				// 付款状态
				options1: [{
						value: "'S'",
						label: '已结算'
					}, {
						value: "'X'",
						label: '未结算'
					},
					{
						value: "'T'",
						label: '已退款'
					}
				], 
				options8: [],
				options10: [],
				//多倍包赔
				options9: [{
					value: "is_multiple_0",
					label: '是'
				}, {
					value: "is_multiple_1",
					label: '否'
				}],
				options2: [{
					value: "Y",
					label: '是'
				}, {
					value: "N",
					label: '否'
				}],
				tableData: [],
				// 遮罩层
				loading: true,
				title1: '',

				// 总条数
				total: 0,
				// 弹出层标题
				title: "",
				// 显示搜索条件
				showSearch: true,
				// 是否显示弹出层
				open: false,
				priceRecordsData: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					publishStatus: null,
					deleteStatus: null,
					updateStatus: null,
					goodsName: null,
					gameName: null,
					partnerName: null,
					beginTime: null,
					endTime: null,
					paymentStatus: null,
					deptId: null,
					shopId: null,
					type: "SH",
					// paymentStatus:null,
					originalPrice: null,
				},
				tongji14: false,
				formXgtk:{},

				// 表单参数
				// form: {},
				queryForm: {
					publishStatus: null,
					deleteStatus: null,
					updateStatus: null,
					goodsName: null,
					gameName: null,
					partnerName: null,
				},
			};
		},
		created() {
			this.getList();
			this.user();
		},
		mounted() {
			this.restaurants = this.loadAll();
		},
		methods: {
			canceltj() {
				this.tongji14 = false;
			},
			// 售后订单按钮操作
			handleStatistics8() {
				this.tongji14 = true;
			},
			submitFormxgTk(){
				if(this.formXgtk.goodsId){
					updateStatus(this.formXgtk.goodsId).then(res => {
						this.$message({
							type: 'success',
							message: '修改成功!'
						})
						this.tongji14 = false;
					})
				}else{
					this.$message({
						type: 'error',
						message: '请输入商品编号!'
					})
				}
				
			},
			//销售价信息
			openXq(row) {
				this.priceRecordsData = JSON.parse(row.priceRecords)
				this.openXq1 = true
			},
			//店铺名称
			querySearch(queryString, cb) {
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
				};
			},
			loadAll() {
				queryTBusShop().then(response => {
					response.data.forEach((item) => {
						this.options8.push({
							label: item.id,
							value: item.name,
						});
					});
				});
				return this.options8;
			},
			handleSelect(item) {
				
			},
			//付款凭证信息
			openFkpz(row) {
				this.carouselImg = row.paymentVoucher.split(",")
				this.carouselImg.forEach((item) => {
					this.srcList.push(this.pictureServerPath + item);
				});
				this.openFkpz1 = true
			},
			//商品编号
			openspbh(row) {
				Cookies.set('goodsId1', row.goodsId)
				this.spbh = true
			},
			user() {
				getDeptInfo().then(res => {
					this.bpLr = true
					if (res.data.deptName == '自营商家' || res.data.deptName == '自营本部' || res.data.deptName ==
						'对接平台') {
						this.bpLr = false
					}
					if (res.data.deptName == '对接平台') {
						this.cbj2 = false
					}
				});
				getInitGoodsManager().then(res => {
					this.pictureServerPath = res.pictureServerPath
				})
			},
			submitForm3() {
				let goodsId = Cookies.get('goodsId1')
				let query = {
					productCodeOld: goodsId,
					productCodeNew: this.form1.xgoodsId
				}
				updateProductCode(query).then(response => {
					this.spbh = false
					this.getList()
				});
			},



			/** 查询信息列表 */
			getList() {
				this.loading = true;
				goodsPayment(this.queryParams).then(response => {
					this.tableData = response.data.table.rows;
					this.total = response.data.table.total
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},

			handleUpdate2(row) {
				if (row.paymentStatus == 'T') {
					this.title = '您的退款金额是 ￥' + row.paidinPrice + ''
				} else if (row.paymentStatus == 'SH') {
					this.title = '您的结算金额是 ￥' + row.settlementPrice + ''
				}
				this.$confirm(this.title, '确认审核', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let query = {
						id: row.id,
					}
					confirm(query).then(res => {
						this.$message({
							type: 'success',
							message: '审核成功!'
						})
						this.getList()
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消审核'
					});
				});



			},
			handleUpdate3(row) {
				Cookies.set('id', row.id)
				this.tuikuan = true
			},
			bh() {
				let id = Cookies.get('id')
				let query = {
					id: id,
					remark: this.queryParams.remark
				}
				repulse(query).then(res => {
					this.$message({
						type: 'success',
						message: '驳回成功!'
					})
					this.tuikuan = false
					this.getList()
					// this.getTBusGoods()
				})
			},


			cancel() {
				this.open1 = false
				this.resetForm("form");
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1||rowIndex === 5||rowIndex === 9) {
					return 'warning-row';
				} else if (rowIndex === 3||rowIndex === 7) {
					return 'success-row';
				}
				return '';
			},



		}
	};
</script>
<style>
	.el-table .warning-row {
		background: oldlace;
	}
	
	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.father {
		height: 80px;
		line-height: 80px;
		font-size: 25px;
		display: flex;
		justify-content: space-around;
	}

	.el-icon-loading {
		color: green;
		margin-right: 5px;
	}

	.el-icon-message-solid {
		color: green;
		margin-right: 5px;
	}

	.el-icon-check {
		color: green;
		margin-right: 5px;
	}

	.el-icon-coin {
		color: green;
		margin-right: 5px;
	}
</style>
