var vms = Vue.component("amplify-bgqr", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="https://fileimg.makalu.cc/WEB_DBD5893450984E50AFF356EF44FF4139.png"  @click="openAmplify">
            </div>
            <transition name="el-zoom-in-top">
                <div class="amplify-fixed" v-show="show"  style="display: none" @click="closeAmplifyAll">
                    <div class="amplify-max">
                        <div class="amplify-title">
                            <div>设计文件管理</div>
                            <div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
                        </div>   
                        <div class="amplify-content">
                            <!--内容区域-->  
                            <!--头部切换-->
                             <div class="sjk-chart-line-title">
                                 <div :class="schemeNav==1?'active':''" @click="onSchemeBtn(0)" v-cloak="" style="padding: 15px 25px;font-size: 22px">设计变更（{{constructionNum}}）</div>
                                 <div :class="schemeNav==2?'active':''" @click="onSchemeBtn(1)" v-cloak="" style="padding: 15px 25px;font-size: 22px">工程签认（{{alterationNum}}）</div>
                             </div>
                             <!--表格展示数据-->
                              <div class="amplify-quality-table">
                                <el-table ref="pxjy"
                                            :data="data.data"
                                            style="width: 100%"
                                            :height="height+'px'"
                                            :row-style="rowStyle"
                                            :header-row-style="headerStyle"
                                            @cell-mouse-enter="MouseEnter"
                                            @cell-mouse-leave="MouseLeave"
                                            class="elTable"
                                            
                                            >
                                    <el-table-column  :label="item.label" :width="item.width"  v-for="item in data.label" show-overflow-tooltip > 
                                        <template slot-scope="scope">
                                            <div v-if="item.type==''" :style="{'color':item.color}">{{scope.row[item.data]}}</div>
                                            <div v-if="item.type=='img'" style="padding-top: 8px;">
                                                <el-image style="width: 80px; height: 80px" :src="scope.row[item.data]" fit="cover"
                                                ></el-image>
                                            </div>
                                            <div v-if="item.type=='state'">
                                                <div :style="{'color':scope.row[item.type_color]}">{{scope.row[item.data]}}</div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {
        projectid:{
            type:Number
        },
    },
    data() {
        return {
            show: false,
            schemeNav: 1,
            constructionNum: 0,
            alterationNum: 0,
            height: 395,
            data: {},
            rowStyle:{
                fontSize:'25px',
                height:'64px'
            },
            headerStyle:{
                fontSize:'22px',
                padding:'10px'
            },
        }
    },
    mounted() {
        this.interval = setInterval(this.scroll, 50);
    },
    methods: {
        openAmplify() {
            this.show = true
            this.getSchemeTableData('0')
        },
        closeAmplify() {
            this.show = false
        },
        closeAmplifyAll(e) {
            if (e.target.className == 'amplify-fixed') {
                this.show = false
            }
        },
        //变更签认
        onSchemeBtn(n) {
            this.schemeNav = n == 0 ? 1 : 2
            this.getSchemeTableData(n)
        },
        getSchemeTableData(type){
            var data = null;
            if(type == 0){
                data =   {
                    label: [
                        {
                            label: '序号',
                            width: '100',
                            color:'',
                            isShow:true,
                            type:'',
                            type_color:'',
                            data: 'sort',
                        },
                        /* {
                             label: 'idStr',
                             width: '50',
                             color:'',
                             isShow:false,
                             type:'',
                             type_color:'',
                             data: 'id',
                         },*/
                        {
                            label: '变更名称',
                            width: '',
                            color:'#50a2eb',
                            isShow:true,
                            type:'',
                            type_color:'',
                            data: 'name'
                        },
                        {
                            label: '变更内容',
                            width: '',
                            color:'',
                            isShow:true,
                            type:'',
                            type_color:'',
                            data: 'content'
                        },
                        {
                            label: '业主批复情况',
                            width: '',
                            color:'',
                            isShow:true,
                            type:'state',
                            type_color:'situation_color',
                            data: 'situation'
                        },

                    ],
                    data: [],
                }
            } else{
                data =   {
                    label: [
                        {
                            label: '序号',
                            width: '50',
                            color:'',
                            type:'',
                            type_color:'',
                            data: 'sort',
                        },
                        {
                            label: '工程名称',
                            width: '',
                            color:'#50a2eb',
                            type:'',
                            type_color:'',
                            data: 'name'
                        },
                        {
                            label: '工程内容',
                            width: '',
                            color:'',
                            type:'',
                            type_color:'',
                            data: 'content'
                        },
                        {
                            label: '业主批复情况',
                            width: '',
                            color:'',
                            type:'state',
                            type_color:'situation_color',
                            data: 'situation'
                        },

                    ],
                    data: [],
                }
            }
            axios.post("/system/alterationEndorseConfig/list1",{pageNum:1,pageSize:9999,projectId:this.projectid}).then(res=>{
                let result = res.data
                console.log(result)
                if(result.code == 0){
                    this.constructionNum = result.rows.filter(item=>item.alterationType == 0).length
                    this.alterationNum = result.rows.filter(item=>item.alterationType == 1).length

                    data.data = result.rows.filter(item=>{
                        if(item.alterationType == type){
                            return item
                        }
                    }).map((item,index)=>{
                        return {
                            sort: index + 1,
                            id:item.id,
                            name:item.alterationName,
                            content:item.alterationContext,
                            situation: item.alterationStatus == '0' ? "已通过":"未通过",
                            situation_color: item.alterationStatus == '0' ? "#39c30b":"#f73647"
                        }
                    })
                }
                if(data.data.length > 3){
                    for (let i = 0; i <3 ; i++) {
                        data.data.push(data.data[i])
                    }
                }
                this.data = data

            })


        },

        // 表格隔行变色

        //左边信息表
        scroll() {
            let maxHeight = this.$refs.pxjy.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
            let clientHeight = this.$refs.pxjy.bodyWrapper.clientHeight;
            if (Math.abs(this.$refs.pxjy.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
                this.$refs.pxjy.bodyWrapper.scrollTop = 0;
            } else {
                this.$refs.pxjy.bodyWrapper.scrollTop += 1;//32是每一行表格的高度，每秒滚一行
            }
        }
        ,
        MouseEnter() {//鼠标移入停止滚动
            clearInterval(this.interval);
        }
        ,
        MouseLeave() {//鼠标离开继续滚动
            this.interval = setInterval(this.scroll, 50);
        },
        onClickPoint(n) {
            this.btnNav = n;
        },
    },
    watch: {
        data:function () {
            clearInterval(this.interval);
            this.interval = setInterval(this.scroll, 50);
        },
    },

})