<template>
	<el-tabs v-model = "activeName" @tab-click = "handleClick">
		<!-- <el-tab-pane label = "会员列表" name = "first"> -->
			<div style = "margin-right:2%;text-align: right;">
				<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="select">刷新
				</el-button>
			  <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" :disabled="!isAuth('domainName:add')" @click="add">添加
			  </el-button>
			</div>
			<el-table v-loading = "tableDataLoading" :data = "tableData.list" >
			<el-table-column prop = "urlId" label = "编号" width = "80"></el-table-column>
			<el-table-column prop = "urlAddress" label = "域名地址">
			</el-table-column>
			<el-table-column prop = "num" label = "使用次数" >
			</el-table-column>
			<el-table-column prop="status" label="状态" width="150">
				<template slot-scope="scope">
					<!-- <span v-if="scope.row.status==1">开启</span>
					<span v-if="scope.row.status==2">关闭</span> -->
					<el-switch v-model="scope.row.status" @change="changeTj(scope.row)"
					  :disabled="!isAuth('domainName:update')" :active-value="openValue" :inactive-value="closeValue"
					  active-color="#13ce66" inactive-color="#ff4949">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column prop = "createTime" label = "创建时间" >
			</el-table-column>
			  	<el-table-column label = "操作" width = "180" align="center" fixed="right">
					<template slot-scope = "scope">
						<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" :disabled="!isAuth('domainName:update')" @click="updata(scope.row)">修改
						</el-button>
						<el-button size = "mini" type = "danger" :disabled="!isAuth('domainName:delete')" @click = "deletes(scope.row)">删除</el-button>
					</template>
			  	</el-table-column>
			</el-table>
			<div style = "text-align: center;margin-top: 10px;float:right">
			  	<el-pagination @size-change = "handleSizeChange" @current-change = "handleCurrentChange" :page-sizes = "[5, 10, 15, 20]"
							   :page-size = "limit" :current-page = "page" layout = "total,sizes, prev, pager, next,jumper"
							   :total = "tableData.totalCount">
			  	</el-pagination>
			</div>
		<!-- </el-tab-pane> -->
		<el-dialog title="添加" :visible.sync="dialogFormVisible" center>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">域名地址：</span>
			 <el-input style="width:50%;" v-model="urlAddress" placeholder="请输入域名地址"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">使用次数：</span>
				<el-input style="width:50%;" v-model="num" type="number" min="0" placeholder="请输入使用次数" ></el-input>
			</div>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
			  <el-radio-group v-model="status">
			    <el-radio :label="1">开启</el-radio>
			    <el-radio :label="2">关闭</el-radio>
			  </el-radio-group>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="vipAdd()">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">域名地址：</span>
			  <el-input style="width:50%;" v-model="urlAddress" placeholder="请输入域名地址"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">使用次数：</span>
				<el-input style="width:50%;" v-model="num" type="number" min="0" placeholder="请输入使用次数"></el-input>
			</div>
			<div style="margin-bottom: 10px;">
			  <span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
			  <el-radio-group v-model="status">
			    <el-radio :label="1">开启</el-radio>
			    <el-radio :label="2">关闭</el-radio>
			  </el-radio-group>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="vipUpdata()">确 定</el-button>
			</div>
		</el-dialog>
	</el-tabs>

</template>
<script>
    export default {
		data () {
			return {
				activeName:'first',
				page: 1,
				limit: 10,
				classify: 1,
				id:'',
				urlAddress: '',
				num: '',
				inviteImg: '',
				tableDataLoading:false,
				dialogFormVisible:false,
				dialogFormVisible1:false,
				tableData:{},
				status:1,
				openValue:1,
				closeValue:2,
			}
		},
		methods: {
			
			// tabs切换
			handleClick (tab, event) {
				if (tab._props.label == '轮播图') {
					this.page = 1
					this.limit = 5
					this.classify = 1
					this.dataSelect()
				}
			},
			handleSizeChange (val) {
				this.limit = val
				this.dataSelect()
			},
			handleCurrentChange (val) {
				this.page = val
				this.dataSelect()
			},
			
			// 查询列表
			select() {
				this.page = 1
				this.dataSelect()
			},
			// 添加
			add(){
				this.urlAddress = ''
				this.num = ''
				this.id = ''
				this.inviteImg = '';
				this.dialogFormVisible = true
			},
			updata(row){
				this.urlAddress = row.urlAddress
				this.num = row.num
				this.id = row.urlId
				this.dialogFormVisible1 = true
			},
			vipAdd(){
				if (this.urlAddress == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入域名地址',
				        type: 'warning'
				    });
				    return
				}
				if (this.num == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入使用次数',
				        type: 'warning'
				    });
				    return
				}
				
				this.$http({
				  url: this.$http.adornUrl('urlAddress/insertUrlAddress'),
				  method: 'post',
				  data: this.$http.adornData({
					  'urlAddress':this.urlAddress,
					  'num':this.num,
					  'status':this.status
				  })
				}).then(({data}) => {

				  if(data.code == 0){
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						  this.dialogFormVisible = false
				        this.dataSelect()
				      }
				    })
				  }else{
					  this.$message({
					    message: data.msg,
					    type: 'warning',
					    duration: 1500,
					    onClose: () => {
					    }
					  })
				  }
				})
			},
			vipUpdata(){
				if (this.urlAddress == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入域名地址',
				        type: 'warning'
				    });
				    return
				}
				if (this.num === '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入使用次数',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl('urlAddress/updateUrlAddress'),
				  method: 'post',
				  data: this.$http.adornData({
					  'urlAddress':this.urlAddress,
					  'num':this.num,
					  'urlId':this.id,
					  'status':this.status,
				  })
				}).then(({data}) => {

				  if(data.code == 0){
					  this.dialogFormVisible1 = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
				        this.urlAddress = ''
				        this.num = ''
						this.id = ''
				        this.dataSelect()
				      }
				    })
				  }else{
					  this.$message({
					    message: data.msg,
					    type: 'warning',
					    duration: 1500,
					    onClose: () => {
					    }
					  })
				  }
				})
			},
			// 删除
			deletes (row) {
				let delid = row.urlId
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`urlAddress/deleteUrlAddress?addressId=${delid}`),
						method: 'post',
						params: this.$http.adornParams({})
					}).then(({data}) => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					})
				}).catch(() => {
				})
			},
			// 获取数据列表
			dataSelect () {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('urlAddress/selectUrlAddressList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'urlAddress':'',
						'status':'',
					})
				}).then(({data}) => {
					if (data && data.code === 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.tableData = returnData
					}
				})
			},
			//修改状态
			changeTj(row){
				this.$http({
					url: this.$http.adornUrl('urlAddress/updateUrlAddress'),
					method: 'post',
					data: this.$http.adornData({
						'urlAddress':row.urlAddress,
						'num':row.num,
						'urlId':row.urlId,
						'status':row.status,
					})
				}).then(({
					data
				}) => {
					if(data.code==0){
						this.dialogFormVisible1 = false
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					}else{
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					}
			
				})
			},
		},
		mounted () {
			this.dataSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}
</style>
