<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <div class="card">
            <div>作业类型：有限空间作业-123123123123</div>
            <div>求救等级：SOS求救</div>
            <div>求救时间：2021-10-22 17:23:23</div>
            <div>作业地点：朝阳区西大街34号</div>
            <div>地图坐标：<span @click="goMap">X:124124.23423  Y:1231254.124</span></div>
        </div>
        <div class="medium-text">救援队伍</div>
        <div class="card" v-for="(item,index) in cardList2"  :key="index">
            <div class="card-type1">
                <div class="card-number">
                    <div class="card-circle">{{index+1}}</div>
                </div>
                <div class="card-text">
                    <div>{{item.army}}</div>
                    <div>{{item.personName}}</div> 
                    <div class="card-personNum">人员：{{item.personNum}}人；</div>
                </div>
            </div>
        </div>
        <!-- <tab-bar :index="1"></tab-bar> -->
    </div>
</template>

<script>
// import tabBar from "@/components/TabBar";
import LHeader from '@/components/header.vue'
import { getFun,postFun } from '@/service/table'
export default {
    name: 'SOSDetail',
    components: {
        "LHeader":LHeader,
        // "tabBar":tabBar
    },
    data() {
        return {
            text:'SOS详情',//顶部文本
            list:{},//详情列表
            id:'',//详情列表id
            cardList2:[
                {
                    army:'有限空间作业队伍-123124121241',
                    personName:'王天力（已读)',
                    personNum:'11/12'   
                },
                {
                    army:'有限空间作业队伍-123124121241',
                    personName:'王天力（已读)',
                    personNum:'11/12'   
                }
            ],//卡片2数据
        }
    },
    mounted() {
        this.id=this.$route.query.id
        this.init()
    },
    methods: {
        /* 获取详情列表 */
        goMap() {
            this.$router.push({
                name: "map-location-two",
                // params: {
                //     data: coordinate
                // }
            });
        },
        init(){
            this.list={}
            // getFun('check/carry/trouble/'+this.id).then((Response)=>{
            //     this.list=JSON.parse(JSON.stringify(Response.data))
            //     //数据处理
            //     this.list.deptNames=this.list.deptNames.join('/')
            //     this.list.pictures=[]
            //     this.list.videos=[]
            //     Response.data.pictures.forEach((item) => {
            //         this.list.pictures.push({
            //             url:item
            //         })
            //     });
            //     Response.data.videos.forEach((item) => {
            //         this.list.videos.push({
            //             url:item
            //         })
            //     });
                
            // })
        }
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
        border-radius: 4%;
    }
    .card div{
        font-size: 0.4rem;
        line-height: 0.7rem;
    }
    .card div:nth-child(5)>span{
        color: blue;
        cursor: pointer;
    }
    .card-type1{
        width: 100%;
        display: flex;
    }
    .card-number{
        width: 12%;
        height: 100%;
        margin: 0.2rem auto;
    }
    .card-circle{
        width:1rem;
        height: 1rem;
        border-radius: 30%;
        background: #2980F7;
        font-weight: bolder;
        line-height: 1rem !important;
        font-size: 0.5rem !important;
        color: white;
        text-align: center;
    }
    .card-text{
        width: 80%;     
    }
    .medium-text{
        font-size: 0.4rem;
        margin-left: 0.5rem;
        font-weight: bolder;
    }
    .card-personNum{
        width: 95%;
        background: #F2F2F2;
        padding: 0.026667rem 0.133333rem;
        // padding: 0.2rem 0 0.2rem 0.2rem;
    }
</style>
