<template>
	<view class="t-router-page">
		<!-- <store-name></store-name> -->
		<view class="t-title">物联卡管理
			<view class="t-reset" @click="updateList">更新
				<image src="../../static/images/refresh.png" mode=""></image>
			</view>
		</view>
		<view class="t-update">
			更新时间: {{update_time}}
		</view>

<!-- 		<view class="t-map" v-if="covers.length>0">
			 <map style="width: 100%; height: 250px;" :latitude="latitude" :longitude="longitude" :markers="covers">
			 </map>
		</view> -->
		
		<view class="t-box">
			<view class="info-list">
				<view class="i-item" v-for="(item,index) in infoObj">
					<view class="i-box">{{item.name}}</view>
					<rich-text class="i-box" :nodes="item.value"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../../../utils/util';
	import store_name from '../../components/store_name/store_name';
	import deviceServer from '../../js/device_server';
	import deviceApi from '../../js/device_api';

	const rootPage = '/subpackage/device'
	
	// 参数参考: https://support.huaweicloud.com/api-ocgsl/gsl_07_0008.html
	const infoObj = [
		{
			key:"act_date",
			value:"",
			name:"在线时间",
			key2:""
		},
		{
			key:"order_id",
			value:"",
			name:"批次号",
			key2:""
		},
		{
			key:"flow_left",
			value:"",
			name:"剩余流量(单位M)",
			key2:""
		},
		
		{
			key:"flow_used",
			value:"",
			name:"已用流量(单位M)",
			key2:""
		},{
			key:"sim_type",
			value:"",
			name:"sim卡类型",
			key2:"", //当key2,存在时,value为data[key][key2]
			typeArr:[,"vSIM","eSIM","实体卡"], //当typeArr,value 存在时, value为typeArr[value]
		},{
			key:"sim_status",
			value:"",
			name:"sim卡状态",
			key2:"", //当key2,存在时,value为data[key][key2]
			typeArr:{
				"11":"未激活",
				"13":"可激活",
				"14":"已停用",
				"20":"在用"
			}, //当typeArr,value 存在时, value为typeArr[value]
		},{
			key:"signal_level",
			value:"",
			name:"信号等级",
			key2:"",
			typeArr:["未知","差","良","良","优"]
		},{
			key:"price_plan_name",
			value:"",
			name:"在用套餐名",
			key2:"",
		},{
			key:"real_named",
			value:"",
			name:"是否已实名认证",
			key2:"",
		},{
			key:"sim_price_plan_id",
			value:"",
			name:"套餐订购实例ID",
			key2:"",
		},{
			key:"tag_names",
			value:"",
			name:"标签名",
			key2:"",
		},{
			key:"sim_card_id",
			value:"",
			name:"sim卡id",
			key2:""
		},{
			key:"cid",
			value:"",
			name:"cid",
			key2:""
		},{
			key:"imei",
			value:"",
			name:"imei",
			key2:""
		},{
			key:"imsi",
			value:"",
			name:"imsi",
			key2:""
		},{
			key:"iccid",
			value:"",
			name:"iccid",
			key2:""
		},{
			key:"msisdn",
			value:"",
			name:"msisdn",
			key2:""
		},{
			key:"network_type",
			value:"",
			name:"网络类型",
			key2:""
		},{
			key:"node_id",
			value:"",
			name:"设备标识",
			key2:""
		},{
			key:"operator_status",
			value:"",
			name:"运营商状态",
			key2:"",
			typeArr:["非停机","停机（超流量停机）" ,"停机（超流量阈值停机）" ,"停机（流量池停机）" ,"停机（套餐到期停机）","停机（主动停机）","停机（违规停机）"]
		},{
			key:"device_status",
			value:"",
			name:"iccid",
			key2:"",
			typeArr:["未知", "注册", "重启", "在线", "离线"]
		},{
			key:"cut_net_flag",
			value:"",
			name:"是否单独断网",
			key2:""
		},{
			key:"exceed_cut_net_flag",
			value:"",
			name:"是否达量断网",
			key2:""
		},{
			key:"exceed_cut_net_quota",
			value:"",
			name:"达量断网阈值(单位MB)",
			key2:""
		},{
			key:"imei_bind_remain_times",
			value:"",
			name:"本月机卡绑定剩余次数",
			key2:""
		},{
			key:"speed_value",
			value:"",
			name:"网络限制速率(单位Kbps)",
			key2:""
		},{
			key:"exceed_cut_net_quota",
			value:"",
			name:"达量断网阈值(单位MB)",
			key2:""
		},{
			key:"expire_time",
			value:"",
			name:"过期时间",
			key2:""
		},{
			key:"dbm",
			value:"",
			name:"信号强度",
			key2:""
		},{
			key:"device_model",
			value:"",
			name:"设备模组",
			key2:""
		}
	];
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			'store-name': store_name
		},
		computed: {
			...mapState({
				storeList: state => state.device.storeList,
				curStoreInfo: state => state.device.curStoreInfo,
			}),
			isDel() {
				return (item) => {
					return item[2] == "删除" ? "true" : ""
				}
			},

		},
		data() {
			return {
				infoObj,
				latitude: 23.2174411,
				longitude: 113.3048267,
				update_time:new Date(),
				covers: [
				],
			}
		},
		async onLoad(opts) {
			console.log("opts:",opts);
			this.mac = opts.mac;
			this.updateList()
			// try {
			// 	util.showLoad();
			// 	let _brandInfo = await this.$store.dispatch('getBrandInfo');
			// 	await this.$store.dispatch('getStoreList');
			// 	util.hideLoad();
			// } catch (err) {
			// 	util.hideLoad();
			// }

		},
		onShow() {
			// this.updateList() //更新中控信息
		},
		watch: {
		  //   curStoreInfo(newVal, oldVal){
				// this.infoArr.length = 1
		  //       this.updateList()
		  //   }
		},
		methods: {
			clickReboot(){
				let that = this
				uni.showModal({
					content: `更新信息 ?`,
					success(res) {
						console.log("确认", res.confirm)
						if(res.confirm){
							that.reboot4G()
						}
					},
				})
			},
			reboot4G(){
				util.showLoad();
				deviceServer.post({
					url: deviceApi.reboot4G,
					data: {
						mac:this.mac
					},
					isDefaultGet: false,
				})
				.then(res => {
					util.hideLoad();
					if (res.data.code == 0) {
						util.showNone(res.data.message || '操作成功！');
					} else {
						 util.showNone(res.data.message || '操作失败！');
					}
				})
				.catch(err => {
					 util.hideLoad()
				})
			},
			async updateList() {
				let that = this
				if(!this.mac)return
				util.showLoad();
				deviceServer.post({
					url: deviceApi.getLotDetail,
					data: {
						iccid:this.mac,
						is_sync:1  //是否同步,更新传1
					},
					isDefaultGet: false,
				})
				.then(res => {
					util.hideLoad();
					if (res.data.code == 0) {
						that.filterRouterData(res.data.data)
					} else {
						 util.showNone(res.data.message || '操作失败！');
					}
				})
				.catch(err => {
					 util.hideLoad()
				})
				
			},
			//过滤路由数据
			filterRouterData(data){
				console.log("filterRouterData:",data);
				let obj = this.infoObj
				for(var i in obj){
					let e = obj[i]
					let res = data[e.key]
					if(res==="undefined")res = "未知状态1"
					if(res==="")res = "未知状态2" //写个未知状态({状态值}) 字段没有还是数值没有
					console.log(888888,res);
					// if(res==="undefined"||res==="") continue
					e.value = (typeof(res)=="object")?data[e.key][e.key2]:res;
					e.value = e.value.toString();
					if(e.typeArr&&e.value)e.value = e.typeArr[e.value];
					if(e.value=== "false")e.value = "否";
					if(e.value=== "true")e.value = "是";
					// if(e.value===0)e.value = "0";
					console.log(e.value);
				}

				this.update_time = obj[0].value;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

		}
	}
</script>

<style lang="scss">
	@import '~style/public.scss';

	.t-router-page {

		.t-title {
			font-size: 44rpx;
			color: #1A1A1A;
			font-weight: 900;
			@include centerFlex(space-between);
			margin: 60rpx auto 0rpx 40rpx;
			.t-reset{
				padding-right: 48rpx;
				@include centerFlex(center);
				font-size: 32rpx;
				color: #009874;
				image{
					margin-top: 5rpx;
					margin-left: 15rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
			
		}
		.t-update{
			font-size: 28rpx;
			color: #9C9C9F;
			margin-top: 38rpx;
			margin-left: 40rpx;
		}
		.t-map{
			@include centerFlex(center);
			width:700rpx;
			// background-color: lightgray;
			// height: 450rpx;
			margin: 25rpx;
		}
		.t-box {
			height: 500rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			width: 100%;

			.tab-list {
				width: 100%;
				padding-left: 30rpx;
				@include centerFlex(flex-start);
				flex-wrap: nowrap;
				position: relative;

				.t-item {
					margin-right: 50rpx;
					padding: 10rpx;
					font-size: 32rpx;
					font-weight: 900;
					color: #9C9C9F;
					line-height: 40rpx;
				}

				.active {
					color: #009874;
					@include centerFlex(center);
					flex-direction: column;
				}

				.active:after {
					position: absolute;
					content: "";
					background-color: #009874;
					color: #009874;
					width: auto;
					display: block;
					width: 30rpx;
					text-align: center;
					height: 6rpx;
					border-radius: 3rpx;
					top: 60rpx;
				}
			}

			.info-list {
				margin-top: 30rpx;
				margin-bottom: 50rpx;
				width: 700rpx;
				height: auto;
				background: #FFFFFF;
				border-radius: 10rpx;
				font-size: 28rpx;

				.i-item {
					@include centerFlex(flex-start);

					.i-box {
						@include centerFlex(flex-start);
						flex-direction: row;
						padding: 26rpx 20rpx;
						height: 100%;
					}

					.i-box:first-child {
						@include centerFlex(center);
						width: 300rpx;
						text-align: center;
						border-right: 1rpx solid #F2F2F7;
					}

					.i-box:nth-child(2) {
						width: 100%;
					}

				}

				.i-item:not(:last-child) {
					border-bottom: 1rpx solid #F2F2F7;
				}

			}
		}
	}
</style>
