<template>
    <div class="device_list">
        <div class="topbg">
            <div class="search-input-wrap">
                <div class="search-left">
                    <md-input-item
                            class="search-input"
                            placeholder="请输入搜索关键词"
                            v-model="searchVal"
                    >
                        <md-icon name="search" slot="left" @click="searchDevice(0, 'finish')"></md-icon>
                    </md-input-item>
                </div>
                <div class="cancel-btn" @click="shaixuan"><i class="iconfont iconshaixuan"></i>筛选</div>
            </div>
        </div>
        <div v-if="deviceDataList.length > 0">
            <md-scroll-view
                    :ref="'scrollView'+listType"
                    :bouncing="false"
                    :scrolling-x="false"
                    :auto-reflow="true"
                    @end-reached="$_onEndReached"
                    class="my-scroll-view"
            >
                <ul class="ulbox" >
                    <li class="list" v-for="(item, index) in deviceDataList" @click="goDetail(item.id)">
                    <span class="imgbox">
                        <img src="../../assets/device/111.png" alt="">
                    </span>
                        <div class="list-right">
                            <h4>{{item.deviceName}}</h4>
                            <div class="cell">
                                类型：{{item.type == 1 ? '主要设备' : '特种设备'}} <i class="iconfont iconvertical_line"></i>型号：{{item.model}}
                            </div>
                            <div class="cell2">
                                <span><img src="../../assets/device/common_icon_touxiang@3x.png" alt="">{{item.accountName}}</span>
                                <span class="bumen"><img src="../../assets/device/shebei_icon_bumen@3x.png" alt="">{{item.useGroupName}}</span>
                            </div>
                            <div class="item-tip">最近一次养护：{{item.updatedTime ? item.updatedTime : '暂无时间'}}</div>
                            <!--working 工作中，weixiuing 维修中， feiqi已废弃-->
                            <div class="pos-tips working" v-if="item.status == 0">
                                <img src="../../assets/device/shebei_icon_work@3x.png" alt="">使用中
                            </div>
                            <div class="pos-tips feiqi" v-if="item.status == 1">
                                <img src="../../assets/device/shebei_icon_feiqi@3x.png" alt="">未使用
                            </div>
                        </div>
                    </li>
                    <!--<li class="list">
                        <span class="imgbox">
                            <img src="../../assets/device/111.png" alt="">
                        </span>
                        <div class="list-right">
                            <h4>磨边机</h4>
                            <div class="cell">
                                类型：磨边机 <i class="iconfont iconvertical_line"></i>型号：M86904
                            </div>
                            <div class="cell2">
                                <span><img src="../../assets/device/common_icon_touxiang@3x.png" alt="">张晓丽</span>
                                <span class="bumen"><img src="../../assets/device/shebei_icon_bumen@3x.png" alt="">液化气部门</span>
                            </div>
                            <div class="item-tip">最近一次养护：2019.12.18</div>

                            <div class="pos-tips weixiuing">
                                <img src="../../assets/device/shebei_icon_weixiu@3x.png" alt="">维修中
                            </div>
                        </div>
                    </li>
                    <li class="list">
                        <span class="imgbox">
                            <img src="../../assets/device/111.png" alt="">
                        </span>
                        <div class="list-right">
                            <h4>磨边机</h4>
                            <div class="cell">
                                类型：磨边机 <i class="iconfont iconvertical_line"></i>型号：M86904
                            </div>
                            <div class="cell2">
                                <span><img src="../../assets/device/common_icon_touxiang@3x.png" alt="">张晓丽</span>
                                <span class="bumen"><img src="../../assets/device/shebei_icon_bumen@3x.png" alt="">液化气部门</span>
                            </div>
                            <div class="item-tip">最近一次养护：2019.12.18</div>

                            <div class="pos-tips feiqi">
                                <img src="../../assets/device/shebei_icon_feiqi@3x.png" alt="">已废弃
                            </div>
                        </div>
                    </li>-->
                </ul>
                <md-scroll-view-more
                        slot="more"
                        :is-finished="isFinished"
                >
                </md-scroll-view-more>
            </md-scroll-view>
        </div>
        <div class="nodata" v-else>
            暂无数据
        </div>

        <md-popup
                v-model="isPopupShow"
                position="right"
                :mask-closable="false"
                transition="slide-right"
                class="mypop"
        >
            <div class="sx-popup md-example-popup md-example-popup-right">
                <div class="pop-item">
                    <p>设备状态</p>
                    <span v-for="(item, index) in statusArr" :class="statusIndex == index ? 'active' : '' " @click="checkStatus(index)">{{item}}</span>

                </div>

                <div class="pop-item">
                    <p>设备类型</p>
                    <span v-for="(item, index) in typeArr" :class="typeIndex == index ? 'active' : '' " @click="checkType(index)">{{item}}</span>

                </div>

                <div class="btn-bottom">
                    <span class="btn" @click="confirmBtn(0, 'finish')">确定</span>
                </div>
            </div>
            <!--<div class="md-example-popup md-example-popup-right">
                Popup Right
            </div>-->
        </md-popup>
    </div>
</template>

<script>
    import {
        InputItem,
        Icon,
        Popup,
        ScrollView,
        ScrollViewMore
    } from 'mand-mobile';

    import {deviceArchivesList, ArchivesListFilter} from '@/api/device_files';
    import {mapGetters} from 'vuex';

    export default {
        name: "device_list",
        components: {
            [InputItem.name]: InputItem,
            [Icon.name]: Icon,
            [Popup.name]: Popup,
            [ScrollView.name]: ScrollView,
            [ScrollViewMore.name]: ScrollViewMore,
        },
        data() {
            return {
                isPopupShow: false,
                deviceDataList: [],
                statusArr: ['全部', '使用中', '未使用'],
                typeArr: ['全部', '主要设备', '特种设备'],
                statusIndex: 0,
                typeIndex: 0,
                deviceStatus: '',
                deviceType: '',
                searchVal: '',
                page: 1,
                listType: 1, //1 无搜索列表页， 2点击搜索按钮列表页， 3筛选列表页
                isFinished: false,
            }
        },
        created() {
        },
        mounted(){
            console.log(this.$route.query.fromUrl)
            if(this.$route.query.fromUrl){
                this.$store.dispatch('request_config/setBaseUrl', this.$route.query.fromUrl)
            }else{
                this.$store.dispatch('request_config/setBaseUrl', location.host)
                // this.$store.dispatch('request_config/setBaseUrl', '192.168.3.118:8899')
            }
            // 所以接口传 aId=294，cId=1
            if(this.$route.query.aId && this.$route.query.cId){
                this.$store.dispatch('job_ticket/setReqConfig', {
                    aId: this.$route.query.aId,
                    cId: this.$route.query.cId
                })

            }else{
                this.$store.dispatch('job_ticket/setReqConfig', {
                    aId: '',
                    cId: ''
                })
            }

            this.getDeviceList()
        },
        computed: {
            ...mapGetters([
                'job_ticket_aId',
                'job_ticket_cId',
            ])
        },
        methods: {
            shaixuan(){
                this.isPopupShow = true
            },
            checkStatus(n){
                // alert('111')
                this.statusIndex = n
            },
            checkType(n){
                this.typeIndex = n
                if(n != 0){
                    this.deviceType = n
                }else{
                    this.deviceType = ''
                }
            },
            async getDeviceList(){
                if(this.isFinished){
                    return
                }
                await deviceArchivesList({
                    aId: this.job_ticket_aId,
                    cId: this.job_ticket_cId,
                    page: this.page
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 200) {
                        // this.deviceDataList = data;
                        const lastPage = Math.ceil(count / limit);
                        if (page >= lastPage) {
                            this.isFinished = true
                        }
                        this.deviceDataList = this.deviceDataList.concat(data);
                    }
                }).catch(err => {
                })
                this.$refs['scrollView'+this.listType].finishLoadMore()
                // this.$refs.scrollView.finishLoadMore()

            },

            // 滚动触底事件
            $_onEndReached(){
                this.page +=1
                console.log(this.listType, this.page)
                switch (this.listType){
                    case 1:
                        this.getDeviceList()
                        break;
                    case 2:
                        this.searchDevice(this.page)
                        break;
                    case 3:
                        this.confirmBtn(this.page)
                        break;
                }
            },
            goDetail(id){
                this.$router.push({
                    path: '/device_info',
                    query: {
                        ...this.$route.query,
                        deviceid: id
                    }
                })
            },
            async searchDevice(mypage, finishFlag){
                if(finishFlag){
                    this.isFinished = false
                }
                if(this.isFinished){
                    return
                }
                this.listType = 2
                if(mypage){
                    this.page = mypage
                }else{
                    this.page = 1
                    this.deviceDataList = []
                }
                console.log(this.page)
                await ArchivesListFilter({
                    aId: this.job_ticket_aId,
                    cId: this.job_ticket_cId,
                    type: '',
                    status: '',
                    keyword: this.searchVal,
                    page: this.page
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 200) {
                        const lastPage = Math.ceil(count / limit);
                        if (page >= lastPage) {
                            this.isFinished = true
                        }
                        this.deviceDataList = this.deviceDataList.concat(data);
                        console.log(res)
                    }
                }).catch(err => {
                })
                // this.$refs.scrollView.finishLoadMore()
                this.$refs['scrollView'+this.listType].finishLoadMore()
            },
            async confirmBtn(page, finishFlag){
                if(finishFlag){
                    this.isFinished = false
                }
                if(this.isFinished){
                    return
                }

                this.listType = 3
                if(page){
                    this.page = page
                }else{
                    this.page = 1
                    this.deviceDataList = []
                }
                if(this.statusIndex == 1){
                    this.deviceStatus = 0 //使用中
                }else if(this.statusIndex == 2){
                    this.deviceStatus = 1 //未使用
                }else if(this.statusIndex == 0){
                    this.deviceStatus = ''
                }
                console.log(this.deviceStatus, this.deviceType)

                await ArchivesListFilter({
                    aId: this.job_ticket_aId,
                    cId: this.job_ticket_cId,
                    type: this.deviceType,
                    status: this.deviceStatus,
                    keyword: '',
                    page: this.page
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 200) {
                        const lastPage = Math.ceil(count / limit);
                        if (page >= lastPage) {
                            this.isFinished = true
                        }
                        this.deviceDataList = this.deviceDataList.concat(data);
                        console.log(res)
                        this.isPopupShow = false
                    }
                }).catch(err => {
                })
                this.$refs['scrollView'+this.listType].finishLoadMore()
            },
        }
    }
</script>

<style scoped lang="scss"  type="text/scss">

.device_list{
    background: #ffffff;
    .nodata{
        font-size: 0.36rem;
        text-align: center;
        margin-top: 3rem;
    }
    .topbg{
        background: #F2F2F2;
        .search-input-wrap{
            padding: 15px;
            overflow:hidden;
            .search-left{
                width: 87%;
                float: left;
            }
            .cancel-btn{
                width: 13%;
                text-align: right;
                float: right;
                font-size: 0.28rem;
                margin-top: 0.3rem;
                color: #555555;
                i{
                    font-size: 0.26rem;
                    display: inline-block;
                    margin-right: 3px;
                }
            }
            .search-input {
                border-radius: 10px;
                background: #FFF;
                padding: 0 15px;
            }
        }
    }
    .my-scroll-view{
        height: calc(100vh - 1.3rem);
    }
    .ulbox{
        padding: 0.15rem;
        .list{
            overflow: hidden;
            padding-top: 0.25rem;
            .imgbox{
                width: 1.29rem;
                height: 1.29rem;
                border-radius: 8px;
                border: solid 1px #F0F0F0;
                float: left;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .list-right{
                float: right;
                width: calc(100vw - 1.8rem);
                border-bottom: solid 1px #CECECE;
                position: relative;
                font-size: 0;
                h4{
                    font-size: 0.3rem;
                    color: #222222;
                }
                .cell{
                    font-size: 0.24rem;
                    color: #555555;
                    margin-top: 0.26rem;
                    i{
                        display: inline-block;
                        margin: 0 0.12rem;
                        color: #E5E5E5;
                        font-size: 22px;
                    }
                }
                .cell2{
                    font-size: 0.24rem;
                    color: #555555;
                    margin-top: 0.18rem;
                    span{
                        display: inline-block;
                        width: 1.6rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        img{
                            width: 0.24rem;
                            height: 0.24rem;
                            margin-right: 0.12rem;
                            vertical-align: middle;
                        }
                    }
                    .bumen{
                        margin-left: 0.15rem;
                    }
                }
                .item-tip{
                    display: inline-block;
                    margin: 0.18rem 0 0.3rem 0;
                    background: #E8F7F2;
                    padding: 0.1rem 0.3rem;
                    font-size: 0.24rem;
                    color: #08B077;
                    -webkit-border-radius: 0.1rem;
                    -moz-border-radius: 0.1rem;
                    border-radius: 0.1rem;
                }
                .pos-tips{
                    position: absolute;
                    top: 0.3rem;
                    right: 0.2rem;
                    color: #0FC587;
                    font-size: 0.22rem;
                    img{
                        width: 0.22rem;
                        height: 0.22rem;
                        margin-right: 0.1rem;
                        vertical-align: middle;
                    }
                }
                .pos-tips.weixiuing{
                    color: #FF7800;
                }
                .pos-tips.feiqi{
                    color: #FF3F3E;
                }
            }
        }
        .list:last-of-type{
            .list-right{
                border-bottom: none;
            }
        }
    }


    .mypop{
        /*position: relative;*/
    }
    .sx-popup{
        background: #ffffff;
        height: 100vh;
        width: 70vw;
        position: fixed;
        top: 0;
        right: 0;
        .pop-item{
            margin-top: 0.26rem;
            padding: 0.18rem;
            font-size: 0;
            p{
                font-size: 0.28rem;
                color: #888888;
                margin-left: 0.14rem;
            }
            span{
                display: inline-block;
                width: 44%;
                text-align: center;
                background: #EAEAEA;
                color: #555555;
                font-size: 0.28rem;
                padding: 0.15rem 0;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
                margin-left: 4%;
                /*float: left;*/
                box-sizing: border-box;
                margin-top: 0.25rem;
            }
            span.active{
                background: #E4FFF5;
                color: #0FC587;
                border: solid 1px #0FC587;
            }
        }

        .btn-bottom{
            position: absolute;
            height: 1.8rem;
            border-top: solid 1px #CECECE;
            bottom: 0;
            left: 0;
            text-align: center;
            width: 100%;
            .btn{
                display: inline-block;
                width: 80%;
                border-radius: 40px;
                background: #0FC587;
                color: #ffffff;
                font-size: 0.36rem;
                padding: 0.16rem 0;
            }
        }
    }
}
</style>