<template>
  <div class="pop">
    <div class="header">
      <img class="close" @click="cancel" src="/img/home/nav/close.png" alt="极度证券">
      <!-- 全部栏目 -->
      {{ $t('common.l11') }}
    </div>
    <div v-if="!edit" class="box">
      <div class="title1 flex">
        <div class="flex">
          <div>
            <!-- 我的栏目 -->
            {{ $t('common.l12') }}
          </div>
          <div class="tip">
            <!-- 点击进入 -->
            {{ $t('common.l13') }}
          </div>
        </div>
        <div class="edit" @click="edit = true">
          <!-- 编辑 -->
          {{ $t('common.l14') }}
        </div>
      </div>
      <div class="ul">
        <div class="li" @click="tabChange(item.code)" :class="{active: activeName == item.code}" v-for="(item) in tabList" :key="item.code">
          {{ tabName[item.title] || tabName }}
        </div>
      </div>
    </div>
    <tabOperate :tabName="tabName" v-if="edit" @back="tabBack" :list="tabList" :allTablist="allTablist" :activeName="activeName" />
  </div>
</template>
<script>
import tabOperate from "./tabOperate.vue";
export default {
  props: ['tabList', 'activeName', 'allTablist', 'tabName'],
  components: {
    tabOperate
  },
  data () {
    return {
      edit: false
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    tabBack(list) {
      this.edit = false
      this.$emit('back', list)
    },
    tabChange(val) {
      this.$emit('tabChange', val)
    }
  }
}
</script>
<style lang="less" scoped>
.pop {
  padding: 27px 0 18px;
  color: #000000;
}
.header {
  position: relative;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 29px;
  .close {
    position: absolute;
    top: 0;
    left: 17px;
    width: 15px;
  }
}
.box {
  padding: 0 17px 50px;
  .title1 {
    justify-content: space-between;
    margin-bottom: 23px;
    .tip {
      color: #9F9F9F;
      font-size: 12px;
      margin-left: 15px;
    }
  }
  .edit {
    cursor: pointer;
  }
  .ul {
    display: flex;
    column-gap: 8px;
    row-gap: 9px;
    flex-wrap: wrap;
  }
  .li {
    cursor: pointer;
    text-align: center;
    line-height: 36px;
    min-width: 79px;
    border-radius: 18px;
    background-color: #F7F7F7;
    font-size: 13px;
    padding: 0 5px;
    color: #0D0D0D;
    &.active {
      background-color: #FFF0EA;
      color: var(--color-);
    }
  }
}
</style>