<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 编辑 -->
    <backBar1 :title="$t('common.l14')">
      <div class="btns flex">
        <div class="btn" @click="deleteItem">
          <!-- 删除 -->
          {{ $t('common.l4') }}
        </div>
        <div class="btn" @click="save">
          <!-- 保存 -->
          {{ $t('common.l47') }}
        </div>
      </div>
    </backBar1>
    <div class="table-th flex">
      <div class="left flex">
        <img class="check" v-show="checkList.length != allLength || checkList.length == 0" src="/img/market/check.png" alt="极度证券" @click="chechAll(true)">
        <img class="check" v-show="checkList.length == allLength && checkList.length" src="/img/market/checked.png?1" alt="极度证券" @click="chechAll(false)">
        <div>
          <!-- 全选 -->
          {{ $t('setting.l38') }}
        </div>
      </div>
      <div class="right flex">
        <div class="td">
          <!-- 固定 -->
          {{ $t('setting.l39') }}
        </div>
        <div class="td" style="text-align: center;">
          <!-- 置顶 -->
          {{ $t('setting.l40') }}
        </div>
        <div class="td">
          <!-- 拖动 -->
          {{ $t('setting.l41') }}
        </div>
      </div>
    </div>
    <div class="drag-item flex" v-for="(item, index) in fixedList" :key="index">
      <div class="left flex">
        <img v-show="checkList.indexOf(item) === -1" class="check" src="/img/market/check.png" alt="极度证券" @click="checkItem1(index)">
        <img v-show="checkList.indexOf(item) !== -1" class="check" src="/img/market/checked.png?1" alt="极度证券" @click="checkItem1(index)">
        <div class="info-box" v-if="productDataObj[item]">
          <div class="name">
            {{ productDataObj[item].title }}
          </div>
          <div class="label flex">
            <div class="tag" v-if="productDataObj[item]">{{ getTagName(productDataObj[item]) }}</div>
            <div>{{ item }}</div>
          </div>
        </div>
      </div>
      <div class="right flex">
        <div class="td">
          <img class="icon" src="/img/market/icon6.png?1" alt="极度证券" @click='unFixedItem(index, item)'>
        </div>
        <div class="td" style="justify-content: center;">
        </div>
        <div class="td">
        </div>
      </div>
    </div>
    <draggable class="list" ghost-class="ghost" v-model="symbolList" animation="300" handle=".handle">
      <div class="drag-item flex" v-for="(item, index) in symbolList" :key="index">
        <div class="left flex">
          <img v-show="checkList.indexOf(item) === -1" class="check" src="/img/market/check.png" alt="极度证券" @click="checkItem(index)">
          <img v-show="checkList.indexOf(item) !== -1" class="check" src="/img/market/checked.png?1" alt="极度证券" @click="checkItem(index)">
          <div class="info-box" v-if="productDataObj[item]">
            <div class="name">
              {{ productDataObj[item].title }}
            </div>
            <div class="label flex">
              <div class="tag" v-if="productDataObj[item]">{{ getTagName(productDataObj[item]) }}</div>
              <div>{{ item }}</div>
            </div>
          </div>
        </div>
        <div class="right flex">
          <div class="td">
            <img class="icon" src="/img/market/icon5.png" alt="极度证券" @click="fixedItem(index, item)">
          </div>
          <div class="td" style="justify-content: center;">
            <img v-show="index == 0" class="icon" src="/img/market/icon8.png?1" alt="极度证券">
            <img v-show="index != 0" class="icon" src="/img/market/icon7.png" alt="极度证券" @click="toTop(index, item)">
          </div>
          <div class="td">
            <img class="icon handle" src="/img/market/icon9.png" alt="极度证券">
          </div>
        </div>
      </div>
    </draggable>
    <NoData v-if="myFavoriteList.length == 0"/>
  </div>
</template>
<script>
import { updateProductUser, deleteProductUser } from "@/api/user";
import backBar1 from "@/components/backBar1";
import { mapGetters } from "vuex";
import draggable from 'vuedraggable'
import bus from '@/utils/bus'
export default {
  components: {
    backBar1,
    draggable
  },
  inject: ['getproductDataObj'],
  computed: {
    ...mapGetters(["myFavoriteList"]),
    productDataObj() {
      return this.getproductDataObj()
    },
    allLength() {
      return this.symbolList.length + this.fixedList.length
    }
  },
  data () {
    return {
      symbolList: [],
      checkList: [],
      fixedList: []
    }
  },
  created() {
    if (this.myFavoriteList.length) {
      this.updateSubscribe()
    } else {
      this.getProductUserList()
    }
  },
  methods: {
    save() {
      var list = []
      this.fixedList.forEach((item, index) => {
        list.push({
          symbol: item,
          fixed: 1,
          num: index + 1
        })
      })
      this.symbolList.forEach((item, index) => {
        list.push({
          symbol: item,
          fixed: 0,
          num: index + 1
        })
      })
      if (!this.isLogin) {
        localStorage.removeItem('myFavoriteList')
        localStorage.setItem('myFavoriteList', JSON.stringify(list))
        this.$notify({
          // message: '更新成功',
          message: this.$t('common.l28'),
          type: 'success'
        })
        this.$store.dispatch('getProductUserList')
        this.$router.back()
        return
      }
      this.fullscreenLoading = true
      updateProductUser({
        list: JSON.stringify(list)
      }).then(res => {
        this.$notify({
          // message: '更新成功',
          message: this.$t('common.l28'),
          type: 'success'
        })
        this.$store.dispatch('getProductUserList')
        this.$router.back()
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    },
    deleteItem() {
      if (!this.checkList.length) {
        return
      }
      if (!this.isLogin) {
        var list = []
        this.myFavoriteList.forEach(item => {
          if (this.checkList.indexOf(item.symbol) == -1) {
            list.push(item)
          }
        })
        localStorage.removeItem('myFavoriteList')
        localStorage.setItem('myFavoriteList', JSON.stringify(list))
        this.$notify({
          // message: '删除成功',
          message: this.$t('common.l27'),
          type: 'success'
        })
        this.checkList = []
        this.getProductUserList()
        return
      }
      this.fullscreenLoading = true
      deleteProductUser({
        symbol: this.checkList.join(',')
      }).then(() => {
        this.$notify({
          // message: '删除成功',
          message: this.$t('common.l27'),
          type: 'success'
        })
        this.checkList = []
        this.getProductUserList()
      }).catch(() => {
        this.fullscreenLoading = false
      })
    },
    getProductUserList() {
      this.$store.dispatch('getProductUserList').then(() => {
        this.updateSubscribe()
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    },
    updateSubscribe() {
      var symbolList = []
      var symbolList1 = []
      var fixedList = []
      var list = this.myFavoriteList.sort((a, b) => a.num - b.num)
      list.forEach((item, index) => {
        symbolList.push(item.symbol);
        if (item.fixed) {
          fixedList.push(item.symbol)
        } else {
          symbolList1.push(item.symbol)
        }
      })
      this.symbolList = symbolList1
      this.fixedList = fixedList
      bus.$emit("alterProductData", {
        getData: symbolList,
      });
    },
    getTagName(item) {
      if (item.market == 'CN') {
        var list = item.symbol.split('.')
        return list[1]
      }
      return item.market
    },
    chechAll(sign) {
      if (sign) {
        this.checkList = this.symbolList.map(item => item)
        this.fixedList.forEach(item => {
          this.checkList.push(item)
        })
      } else {
        this.checkList = []
      }
    },
    checkItem(index) {
      var i = this.checkList.indexOf(this.symbolList[index])
      if (i === -1) {
        this.checkList.push(this.symbolList[index])
      } else {
        this.checkList.splice(i, 1)
      }
    },
    checkItem1(index) {
      var i = this.checkList.indexOf(this.fixedList[index])
      if (i === -1) {
        this.checkList.push(this.fixedList[index])
      } else {
        this.checkList.splice(i, 1)
      }
    },
    toTop(index, item) {
      this.symbolList.splice(index, 1)
      this.symbolList.unshift(item)
    },
    fixedItem(index, item) {
      this.symbolList.splice(index, 1)
      this.fixedList.unshift(item)
    },
    unFixedItem(index, item) {
      this.fixedList.splice(index, 1)
      this.symbolList.unshift(item)
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  padding-bottom: 30px;
}
.btns {
  font-size: 14px;
  color: #000;
  column-gap: 30px;
  .btn {
    cursor: pointer;
  }
}
.table-th {
  position: sticky;
  top: 50px;
  z-index: 5;
  padding: 0 16px;
  background-color: #fff;
  font-size: 12px;
  color: #B6B6B6;
  justify-content: space-between;
  height: 20px;
  .left {
    flex: 1;
    min-width: 0px;
    column-gap: 10px;
    color: #000000;
    .check {
      width: 14px;
      cursor: pointer;
    }
  }
  .right {
    column-gap: 6px;
    .td {
      width: 48px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &:last-child {
        text-align: right;
      }
    }
  }
}
.list {
  width: 100vw;
  overflow: hidden;
}
.drag-item {
  justify-content: space-between;
  height: 60px;
  border-bottom: 1px solid #F6F6F6;
  padding: 0 16px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  .left {
    flex: 1;
    min-width: 0px;
    column-gap: 10px;
    .check {
      width: 14px;
      cursor: pointer;
    }
  }
  .info-box {
    flex: 1;
    min-width: 0px;
    .name {
      font-size: 16px;
      line-height: 22px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .label {
      color: #B6B6B6;
      font-size: 12px;
      margin-top: 3px;
    }
    .tag {
      color: #888888;
      margin-right: 6px;
    }
  }
  .right {
    column-gap: 6px;
    .td {
      width: 48px;
      display: flex;
      align-items: center;
      &:last-child {
        justify-content: flex-end;
        padding-right: 4px;
      }
    }
    .icon {
      width: 16px;
      cursor: pointer;
    }
  }
}
</style>