<template>
    <div class="device_info">
        <div class="top">
            <span>{{deviceMsg.deviceName}}</span>
            <p>编号：{{deviceMsg.code}}</p>
        </div>
        <div class="infobox">
            <div class="imgbg" v-if="deviceMsg.status == 0">
                <span><img src="../../assets/device/shebei_icon_work@3x.png" alt="">使用中</span>
            </div>
            <div class="imgbg feiqi" v-if="deviceMsg.status == 1">
                <span><img src="../../assets/device/shebei_icon_feiqi@3x.png" alt="">未使用</span>
            </div>

            <md-scroll-view
                    ref="scrollView"
                    :bouncing="false"
                    :scrolling-x="false"
                    :auto-reflow="true"
                    @end-reached="$_onEndReached"
                    class="my-scroll-view"
            >
                <ul>
                    <li class="list">
                        <p>设备类型</p>
                        <h4>{{deviceMsg.type == 1 ? '主要设备' : '特种设备'}}</h4>
                    </li>
                    <li class="list">
                        <p>型号</p>
                        <h4>{{deviceMsg.code}}</h4>
                    </li>
                    <li class="list">
                        <p>品牌</p>
                        <h4>{{deviceMsg.brand}}</h4>
                    </li>
                    <li class="list">
                        <p>颜色</p>
                        <h4>{{deviceMsg.color}}</h4>
                    </li>
                    <li class="list">
                        <p>位置</p>
                        <h4>{{deviceMsg.position}}</h4>
                    </li>
                    <li class="list">
                        <p>使用部门</p>
                        <h4>{{deviceMsg.useGroupName}}</h4>
                    </li>
                    <li class="list">
                        <p>责任人</p>
                        <h4>{{deviceMsg.accountName}}</h4>
                    </li>
                </ul>

                <!--养护记录-->
                <div class="jilu-box">
                    <md-tabs>
                        <md-tab-pane class="content" name="p2" label="维修记录">
                            <h4> <span @click="addRecord(1)"><i class="iconfont icontianjia"></i>添加记录</span></h4>
                            <div class="cell-zq" v-if="msgData.repairPlan">周期：{{msgData.repairPlan.planIntervalDay}}天 <i class="iconfont iconbianji"></i></div>

                            <div class="time-line">
                                <div class="message" v-for="(item, index) in repairRecord">
                                    <div class="circle"><img src="../../assets/device/shebei_icon_work@3x.png" alt=""></div>
                                    <span class="time">{{item.createdTime}}</span>
                                    <div class="lineborder">
                                        <div class="time-info">
                                            <div class="info-top">维修人员
                                                <span>{{item.accountName}}</span>
                                            </div>
                                            <div class="info-bot">
                                                <p>维修描述</p>
                                                <div class="cont">{{item.repairContent}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--<div class="message">
                                    <div class="circle"><img src="../../assets/device/quan.jpg" alt=""></div>
                                    <span class="time">2019-10-28 18:15:20</span>
                                    <div class="lineborder">
                                        <div class="time-info">
                                            <div class="info-top">养护人员
                                                <span>张某三</span>
                                            </div>
                                            <div class="info-bot">
                                                <p>养护备注</p>
                                                <div class="cont">日常养护，零件检修，抹油等</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>-->
                            </div>
                        </md-tab-pane>
                        <md-tab-pane class="content" name="p3" label="润滑记录">
                            <h4> <span @click="addRecord(2)"><i class="iconfont icontianjia"></i>添加记录</span></h4>
                            <div class="cell-zq" v-if="msgData.smoothPlan">周期：{{msgData.smoothPlan.planIntervalDay}}天 <i class="iconfont iconbianji"></i></div>

                            <div class="time-line">
                                <div class="message" v-for="(item, index) in smoothRecord">
                                    <div class="circle"><img src="../../assets/device/shebei_icon_work@3x.png" alt=""></div>
                                    <span class="time">{{item.createdTime}}</span>
                                    <div class="lineborder">
                                        <div class="time-info">
                                            <div class="info-top">润滑人员
                                                <span>{{item.accountName}}</span>
                                            </div>
                                            <div class="info-bot">
                                                <p>润滑描述</p>
                                                <div class="cont">{{item.smoothContent}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </md-tab-pane>
                    </md-tabs>

                </div>
            </md-scroll-view>

        </div>
    </div>
</template>

<script>
    import {ScrollView, Toast, Tabs, TabPane,} from 'mand-mobile'
    import {ArchivesListById} from '@/api/device_files';
    import {mapGetters} from 'vuex';
    export default {
        name: "",
        components: {
            [ScrollView.name]: ScrollView,
            [Toast.name]: Toast,
            [Tabs.name]: Tabs,
            [TabPane.name]: TabPane,
        },
        data() {
            return {
                deviceId: 0,
                aId: 0,
                cId: 0,
                deviceMsg: '',
                repairRecord: [],
                smoothRecord: [],
                msgData: ''
            }
        },
        created() {
        },
        mounted(){
            this.deviceId = this.$route.query.deviceid
            this.aId = this.$route.query.aId
            this.cId = this.$route.query.cId
            this.getList()
        },
        methods: {
            // 滚动触底事件
            $_onEndReached(){

            },
            getList(){
                ArchivesListById({
                    aId: this.aId,
                    cId: this.cId,
                    id: this.deviceId
                }).then(res => {
                    const {code, data} = res;
                    if (code === 1) {
                        // this.deviceDataList = data;
                        console.log(res)
                        this.msgData = data
                        this.deviceMsg = data.deviceInfo[0];
                        this.repairRecord = data.repairRecord;
                        this.smoothRecord = data.smoothRecord;
                    }
                }).catch(err => {
                })
            },
            addRecord(types){
                this.$router.push({
                    path: '/add_device',
                    query: {
                        ...this.$route.query,
                        type: types
                    }
                })
            }
        }
    }
</script>

<style lang="scss" type="text/scss">
.device_info{
    background: #F2F2F2;
    .top{
        height: 3rem;
        width: 100%;
        background-image: url(~@/assets/personnel/personnel_bg@2x.png);
        background-size:100% 100%;
        background-repeat:no-repeat;
        background-position:center top;
        padding: 0.7rem 0 0 0.25rem;
        box-sizing: border-box;
        color: #ffffff;

        span{
            font-size: 0.4rem;
            display: inline-block;
            margin-top: 0.4rem;
        }
        p{
            font-size: 0.24rem;
            margin-top: 0.15rem;
        }
    }
    .infobox{
        .imgbg{
            height: 0.6rem;
            width: 100%;
            background-image: url("../../assets/device/info_bg2_02.png");
            background-repeat: no-repeat;
            -webkit-background-size: 100% ;
            background-size: 100% ;
            margin-top: -0.6rem;
            text-align: center;
            font-size: 0;
            span{
                color: #0FC587;
                font-size: 0.22rem;
                margin-top: 0.08rem;
                display: inline-block;
                img{
                    width: 0.22rem;
                    height: 0.22rem;
                    margin-right: 0.1rem;
                    vertical-align: middle;
                }
            }
        }
        .feiqi{
            span{
                color: #FF3F3E;
            }
        }
        ul{
            background: #ffffff;
            padding-left: 0.15rem;
            .list{
                padding: 0.35rem 0.15rem;
                border-bottom: solid 1px #E6E6E6;
                p{
                    font-size: 0.28rem;
                    color: #999999;
                }
                h4{
                    font-size: 0.3rem;
                    color: #222222;
                    margin-top: 0.15rem;
                }
            }
        }
        .jilu-box{
            margin-top: 0.2rem;
            padding: 0.2rem;
            background: #ffffff;
            h4{
                font-size: 0.36rem;
                color: #222222;
                overflow: hidden;
                margin-top: 0.3rem;
                span{
                    display: inline-block;
                    float: right;
                    color: #0FC587;
                    i{
                        display: inline-block;
                        font-size: 0.3rem;
                        margin-right: 0.15rem;
                    }
                }
            }
            .cell-zq{
                font-size: 0.24rem;
                color: #909090;
                margin-top: 0.15rem;
                i{
                    display: inline-block;
                    font-size: 0.3rem;
                    margin-left: 0.1rem;
                    vertical-align: middle;
                }
            }

            .time-line{
                .message{
                    display: block;
                    width: 100%;
                    height: 3.7rem;
                    margin-top: -0.26rem;
                    .time{
                        font-size: 0.26rem;
                        color: #999999;
                    }
                }
                .circle{
                    /*margin-left: 28px;*/
                    margin-right: 0.2rem;
                    display: block;
                    height: 0.26rem;
                    width: 0.26rem;
                    float: left;
                    img{
                        max-width:100%;
                        max-height:100%;
                        background: #ffffff;
                    }
                }
                .lineborder{
                    margin-left: 0.13rem;
                    display: block;
                    height: 3.4rem;
                    width: 100%;
                    /*left: 200px;*/
                    border-left: 1px solid #EFEEEE;
                    margin-top: -0.26rem;
                    overflow: hidden;
                    .time-info{
                        -webkit-border-radius: 8px;
                        -moz-border-radius: 8px;
                        border-radius: 8px;
                        border: solid 1px #DEDEDE;
                        box-shadow: 0 0 0.12rem #DEDEDE;
                        margin: 0.3rem 0 0 0.3rem;
                        width: 90%;
                        .info-top{
                            padding: 0.26rem 0.2rem;
                            font-size: 0.3rem;
                            color: #222222;
                            span{
                                float: right;
                                display: inline-block;

                            }
                        }
                        .info-bot{
                            padding: 0.33rem 0.2rem;
                            border-top: solid 1px #EFEEEE;
                            p{
                                color: #888888;
                                font-size: 0.3rem;
                            }
                            .cont{
                                color: #000000;
                                font-size: 0.3rem;
                                margin-top: 0.16rem;
                            }
                        }
                    }
                }

            }

            .md-tab-bar{
                background: #ffffff;
            }
        }

        .my-scroll-view{
            height: calc(100vh - 3rem);
        }
    }
}
</style>