<config>
{
    "navigationBarTitleText": "维修订单",
     "usingComponents": {
        "van-dropdown-menu": "/vant/dropdown-menu/index",
        "van-dropdown-item": "/vant/dropdown-item/index"
    }
}
</config>
<template>
    <div class="content">
        <van-sticky :offset-top="0">
            <div class="tabs">
                <div
                    class="tab"
                    :class="{ active: item === active }"
                    v-for="(item, index) in tab"
                    :key="index"
                    @click="tabData(item)"
                >
                    {{ item }}
                </div>
            </div>
        </van-sticky>
        <div class="box">
            <van-empty
                v-if="empty"
                image="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_wodeguanzhu.png"
                description="暂无记录哦"
            >
            </van-empty>

            <div class="time-box">
                <van-dropdown-menu>
                    <van-dropdown-item @change="record" :value="time" :options="option1" />
                </van-dropdown-menu>
                <div class="money1">总共11</div>
            </div>

            <div class="box-con" @click="navigateTo('/pages/Repair/repairDetails')">
                <div class="top">
                    <div class="text1">单号 2222</div>
                    <div class="btn">紧急</div>
                </div>
                <div class="title">门框松动，需要加固一下</div>
                <div class="address address1">
                    <img class="icon" src="../../native/icon_didian@3x.png" alt="" />
                    <div class="text2">宝山万达店142房</div>
                </div>
                <div class="address">
                    <img class="icon" src="../../native/icon_baoxiuren@3x.png" alt="" />
                    <div class="text2">张三 <span>2021.04.02 15:56:23</span></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import repair from '../../mixins/repair';
export default {
    mixins: [repair],
    data() {
        return {
            tab: ['最新报修', '未处理', '已处理'],
            active: '最新报修',
            time: 0,
            empty: false,
            option1: [
                { text: '2021-05', value: 0 },
                { text: '2021-06', value: 1 },
                { text: '2021-07', value: 2 },
                { text: '2021-08', value: 3 },
                { text: '2021-09', value: 4 },
                { text: '2021-10', value: 5 },
                { text: '2021-11', value: 6 },
                { text: '2021-12', value: 7 }
            ]
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        tabData(e) {
            this.active = e;
            this.getData();
        },
        getData() {}
    }
};
</script>
<style lang="less" scoped>
.content {
    .tabs {
        .flex();
        justify-content: space-between;
        padding: 20px 36px;
        background: #fff;
        border-top: 1px solid #f5f7fa;
        .tab {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: normal;
            color: #292c33;
            line-height: 24px;
            &.active {
                font-weight: bold;
                color: #ff7f1f;
            }
        }
    }
    .box {
        background: #f5f7fa;

        min-height: 100vh;
        padding: 12px 20px;
        .time-box {
            margin-bottom: 12px;
            .flex();
            background-color: @bg;
            justify-content: space-between;
            .text {
                font-size: 12px;
                color: #646566;
                line-height: 17px;
                margin-left: 15px;
            }
            .money1 {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: normal;
                color: #646566;
                line-height: 17px;
            }
        }
        /deep/ .van-dropdown-menu {
            width: 110px;
            border-radius: 4px;
            overflow: hidden;

            .van-cell__value {
                &::after {
                    content: '';
                }
                &::before {
                    content: '';
                }
            }
        }
        .box-con {
            padding: 12px 16px 18px;
            background: #fff;
            border-radius: 8px;
            .top {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f5f7fa;
                height: 37px;
                .text1 {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: normal;
                    color: #939599;
                    line-height: 24px;
                }
                .btn {
                    width: 40px;
                    height: 26px;
                    line-height: 26px;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                    background: #ff5d5d;
                    border-radius: 4px;
                    margin-bottom: 20px;
                }
            }
            .title {
                font-size: 20px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: bold;
                color: #000000;
                line-height: 30px;
                margin: 16px 0 10px;
            }
            .address {
                .flex();
                &.address1 {
                    margin-bottom: 6px;
                }
                .icon {
                    width: 16px;
                    height: 16px;
                }
                .text2 {
                    font-size: 15px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: normal;
                    color: #000000;
                    line-height: 24px;
                    margin: 0 7px 0 4px;
                }
                span {
                    font-size: 15px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: normal;
                    color: #939599;
                    line-height: 24px;
                }
            }
        }
    }
}
</style>
