<template>

    <el-popover
        placement="bottom"
        title="排序"
        width="200"
        ref="draggablePopover"
        v-model="show"
    > 
    <div style="max-height:400px;overflow-y:auto;">
        <!-- <el-radio-group v-model="radio" @input="change"> -->
        <draggable ref="el" v-model="tableData" @end="end">
                <div v-for="item in tableData" :key="item.id" class="item" style="display:flex">
                    <span>
                        <el-radio v-model="radio" @input="change" :label="item.id">{{  }}</el-radio>
                    </span>
                    <my-tooltip :content="item.name" placement="right">
                            <div class="noWrap" style="cursor:move;">
                                <slot :data="item">{{item.name }}</slot>
                            </div>
                    </my-tooltip>
                </div>
        </draggable>
    <!-- </el-radio-group> -->
    </div>
    
    <span slot="reference">
        <i class="el-icon-arrow-right" v-if="!show" @click="changeShow(false)"></i>
        <i class="el-icon-arrow-down" v-else @click="changeShow(true)"></i>
    </span>
  </el-popover>
    

</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    list:{
        default:[]
    },
    check:{
        default:''
    },

  },
  data() {
    return {
        show:false,
        tableData:JSON.parse(JSON.stringify(this.list)),
        radio:this.check
    };
  },
  watch: {
    list(){
        this.tableData = JSON.parse(JSON.stringify(this.list))
    },
    check(){
        this.radio = this.check
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    end(val){
        var newIndex = val.newIndex
        var oldIndex = val.oldIndex
        this.$emit('update',newIndex,oldIndex)
        // this.closePopover()
    },
    change(val){
        this.$emit('change',val,this.check)
        // this.closePopover()
    },
    //关闭弹窗
    closePopover(){
        this.$refs.draggablePopover.doClose()
        this.show = true
    },
    changeShow(val){
        this.$set(this,'show',val)
    },
  },
};
</script>
<style lang="scss" scoped>
.item{
    line-height: 30px;
}
</style>