<template>
  <div class="bi-download-center">
    <el-badge
      slot="reference"
      class="download-center-badge"
      :is-dot="badgeDot"
    >
      <el-tooltip
        class="item"
        effect="dark"
        content="导出中心"
        placement="bottom"
      >
        <el-button
          class="download-center-button"
          type="text"
          @click="drawerVisible = true"
        >
          <img
            v-if="loading"
            :src="downloadingImg"
            alt="任务导出中心"
            title="任务导出中心"
          >
          <svg
            v-else
            class="iconpark-icon"
            alt="任务导出中心"
            title="任务导出中心"
          >
            <use href="#el-icon-export" />
          </svg>
        </el-button>
      </el-tooltip>
    </el-badge>
    <el-drawer
      custom-class="bi-download-center-drawer"
      title="下载导出"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="1000px"
      destroy-on-close
      append-to-body
      :style="{'--headHegiht':headerHeight}"
      @open="handleDrawerOpen"
      @close="handleDrawerClose"
    >
      <template slot="title">
        <el-tabs v-model="tabsName">
          <el-tab-pane
            name="DownloadCenter"
            label="导出中心"
          >

          </el-tab-pane>
          <el-tab-pane
            v-if="taskCenter"
            name="TaskCenter"
            label="任务中心"
          >
          </el-tab-pane>
        </el-tabs>
      </template>

      <Box
        v-show="tabsName==='DownloadCenter'"
        :header-height="headerHeight"
        :handle-table-list="getExportList"
        @setRead="handleSetRead"
      />

      <TaskCenterBox
        v-if="tabsName==='TaskCenter'"
        :user-id="userId"
      />

    </el-drawer>
  </div>
</template>

<script>
import request from '../../utils/request/index.js'
import Box from './Box'
import TaskCenterBox from '../../TaskCenter/Box.vue'
export default {
  name: 'BiDownloadCenter',
  components: { Box, TaskCenterBox },
  props: {
    headerHeight: {
      type: String,
      default: '50'
    },
    loading: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      default: ''
    },
    system: {
      type: String,
      default: ''
    },
    taskCenter: {
      type: Boolean,
      default: false
    },
    downloadCenter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      downloadImg: 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/DownloadCenter/download.svg',
      downloadingImg: 'https://wanxiaomeng-1255977238.file.myqcloud.com/bi-element-ui/DownloadCenter/downloadingnew.gif',
      drawerVisible: false,
      badgeDot: false,
      tabsName: ''
    }
  },
  methods: {
    getExportList(params) {
      return request({
        env: this.$BI.env,
        system: 'export',
        api: '/task/index',
        data: Object.assign({ origin_system: this.system }, params)
      })
    },
    async handleSetRead(task_id) {},
    handleDrawerClose() {},
    handleDrawerOpen() {
      this.badgeDot = false
      this.$nextTick(() => {
        if (this.tabsName === 'TaskCenter') return
        if (this.downloadCenter) {
          this.tabsName = 'DownloadCenter'
        } else {
          this.tabsName = 'TaskCenter'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bi-download-center {
  display: flex;
  align-items: center;
  ::v-deep > span {
    display: flex;
    align-items: center;
  }
}
.download-center-button {
  padding: 5px;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  display: block;
  overflow: hidden;
  border-radius: 4px;

  .iconpark-icon,
  .iconpark-icon:hover {
    font-size: 20px;
    color: #8893aa;
  }
  img {
    width: 20px;
    height: 20px;
  }
  &:hover {
    background-color: #f2f3f5;
  }
  ::v-deep {
    span {
      display: block;
      height: 100%;
      width: 100%;
    }
  }
}
.download-center-badge {
  display: flex;
  padding: 0;
}
</style>
<style lang="scss">
.bi-download-center-drawer {
  max-width: 80%;
  .el-drawer__header {
    padding-bottom: 2px;
    border-bottom: none;
    padding-left: 0;
    padding-top: 0;
    .el-tabs__nav {
      .el-tabs__item {
        outline: none;
        padding: 6px 16px 7px 16px;
        height: inherit;
      }
      padding-bottom: 2px;
    }
    .el-tabs__content {
      padding: 0;
    }
  }
  // .el-drawer__body {
  //   height: calc(100vh - calc(var(--headHegiht) * 1px));

  //   .download-center {
  //     height: calc(100vh - calc(var(--headHegiht) * 1px));
  //   }
  // }
}
</style>

