<template>
  <div
		class="mybill-card"
		@click="gotoQuery(item)"
  >
    <div class="top-icon" :style="{background: item.color || '#52D2DA'}"></div>
    <div class="text">
      <div class="title">{{item.title}}</div>
      <div class="description">/ {{item.description}}</div>
    </div>
     <div class="amount">
       <div class="unit">￥</div>
       <div>{{sqlResult}}</div>
     </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      sqlResult: 0,
    }
  },
  methods: {
    async gotoQuery(item) {
      if (!item.function || !item.function.id) return
      function getUUID() {
        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        });
      }
      item = item.function
      let appConfig = await window.GMS.util.nvwa.getAppConfig(item.id)
      appConfig = appConfig?.data?.configJson || '{}'
      appConfig = JSON.parse(appConfig)
      if (
        window.osConfig.appOpenMode &&
        window.osConfig.appOpenMode == "apploader"
      ) {
        window.GMS.$hideContainer.$portalAPI.emit(
          "open-new-page", //打开一个新的页签
          getUUID(),
          item.appName,
          {
            ...appConfig,
          },
          {
            openWay: "FUNCTAB",
            title: item.title,
          }
        );
      } else {
        if (item.path) {
          window.GMS.$hideContainer.$router.push({
            path: `/${item.path}`
          })
          return
        }
        const [appName, moduleName] = item.appName.split('/')
        const portalConfig = { id: item.id }
        if (moduleName) {
          portalConfig['exportLibrary'] = moduleName
          portalConfig['funcName'] = moduleName
        }
        const path = window.GMS.routerManager.getRouter().resolve({
          name: "app",
          query: {
            name: appName,
            "os-jump": encodeURIComponent(window.Base64.encode(JSON.stringify(
              Object.assign(
                {  },
                portalConfig
              )
            ))),
            onlyShowContent: false,
          }
        })
        window.location.hash = path.href
        setTimeout(() => {
          window.location.hash = '#'
        }, 0);
        setTimeout(() => {
          sessionStorage.setItem('appObj', '')
        }, 3500);
      }
		},
    getSqlResult(sql) {
      window.GMS.$http.post(`/bcp/query/advance/query`, {
        datasource: sql,
        page: {
          pageNum: 1
        },
        groupBy: [],
        orders: [],
        queryFields: [],
        conditions: []
      }).then((res) => {
        const row = res?.data?.rows?.[0] || {}
        let amount = Number(row.amount || 0)
        amount = Number(amount.toFixed(2)).toLocaleString()
        this.sqlResult = amount
      });
    }
  },
  watch: {
    'item.SQL'(sql) {
      this.getSqlResult(sql)
    }
  },
  created() {
    if (this.item.SQL) {
      this.getSqlResult(this.item.SQL)
    }
  },
}
</script>

<style scoped lang="less">
.mybill-card {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  font-family: PingFangSC-Regular, PingFang SC;
  background-color: white;
  padding: 16px 24px;
  &:not(:last-child) {
    &::before {
      content: '';
      position: absolute;
      background: #E5E5E5;
      width: 1px;
      height: 70%;
      right: 0;
      top: 15%;
    }
  }
  .top-icon {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    margin-bottom: 10px;
  }
  .text {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .title {
      height: 20px;
      margin-right: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #424242;
      line-height: 20px;
    }
    .description {
      height: 17px;
      font-size: 12px;
      font-weight: 400;
      color: #B8B8B8;
      line-height: 17px;
    }
  }
  .amount {
    display: flex;
    align-items: center;
    
    height: 28px;
    font-size: 20px;
    font-weight: 500;
    color: #0F0F0F;
    line-height: 28px;
    .unit {
      height: 20px;
      font-size: 14px;
      line-height: 20px;
    }
  }
}
</style>