<template>
    <div class="ajm-panel">
        <div class="ajm-search-form">
            <el-form ref="searchForm" :model="searchForm" :inline="true">
                <el-row>
                    <el-col :span="6">
                        <el-form-item class="operate-buttons">
                            <el-button type="primary" icon="el-icon-ajm-add" @click="goAdd">{{$t('message.add')}}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" class="ajm-search-items">
                        <!-- <el-form-item>
                            <el-input class="search-item" v-model="searchForm.userName" placeholder="请输入用户名">
                            </el-input>
                        </el-form-item> -->
                        <el-form-item class="ajm-search-btns">
                            <!-- <el-button icon="el-icon-ajm-search" @click="search"></el-button> -->
                            <el-button icon="el-icon-ajm-refresh" @click="refreshSearch"></el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="ajm-table tool-table">
            <el-table ref="filterTable" :data="pageResult.list" v-loading="listLoading" @sort-change="handleSortChange" @filter-change="handleFilterChange" tooltip-effect="light">
                <el-table-column sortable type="index" :label="$t('message.Table.index')" width="70" />
                <el-table-column prop="ip" :label="$t('message.Manager.ip')" :show-overflow-tooltip="true" />
               <el-table-column prop="remark" :label="$t('message.Table.remark')" :show-overflow-tooltip="true"/>
                <el-table-column prop="createdTime" :label="$t('message.Table.createdTime')" sortable  width="180"/>
                <el-table-column :label="$t('message.Table.operate')" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-tooltip :content="$t('message.edit')" placement="top">
                            <el-button size="small" type="text" @click="goEdit(scope.$index, scope.row)">
                                <i class="el-icon-ajm-edit"></i>
                            </el-button>
                        </el-tooltip>
                        <!-- <el-tooltip content="查看详情" placement="top">
                            <el-button size="small" type="text" @click="goView(scope.$index, scope.row)">
                                <i class="el-icon-ajm-view"></i>
                            </el-button>
                        </el-tooltip> -->
                        <el-tooltip :content="$t('message.delete')" placement="top">
                            <el-button size="small" type="text" @click="goDelete(scope.$index, scope.row)">
                                <i class="el-icon-ajm-delete"></i>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="ajm-pagination-bar">
            <el-pagination background @current-change="changePage" @size-change="handleSizeChange" :current-page="pageResult.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageResult.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageResult.total" />
        </div>
        <!--弹窗-->
        <!-- <transition name="dialog-fade-top"> -->
			<el-dialog custom-class="ajm-dialog-middle" width="35%" top="0" :title="$t('message.Manager.ipConfig')" :visible.sync="ipDialogVisible" :modal-append-to-body="false" :before-close="closeIpDialog" :close-on-click-modal="false">
				<el-form class="ajm-form" :model="editForm" ref="editForm" :rules="editFormRules" label-width="90px">
					<el-form-item :label="$t('message.Manager.type')">
						<el-radio-group v-model="ipType">
						    <el-radio :label="1">{{$t('message.Manager.staticIp')}}</el-radio>
						    <el-radio :label="2">{{$t('message.Manager.range')}}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-row v-if="ipType==1">
						<el-form-item :label="$t('message.Manager.ipAddress')" >
						    <el-col :span="4" class="input_small" v-for="(item, index) in ipAddress" :key= "index" v-if="index<3">
								<!-- <el-input placeholder="-" maxlength="3" v-model="ipAddress[index]" /> -->
								<el-form-item style="margin: 0;">
									<el-input-number :controls="false" placeholder="3" class="ip-input-number" v-model="ipAddress[index]" :min="0" :max="255" />
								</el-form-item>
							</el-col>
							<el-col :span="4" class="input_small">
								<el-form-item style="margin: 0;">
									<el-input-number :controls="false"  class="ip-input-number" :min="0" :max="255" maxlength="3" v-model="iplast" />
								</el-form-item>
							</el-col>
						</el-form-item>
					</el-row>
					<el-row v-if="ipType==2">
						<el-form-item :label="$t('message.Manager.beAddress')">
						    <el-col :span="4" class="input_small" v-for="(item, index) in ipAddress" :key= "index">
						    	<!-- <el-input placeholder="-" maxlength="3" v-model="ipAddress[index]" /> -->
								<el-form-item style="margin: 0;">
									<el-input-number class="ip-input-number" v-model="ipAddress[index]" :controls="false" @change="index==3&&changeMin(ipAddress[index],index)" :min="0" :max="255" />
								</el-form-item>
							</el-col>
						</el-form-item>
						<el-form-item :label="$t('message.Manager.endAddress')">
						    <el-col :span="4" class="input_small" v-for="(item, index) in ipAddress" :key= "index" v-if="index<3">
								<el-form-item style="margin: 0;">
									<el-input-number class="ip-input-number" :disabled="true"  v-model="ipAddress[index]"  :controls="false" :min="0" :max="255" />
									<!-- <el-input placeholder="-" maxlength="3" disabled v-model="ipAddress[index]" /> -->
								</el-form-item>
						    </el-col>
							<el-col :span="4" class="input_small">
								<el-form-item style="margin: 0;">
									<el-input-number class="ip-input-number" v-model="ipendLast" :controls="false" :min="minInput" :max="255" />
									<!-- <el-input placeholder="-" maxlength="3" v-model="ipendLast" /> -->
								</el-form-item>
							</el-col>
						</el-form-item>
					</el-row>
					<el-form-item :label="$t('message.Table.remark')">
						<el-input style="width: 95%;" type="textarea" rows="5" v-model="editForm.remark" :placeholder="$t('message.Table.confirmRemark')" />
					</el-form-item>
				</el-form>
				<div v-if="false">
					<p>{{$t('message.Manager.ipClue')}}</p>
					<p>192.168.1.1</p>
					<p>192.168.1.*</p>
					<p>192.168.1.1-192.168.1.255</p>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" size="small" :loading="saveLoading" @click="saveOrUpdate('editForm')">{{$t('message.save')}}</el-button>
					<el-button size="small" @click="ipDialogVisible = false">{{$t('message.cancel')}}</el-button>
				</div>
			</el-dialog>
        <!-- </transition> -->
    </div>

</template>

<script>
    import ipService from "../services/ipService";
    export default {
        data() {
            return {
                ipDialogVisible:false,
                statusUser: [{ text: this.$t('message.Table.Enabled'), value: 1 }, { text: this.$t('message.Table.Unabled'), value: 2 }],
                saveLoading:false,
                listLoading: false,
                //分页结果集
                pageResult: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0,
                    list: []
                },
                // 查询表单
                searchForm: {},
                editForm: {
					ip:'',
					remark:'',
                },
				ipType:1,
				minInput:0,
				ipAddress:['','','',''],
				iplast:1,
				ipendLast:'',
                editFormRules: {
                    /* iplast: [
						{ validator: checkIp, trigger: "" }
                    ],
					ipendLast:[
						 {required:true,message:"请输入地址",trigger: "blur" }
					], */
                },
                sortType: 2,
				isView:false,
            };
        },
        methods: {
            getIpList() {
				let params={
					page: this.pageResult.pageNum,
					rows: this.pageResult.pageSize,
					sortType:this.sortType
				}
				ipService.findFilterIpListByPage(params).then(resp => {
                    this.pageResult=resp
                });
            },
            //时间排序
            handleSortChange(column, prop, order) {
                if (column.order === "ascending") {
                    this.sortType = 1;
                } else if (column.order === "descending") {
                    this.sortType = 2;
                }
                this.getIpList();
            },
            //筛选用户状态
            handleFilterChange(filters) {

            },
            //关闭用户表单弹窗
            closeIpDialog(done) {
                done();
                this.$refs.editForm.resetFields();
            },
            //切换页面
            changePage(page) {
                this.pageResult.pageNum = page;
                this.getIpList();
            },
            //依据页码数分页
            handleSizeChange(pageSize) {
                this.pageResult.pageSize = pageSize;
                this.getIpList();
            },
            // 查询
            search() {
                this.pageResult.pageNum = 1
                this.getIpList();
            },

            //刷新页面
            refreshSearch(){
                this.pageResult.pageNum = 1
                this.pageResult.pageSize = 10
                this.sortType = 2
				this.$refs.filterTable.clearFilter();
				this.getIpList();
            },
            //添加IP
            goAdd() {
				this.editForm={
					ip:'',
					remark:'',
                }
				this.ipType=1;
				this.ipAddress=[192,168,1,1];
				this.ipendLast=2;
                this.ipDialogVisible = true;
            },
            //编辑IP
            goEdit(index, row) {
				this.editForm={
					id:row.id,
					ip:row.ip,
					remark:row.remark
				}
				if(row.ip.indexOf('-')>0){
					this.ipType=2
					let ipData = row.ip.split('-')
					this.ipAddress=ipData[0].split('.')
					this.ipendLast=Number(ipData[1].split('.')[3])
				}else{
					this.ipType=1
					this.ipAddress=row.ip.split('.')
					this.iplast=Number(this.ipAddress[3])
					this.ipendLast=this.iplast
				}
                this.ipDialogVisible = true;
            },
			goView(index, row) {
				this.isView=true
                this.ipDialogVisible = true;
				this.editForm=row
            },
            //删除IP
            goDelete(index, row) {
                this.$confirm(this.$t('message.confirmRequest'), this.$t('message.delClue'), {
                    cancelButtonClass:"message-cancel-button",
                    confirmButtonText: this.$t('message.confirm'),
                    cancelButtonText: this.$t('message.cancel'),
                    type: "warning"
                }).then(() => {
                    ipService.deleteFilterIpById(row.id).then(resp => {
                        var result = resp.data || resp;
                        if (result.status == 500) {
                            this.$message({
                                message: resp.message,
                                type: "error"
                            });
                            return;
                        }
                    	this.$message({
                    	    message: this.$t('message.delSuccess'),
                    	    type: "success"
                    	});
                    	this.getIpList();
                    });
                }).catch(() => { });
            },
            //去除空格
            trim(val) {
                return val.replace(/(^\s*)|(\s*$)/g, "");
            },
			changeMin(value,index){
				this.minInput=value
				if(value>=this.ipendLast&&value<255){
					this.ipendLast=value+1
				}
			},
            //保存
            saveOrUpdate(formName) {
                this.$refs[formName].validate(valid => {
					//判断是IP 还是地址段
					let subIp=''
					if(this.ipType==1){
						subIp=this.ipAddress.slice(0,3).join('.')+'.'+this.iplast
					}else{
						subIp=this.ipAddress.join('.')+'-'+this.ipAddress.slice(0,3).join('.')+'.'+this.ipendLast
					}
					let params={
						id: this.editForm.id,
						ip: subIp,
						remark:this.editForm.remark
					}
					this.saveLoading = true;
                    ipService.saveOrUpdate(params).then(resp => {
                        this.saveLoading = false;
						this.ipDialogVisible = false;
                        var result = resp.data || resp;
                        if (result.status == 500) {
                            this.$message({
                                message: resp.message,
                                type: "error"
                            });
                            return;
                        }
						this.$message({
						    message: this.$t('message.saveSuccess'),
						    type: "success"
						});
						this.getIpList();
                    });
                });
            },
            //重置表单
            resetForm(formName) {
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields();
                }
            },
        },
        mounted() {
            this.getIpList();
        }
    };
</script>

<style lang="less" scoped>
.input_small{
	margin-right: 10px; min-width: 60px;
	.ip-input-number{
		width: 60px; min-width: 60px;
		padding-left: 0;
	}
}
</style>
