/**
 * 顶部header
 */
Vue.component("tower-crane-value-1", {
    template: `
        <div class="safe-tower-content">
            <div class="safe-tower-content-title">
                <span v-html="value.name"></span>
            </div>
            <div class="safe-tower-content-data">
                <el-row>
                    <el-col :span="3">
                        <div class="safe-tower-content-data-list">
                            <p>后臂长</p>
                            <div><span v-html="value.postArmLength">0</span> m</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>前臂长</p>
                            <div><span v-html="value.foreArmLength">0</span> m</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>塔身高</p>
                            <div><span  v-html="value.downHeight">0</span> m</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>功率</p>
                            <div><span v-html="value.power"></span> kw</div>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <div class="safe-tower-icon">
                            <!--<tower-crane-icon :width="360" :height="200" :top="55" :left="85" :ampdata="ampData"
                                              :forearmlength="foreArmLength" :heightdata="heightData" :downheight="downHeight"
                                              :angledata="angleData"></tower-crane-icon>-->
                            <div class="sf-equipment-overview-bgd">
                                <div class="sf-slider-track" :style="{'width':width+'px','height':height+'px','top':top+'px','left':left+'px'}">
                                    <div class="sf-slider-track-min" id="slider">
                                        <div class="sf-slider"></div>
                                        <div class="sf-towrope" id="towrope"></div>
                                        <div class="sf-hook"></div>
                                    </div>
                                </div>
                                <div class="circular">
                                    <div class="needle rotate" id="needle" >
                                        <div class="dot-track">
                                            <div class="dot" id="dot">
                    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="safe-tower-content-data-list">
                            <p>力矩比</p>
                            <div><span  v-html="value.torqueData">0</span> %</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>安全吊重</p>
                            <div><span  v-html="value.overload">0</span> t</div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>进场时间</p>
                            <div class="safe-tower-content-data-list-time"><span  v-html="value.enterTime">0</span></div>
                        </div>
                        <div class="safe-tower-content-data-list">
                            <p>扶墙高度</p>
                            <div><span style="font-size: 20px;" v-html="value.buttress"></span></div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
</div>
    `,
    props: {
        value:{
            type:Object
        },
        width:{
            type:Number
        },
        height:{
            type:Number
        },
        top:{
            type:Number
        },
        left:{
            type:Number
        },
        ampdata:{
            type:Number
        },
        forearmlength:{
            type:Number
        },
        heightdata:{
            type:Number
        },
        downheight:{
            type:Number
        },
        angledata:{
            type:Number
        },
    },
    data() {
        return {

        }
    },
    mounted(){
        //this.animation()

    },
    methods: {
        animation(){

            var leftValue = this.ampdata     //幅度
            var brachium = this.forearmlength     //臂长 //定制

            leftValue = leftValue < 0 ? 0 : leftValue
            var left = leftValue / brachium * 100

            var heightValue = this.heightdata     //高度
            var towerHeight = this.downheight    //塔身高度

            var height = (towerHeight - heightValue) * this.height / towerHeight
            height = height > this.height ? this.height : height


            var value = Number(this.angledata)    //角度
            var degValue = -value
            setTimeout(function () {
                $("#slider").animate({left:left+'%'},1000);
                $("#dot").animate({left:left+'%'},1000);
                $("#needle").css("transform","rotate("+degValue+"deg)")
                setTimeout(function () {
                    $("#towrope").animate({height:height+'px'},1000);
                },1000)
            },1000)
        },
    },
    watch:{
        value:function () {
            console.log(this.value)
            this.animation()
        },
        ampdata:function () {
            this.animation()
        },
        forearmlength:function () {
            this.animation()
        },
        heightdata:function () {
            this.animation()
        },
        downheight:function () {
            this.animation()
        },
        angledata:function () {
            this.animation()
        },
    }

})