<template>
    <div class="starteddetail">
        <m-header />

        <van-cell :center="true">
            <template slot="icon">
                <img class="logo" src="http://dev.dayaedu.com/img/teacher1.91bf990d.png" alt="">
            </template>
            <template slot="default">连续旷到2次</template>
            <template slot="title">阿曼湾</template>
            <template slot="label">审批通过</template>
        </van-cell>
        <div class="started-info">
            <p>审批事项：合班</p>
            <p>开始时间：2019-09-01  9:00</p>
            <p>结束时间：2019-09-01  18:00</p>
            <p>备注：01班人数较少，01班人数较少01班人数较少
            01班人数较少01班人数较少01班人数较少01班人数
            01班人数较少01班人数较少01班人数较少较少</p>
        </div>

        <div class="section">
            <div class="node success">
                <div class="message">
                    <p class="name">我</p>
                    <p class="content">我发起的</p>
                </div>
                <van-icon name="checked" />
                <div class="step-line"></div>
            </div>
            <div class="node success">
                <div class="message ">
                    <p class="name">我</p>
                    <p class="content">我发起的</p>
                </div>
                <van-icon name="checked" />
                <div class="step-line"></div>
            </div>
            <div class="node underway">
                <div class="message ">
                    <p class="name">主管</p>
                    <p class="content">审批中</p>
                </div>
                <van-icon name="underway" />
                <div class="step-line"></div>
            </div>
            <div class="node empty">
                <div class="message ">
                    <p class="name">总经理</p>
                    <p class="content"></p>
                </div>
                <van-icon />
                <div class="step-line"></div>
            </div>
            <div class="node error">
                <div class="message ">
                    <p class="name">总经理</p>
                    <p class="content">已拒绝（原因：理由不充分）</p>
                </div>
                <van-icon name="clear" />
                <div class="step-line"></div>
            </div>
        </div>

        <div class="button-group">
            <!-- <van-button type="default">编辑内容</van-button> -->
            <van-button type="primary">取消审批</van-button>
        </div>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
export default {
    name: 'starteddetail',
    components: { MHeader }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
/deep/.van-cell__value, /deep/.van-cell__label {
    color: @tFontColor;
    span {
        padding-right: .1rem;
    }
}
/deep/.van-cell {
    padding: .16rem;
}
.logo {
    width: .40rem;
    height: .40rem;
    margin-right: .12rem;
}
.started-info {
    background: @whiteColor;
    font-size: .14rem;
    padding: .12rem .16rem .25rem;
    line-height: .22rem;
}
.section {
    position: relative;
    overflow: hidden;
    padding-left: .8rem;
    padding-bottom: .92rem;
    .node {
        position: relative;
        margin-top: .2rem;
        margin-right: .26rem;
        &::before {
            position: absolute;
            top: -.2rem;
            left: -.25rem;
            z-index: 1;
            width: .02rem;
            height: .3rem;
            background-color: #d8d8d8;
            content: '';
        }
        &:last-child {
            .step-line {
                height: 0;
            }
        }

        &.success {
            .content {
                color: #62A070;
            }
            .van-icon {
                color: #62A070;
            }
        }
        &.error {
            .content {
                color: @sFontColor;
            }
            .van-icon {
                color: #F85043;
            }
        }
        &.underway {
            .content {
                color: @orangeColor;
            }
            .van-icon {
                color: @orangeColor;
            }
        }
        &.empty {
            .van-icon {
                background: #D8D8D8;
            }
        }
    }
    .van-icon {
        font-size: .22rem;
        position: absolute;
        top: .2rem;
        left: -.25rem;
        z-index: 2;
        width: .22rem;
        height: .22rem;
        border-radius: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .step-line {
        position: absolute;
        background-color: #d8d8d8;
        top: .16rem;
        left: -.25rem;
        width: .02rem;
        height: 100%;
    }
    .message {
        position: relative;
        background: @whiteColor;
        padding: .08rem .16rem;
        border-radius: .02rem;
        &::before {
            content: ' ';
            display: block;
            position: absolute;
            left: -.05rem;
            top: .15rem;
            width: .1rem;
            height: .1rem;
            background: @whiteColor;
            transform: rotate(-45deg);
        }
        .name {
            font-size: .16rem;
            font-weight: bold;
            color: @mFontColor;
        }
        .content {
            font-size: .14rem;
            min-height: .2rem;
        }
        
    }

    
}
.button-group {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    box-shadow:0 .02rem .07rem 0 rgba(0,0,0,0.16);
    display: flex;
    .van-button {   
        flex: 1;
        height: .52rem;
        line-height: .5rem;
        font-size: .16rem;
    }
    .van-button--default {
        color: @mFontColor;
    }
    .van-button--primary {
        background: @mColor;
        border-color: @mColor;
    }
}
</style>