<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
			label-width="68px">
			<el-form-item label="电话" prop="phone">
				<el-input v-model="queryParams.phone" placeholder="请输入电话" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="类型" prop="type">
				<el-select v-model="queryParams.type" clearable>
					<el-option v-for="item in dict.type.sms_type" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="queryParams.status" clearable>
					<el-option v-for="item in ztOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item prop="reportsType" label="传号时间">
				<el-date-picker style="70%" v-model="value1" value-format="yyyy-MM-dd" type="daterange"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="request" label="渠道" width="150">
				<template slot-scope="scope">
					<span>{{JSON.parse(scope.row.request).signName}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="sendChannel" label="发送渠道" width="150">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.sms_sendchannel" :value="scope.row.sendChannel" />
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="手机号" width="110">
			</el-table-column>
			<el-table-column prop="content" label="短信内容" width="600">
			</el-table-column>
			<el-table-column prop="status" label="状态" width="150">
				<template slot-scope="scope">
					<el-button v-if="scope.row.status=='Y'" type="success" plain>正常</el-button>
					<el-tooltip v-if="scope.row.status=='N'" class="item" effect="dark"
						:content="scope.row.response" placement="top-start">
						<el-button type="danger" plain>失败</el-button>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="类型" width="150">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.sms_type" :value="scope.row.type" />
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime">
				
			</el-table-column>
		</el-table>

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


	</div>
</template>

<script>
	import {
		getSysDeptInfo,
		getDeptInfo,
		accountMonitoring,
		add,
		upData,
		getPhone,
		view,
		deletePhone,
		getInitGoodsManager,
		getPaymentInfo,
		updateOriginalPrice,
		getTBusGoodsPaymentSum,
		updatePaymentStatus
	} from "@/api/data/smslog";
	import Cookies from 'js-cookie';
	import {
		getToken
	} from "@/utils/auth";
	export default {

		dicts: ['sms_type','sms_sendchannel'],
		data() {
			return {
				ztOptions:[
					{
						value: 'Y',
						label: '正常'
					},
					{
						value: 'N',
						label: '失败'
					}
				],
				tableData: [],
				// 总条数
				total: 0,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					realName: null,
					phone: null,
				},
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询账号信息列表 */
			getList() {
				this.loading = true;
				accountMonitoring(this.queryParams).then(response => {
					this.tableData = response.rows;
					this.total = response.total
					this.loading = false;
				});
			},
			


			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},

			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},


		}
	};
</script>
<style>
	.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>