﻿<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="用户">
							<userSelect v-model="query.userId" placeholder="请选择用户" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="订单号">
							<el-input v-model="query.orderNumber" placeholder="订单号" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="路线">
							<el-select v-model="query.type" placeholder="路线" clearable>
								<el-option v-for="(item, index) in typeOptions" :key="index" :label="item.fullName"
									:value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<template v-if="showAll">
						<el-col :span="6">
							<el-form-item label="地域">
								<el-select v-model="query.areaId" placeholder="地域" clearable>
									<el-option v-for="(item, index) in areaIdOptions" :key="index" :label="item.F_Name"
										:value="item.F_Id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="人格">
								<el-select v-model="query.mbtId" placeholder="人格" clearable>
									<el-option v-for="(item, index) in mbtIdOptions" :key="index" :label="item.F_Name"
										:value="item.F_Id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="地域线路">
								<el-select v-model="query.areaLineId" placeholder="地域线路" clearable>
									<el-option v-for="(item, index) in areaLineIdOptions" :key="index"
										:label="item.F_Title" :value="item.F_Id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="人格线路">
								<el-select v-model="query.mbtLineId" placeholder="人格线路" clearable>
									<el-option v-for="(item, index) in mbtLineIdOptions" :key="index"
										:label="item.F_Name" :value="item.F_Id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="状态">
								<el-select v-model="query.status" placeholder="状态" clearable>
									<el-option v-for="(item, index) in statusOptions" :key="index"
										:label="item.fullName" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="购买类型">
								<el-select v-model="query.isMe" placeholder="购买类型" clearable>
									<el-option v-for="(item, index) in isMeOptions" :key="index" :label="item.fullName"
										:value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="赠送人">
								<userSelect v-model="query.giveUserId" placeholder="请选择赠送人" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="盲盒券">
								<el-select v-model="query.myBoxCouponId" placeholder="盲盒券" clearable>
									<el-option v-for="(item, index) in myBoxCouponIdOptions" :key="index"
										:label="item.F_Title" :value="item.F_Id" />
								</el-select>
							</el-form-item>
						</el-col>
					</template>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
							<el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">展开
							</el-button>
							<el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>收起</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
						<el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
						<el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false"
								@click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
				<NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
					<el-table-column prop="RealName" label="用户" align="left">
						<template slot-scope="scope">
							{{scope.row.user&&scope.row.user.RealName}}
						</template>
					</el-table-column>
					<el-table-column prop="School" label="学校名称" align="left">
						<template slot-scope="scope">
							{{scope.row.user&&scope.row.user.School}}
						</template>
					</el-table-column>
					<el-table-column prop="SchoolNumber" label="学号" align="left">
						<template slot-scope="scope">
							{{scope.row.user&&scope.row.user.SchoolNumber}}
						</template>
					</el-table-column>
					<el-table-column prop="Name" label="提交姓名" align="left" width="100">
						<template slot-scope="scope">
							{{scope.row.tickets&&scope.row.tickets.Name}}
						</template>
					</el-table-column>
					<el-table-column prop="Phone" label="提交电话号码" align="left" width="100">
						<template slot-scope="scope">
							{{scope.row.tickets&&scope.row.tickets.Phone}}
						</template>
					</el-table-column>
					<el-table-column prop="IdCard" label="提交身份证号码" align="left" width="110">
						<template slot-scope="scope">
							{{scope.row.tickets&&scope.row.tickets.IdCard}}
						</template>
					</el-table-column>
					<el-table-column prop="orderNumber" label="订单号" align="left" />
					<el-table-column label="路线" prop="type" align="left">
						<template slot-scope="scope">{{ scope.row.type | dynamicText(typeOptions) }}</template>
					</el-table-column>
					<el-table-column label="地域" prop="Name" align="left">
						<template slot-scope="scope">{{ scope.row.area&&scope.row.area.Name}}</template>
					</el-table-column>
					<el-table-column label="地域线路" prop="Title" align="left">
						<template slot-scope="scope">{{ scope.row.areaLine&&scope.row.areaLine.Title }}</template>
					</el-table-column>
					<el-table-column label="人格" prop="Name" align="left">
						<template slot-scope="scope">{{ scope.row.mbt&&scope.row.mbt.Name}}</template>
					</el-table-column>
					<el-table-column label="人格线路" prop="Title" align="left">
						<template slot-scope="scope">{{ scope.row.mbtLine&&scope.row.mbtLine.Name }}</template>
					</el-table-column>
					<el-table-column label="状态" prop="status" align="left">
						<template slot-scope="scope">{{ scope.row.status | dynamicText(statusOptions) }}</template>
					</el-table-column>
					<el-table-column label="购买类型" prop="isMe" align="left">
						<template slot-scope="scope">{{ scope.row.isMe | dynamicText(isMeOptions) }}</template>
					</el-table-column>
					<el-table-column prop="RealName" label="赠送人" align="left">
						<template slot-scope="scope">
							{{scope.row.giveUser&&scope.row.giveUser.RealName}}
						</template>
					</el-table-column>
					<el-table-column label="盲盒券" prop="Title" align="left">
						<template slot-scope="scope">{{ scope.row.myBoxCoupon&&scope.row.myBoxCoupon.Title }}</template>
					</el-table-column>
					<el-table-column prop="creatorTime" label="创建时间" align="left" :formatter="ncc.tableDateFormat" />
					<el-table-column prop="lastModifyTime" label="修改时间" align="left" :formatter="ncc.tableDateFormat" />
					<el-table-column prop="totalPrice" label="总金额" align="left" />
					<el-table-column label="操作" fixed="right" width="100">
						<template slot-scope="scope">
							<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
							<el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn">删除
							</el-button>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
					@pagination="initData" />
			</div>
		</div>
		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
	</div>
</template>
<script>
	import request from '@/utils/request'
	import {
		getDictionaryDataSelector
	} from '@/api/systemData/dictionary'
	import NCCForm from './Form'
	import ExportBox from './ExportBox'
	import {
		previewDataInterface
	} from '@/api/systemData/dataInterface'
	export default {
		components: {
			NCCForm,
			ExportBox
		},
		data() {
			return {
				showAll: false,
				query: {
					userId: undefined,
					orderNumber: undefined,
					type: undefined,
					areaId: undefined,
					mbtId: undefined,
					areaLineId: undefined,
					mbtLineId: undefined,
					status: undefined,
					isMe: undefined,
					giveUserId: undefined,
					myBoxCouponId: undefined,
				},
				list: [],
				listLoading: true,
				multipleSelection: [],
				total: 0,
				listQuery: {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				},
				formVisible: false,
				exportBoxVisible: false,
				columnList: [{
						prop: 'userId',
						label: '用户'
					},
					{
						prop: 'orderNumber',
						label: '订单号'
					},
					{
						prop: 'type',
						label: '路线'
					},
					{
						prop: 'areaId',
						label: '地域'
					},
					{
						prop: 'areaLineId',
						label: '地域线路'
					},
					{
						prop: 'mbtId',
						label: '人格'
					},
					{
						prop: 'mbtLineId',
						label: '人格线路'
					},
					{
						prop: 'status',
						label: '状态'
					},
					{
						prop: 'isMe',
						label: '购买类型'
					},
					{
						prop: 'giveUserId',
						label: '赠送人'
					},
					{
						prop: 'myBoxCouponId',
						label: '盲盒券'
					},
					{
						prop: 'creatorTime',
						label: '创建时间'
					},
					{
						prop: 'lastModifyTime',
						label: '修改时间'
					},
					{
						prop: 'totalPrice',
						label: '总金额'
					},
				],
				typeOptions: [{
					"fullName": "地域线路",
					"id": "1"
				}, {
					"fullName": "MBT人格线路",
					"id": "2"
				}],
				areaIdOptions: [],
				areaLineIdOptions: [],
				mbtIdOptions: [],
				mbtLineIdOptions: [],
				statusOptions: [{
					"fullName": "未付款",
					"id": "1"
				}, {
					"fullName": "已付款",
					"id": "2"
				}],
				isMeOptions: [{
					"fullName": "自己购买",
					"id": "1"
				}, {
					"fullName": "赠送他人",
					"id": "2"
				}],
				myBoxCouponIdOptions: [],
			}
		},
		computed: {},
		created() {
			this.initData()
			this.getareaIdOptions();
			this.getareaLineIdOptions();
			this.getmbtIdOptions();
			this.getmbtLineIdOptions();
			this.getmyBoxCouponIdOptions();
		},
		methods: {
			getareaIdOptions() {
				previewDataInterface('393301869759300869').then(res => {
					this.areaIdOptions = res.data
				});
			},
			getareaLineIdOptions() {
				previewDataInterface('393304215318955269').then(res => {
					this.areaLineIdOptions = res.data
				});
			},
			getmbtIdOptions() {
				previewDataInterface('393308680755348741').then(res => {
					this.mbtIdOptions = res.data
				});
			},
			getmbtLineIdOptions() {
				previewDataInterface('393728611745531141').then(res => {
					this.mbtLineIdOptions = res.data
				});
			},
			getmyBoxCouponIdOptions() {
				previewDataInterface('394645492476151045').then(res => {
					this.myBoxCouponIdOptions = res.data
				});
			},
			initData() {
				this.listLoading = true;
				let _query = {
					...this.listQuery,
					...this.query
				};
				let query = {}
				for (let key in _query) {
					if (Array.isArray(_query[key])) {
						query[key] = _query[key].join()
					} else {
						query[key] = _query[key]
					}
				}
				request({
					url: `/api/Blind/TbBoxOrder`,
					method: 'GET',
					data: query
				}).then(res => {
					this.list = res.data.list
					this.total = res.data.pagination.total
					this.listLoading = false
				})
			},
			handleDel(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					type: 'warning'
				}).then(() => {
					request({
						url: `/api/Blind/TbBoxOrder/${id}`,
						method: 'DELETE'
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg,
							onClose: () => {
								this.initData()
							}
						});
					})
				}).catch(() => {});
			},
			handleSelectionChange(val) {
				const res = val.map(item => item.id)
				this.multipleSelection = res
			},
			handleBatchRemoveDel() {
				if (!this.multipleSelection.length) {
					this.$message({
						type: 'error',
						message: '请选择一条数据',
						duration: 1500,
					})
					return
				}
				const ids = this.multipleSelection
				this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
					type: 'warning'
				}).then(() => {
					request({
						url: `/api/Blind/TbBoxOrder/batchRemove`,
						method: 'POST',
						data: ids,
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg,
							onClose: () => {
								this.initData()
							}
						});
					})
				}).catch(() => {})
			},
			addOrUpdateHandle(id, isDetail) {
				this.formVisible = true
				this.$nextTick(() => {
					this.$refs.NCCForm.init(id, isDetail)
				})
			},
			exportData() {
				this.exportBoxVisible = true
				this.$nextTick(() => {
					this.$refs.ExportBox.init(this.columnList)
				})
			},
			download(data) {
				let query = {
					...data,
					...this.listQuery,
					...this.query
				}
				request({
					url: `/api/Blind/TbBoxOrder/Actions/Export`,
					method: 'GET',
					data: query
				}).then(res => {
					if (!res.data.url) return
					window.location.href = this.define.comUrl + res.data.url
					this.$refs.ExportBox.visible = false
					this.exportBoxVisible = false
				})
			},
			search() {
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				}
				this.initData()
			},
			refresh(isrRefresh) {
				this.formVisible = false
				if (isrRefresh) this.reset()
			},
			reset() {
				for (let key in this.query) {
					this.query[key] = undefined
				}
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				}
				this.initData()
			}
		}
	}
</script>
