<template>
  <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        {{sortType == 1 ? '最新' : '最热'}}
        <div class="select">
            <img src="@/assets/file_icons/web降序.png" alt="" v-show="sortType == 2">
            <img src="@/assets/file_icons/web升序.png" alt="" v-show="sortType == 1">
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
      <el-dropdown-item class="clearfix" @click.native="sortTypeClick('最新')">
          最新
          <el-badge class="iconfont icon-paixushaixuanxuanzhong" v-show="sortType == 1"/>
      </el-dropdown-item>
      <el-dropdown-item class="clearfix" @click.native="sortTypeClick('最热')">
          最热
          <el-badge class="iconfont icon-paixushaixuanxuanzhong" v-show="sortType == 2"/>
      </el-dropdown-item>
      </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'HotNewControl',
  data() {
    return {
      sortType: 1
    };
  },
  props: {

  },
  computed:{
  },
  watch:{
  },
  methods: {
    sortTypeClick(name) {
      this.sortType = name == '最新' ? 1 : 2
      this.$emit('sortTypeChange',name)
    }
  },
};
</script>

<style scoped>
  .el-dropdown-link {
    display: flex;
  }
  .el-dropdown-link .select {
    margin-left: 8px;
  }
  .el-dropdown-menu__item {
    display: flex;
    justify-content: space-between;
  }
  .el-popper[x-placement^=bottom]  {
    margin: 0;
    padding:0;
    width: 150px;
  }
  .iconfont {
    color: #3874F6; 
  }
</style>
