<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="searchBtn">
      <Button type="primary" class="fourWord" icon="md-download" @click="loadexcel()">{{$t('1005')}}</Button>
      <Upload style="display:inline-block"
            ref="upload"
            :action="action"
            name="excel-file"
            :headers="headers"
            :show-upload-list="false"
            :on-format-error="handleFormatError"
            :on-success="handleSuccess"
            :on-error="handleError"
            :format ="['xlsx']">
                <Button type="primary" class="fourWord" icon="md-cloud-upload">{{$t('1006')}}</Button>
        </Upload>
      </div>
    </div>
    <div class="divborder">
     <div class="core">
        <Tree ref="tree" :data="treeContents" :render="renderContent"></Tree>
    </div>
    </div>
          <Modal :title="$t('1002')" v-model="addmodal"   :styles="{top: '100px',width:'400px'}" >
            <div class="modal_body addmodal_body" style="width:300px!important;padding:0 20px;height:50px!important;">
                <Row style="height:100%;">
                    <div class="filter" >
                        <label v-if="selectaddobj.set_attrubution==1"><span v-text="$t('950435')">选择要添加的设备</span>:</label>
                        <label v-else-if="selectaddobj.set_attrubution==2"><span v-text="$t('950436')">选择要添加的子系统</span>:</label>
                        <label v-else-if="selectaddobj.set_attrubution==3"><span v-text="$t('1950473')">选择要添加的部件</span>:</label>
                        <label v-else="selectaddobj.set_attrubution==4"><span v-text="$t('950437')">选择要添加的备件</span>:</label>
                        <Select v-model="addchild"  label-in-value  clearable style="width: 300px;" >
                            <Option v-for="(item ,key) in addchildlist" :value="item.id" :key="item.id">{{item.id}}-{{item.title}}-{{item.code}}</Option>
                        </Select>
                    </div>
                </Row>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="addmodal=false" v-text="$t('1033')">取消</Button>
                <Button type="primary" size="large" @click="adddata" v-text="$t('1011')">确定</Button>
            </div>
      </Modal>
  </div>
</template>
<script>
export default {
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            treeContents: [],
            map: {
                value: 'value',
                label: 'label',
                children: 'children',
                expand: true
            },
            addmodal: false, // 添加模态框
            selectaddobj: {}, // 树被选中添加子级的对象
            addchild: 1, // 增加的子节点
            addchildlist: [], // 增加的子节点list
            expand: true,
            root: null,
            action: this.axios.publicPath + 'config/upload/submit?templateName=MachineAttribution',
            editZoneDisplayBoolean: false,
            beforeSubmitNodeTitleString: '',
            edit_root: null,
            edit_node: null,
            edit_data: null,
            isadd: 0
        }
    },
    methods: {
        handleFormatError (file) {
            this.$Message.error(this.$t('950396') + file.name + this.$t('950397'))
        },
        handleSuccess (res, file) {
            if (res.ret === 1) {
                this.$Message.success(this.$t('950398'))
                this.doTreeContents()
            } else {
                if (res.msg.indexOf(',' != -1)) {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t(res.msg))
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('950399'))
        },
        doTreeContents () {
            this.axios.request({
                url: 'config/MachineAttribution/GetAttributionData',
                method: 'get'
            }).then(res => {
                this.treeContents = this.convertTree(res.data.data, this.map)
            }).catch((error) => {
            })
        },
        loadexcel () {
            var params = {
                name: 'MachineAttribution'
            }
            this.axios.request({
                // url: 'config/Download/GetTemplate', 
                 url: 'config/MachineAttribution/GetTemplate',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    window.location.href = this.axios.publicPath + '' + res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        // 树形数据转换
        convertTree (tree, map) {
            const result = []
            if (tree) {
                tree.forEach((item) => {
                    const value = item[map.value]
                    const label = item[map.label]
                    // const disabled = item.disabled
                    const disabled = false
                    const attrubution = item.attrubution
                    let children = item[map.children]
                    const expand = true
                    if (children) {
                        children = this.convertTree(children, map)
                    }
                    result.push({ value, label, children, expand, disabled, attrubution })
                })
            }
            return result
        },
        renderContent (h, { root, node, data }) {
            if (data.attrubution == 0) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '800px'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.label)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }
                    )
                ])
            } else if (data.attrubution == 1) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '800px'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.label)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'md-add-circle',
                                type: 'success'
                            }),
                            style: {
                                marginRight: '108px'
                            },
                            on: {
                                click: () => {
                                    this.append(data)
                                }
                            }
                        })
                    ]
                    )
                ])
            } else if (data.attrubution == 2 || data.attrubution == 3 || data.attrubution == 4) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '800px'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.label)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'md-add-circle',
                                type: 'success'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    //   this.addmodal=true
                                    this.append(data)
                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-close-circle',
                                type: 'error'
                            }),
                            style: {
                                marginRight: '52px'
                            },
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ]
                    )
                ])
            } else {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '800px'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.label)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-close-circle',
                                type: 'error'
                            }),
                            style: {
                                marginRight: '52px'
                            },
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ]
                    )
                ])
            }
        },
        adddata () {
            var data = {}
            if (this.selectaddobj.set_attrubution == 1) {
                data = {
                    machine: this.addchild,
                    attribution: this.selectaddobj.set_attrubution,
                    parent: 0,
                    station: this.selectaddobj.value
                }
            } else {
                data = {
                    machine: this.addchild,
                    attribution: this.selectaddobj.set_attrubution,
                    parent: this.selectaddobj.value
                }
            }
            this.axios.request({
                url: 'config/MachineAttribution/AddAttribution',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t('1055'))
                    this.addmodal = false
                    this.addchild = '',
                    this.doTreeContents()
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        append (data) {
            this.addmodal = true
            this.selectaddobj = data
            this.selectaddobj.set_attrubution = this.selectaddobj.attrubution
            var params = {
                attribution: this.selectaddobj.set_attrubution
            }
            this.axios.request({
                url: '/config/MachineAttribution/GetMachineByAttribution',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.addchildlist = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        remove (root, node, data) {
            console.log(data)
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                width: '290px',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    this.axios.request({
                        url: '/config/MachineAttribution/DeleteAttribution?id=' + data.value,
                        method: 'get'
                    }).then(res => {
                        if (res.data.ret === 0) {
                            this.$Message.error(this.$t('0'))
                        } else {
                            this.$Message.success(this.$t('1'))
                            this.doTreeContents()
                        }
                    })
                }
            })
        }
    },
    created () {
        this.doTreeContents()
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@edit-zone-height:32px;

 .addmodal_body .filter, .editmodal_body .filter{
    display: block;
    height: 40px;
    font-size: 15px;
    margin-right: 15px;
    margin-top: 0px;
    select {
      border-radius: 4px;
      height: 32px;
      color: #999;
      padding: 5px;
      box-shadow: 0px 0px 1px 1px #eee;
     }
    ;
    label {
      font-size: 12px;
      display: inline-block;
      margin-right: 5px;
      // width: 150px;
      text-align: start;
    }
  }
</style>
