<template>
  <div class="nodeCopy">
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="700px" :append-to-body="true"
      :close-on-click-modal="false">
        <div>
            <div class="margin-bottom_10">
                <span>是否包含子节点：</span>
                <el-switch
                    v-model="form.check"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </div>
            <div class="margin-bottom_10">
                <span>{{type? '去处':'来源'}}：</span>
                <el-select v-model="form.value" size="small" :disabled="disable" @change="changeValue" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <!-- <div class="margin_bottom_10" v-if="false">
                <span>所属{{ options.filter(item => { return item.value == fromValue })[0].label }}：</span>
                <span>{{ affiliation }}</span>
            </div> -->
            <div class="table">
                <!-- <span>树：</span>
                <div v-if="treeData.length > 0" style="min-height:200px;max-height: 600px;overflow: auto;">
                <el-tree :data="treeData" ref="tree" :props="props" show-checkbox node-key="id" :check-strictly="check" @check="handleCheck">
                </el-tree>
                </div>
                <div v-else>
                <div style="padding-left: 20px;">暂无数据</div>
                </div> -->
                <div style="height:calc(100vh - 350px)" v-if="tableData.length>0">
                    <el-container>
                        <el-main class="height_100" :loading="loading">
                            <el-table
                                class="copyTable"
                                :data="tableData"
                                style="width: 100%"
                                row-key="id"
                                :expand-row-keys="expends"
                                @expand-change="handleExpand"
                                >
                                <el-table-column type="expand" width="1">
                                    <template slot-scope="scope">
                                        <div style="padding: 10px;" :loading="treeLoading">
                                            <el-tree :data="scope.row.treeData" ref="tree" :props="props" show-checkbox node-key="id" :default-checked-keys="form.nodeIds" :check-strictly="true" @check="handleCheck"></el-tree>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="index"
                                    label=""
                                    width="50px">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-radio-group v-model="form.id">
                                                <el-radio :label="scope.row.id" @click.native.prevent="changeId(scope.row.id)">{{  }}</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="name"
                                    label="姓名">
                                </el-table-column>
                            </el-table>
                        </el-main>
                        <el-footer class="pagination">
                            <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                                :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
                                @current-change="handleCurrentChange" @size-change="getData()" :total="total">
                            </el-pagination>
                        </el-footer>
                    </el-container>
                    
                    
                </div>
            </div>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        // 提示
        title: '复制分类节点',
        // 控制弹窗显示与隐藏
        dialogVisible: false,
        form:{
            check:true,
            value:'',
            name:'',
            nodes:[],
            nodeIds:[],
            id:''
        },
        submitForm:{

        },
        options: [
            { label: '产品类别', value: '1' },
            { label: '产品', value: '2' },
            { label: '技术分类', value: '3' },
            { label: '自定义树', value: '4' },
        ],
        loading:true,
        tableData:[],
        queryParams:{
            current:1,
            size:10
        },
        total:0,
        searchOption:{

        },
        sort:[
            {
                "orderBy": "createTime",
                "orderType": 1
            }
        ],
        // 配置项，树节点的显示与层级
        props: {
            label: 'name',
            children: 'child'
        },
        expends:[],
        treeLoading:false,
        type:0,
        disable:false
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * 
     * @param {Object} form 
     * @param {String} type 0表示复制，1表示粘贴
     */
    open(form,type){
        this.submitForm = form
        if(!type){
            this.form.value = form.fromType
            this.searchOption.category_id = form.fromTypeId
        }else{
            this.form.value = form.toType
            this.searchOption.product_id = form.toTypeId
        }
        if(this.form.value){
            this.disable = true
            this.getData()
        }
        this.type = type || 0
        this.dialogVisible = true
    },
    changeValue(val){
        this.queryParams.current = 1
        this.form.nodes = []
        this.form.nodeIds = []
        this.getData()
    },
    changeId(val){
        if(this.form.id == val){
            if(this.expends.indexOf(val)==-1){
                this.expends = [val]
            }else{
                this.expends = []
            }
        }else{
            this.form.id = val
            this.expends = [val]
            this.form.nodes = []
            this.form.nodeIds = []
            this.getTreeData()
        }
    },
    getData(){
        switch(this.form.value){
            case '1':
                this.queryProductCategory()
                break;
            case '2':
                this.queryProduct()
                break;
            case '3':
                break;
            case '4':
                break;
        }
    },
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getData()
    },
    //获取产品类别列表
    queryProductCategory(params){
        var params = {
            ...this.queryParams,
            searchQuery:this.$commonJS.objectToString(this.searchOption),//检索条件
            orderDTOList: this.sort,//排序
        }
        this.loading = true
        this.$api.queryProductCategory(params).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data
                this.total = response.data.total
                this.loading = false
            }
        }).catch(error=>{
            this.loading = false
            this.tableData = []
            this.total = 0
        })
    },
     //获取产品列表
     queryProduct(params){
        var params = {
            ...this.queryParams,
            searchQuery:this.$commonJS.objectToString(this.searchOption),//检索条件
            orderDTOList: this.sort,//排序
        }
        this.loading = true
        this.$api.queryProduct(params).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data
                this.total = response.data.total
                this.loading = false
            }
        }).catch(error=>{
            this.loading = false
            this.tableData = []
            this.total = 0
        })
    },
    //获取树数据
    getTreeData(){
        var index = this.tableData.findIndex(item=>{
            return item.id == this.expends[0]
        })
        if(this.tableData[index].treeData && this.tableData[index].treeData.length>0){
            return false
        }
        let params = {
            type: this.form.value,//类型：1产品类别，2产品，3技术分类，4自定义树
            typeId: this.expends[0],//产品类别id
        }
        this.treeLoading = true
        this.$api.queryTreeNodeTree(params).then(res => {
            if (res.code == 200) {
                this.tableData[index].treeData = res.data.data
                this.treeLoading = false
            }
        }).catch(err => {
            this.$message.error(err.message)
            this.treeLoading = false
        })
    },
    handleCheck(node,data){
        // console.log(node,data)
        if(this.type == 1){
            if(this.form.nodes.length>0){
                this.$message.warning('只能合并或粘贴到一个节点上')
            }
            return false
        }
        var index = this.form.nodes.findIndex(item=>{
            return item.parentId == node.parentId
        })
        if(this.form.nodes.length==0 || index != -1){
            var index2 = this.form.nodeIds.indexOf(node.id)
            if(index2 == -1){
                this.form.nodes.push(node)
                this.form.nodeIds.push(node.id)
            }else{
                this.form.nodes.splice(index2,1)
                this.form.nodeIds.splice(index2,1)
            }
        }else{
            this.$refs.tree.setChecked(node.id , false);
            this.$message.warning('只允许选择同一层级的且是同一个分支的节点')
        }
    },
    handleExpand(val){
        var index = this.expends.indexOf(val.id)
        if(index==-1){
            this.expends = [val.id]
            this.getTreeData()
        }else{
            this.expends = []
        }
    },
    handleClose(){
        this.dialogVisible = false
        this.searchOption = {}
        this.form={
            check:true,
            value:'',
            name:'',
            nodes:[]
        }
    },
    submit(){
        if(!this.type){
            this.submitForm.fromNodeIds= this.form.nodeIds//选中需要复制的数据
            this.submitForm.fromType= this.form.value//类型：1产品类别，2产品，3技术分类，4自定义树
            this.submitForm.fromTypeId=this.form.id//来源目标
            if(!this.submitForm.fromTypeId){
                this.$message.error('请选择来源目标')
                return false
            }
        }else{
            this.submitForm.toType=this.form.value//类型：1产品类别，2产品，3技术分类，4自定义树
            this.submitForm.toTypeId= this.form.id//产品id
            this.submitForm.toNodeId= this.form.nodeIds[0]//放到哪一个节点下面
            if(!this.submitForm.toTypeId){
                this.$message.error('请选择去往的目标')
                return false
            }
        }
        this.submitForm.ifCopyChild=this.form.check//是否有子节点 
        this.$api.copyTreeNode(this.submitForm).then(res => {
            if (res.code == 200) {
                this.$message.success('操作成功！')
                this.$emit('submit','成功')
                this.handleClose()
            }
        }).catch(error=>{
            this.$message.error(error.message)
        })
    },
  },
};
</script>
<style lang="scss" scoped>
.table:empty{
    content:'暂无数据';
    text-align: center;
}
</style>
<style lang="scss">
    .copyTable{
        .el-table__expand-icon{
            opacity: 0;
        }
    }
    
</style>