<template>
  <div class="container">
    <PageHeader :title="$t('field.investmentPortfolio') + ' ' + folderName">
      <el-cascader ref="cascader" v-model="folder" :options="folderList"
        :props="{ expandTrigger: 'hover', label: 'text', checkStrictly: true }" popper-class="popper" filterable
        @change="folderChange">
      </el-cascader>

      <div style="margin-left:8px;">
        {{ $t('field.profitAndLossCcy') }}
        <el-input style="width: 66px;margin-left:8px;" v-model="riskCcy" :disabled="true">
        </el-input>
      </div>
    </PageHeader>
  </div>
</template>

<script>
import PageHeader from '../../components/PageHeader.vue'
export default {
  name: 'userInfo',
  components: {
    PageHeader
  },
  data() {
    return {
      folder: [],
      folderName: '',
      pnlCcy: '',
      riskCcy: '',
      folderList: [],
      folderStoreKey: 'user.folder',
      userId: localStorage.getItem('system:share:loginId')
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const res = await this.$apis.queryAllFolderInfo({})
      if (res.success) {
        this.folderList = this.getTreeData(res.data.result)
        this.folder = this.getStoreOfFolder() || [res.data.result[0]?.value]
        this.folderChange(this.folder)
      }
    },

    getTreeData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined
        } else {
          this.getTreeData(data[i].children)
        }
      }
      return data
    },

    async folderChange(arr) {
      this.setStoreOfFolder()
      let folder = ''
      let type = ''
      let index = 1
      while (arr.length) {
        folder = arr[arr.length - index]?.split('@@')[1]
        type = arr[arr.length - index]?.split('@@')[0]
        index += 1
        if (type !== 'B') {
          break
        }
      }
      const params = {
        'queryParam.folder': folder,
        'queryParam.type': type
      }
      const res = await this.$apis.getFolderPlCcy(params)
      const currentNode = this.$refs.cascader?.getCheckedNodes()
      this.folderName = currentNode[0].data.text
      if (res.success) {
        this.pnlCcy = res.data.result
        this.riskCcy = res.data.result
      } else {
        this.pnlCcy = ''
        this.riskCcy = ''
      }
      this.$bus.$emit('folderChange', {
        folder: arr[arr.length - 1],
        pnlCcy: this.pnlCcy,
        riskCcy: this.riskCcy
      })
    },

    setStoreOfFolder() {
      localStorage.setItem(this.folderStoreKey, JSON.stringify({
        userId: this.userId,
        folder: this.folder
      }))
    },

    getStoreOfFolder() {
      const folderStore = localStorage.getItem(this.folderStoreKey) || "{}"
      const parsedFolderStore = JSON.parse(folderStore)
      if (parsedFolderStore.userId === this.userId) {
        this.folder = parsedFolderStore.folder
        return this.folder
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--color-90);
  font-size: 12px;
  padding: 8px 9px;
  // padding-top: 0.5vw;
}
</style>
<style lang="scss">
.popper {
  .el-cascader-panel {
    .el-radio {
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 0px;
      right: 0px;
    }

    .el-radio__input {
      margin-top: 10px;
      margin-left: 8px;
    }

    .el-checkbox {
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 0px;
      right: 0px;
    }

    .el-checkbox__input {
      margin-top: 2px;
      margin-left: 8px;
    }

    .el-cascader-node__postfix {
      top: 10px;
    }
  }
}
</style>