<template>
	<div>
		<el-form-item label="所属分类" style="width: 835px;">
			<el-input
			        :disabled="true"
                    style="width: calc(100% - 62px );"
			        v-model="title">
			</el-input>
			<el-button type="primary" icon="el-icon-edit" @click="dialogVisible = true"></el-button>
		</el-form-item>

		<el-dialog
		    title="提示"
		    :visible.sync="dialogVisible"
		    width="30%">
			<el-tree
			        @node-click="targetNode"
			        :data="data"
			        :props="defaultProps"
			        highlight-current>
			</el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmType">确 定</el-button>
			</span>
        </el-dialog>
	</div>
  
</template>

<script>
import {categoryFn, getParents} from '../../common/common';
import { mapMutations } from 'vuex';
export default {
    name: "category",
    props: {
        data: '',
        categorys: ''
    },
    data() {
        return {
            node: '',
            dialogVisible: false,
            defaultProps: {
                children: 'children',
                label: 'abstract'
            },
            title: ''
        };
    },
    methods: {
        confirmType() {
            this.iscategoryParentIdChange(this.node.id);
            this.title = categoryFn(this.node.breadcrumb, this.title);
            this.dialogVisible = false;
        },
        targetNode(node) {
            this.node = node;
        },
        ...mapMutations('utils', {
            iscategoryParentIdChange: 'iscategoryParentIdChange',
        })
    },
    watch: {
        // 'categorys': (val) => {
        //     console.log(val, 12);
        // }
    },
    mounted() {
        if (this.categorys !== 'add') {
            this.$nextTick(function () {
                let getParent = getParents(this.data, this.$route.query.parent_id).reverse();
                let abstract = '';
                getParent.map((item, j) => {
                    this.title += '/' + item.abstract;
                });
            }); 
        }
        else {
            this.title = categoryFn(this.$route.query.breadcrumb, this.title);
        }
    }
};
</script>

<style scoped>

</style>
