<template>
    <view class="switch-manage">
        <store-name></store-name>
        <view class="sm-tit">{{pageInfo.name || '-'}}</view>
		<view class="sm-tip" v-if="pageInfo.longOpenName">*长开表示不再被系统智能控制，只有手动关闭后才会被智能控制。请谨慎操作。</view>
        <view class="sm-list">
            <view class="sl-item" v-for="(e, i) in deviceList" :key="i" :style="{width:getViewWidth()}">
  
				<view class="si-top" >
                    <image mode="aspectFit" :src="getIcon()" ></image>
                    <view class="st-right">
                        <view class="sr-name">{{e.hardware_name || '-'}}</view>
                        <!-- 门闸没有状态查询 -->
                        <!-- 请求接口自定义字段设备状态 1->在线，0->离线 -->
						<view class="sr-bot-router" v-if="pageInfo.name =='物联卡管理'">
						    sim状态: <text>{{getLotStatus(e)}}</text>
						</view>
                        <view class="sr-bot" v-else-if="pageInfo.id !=5">
                            <view :class="[e.defineStatusCode == 1?'active':'']">
                                <text>{{ e.defineStatusCode == 1 ? '设备在线' : e.defineStatusCode == 0?'设备离线' : '-' }}</text>
                            </view>
                            <image mode="aspectFit" src="/subpackage/device/static/images/refresh.png" @click="refreshStatusBtn({switchInfo:e, index:i})"></image>
                        </view>
                    </view>
                </view>
				
				<!-- 不同设备的可操作按钮区分,目前无明显规律,so 按需求单独 if 判断 -->
                <view class="si-bottom" v-if="pageInfo.isOpen || pageInfo.isClose || pageInfo.isDetail||pageInfo.isTiming">
                    <view v-if="pageInfo.isOpen" @click="operateBtn({ switchInfo: e, status: 1 })" :style="{width:getIconWidth()}">
                        <image mode="aspectFit" :src="pageInfo.openIcon || ''"></image>
                        <view>{{pageInfo.openName || '-'}}</view>
                    </view>
                    <view v-if="pageInfo.isClose" @click="operateBtn({ switchInfo: e, status: 0 })" :style="{width:getIconWidth()}">
                        <image mode="aspectFit" :src="pageInfo.closeIcon || ''"></image>
                        <view>{{pageInfo.closeName || '-'}}</view>
                    </view>
					<view v-if="pageInfo.isLongOpen" @click="operateBtn({ switchInfo: e, status: 2 })" :style="{width:getIconWidth()}">
					    <image mode="aspectFit" :src="pageInfo.longOpenIcon || ''"></image>
					    <view>{{pageInfo.longOpenName || '-'}}</view>
					</view>
					<view v-if="pageInfo.isTiming" @click="operateBtn({ switchInfo: e, status: 3 })" :style="{width:getIconWidth()}">
					    <image mode="aspectFit" :src="pageInfo.timingIcon || ''"></image>
					    <view>{{pageInfo.timingName || '-'}}</view>
					</view>
					<view v-if="pageInfo.isDetail" @click="operateBtn({ switchInfo: e, status: 4 })" class="btn-detail">
					    <view >{{pageInfo.detailName || '-'}}</view>
					</view>
                </view>
                <view class="si-detail-btn" v-if="isDetailBtn(e)" @click="toDeviceDetail(e)">
                    <text>详情</text>
                    <image mode="aspectFit" src="/subpackage/device/static/images/arrow_b2.png"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

// 门闸暂时没有查询状态

import store_name from '../../components/store_name/store_name';
import deviceServer from '../../js/device_server';
import deviceApi from '../../js/device_api';

import { mapState } from 'vuex';
import util from '../../../../utils/util';
import DEVICE_FUN from '../../js/device_fun.js';

export default {
    components: {
        'store-name': store_name
    },
    computed: {
        ...mapState({
            curStoreInfo: state => state.device.curStoreInfo,
        }),
		getIconWidth(){//计算操作icon的宽度
			return ()=>{
				return 100/this.pageInfo.iconNum+'%'
			}
		},
		getLotStatus(){//sim卡状态, 0 : 华为文档中没有
			return (e)=>{
				return ["未知","注册","重启","在线","离线"][e.extension['HWC'].device_status]
			}
		},
		getViewWidth(){//计算按钮区域的宽度
			return ()=>{
				let widthViewArr = ["照明管理","水阀管理","风扇管理"]
				return (widthViewArr.indexOf(this.pageInfo.name)>=0)?'710rpx':'';
			}
		}
    },
    watch: {
        curStoreInfo(newVal, oldVal){
            this.deviceList = [];
            this.getDeviceList({
                stadium_id: newVal.id,
                hardware_type: this.pageInfo.hardware_type
            })
        }
    },
    data(){
        return {
            pageInfo: {},
            deviceList: [],
        }
    },
    onLoad(options){
        let _pageInfo = getShowArr(`s${options.sid}`) || {};
        this.pageInfo = _pageInfo;
        uni.setNavigationBarTitle({ title: _pageInfo.name });
        
        this.getDeviceList({
            stadium_id: this.curStoreInfo.id,
            hardware_type: this.pageInfo.hardware_type
        })
    },
    methods: {
        isDetailBtn(e){
            if(e&&e.toString() === "[object Object]"){
                return e.hardware_model == 'XiaoHuiXiong'
            }
            return false;
        },
        toDeviceDetail(e){
            console.warn(e);
            console.warn(this.getSwitchStatusQuery(e));
            let _queryObj = this.getSwitchStatusQuery(e) || {};
            if(!_queryObj.data || !_queryObj.data.name || !_queryObj.data.value)return;
            _queryObj.data.value&&_queryObj.data.value.op&&(_queryObj.data.value.op = 'info');
            let _qrStr = util.jsonStr(_queryObj);
            if(e.hardware_type == "Air")return util.routeTo(`/subpackage/device/pages/air_conditioner/detail/detail?qrstr=${_qrStr}&name=${e.hardware_name || '-'}`, 'nT');
        },
        getDeviceList({
            stadium_id,
            hardware_type,
            limit = 100,
            page = 1
        }){
            util.showLoad();
			
			let reqListData = {
                    'filter[hardware_type]': hardware_type,
                    'filter[stadium_id]': stadium_id,
                    'limit': limit,
                    'page': page,
                }
			if(hardware_type=="WaterValve")	reqListData.operating_status = 1; //0723 按测试要求 水阀这里加多一个状态
            deviceServer.get({
                url: deviceApi.hardwareList,
                data: reqListData,
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _list = res.list || [];
				if(hardware_type=="Router4G"){ //路由器在线状态设置
					_list = _list.map((e,i)=>{
						 e['defineStatusCode'] = e.extension.online? 1 : 0;
						return e
					})
				}
                this.deviceList = _list;
                console.log(res)
            })
            .catch(util.hideLoad)
        },
        controlDevice(e){
			util.routeTo(`/subpackage/device/pages/index/lot_manage?mac=${switchInfo.hardware_standard}`, 'nT');
		},
        // 按钮操作， status 0 -> 关（左）， 1 -> 开（右） ,2 -> 长开 ,3 -> 定时, 4 ->详情(自定义)
        operateBtn: util.debounce(function({ switchInfo, status }){
			console.log("icon tap status: ",status,switchInfo) 
			
            let _data = this.getOperateReqData({ switchInfo, status })
			
			_data = DEVICE_FUN.AC_filterCloudACData(_data,switchInfo);
			
            //针对门禁没有关按钮发两条命令->开&关 20201224 后端： 直接发两条 关的那条这里填5 然后你那边不用管返回
			
			//新增定时/长按拦截判断
			// if(status == 2) return util.showNone("该功能暂未开放")
			
			if(status == 4){
				
				// if(this.pageInfo.name=='监控管理')return util.routeTo(`/subpackage/device/pages/monitor_manage/monitor_manage?mac=${switchInfo.hardware_standard}`, 'nT');
				if(this.pageInfo.name=='窗帘管理')return util.routeTo(`/subpackage/device/pages/index/sunblind_manage?mac=${switchInfo.hardware_standard}`, 'nT');
				if(this.pageInfo.hardware_type=='Router4G')return util.routeTo(`/subpackage/device/pages/index/router_manage?mac=${switchInfo.hardware_standard}`, 'nT');
				if(this.pageInfo.hardware_type=='IotSim')return util.routeTo(`/subpackage/device/pages/index/lot_manage?mac=${switchInfo.hardware_standard}`, 'nT');
				
			}
			if(status == 3) return (()=>{
				switchInfo.switchData = _data;//将中控组合数据传递到下层
				let timing_setting = `/subpackage/device/pages/timing/timing_setting?switchInfo=${encodeURIComponent(JSON.stringify(switchInfo))}`
				util.routeTo(`${timing_setting}`, 'nT');
			})()
			
			
            if(switchInfo.hardware_type === 'AccessControl'&&status == 1){
                //针对门禁没有关按钮发两条命令->开&关 20201224 后端： 直接发两条 关的那条这里填5 然后你那边不用管返回
                this.operateReq({data: DEVICE_FUN.AC_filterCloudACData(this.getOperateReqData({ switchInfo, status: 0 }), switchInfo), isTip: false, isLoad: false});
            }
            
            this.operateReq({ data: _data });

        }, 300, 300),
        
        // 获取接口参数结构
        getOperateReqData({ switchInfo, status }){
            let { curStoreInfo } = this;
            let _query = switchInfo.hardware_type === 'GateControl' ? 
                         this.getGateQuery({ switchInfo, status}) : 
                         this.getSwitchQuery({ switchInfo, status });

            let _data = {
                    device: curStoreInfo.device_name, // 中控名,
                    data: _query, // 后端数据结构， 参考src\subpackage\device\js\ouxuanac.md
                };
				
			//2021-12-17 群里说的那个锁的  需要全部关闭灯的按钮从 set-rpio 变成 set-rpio-lock     普通开灯保持不变    加锁开灯(长开) set-rpio-lock
			if(switchInfo.hardware_type=="Light"&&_data.data.value.status=="high")_data.data.name = "set-rpio-lock"
			if(switchInfo.hardware_type=="Light"&&status==2)_data.data.name = "set-rpio-lock"
			
            //针对门禁没有关按钮发两条命令->开&关 20201224 后端： 直接发两条 关的那条这里填5 然后你那边不用管返回
            if(switchInfo.hardware_type === 'AccessControl'&&status == 0)_data['delay'] = '3';

            // 20220507 门闸 GateControl 要是 hardware_mac_addr 不为空 device_name 替换成 hardware_mac_addr
            // 另外多做一步  传多一个 "hardware_id":id 给我
            if(switchInfo.hardware_type === 'GateControl'&&!!switchInfo.hardware_mac_addr)_data['device'] = switchInfo.hardware_mac_addr;
            if(switchInfo.hardware_type === 'GateControl')_data['hardware_id'] = switchInfo.id;
            
            return _data;
        },
        // 操作接口请求
        operateReq({data, isTip=true, isLoad=true}){
            if(isLoad)util.showLoad();
            deviceServer.post({
                url: deviceApi.ouxuanac,
                data: data,
                isDefaultGet: false,
            })
            .then(res=>{
                if(isLoad)util.hideLoad();
                if(res.data.code == 0){
                    if(isTip)util.showNone(res.data.message || '操作成功！');
                }else{
                    if(isTip)util.showNone(res.data.message || '操作失败！');
                }
            })
            .catch(err=>{if(isLoad)util.hideLoad()})
        },
        // 门闸数据结构 // 门闸数据结构不统一
        getGateQuery({ switchInfo, status }){
            let { enter_id, leave_id, hardware_net_addr } = switchInfo;
            // 进出控制ID |进入-> enter_id  离开-> leave_id|
            let _cid = status === 1 ? enter_id : 
                       status === 0 ? leave_id : '';  
            return {  
                // hardware_id: switchInfo.id,
                name: 'gate',
                value: {
                    tcp: hardware_net_addr + '',
                    cid: _cid  + ''
                },
                is_delay: true,
                queue_group: 'gate'
            }
        },
        // 
        refreshStatusBtn: util.debounce(function({switchInfo, index}){
			
			if(switchInfo.hardware_type == "Router4G"){
				return this.getDeviceList({
				    stadium_id: this.curStoreInfo.id,
				    hardware_type: this.pageInfo.hardware_type
				})
			}
			
			let _data = this.getSwitchStatusQuery(switchInfo);
			_data = DEVICE_FUN.AC_filterCloudACData(_data,switchInfo);
			
            this.getStatusReq({
                data: _data,
                index,
            })
        },300,300),
        // 获取设备状态
        getStatusReq({data, index}){
            let _deviceList = this.deviceList.slice();
            util.showLoad();
            deviceServer.post({
                url: deviceApi.ouxuanac,
                data: data,
                isDefaultGet: false,
            })
            .then(res=>{
                util.hideLoad();
                let _data = res.data || {};
                console.log(this.changeLowerCase(_data.data))
                if(_data.code == 504 || this.changeLowerCase(_data.data).indexOf('timeout')!=-1){  // 不在线
                    _deviceList[index]['defineStatusCode'] = 0;
                    
                }else if(_data.code == 0&&this.changeLowerCase(_data.data).indexOf('timeout')==-1){  // 在线
                    _deviceList[index]['defineStatusCode'] = 1;
                }else{
                    util.showNone(_data.message || '操作失败！');
                }
                this.deviceList = _deviceList;
                // if(res.data.code == 0){
                //     if(isTip)util.showNone(res.data.message || '操作成功！');
                // }else{
                //     if(isTip)util.showNone(res.data.message || '操作失败！');
                // }
            })
            .catch(util.hideLoad)
        },

        // 咖啡机和门闸暂时没有状态
        // 设备状态请求参数数据结构
        getSwitchStatusQuery(switchInfo){
            let { curStoreInfo } = this;
            let { 
                    hardware_connect_method,  
                    hardware_type, 
                    hardware_id,
                    node_id, 
                    hardware_net_addr 
                } = switchInfo;

            
            const _query = { 
                name: this.getStatusQueryName(switchInfo), 
                value: { id: hardware_id + '', }  // value 内值全为String
            };
            
            if (this.changeLowerCase(hardware_connect_method) === 'tcp') _query.value['tcp'] = hardware_net_addr + '';
            let _flag = this.changeLowerCase(hardware_connect_method) === 'serialport485' ||  this.changeLowerCase(hardware_connect_method) === 'tcp';
            if (_flag){
                if(hardware_type === 'Air'){ // 空调开关状态 key为 op
                    _query.value['op'] = 'status'
                    _query['name'] = this.getAirQueryName(switchInfo)
                }else{
                    _query.value['p'] = node_id + ''; // 硬件子id
                    // postData.value['o'] = this.getRelayStatus(status); // 开关状态
                }
            }

            return {
                device: curStoreInfo.device_name, // 中控名,
                data: _query, // 后端数据结构， 参考src\subpackage\device\js\ouxuanac.md
            }

            // this.getStatusReq({
            //     index,
            //     data: {
            //         device: curStoreInfo.device_name, // 中控名,
            //         data: _query, // 后端数据结构， 参考src\subpackage\device\js\ouxuanac.md
            //     }
            // })
        },
        // switchInfo -> 当前开关信息
        // status -> 开关状态 0 -> 关（右）， 1 -> 开（左）
        // 数据结构参考 src\subpackage\device\js\ouxuanac.md
        // 空调开关数据结构独立判断处理 hardware_type === 'Air'
        getSwitchQuery({ switchInfo, status = '' }){
			
            let { 
                    hardware_connect_method,  
                    hardware_type, 
                    hardware_id,
                    node_id, 
                    hardware_net_addr 
                } = switchInfo;
			const _hardware_connect_method = this.changeLowerCase(hardware_connect_method)
			
            const postData = { 
                name: this.getQueryName(switchInfo), 
                value: { id: hardware_id + '', }  // value 内值全为String
            };

            if (_hardware_connect_method === 'gpio') postData.value['status'] = this.getRelayStatus(status);
            
            // tcp 连接需要 hardware_net_addr
            if (_hardware_connect_method === 'tcp') postData.value['tcp'] = hardware_net_addr + '';
            // let _flag = _hardware_connect_method === 'serialport485' ||  _hardware_connect_method === 'tcp'||_hardware_connect_method==='yzk';
			let _flag = ['serialport485','tcp','yzk'].some(e=> e===_hardware_connect_method);
            if (_flag){
                if(hardware_type === 'Air'){ // 空调开关状态 key为 op
                    postData.value['op'] = this.getAirRelayStatus(status);
                    postData['name'] = this.getAirQueryName(switchInfo)
                }else{
                    // 空调设备不需要以下两个字段
                    postData.value['p'] = node_id + ''; // 硬件子id
                    postData.value['o'] = this.getRelayStatus(status); // 开关状态
                }
            }
			
            return postData;
        },
        changeLowerCase(str){
			return str.toString().toLocaleLowerCase();
        },
        // 常规开关状态
        // Low = "low",  // 低电位，为开启
        // High = "high", // 高电位， 为关闭
		// status 0 -> 关（左）， 1 -> 开（右） ,2 -> 长开 ,3 -> 定时, 4 ->详情(自定义)
        getRelayStatus(status){
            return [ 'high', 'low', 'low', 'high', ''][status] || ''
        },
        
        // 空调状态
        // status = "status",
        // on = "on",
        // off = "off",
        getAirRelayStatus(status){
            return [ 'off', 'on' ][status] || ''
        },

        // 非空调获取状态name
        getStatusQueryName(switchInfo){
            let { hardware_connect_method } = switchInfo;
            let _obj = {
                'Gpio': 'get-rpio', // 全设备
                'SerialPort485': 'zzio404d-gpio-status',
                'Tcp': 'zzio404d-gpio-status-tcp', 
				'YZK':'zzio404d-gpio-status'
            };

            return _obj[hardware_connect_method] || ''
        },

        // 非空调获取设置name
        getQueryName(switchInfo){
            let { hardware_connect_method } = switchInfo;
            let _obj = {
                'Gpio': 'set-rpio', // 全设备
                'SerialPort485': 'zzio404d-gpio',
                'Tcp': 'zzio404d-gpio-tcp', 
				'YZK':'zzio404d-gpio'
            };

            return _obj[hardware_connect_method] || ''
        },
        // 空调name获取
        getAirQueryName(switchInfo){
            let { hardware_connect_method, hardware_model } = switchInfo;
            let _flag = this.changeLowerCase(hardware_connect_method) === 'tcp'&&this.changeLowerCase(hardware_model) === 'jianda';
            if(_flag)return 'ray-air-rs-tcp';
            let _obj = {
                'acmelec': 'acmelec',
                'zhongnan': 'zhongnan',
                'jianda': 'ray-air-rs',
				"xiaohuixiong":"xhx-lora-air-tcp"
            };
            return _obj[this.changeLowerCase(hardware_model)] || '';
        },
        getIcon(){
            let { pageInfo } = this;
            if(!pageInfo.id)return '';
            return `/subpackage/device/static/images/devices/${pageInfo.id}.png`
        }
    }
}

function getShowArr(key){
     let _obj = {
        's1': {
            id: 1, name: '照明管理', isOpen: true, isClose: true, isLongOpen:true, isTiming:true,
            openIcon: '/subpackage/device/static/images/open.png',closeIcon: '/subpackage/device/static/images/close.png',
            longOpenIcon: '/subpackage/device/static/images/longOpen.png',timingIcon: '/subpackage/device/static/images/timing.png',
            openName: '开', closeName: '关', longOpenName: '长开', timingName: '定时', hardware_type: 'Light',iconNum:4
        },
        's2': {
            id: 2, name: '空调管理', isOpen: true, isClose: true, 
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            openName: '开', closeName: '关', hardware_type: 'Air',iconNum:2
        },
        's3': {
            id: 3, name: '风扇管理', isOpen: true, isClose: true, isLongOpen:true, isTiming:true,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            longOpenIcon: '/subpackage/device/static/images/longOpen.png',timingIcon: '/subpackage/device/static/images/timing.png',
            openName: '开', closeName: '关', hardware_type: 'Fan',longOpenName: '长开', timingName: '定时',iconNum:4,
        },
        's4': {
            id: 4, name: '门禁管理', isOpen: true, isClose: false,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            openName: '开', closeName: '关', hardware_type: 'AccessControl',iconNum:2
        },
        's5': {
            id: 5, name: '门闸管理', isOpen: true, isClose: true,
            openIcon: '/subpackage/device/static/images/in.png',
            closeIcon: '/subpackage/device/static/images/out.png',
            openName: '进', closeName: '出', hardware_type: 'GateControl',iconNum:2
        },
        's6': {//TODO 等待接口
            id: 6, name: '平板管理', isOpen: false, isClose: false,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            openName: '开', closeName: '关', hardware_type: 'Router4G',iconNum:2
        },
        's11': {
            id: 11, name: '水阀管理', isOpen: true, isClose: true,isLongOpen:true, isTiming:true,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
        longOpenIcon: '/subpackage/device/static/images/longOpen.png',timingIcon: '/subpackage/device/static/images/timing.png',
        openName: '开', closeName: '关', hardware_type: 'WaterValve',longOpenName: '长开', timingName: '定时',iconNum:4,
        },
        's12': {
            id: 12, name: '互动设备管理', isOpen: true, isClose: true,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            openName: '开', closeName: '关', hardware_type: '',iconNum:2
        },
        's13': {//TODO 等待接口
            id: 13, name: '监控管理', isOpen: false, isClose: false, isDetail:true,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            openName: '开', closeName: '关',detailName:"详情", hardware_type: 'IotSim',iconNum:2
        },
        's17': {//TODO 等待接口
            id: 17, name: '窗帘管理', isOpen: false, isClose: false, isDetail:true,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            openName: '开', closeName: '关',detailName:"详情", hardware_type: 'Router4G',iconNum:2
        },
        's18': {
            id: 18, name: '路由器管理', isOpen: false, isClose: false, isDetail:true,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            openName: '开', closeName: '关',detailName:"详情", hardware_type: 'Router4G',iconNum:2
        },
        's19': {
            id: 19, name: '物联卡管理', isOpen: false, isClose: false, isDetail:true,
            openIcon: '/subpackage/device/static/images/open.png',
            closeIcon: '/subpackage/device/static/images/close.png',
            openName: '开', closeName: '关',detailName:"详情", hardware_type: 'IotSim',iconNum:2
        },

        
    }
    return _obj[key] || {}
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .sm-tit{
        padding-left: 40upx;
        padding-top: 52upx;
        padding-bottom: 30upx;
        line-height: 60upx;
        font-size: 44upx;
        font-weight: 500;
        color: #333;
    }
    .sm-tip{
        padding: 0 40upx;
        font-size: 28upx;
        color: #979797;
        margin-bottom: 24upx;
    }
    .sm-list{
        padding: 0 32upx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap ;
        .sl-item{
            margin-bottom: 30upx;
            width: 328upx;
            border-radius: 10upx;
            background-color: #fff;
            .si-top{
                padding: 20upx 20upx 30upx;
                display: flex;
                flex-wrap: nowrap;
                >image{
                    flex-shrink: 0;
                    flex-grow: 0;
                    margin-right: 20upx;
                    width: 80upx;
                    height: 80upx;
                }
                .st-right{
                    flex-grow: 1;
                    >.sr-name{
                        margin-bottom: 8upx;
                        line-height: 44upx;
                        font-size: 32upx;
                        color: #333;
                        @include textHide(1);
                    }
					.sr-bot-router{
						font-size: 20rpx;
						color: #9C9C9F;
						text{
							margin-left: 15rpx;
							color: black;
						}
					}
                    .sr-bot{
                        display: flex;
                        align-items: center;
                        >view{
                            margin-right: 8upx;
                            padding: 0 12upx;
                            font-size: 20upx;
                            line-height: 28upx;
                            border-radius: 28upx;
                            border: 2upx solid #9A9A9D;
                            color: #9A9A9D;
                            &::before{
                                content: '';
                                margin-right: 12upx;
                                margin-top: -4upx;
                                display: inline-block;
                                vertical-align: middle;
                                width: 8upx;
                                height: 8upx;
                                border-radius: 50%;
                                background-color: #9A9A9D;
                            }
                            &.active{
                                color: #333333;
                                &::before{
                                    background-color: $themeColor;
                                }
                            }
                        }
                        >image{
                            flex-shrink: 0;
                            flex-grow: 0;
                            width: 32upx;
                            height: 32upx;
                        }
                    }
                }
            }
            .si-bottom{
                padding-top: 30upx;
                padding-bottom: 30upx;
                display: flex;
                justify-content: center;
                border-top: 2upx solid #F2F2F7;

                >view{
                    flex-shrink: 0;
                    flex-grow: 0;
                    width: 50%;
                    >image{
                        display: block;
                        margin: 0 auto 20upx;
                        width: 100upx;
                        height: 100upx;
                    }
                    >view{
                        font-size: 24upx;
                        line-height: 34upx;
                        text-align: center;
                        color: #9a9a9d;
                    }
                }
				.btn-detail{
					width:auto;
					> view{
						width: 204rpx;
						height: 88rpx;
						background: #009874;
						border-radius: 10rpx;
						text-align: center;
						line-height: 88rpx;
						color: white;
					}

				}
            }
            .si-detail-btn{
                height: 82upx;
                line-height: 82upx;
                text-align: center;
                font-size: 28upx;   
                color: #333;
                border-top: 2upx solid #F2F2F7;
                >image{
                    margin-left: 10upx;
                    width: 24upx;
                    height: 24upx;
                    vertical-align: middle;
                }
            }
        }
    }
</style>