<template>
    <div class="add_device">
        <div class="addcontent">
            <!--<div class="caidan">
                &lt;!&ndash;<md-drop-menu :data="data" />&ndash;&gt;
                <div class="nav">
                    <a href="#" @click="changeSlideDown">{{option1[value1].text}}<span class="iconfont" :class="showSlideDown ? 'iconshangsanjiaoxing' : 'iconxiasanjiaoxing'"></span></a>
                    &lt;!&ndash;浮动的下拉菜单框&ndash;&gt;
                    <ul class="plat" v-if="showSlideDown">
                        <li v-for="(item, index) in option1" :class="value1 == index ? 'active' : ''" @click="changeValue(item.value)">{{item.text}}</li>
                    </ul>
                </div>
            </div>-->

            <div class="text-box">
                <h4 v-text="type == 1 ? '养护备注' : '润滑备注' "></h4>
                <md-textarea-item
                    ref="demo2"
                    class="demo2"
                    :autosize="true"
                    v-model="beizhu"
                    :max-length="100"
                    :max-height="150"
                    placeholder="备注信息在100字以内"
                >
                </md-textarea-item>
            </div>

        </div>
        <div class="btn-box">
            <span class="save-btn" @click="confirmBtn">保存</span>
        </div>
    </div>
</template>

<script>
    import {DropMenu, TextareaItem, Field, Toast } from 'mand-mobile';
    import {saveDeviceRecord} from '@/api/device_files';

    export default {
        name: "add_device",
        components: {
            [DropMenu.name]: DropMenu,
            [TextareaItem.name]: TextareaItem,
            [Field.name]: Field,
            [Toast.name]: Toast,
        },
        data() {
            return {
                beizhu: '',
                option1: [
                    { text: '养护人1', value: 0 },
                    { text: '养护人2', value: 1 },
                ],
                showSlideDown: false,
                value1: 0,
                type: 1,
                deviceId: 0,
                aId: 0,
                cId: 0,
            }
        },
        created() {
        },
        mounted(){
            this.type = this.$route.query.type;
            this.deviceId = this.$route.query.deviceid;
            this.aId = this.$route.query.aId
            this.cId = this.$route.query.cId
        },
        methods: {
            changeSlideDown(){
                this.showSlideDown = !this.showSlideDown
                // console.log(this.showSlideDown)
            },
            changeValue(index){
                // console.log(index)
                this.value1 = index
                this.showSlideDown = false
            },
            confirmBtn(){
                console.log(1)
                if(this.beizhu == ''){
                    Toast.info('备注信息不能为空')
                }else{
                    saveDeviceRecord({
                        aId: this.aId,
                        cId: this.cId,
                        id: this.deviceId,
                        content: this.beizhu,
                        type: this.type,
                    }).then(res => {
                        const {code, data} = res;
                        if (code === 1) {
                            // this.deviceDataList = data;
                            console.log(res)
                            Toast.succeed('操作成功')
                            this.$router.go(-1)
                        }
                    }).catch(err => {
                    })
                }
            }
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
.add_device{
    height: 100vh;
    background: #F2F2F2;
    .addcontent{
        margin-bottom: 1.28rem;
        .caidan{
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            /*position: relative;*/
            .nav{
                display: inline-block;
                width: 100%;
                position: relative;
                a{
                    list-style: none;
                    text-decoration: none;
                    background-color: #ffffff;
                    color: #222222;
                    border-radius: 8px;
                    display: block;
                    line-height: 1rem;
                    font-size: 0.28rem;
                    padding-left: 0.5rem;
                    span{
                        float: right;
                        font-size: 0.3rem;
                        display: inline-block;
                        vertical-align: top;
                        color: #A8A8A8;
                        margin-right: 0.2rem;
                    }
                }
                .plat{
                    position: absolute;
                    top: 1.2rem;
                    left: 0;
                    width: 100%;
                    background: #ffffff;
                    display: block;
                    z-index: 10;
                    li{
                        font-size: 0.28rem;
                        color: #555555;
                        padding: 0.3rem 0.2rem;
                        border-bottom: solid 1px #eeeeee;
                    }
                    li.active{
                        color: #4C74FF;
                    }
                }

            }

        }

        padding: 0.1rem 0.15rem;
        .text-box{
            background: #ffffff;
            margin-top: 0.2rem;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            padding: 15px 15px 0 15px;
            color: #222222;
            h4{
                font-size: 0.28rem;
            }
            textarea{
                width: 100%;
                border: none;
                font-size: 16px;
            }
        }
    }

    .btn-box{
        width: 100%;
        background: #ffffff;
        height: 1.28rem;
        text-align: center;
        position: fixed;
        z-index: 10;
        bottom: 0;
        left: 0;
        font-size: 0;
        .save-btn{
            width: 92%;
            border-radius: 0.6rem;
            background: #01B779;
            color: #ffffff;
            font-size: 0.34rem;
            display: inline-block;
            padding: 0.3rem 0;
            margin-top: 0.14rem;
        }
    }
}
</style>