<template>
  <div class="popup flex">
    <div class="box flex" @click="isFavorite">
      <img class="icon" src="/img/icon/delete.png" alt="极度证券">
      <div>
        <!-- 删除 -->
        {{ $t('common.l4') }}
      </div>
    </div>
    <!-- <div class="box flex">
      <img class="icon" src="/img/icon/edit.png" alt="极度证券">
      <div>编辑</div>
    </div>
    <div class="box flex">
      <img class="icon" src="/img/icon/top.png" alt="极度证券">
      <div>置顶</div>
    </div>
    <div class="box flex">
      <img class="icon" src="/img/icon/down.png" alt="极度证券">
      <div>置底</div>
    </div> -->
  </div>
</template>
<script>
import { insertProductUser, deleteProductUser } from "@/api/user";
import { mapGetters } from "vuex";
export default {
  props: ['symbol'],
  data () {
    return {
      
    }
  },
  computed: {
    ...mapGetters(["myFavoriteList"]),
    list() {
      return this.myFavoriteList.map(item => item.symbol)
    }
  },
  methods: {
    getProductUserList() {
      this.$store.dispatch('getProductUserList')
    },
    isFavorite() {
      var index = this.list.indexOf(this.symbol)
      if (this.isLogin) {
        if (index === -1) {
          this.insertProductUser()
        } else {
          this.deleteProductUser()
        }
      } else {
        var myFavoriteList = this.myFavoriteList
        if (index !== -1) {
          myFavoriteList.splice(index, 1)
          localStorage.removeItem('myFavoriteList')
          localStorage.setItem('myFavoriteList', JSON.stringify(myFavoriteList))
        } else {
          myFavoriteList.unshift({
            symbol: this.symbol,
            fixed: 0,
            num: 0
          })
          localStorage.setItem('myFavoriteList', JSON.stringify(myFavoriteList))
        }
        this.cancel()
      }
    },
    insertProductUser() {
      insertProductUser({
        symbol: this.symbol
      }).then(res => {
        this.getProductUserList()
        this.cancel()
      }).catch(() => {})
    },
    deleteProductUser() {
      deleteProductUser({
        symbol: this.symbol
      }).then(res => {
        this.getProductUserList()
        this.cancel()
      }).catch(() => {})
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.popup {
  padding: 9px 10px;
  background-color: var(--bg1-);
  justify-content: space-between;
  column-gap: 6px;
  border-radius: 7px;
  .box {
    width: 60px;
    height: 61px;
    background-color: var(--bg-);
    border-radius: 7px;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
  }
  .icon {
    width: 28px;
  }
}
</style>