<template>
  <div class="sort_panel">{{sortData.sortname}} <i class="el-icon-d-caret"></i>
    <ul class="sort_list">
      <li class="flex-align-center flex-between" :class="active === index?'act':''" v-for="(item, index) in sort" :key="index" @click="selectSort(item,index)">
        {{item.sortname}}
        <i v-if="active === index" class="el-icon-check"></i>
      </li>
      <li class="flex-align-center flex-between border-top" :class="sortData.reversed === 1?'act':''" @click="reversed">
        倒序
        <i v-if="sortData.reversed === 1" class="el-icon-check"></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props:['sort'],
  data () {
    return {
      sortData:'',
      active:0
    }
  },
  methods: {
    selectSort (item,index) {
      this.sort.map((e)=>{
        e.sorted = 0
      })
      this.sort[index].sorted = 1
      this.active = index
      this.$emit('onSort',this.sortData)
    },
    reversed () {
      this.sortData.reversed === 1?this.sortData.reversed = 0:this.sortData.reversed = 1
      this.$emit('onSort',this.sortData)
    }
  },
  watch:{
    sort () {
      this.sortData = this.sort[0]
    }
  }
}

</script>
<style>
</style>
<style scoped>
.sort_panel{
  position: relative;
  font-size: 14px;
  cursor: pointer;
}
.sort_list {
  display: none;
  position: absolute;
  top:20px;
  right:0px;
  width: 150px;
  /* min-height: 160px; */
  background: #FFFFFF;
  box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.16);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  z-index: 999;
}
.sort_list > li{
  padding: 6px 16px;
}
.act {
  color:#3874F6;
}
.sort_panel:hover .sort_list{
  display: block;
}
.border-top{
  border-top:1px solid #f1f2f3
}
</style>