<template>
    <div class="flex">
        <div class="divborder leftDiv">
            <Tree class="treeDiv" :data="treeList" ref="tree" @on-select-change="getList()"></Tree>
        </div>
        <div style="width:35%;margin-left: 10px;">
            <div class="mcInfo">
                <div>
                    <div v-show="attribute == 1">
                        <span class="point" @click="codeshow = !codeshow">当前运行程序号：</span>
                        <span class="point" v-show="codeshow" @click="showTextarea(1)">{{currentCode}}</span>
                    </div>
                    <div v-show="two">
                        <p class="point">{{tipsmsg}}</p>
                        <!-- <p v-show="attribute ==1" class="point">NC当前程序存储列表：</p>
                        <p v-show="attribute ==2" class="point">{{$t('700165')}}</p>
                        <p v-show="attribute ==3" class="point">FTP server当前程序列表：</p> -->
                        <div id="table">
                            <div v-show="show">
                                <Table
                                    :columns="columns"
                                    :data="data1"
                                    @on-current-change="handleRowChange"
                                    highlight-row
                                ></Table>
                                <div style="margin: 10px;overflow: hidden">
                                    <div style="float: right;">
                                        <Page
                                            :total="total"
                                            :current="page"
                                            @on-change="changePage"
                                            show-elevator
                                            show-sizer
                                            show-total
                                            @on-page-size-change="handlePageSize"
                                            :page-size-opts="[10,20,30,40,100]"
                                        ></Page>
                                    </div>
                                </div>
                            </div>
                            <p v-show="show==false">{{msg1}}</p>
                        </div>
                    </div>
                    <div v-show="three">{{msg}}</div>
                </div>
            </div>
        </div>

        <div class="divborder pgDetail" style="margin-top:0px;">
            <div>当前程序内容预览：</div>
            <div id="content"></div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tipsmsg: '',
            sectionId: '',
            machineId: '',
            currentCode: '',
            one: true,
            two: true,
            three: true,
            codeshow: true,
            attribute: 1,
            msg: '',
            columns: [
                {
                    title: '程序号',
                    key: 'program_code',
                    align: 'center'
                },
                {
                    title: '产品名称',
                    key: 'product_name',
                    align: 'center'
                }
            ],
            data1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            detailobj: {},
            tableData: [],
            show: false,
            msg1: ''
        };
    },
    computed: {
        treeList () {
            return this.$store.state.app.tree;
        }
    },
    created () {
    // 获取树形图数据
        this.$store.dispatch('getTree');
    },
    methods: {
    // 点击树获取machineid
        getList () {
            let node = this.$refs.tree.getSelectedNodes();
            if (node.length > 0) {
                this.sectionId = node[0].value;
                this.getMachineInfo(this.sectionId);
                // this.search(1, 10);
                // this.showStaff = false;
            }
        },
        getMachineInfo (id) {
            let data = {
                id: id
            };
            this.request(
                '/config/Machine/GetmachineidBySection',
                data,
                'get'
            ).then(res => {
                if (res.data.ret == 1) {
                    let info = res.data.data;
                    this.machineName = info.title;

                    this.machineId = info.machine_id;
                    this.one = true;
                    this.two = true;
                    this.msg = ''
                    if (info.attribute == 1) {
                        this.tipsmsg = this.$t('700164');
                        this.attribute = 1;
                        this.machineName = info.title;
                        this.machineId = info.machine_id;
                        this.getCurrentProgram(this.machineId);
                    } else if (info.attribute == 2) {
                        this.tipsmsg = this.$t('700165');
                        this.attribute = 2;
                        this.one = false;
                        this.two = false;
                        this.msg = this.$t(700165); // 串口设备
                        return false;
                    } else if (info.attribute == 3) {
                        this.tipsmsg = this.$t('700166');
                        this.one = false;
                        this.attribute = 3;
                    } else if (info.attribute == 4) {
                        this.tipsmsg = this.$t('700167');
                        this.attribute = 4;
                        this.one = false;
                        this.two = false;
                        this.msg = this.$t(700167); // 无系统设备没法上传
                        return false;
                    }
                    this.getData();
                    // console.log(this.attribute);
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        // 获取当前运行程序号
        getCurrentProgram (id) {
            let data = {
                machineid: id
            };
            this.request('/dnc/dnc/GetCurrentProgram', data, 'get').then(
                res => {
                    // console.log(res.data);
                    if (res.data.ret == 1) {
                        this.currentCode = res.data.data;
                    } else {
                        this.currentCode = '暂无数据';
                    }
                }
            );
        },
        getData () {
            let data = {};
            data = {
                sectionid: this.sectionId,
                page: 1,
                pageSize: 9999
            };
            let table = document.getElementById('table');

            this.request('/dnc/DncContrast/getProgramBymID', data, 'get')
                .then(res => {
                    if (res.data.ret == 1) {
                        this.show = true;
                        this.msg1 = '';
                        this.total = res.data.total;
                        let arr = [];
                        res.data.data.forEach(item => {
                            arr.push({
                                program_code: item.program_code,
                                product_name: item.product_name,
                                id: item.id,
                                machine_id: item.machine_id
                            });
                        });
                        this.tableData = arr;
                        this.data1 = arr.slice(0, 10);
                    } else {
                        this.show = false;
                        this.msg1 = '暂无数据';
                        // table.innerHTML = "暂无数据";
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        showTextarea (a) {
            let data = {};

            if (a == 1) {
                if (this.currentCode == '暂无数据') {
                    return false;
                }
                data = {
                    machineid: this.machineId,
                    programcode: this.currentCode
                };
            }
            if (a == 2) {
                data = {
                    machineid: this.detailobj.machine_id,
                    programcode: this.detailobj.program_code
                };
            }

            this.request('/dnc/dnc/Getncvalue', data, 'get').then(res => {
                // console.log(res.data);
                if (res.data.ret == 1) {
                    var info = res.data.data;
                    var infoArray = info.split('\n');
                    var infohtml = '';
                    if (infoArray.length > 0) {
                        infoArray.forEach((ele, i) => {
                            infohtml +=
                                '<p><span style="background:#ddd;display:inline-block;text-align:center;padding:0px 5px;min-width:30px;">' +
                                (i + 1) +
                                '</span><span>' +
                                ele +
                                '</span></p>';
                        });
                    }
                    document.getElementById('content').innerHTML = infohtml;
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            });
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            this.showTextarea(2);
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.data1 = this.tableData.slice(0, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            let index = (this.page - 1) * this.pagesize;
            this.data1 = this.tableData.slice(index, this.pagesize * this.page);
        },
        request (url, data, type) {
            if (type == 'get') {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type
                    })
                    .then(res => {
                        return res;
                    })
                    .catch(error => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type
                    })
                    .then(res => {
                        return res;
                    })
                    .catch(error => error);
            }
        }
    }
};
</script>

<style scoped>
.flex {
    display: flex;
}

.mcInfo {
    width: 100%;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0px 0px 2px 1px rgba(216, 216, 216, 0.5);
}

.pgDetail {
    width: 40%;
    height: 50vh;
    margin-left: 20px;
    padding: 10px;
}
#content {
    width: 100%;
    height: 90%;
    border: 1px solid #333;
    overflow: auto;
}
.point {
    cursor: pointer;
}
</style>
