<template>
  <div class="inline-16">
    <el-popover
      placement="left"
      width="190">
      <p class="normal-title normal-margin flex-align-center flex-between">
        <span>固定列</span>
        <i class="el-icon-refresh" @click="refresh"></i>
      </p>
      <ul class="fixed-panel">
        <li class="flex-align-center flex-between" v-for="(item,index) in data" :key="index">
          <p>{{item.title}}</p>
          <el-radio-group style="width:110px" v-model="item.radio" @change="radioChange">
            <el-radio label="right">右</el-radio>
            <el-radio label="left">左</el-radio>
          </el-radio-group>
        </li>
      </ul>
      <i slot="reference" class="el-icon-set-up"></i>
    </el-popover>
  </div>
</template>

<script>
export default {
  props:['data'],
  methods:{
    radioChange () {
      let right = this.data.filter(e=>{
        if (e.radio === 'right') 
        return e.columnname
      })
      let left = this.data.filter(e=>{
        if (e.radio === 'left') 
        return e.columnname
      })
      this.$emit('onFixedClick',right,left)
    },
    refresh () {
      this.data.forEach(e => {
        e.radio = ''
      });
      this.$emit('onFixedClick',[],[])
    }
  }
}

</script>
<style>
</style>
<style scoped>
.fixed-panel li{
  margin-bottom: 16px;
}
.fixed-panel li p{
  width: 60px;
  text-align: justify; 
  text-justify: 
  distribute-all-lines; 
  text-align-last: justify;
}
</style>