<template>
    <div style="display:flex">
        <div class="divborder leftDiv">
            <Tree class="treeDiv" :data="treeList" ref="tree" @on-select-change="getList()"></Tree>
        </div>
        <div class="rightDiv">
            <div class="divborder newSearchDiv">
                <div class="searchBtn">
                  <Button type="error" class="twoWord" icon="md-close-circle" v-show="show" @click="dele()">删除</Button>
                  <span>{{msg}}</span>
              </div>
            </div>

            <div class="divborder newTableDiv">
                <Table
                    :columns="columns"
                    :data="data1"
                    @on-current-change="handleRowChange"
                    highlight-row
                    @on-row-click="onExpand"
                    @on-selection-change="handleSelect"
                    class="tableClass"
                ></Table>
                <div class="pageDiv">
                    <div class="pageDirection">
                        <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>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            content: '', // 程序文本内容
            msg: '',
            data1: [
                // {
                //     id: 1,
                //     machine_name: 1,
                //     _expanded: false,
                //     _highlight: false,
                //     _checked: false
                // },
                // {
                //     id: 2,
                //     machine_name: 2,
                //     _expanded: false,
                //     _highlight: false,
                //     _checked: false
                // },
                // {
                //     id: 3,
                //     machine_name: 3,
                //     _expanded: false,
                //     _highlight: false,
                //     _checked: false
                // }
            ],
            detailobj: {},
            columns: [
                {
                    type: 'expand',
                    width: 80,
                    render: (h, params) => {
                        // if (params.row.id === this.obj.id) {
                        var newArr = [];
                        if (
                            this.content !== null &&
                            this.content !== undefined &&
                            this.content !== ''
                        ) {
                            var infoArray = this.content.split('\n');
                            infoArray.forEach((ele, i) => {
                                newArr.push(
                                    h('p', [
                                        h(
                                            'span',
                                            {
                                                style: {
                                                    background: '#ddd',
                                                    display: 'inline-block',
                                                    'text-align': 'center',
                                                    padding: '0px 5px',
                                                    'min-width': '30px'
                                                }
                                            },
                                            i + 1
                                        ),
                                        h('span', ele)
                                    ])
                                );
                            });
                        }
                        return h(
                            'div',
                            {
                                style: {
                                    border: '1px solid black',
                                    overflow: 'auto',
                                    width: '99%',
                                    height: '200px'
                                }
                            },
                            [
                                h(
                                    'div',
                                    {
                                        style: {
                                            'white-space': 'nowrap',
                                            'max-width': '1000px'
                                        }
                                    },
                                    newArr
                                )
                            ]
                        );
                        // }
                    }
                },
                {
                    title: this.$t('1008'),
                    key: 'order',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 70,
                    align: 'center'
                },
                {
                    title: '设备名称',
                    key: 'machine_name',
                    align: 'center'
                },
                {
                    title: '程序号',
                    key: 'program_code',
                    align: 'center'
                },
                {
                    title: '产品图纸号',
                    key: 'product_code',
                    align: 'center'
                },
                {
                    title: '上传人',
                    key: 'uploadname',
                    align: 'center'
                },
                {
                    title: '上传时间',
                    key: 'uploadtime',
                    align: 'center'
                },
                {
                    title: '大小',
                    key: 'filesize',
                    align: 'center'
                },
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                }
            ],
            total: 0,
            page: 1,
            pagesize: 10,
            mid: '',
            show: true,
            selection: []
        };
    },
    computed: {
        treeList () {
            return this.$store.state.app.tree;
        }
    },
    created () {
    // 获取树形图数据
        this.$store.dispatch('getTree');
        // 格式化表格样式
        this.columns = this.$time.initTableTitle(this.columns)
    },
    methods: {
    // 获取id
        getList () {
            let node = this.$refs.tree.getSelectedNodes();
            if (node.length > 0) {
                if (node[0].children.length > 0) {
                    this.$Message.error(this.$t(100128));
                    return false;
                } else {
                    let id = node[0].value;
                    this.getMachineInfo(id);
                    this.mid = node[0].value;
                    this.search(1, 10);
                }
            }
        },
        getMachineInfo (id) {
            let data = {
                id: id
            };
            this.request(
                '/config/Machine/GetmachineidBySection',
                data,
                'get'
            ).then(res => {
                // console.log(res.data.data);
                if (res.data.ret == 1) {
                    let info = res.data.data;
                    this.show = true;
                    this.msg = ''
                    if (info.attribute == 1) {
                        this.search(1, 10);
                    } else if (info.attribute == 2) {
                        this.show = false;
                        this.msg = this.$t(700176);
                        return false;
                    } else if (info.attribute == 3) {
                        this.msg = this.$t(700177);
                        this.search(1, 10);
                    } else if (info.attribute == 4) {
                        this.show = false;
                        this.msg = this.$t(700176);
                        return false;
                    }
                    // this.getData();
                    // console.log(this.attribute);
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        search (page, pagesize) {
            if (this.mid == 0 || this.mid == '' || this.mid == undefined) {
                this.$Message.error(this.$t(700071));
                return false;
            }
            var data = {
                sectionid: this.mid,
                page: page,
                pagesize: pagesize
            };
            this.request('/dnc/DncUpDown/GetPgDeletelists', data, 'get').then(
                res => {
                    if (res.data.ret == 1) {
                        this.total = res.data.total;
                        let list = res.data.data;
                        this.renderTable(list);
                    }
                }
            );
        },
        renderTable (array = []) {
            let a = [];
            array.forEach(item => {
                a.push({
                    id: item.id,
                    machine_id: item.machine_id,
                    machine_name: item.machine_name,
                    program_code: item.program_code,
                    product_code: item.product_code,
                    productname: item.productname,
                    productid: item.productid,
                    uploadname: item.uploadname,
                    uploadtime: item.uploadtime,
                    file_name: item.file_name,
                    file_url: item.file_url,
                    filesize: item.filesize,
                    _expanded: false,
                    _highlight: false
                });
            });
            this.data1 = a;
        },
        dele () {
            if (this.mid == 0 || this.mid == '' || this.mid == undefined) {
                this.$Message.error(this.$t(700071));
                return false;
            }
            if (this.selection.length == 0) {
                this.$Message.error('请选择数据');
                return false;
            }

            let data = {},
                arr = [];
            this.selection.forEach(ele => {
                arr.push(ele.program_code);
            });
            data = {
                data: arr,
                sectionid: this.mid
            };
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                width: '290px',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    this.request(
                        '/dnc/DncUpDown/DeleteProgram',
                        data,
                        'post'
                    ).then(res => {
                        if (res.data.ret == 1) {
                            this.$Message.success('删除成功');
                            this.search(1, 10);
                            this.selection = [];
                        } else {
                            this.$Message.error(this.$t(res.data.msg));
                        }
                    });
                }
            });
        },
        getText () {
            let data = {
                machine_id: this.detailobj.machine_id,
                programcode: this.detailobj.program_code
            };
            this.request('/dnc/DncUpDown/getProgramContent', data, 'get').then(
                res => {
                    if (res.data.ret == 1) {
                        this.content = res.data.data;
                    }
                }
            );
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            this.content = '';
            this.getText();
        },
        onExpand (row, index) {
            this.data1.forEach((item, i) => {
                // 这个循环是为了每次只能展开一个，其他自动收起，不需要可以去掉
                i !== index ? (this.data1[i]._expanded = false) : '';
                i !== index ? (this.data1[i]._highlight = false) : '';
            });
            this.data1[index]._expanded = !this.data1[index]._expanded;
            // this.data1[index]._checked = !this.data1[index]._checked;
            this.data1[index]._highlight = true;
            this.data1.sort();
        },
        handleSelect (data) {
            this.selection = data;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.data1 = this.search(1, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.data1 = this.search(this.page, this.pagesize);
        },
        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>
</style>
