<template>
  <view class="xd-logs">
    <view
      class="xd-logs__btn"
      v-if="showBtn"
    >
      <xd-button @click="handleClick" type="success" size="small">查看日志</xd-button>
    </view>

    <xd-down-drawer
      :show="!showBtn"
      @close="handleClick"
      height="80vh"
    >
      <view class="xd-logs__content">
        <view class="xd-logs__content-title">查看日志</view>
        <view class="xd-logs__content-tab">
          <view :class="{active: tab===0}" @click="handleTabClick(0)">Logs</view>
          <view :class="{active: tab===1}" @click="handleTabClick(1)">errorLogs</view>
        </view>
        <view class="xd-logs__content-list">
          <xd-json v-show="tab ===0" :list="uiLogs"></xd-json>
          <xd-json v-show="tab ===1" :list="uiErrorLogs"></xd-json>
        </view>
      </view>
    </xd-down-drawer>
  </view>
</template>

<script>
  import XdJson from "@/components/XdJson/XdJson";
  import XdButton from "@/components/XdButton/XdButton";
  import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";
  export default {
    name: "XdLogs",
    components: {
      XdDownDrawer,
      XdButton,
      XdJson,
    },
    props: {
      logs: {
        type: Object,
        default(){
          return {}
        }
      },
      errorLogs: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data(){
      return {
        uiLogs: {},
        uiErrorLogs: {},
        showBtn: true,
        tab: 0,
      }
    },
    watch: {
      errorLogs(value) {
        this.uiErrorLogs = this.$xdUniHelper.cloneDeep(value);
      },
      logs(value) {
        this.uiLogs = this.$xdUniHelper.cloneDeep(value);
      }
    },
    created() {
      this.uiErrorLogs = this.$xdUniHelper.cloneDeep(this.errorLogs);
      this.uiLogs = this.$xdUniHelper.cloneDeep(this.logs);
    },

    methods: {
      handleClick(){
        this.showBtn = !this.showBtn;
      },

      handleTabClick(tab){
        if(tab === this.tab) return;
        this.tab = tab
      }
    }

  }
</script>

<style scoped lang="less">
  .xd-logs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    &__btn {
      position: absolute;
      right: 20px;
      bottom: 0;
      .safe-area();
    }

    &__content {


      &-title {
        height: unit(100, rpx);
        line-height: unit(100, rpx);
        font-size: unit(32, rpx);
        font-weight: 500;
        text-align: center;
      }

      &-tab {
        height: unit(70, rpx);
        background: #f4f4f4;
        padding: unit(10, rpx) unit(20, rpx) 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        & > view {
          padding: 0 unit(40, rpx);
          line-height: unit(70, rpx);

          &.active {
            background: #fff;
            border-radius: unit(20, rpx) unit(20, rpx) 0 0 ;
          }
        }

      }

      &-list {
        height: 70vh;
        padding: unit(40, rpx);
        overflow-y: auto;
        box-sizing: border-box;
      }
    }
  }
</style>
