<template>
  <div
		class="reimburse-card"
		@click="gotoQuery(item)"
  >
    <img
      v-if="item.icon"
      :src="item.icon"
      class="card-img"
      :style="{background: item.color || 'red', boxShadow: `0px 6px 10px 0px ${item.color || 'FFF'}66`}"
    >
    <div class="card-content">
      <div class="card-title">
        {{item.title}}
      </div>
      <div class="card-info">
        <div class="color-line" :style="{background: item.color || 'red'}"></div>
        <div class="card-number">{{sqlResult || 0}}</div>
        <div class="card-unit">{{item.unit}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      sqlResult: 0,
    }
  },
  watch: {
    'item.function'(fun) {
      this.getSqlResult(fun)
    }
  },
  created() {
    if (this.item.function) {
      this.getSqlResult(this.item.function)
    }
  },
  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);
      }


      // item = item.function
      
		},
    async getSqlResult(fun) {
      if (!fun || !fun.id) return
      let appConfig = await window.GMS.util.nvwa.getAppConfig(fun.id)
      appConfig = appConfig?.data?.configJson || '{}'
      appConfig = JSON.parse(appConfig)
      const sql = 'querysource.' + appConfig.sqlLabel
      const res = await window.GMS.$http.post(`/bcp/query/advance/counts`, [{
        conditions: [],
        datasource: sql,
      }])
      this.sqlResult = res?.data?.[0] || 0
    }
  },
}
</script>

<style scoped lang="less">
.reimburse-card {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: PingFangSC-Regular, PingFang SC;
  background-color: white;
  border-radius: 6px;
  border: 1px solid #E5E5E5;
  &:not(:last-child) {
    margin-right: 12px;
  }
  .card-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-left: 32px;
    margin-right: 16px;
  }
  .card-content {
    .card-title {
      margin-left: 8px;
      margin-bottom: 5px;
      width: fit-content;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #0F0F0F;
      line-height: 20px;
    }
    .card-info {
      display: flex;
      align-items: flex-end;
      position: relative;
      color: #424242;
      padding: 0 8px;
      width: fit-content;
      .color-line {
        left: 0;
        bottom: 0;
        width: 100%;
        position: absolute;
        height: 8px;
        border-radius: 4px;
        opacity: 0.2;
      }
      .card-number {
        height: 33px;
        font-size: 32px;
        font-weight: 500;
        line-height: 33px;
      }
      .card-unit {
        margin-left: 8px;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
      }
    }
  }
}
</style>