<template>
	<div>
		<Card :bordered="false" dis-hover class="ivu-mb-16">
			<Form ref="formValidate" :model="formValidate" :label-width="labelWidth" :label-position="labelPosition"
				class="tabform" @submit.native.prevent>
				<Row :gutter="24" type="flex">
					<Col span="24">
					<FormItem label="时间选择：">
						<RadioGroup v-model="formValidate.data" type="button"
							@on-change="selectChange(formValidate.data)" class="mr">
							<Radio :label="item.val" v-for="(item, i) in fromList.fromTxt" :key="i">{{ item.text }}
							</Radio>
						</RadioGroup>
						<DatePicker :editable="false" @on-change="onchangeTime" :value="timeVal" format="yyyy/MM/dd"
							type="daterange" placement="bottom-end" placeholder="请选择时间" style="width: 200px">
						</DatePicker>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="搜索：">
						<div class="acea-row row-middle">
							<Input search enter-button @on-search="selChange" placeholder="商户名称/客户名称/手机号"
								element-id="name" v-model="formValidate.nireid" style="width: 30%" />
						</div>
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover>
			<Table ref="table" :columns="columns" :data="tabList" class="ivu-mt" :loading="loading" no-data-text="暂无数据"
				no-filtered-data-text="暂无筛选结果">
				<template slot-scope="{ row, index }" slot="image">
					<div class="tabBox_img" v-viewer>
						<img v-lazy="row.image" />
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="status">
					<div class="status" v-if="row.status === 0">
						<div class="statusVal">申请中</div>
						<div>
							<Button type="error" icon="md-close" size="small" class="item"
								@click="invalid(row)">驳回</Button>
							<Button type="info" icon="md-checkmark" size="small" class="item"
								@click="adopt(row, '审核通过', index)">通过</Button>
						</div>
					</div>
					<div class="statusVal" v-if="row.status === 1">审核通过</div>
					<div class="statusVal" v-if="row.status === 2 &&row.fail_msg">审核未通过<br /> 未通过原因：{{ row.fail_msg }}
					</div>
					<div class="statusVal" v-if="row.status === 2 &&!row.fail_msg">审核未通过
					</div>
				</template>
				<template slot-scope="{ row }" slot="createModalFrame">
					<a href="javascript:void(0);" @click="edit(row)">编辑</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange"
					:page-size="formValidate.limit" />
			</div>
		</Card>

		<!-- 编辑表单-->
		<edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from>
		<!-- 拒绝通过-->
		<Modal v-model="modals" scrollable closable title="未通过原因" :mask-closable="false">
			<Input v-model="fail_msg.message" type="textarea" :rows="4" placeholder="请输入未通过原因" />
			<div slot="footer">
				<Button type="primary" size="large" long :loading="modal_loading" @click="oks">确定</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
	import searchFrom from '@/components/publicSearchFrom';
	import {
		mapState
	} from 'vuex';
	import {
		intentionList,
		adopt,
		refuse
	} from '@/api/shop';
	import {
		formatDate
	} from '@/utils/validate';
	import editFrom from '@/components/from/from';
	export default {
		name: 'shopApply',
		components: {
			searchFrom,
			editFrom
		},
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, 'yyyy-MM-dd hh:mm');
				}
			},
		},
		data() {
			return {
				images: ['1.jpg', '2.jpg'],
				modal_loading: false,
				fail_msg: {
					message: '输入信息不完整或有误!',
				},
				modals: false,
				total: 0,
				loading: false,
				columns: [{
						title: 'ID',
						key: 'mer_intention_id',
						width: 80,
					},
					{
						title: '商户名称',
						key: 'mer_name',
						minWidth: 180,
					},
					{
						title: '商户分类',
						key: 'merchant_category_name',
						minWidth: 90,
					},
					{
						title: '商户类型',
						key: 'mer_type_name',
						minWidth: 150,
					},
					{
						title: '商户姓名',
						key: 'name',
						minWidth: 150,
					},
					{
						title: '联系方式',
						key: 'phone',
						minWidth: 150,
					},
					{
						title: '申请时间',
						key: 'add_time',
						minWidth: 100,
					},
					// {
					// 	title: '资质图片',
					// 	slot: 'add_time',
					// 	minWidth: 100,
					// },
					{
						title: '审核状态',
						slot: 'status',
						minWidth: 180,
					},
					// {
					// 	title: '操作',
					// 	slot: 'createModalFrame',
					// 	fixed: 'right',
					// 	width: 100,
					// },
				],
				tabList: [],
				fromList: {
					title: '选择时间',
					custom: true,
					fromTxt: [{
							text: '全部',
							val: ''
						},
						{
							text: '今天',
							val: 'today'
						},
						{
							text: '昨天',
							val: 'yesterday'
						},
						{
							text: '本周',
							val: 'week'
						},
						{
							text: '本月',
							val: 'month'
						},
						{
							text: '本季度',
							val: 'quarter'
						},
						{
							text: '本年',
							val: 'year'
						},
					],
				},
				formValidate: {
					status: '',
					nireid: '',
					data: '',
					page: 1,
					limit: 20,
				},
				timeVal: [],
				FromData: null,
				extractId: 0,
			};
		},
		watch: {
			$route() {
				if (this.$route.fullPath === this.$routeProStr + '/finance/user_extract/index?status=0') {
					this.getPath();
				}
			},
		},
		computed: {
			...mapState('media', ['isMobile']),
			labelWidth() {
				return this.isMobile ? undefined : 80;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			},
		},
		mounted() {
			if (this.$route.fullPath === this.$routeProStr + '/finance/user_extract/index?status=0') {
				this.getPath();
			} else {
				this.getList();
			}
		},
		methods: {
			getPath() {
				this.formValidate.page = 1;
				this.formValidate.status = parseInt(this.$route.query.status);
				this.getList();
			},
			// 无效
			invalid(row) {
				this.extractId = row.mer_intention_id;
				this.modals = true;
			},
			// 确定
			oks() {
				this.modal_loading = true;
				console.log(this.fail_msg.message);
				refuse({
						fail_msg: this.fail_msg.message
					}, this.extractId)
					.then(async (res) => {
						this.$Message.success(res.msg);
						this.modal_loading = false;
						this.modals = false;
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 通过
			adopt(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `merchant/intention/adopt/${row.mer_intention_id}`,
					method: 'get',
					ids: '',
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 具体日期
			onchangeTime(e) {
				this.timeVal = e;
				this.formValidate.data = this.timeVal.join('-');
				this.formValidate.page = 1;
				this.getList();
			},
			// 选择时间
			selectChange(tab) {
				this.formValidate.page = 1;
				this.formValidate.data = tab;
				this.timeVal = [];
				this.getList();
			},
			// 选择
			selChange() {
				this.formValidate.page = 1;
				this.getList();
			},
			// 列表
			getList() {
				this.loading = true;
				console.log(this.formValidate);
				intentionList(this.formValidate)
					.then(async (res) => {
						let data = res.data;
						this.tabList = data.merchantIntention;
						this.total = data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			pageChange(index) {
				this.formValidate.page = index;
				this.getList();
			},
			// 编辑
			edit(row) {
				cashEditApi(row.id)
					.then(async (res) => {
						if (res.data.status === false) {
							return this.$authLapse(res.data);
						}
						this.FromData = res.data;
						this.$refs.edits.modals = true;
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 编辑提交成功
			submitFail() {
				this.getList();
			},
		},
	};
</script>
<style scoped lang="stylus">
	.ivu-mt .type .item {
		margin: 3px 0;
	}

	.tabform {
		margin-bottom 10px;
	}

	.Refresh {
		font-size 12px color #1890FF cursor pointer;
	}

	.ivu-form-item {
		margin-bottom 10px;
	}

	.status>>>.item~.item {
		margin-left 6px;
	}

	.status>>>.statusVal {
		margin-bottom 7px;
	}

	/*.ivu-mt >>> .ivu-table-header*/
	/*    border-top:1px dashed #ddd!important*/
	.type {
		padding 3px 0 box-sizing border-box;
	}

	.tabBox_img {
		width 36px;
		height 36px;
		border-radius: 4px cursor pointer;
	}

	img {
		width 100%;
		height 100%;
	}
</style>