<template>
  <el-main class="main-container mainlayout-flex">
    <!--左边 -->
    <div class="page-left">
      <!--最近打开 -->
      <div class="page-left-1">
        <p class="page-title">最近打开</p>
        <div class="tag_main">
          <el-tag :key="item.name" @click="handleOpenPage(item)" v-for="item in openlist">{{ item.title }}</el-tag>
        </div>
      </div>
      <!--核心数据 -->
      <div class="page-left-2">
        <p class="page-title">核心数据</p>
        <!-- 时间 -->
        <span class="time">更新时间：{{ statistics ? statistics.createDate : '' }}</span>
        <div class="page-main">
          <el-tabs @tab-click="handleClick" v-model="activeName">
            <el-tab-pane class="lab1 isactive" label="按金额" name="first">
              <div class="hxsj-mian">
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-blue">{{ statistics ? statistics.inventoryTurnoverDaysAmt : '' }}</span>天
                  </p>
                  <p class="sm">库存周转天数</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-popor">{{ statistics ? statistics.orderDeliveryRateAmt : '' }}</span>%
                  </p>
                  <p class="sm">订单准交率</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-skyblue">{{ statistics ? statistics.orderDeliveryDateDaysAmt : '' }}</span>天
                  </p>
                  <p class="sm">订单平均交期</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-skyblue1">{{ statistics ? statistics.inventory30AvgAmount : '' }}</span>pcs
                  </p>
                  <p class="sm">库存金额</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-pink">{{ statistics ? statistics.inventoryOut30AvgAmt : '' }}</span>pcs
                  </p>
                  <p class="sm">出库金额</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-yellow">{{ statistics ? statistics.grossProfitRate : '' }}</span>%
                  </p>
                  <p class="sm">毛利率</p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="按数量" name="second">
              <div class="hxsj-mian">
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-blue">{{ statistics ? statistics.inventoryTurnoverDaysQty : '' }}</span>天
                  </p>
                  <p class="sm">库存周转天数</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-popor">{{ statistics ? statistics.orderDeliveryRateQty : '' }}</span>%
                  </p>
                  <p class="sm">订单准交率</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-skyblue">{{ statistics ? statistics.orderDeliveryDateDaysQty : '' }}</span>天
                  </p>
                  <p class="sm">订单平均交期</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-skyblue1">{{ statistics ? statistics.inventory30AvgQty : '' }}</span>pcs
                  </p>
                  <p class="sm">库存数量</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-pink">{{ statistics ? statistics.inventoryOut30AvgQty : '' }}</span>pcs
                  </p>
                  <p class="sm">出库数量</p>
                </div>
                <div class="item">
                  <p class="numpoint">
                    <span class="num text-yellow">{{ statistics ? statistics.grossProfitRate : '' }}</span>%
                  </p>
                  <p class="sm">毛利率</p>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!--右边---待办任务 -->
    <div class="page-right">
      <p class="page-title">最近下载</p>
      <div class="dbrw-main page-main">
        <el-table :data="tableData" :max-height="heightNum" style="width: 100%">
          <el-table-column align="left" label="任务类型" prop="type">
            <template #default="scope">
              <span>{{ getPageObjValue(typelist, scope.row.type + '') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作日期" prop="date" />
          <el-table-column align="left" label="状态" prop="status">
            <template #default="scope">
              <span style="color:#3AD6AC" v-if="scope.row.status === '导出成功'">
                {{ scope.row.status }}
                <i class="iconfont icon-chenggong"></i>
              </span>
              <span style="color:#FF5363" v-if="scope.row.status === '导出失败'">
                {{ scope.row.status }}
                <i class="iconfont icon-shijing"></i>
              </span>
              <span style="color:#FDC027" v-if="scope.row.status === '正在导出'">{{ scope.row.status + '...' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="附件" prop="filePath">
            <template #default="scope">
              <a :href="scope.row.filePath" class="text-blue"
                v-if="scope.row.statusKey == 1 && (Math.abs((new Date(scope.row.date).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000)) <= 7)">下载</a>
              <a style="color:#ccc;cursor: no-drop;" v-else>下载文件</a>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作人" prop="userName" />
        </el-table>
      </div>
      <!--缺省页-->
      <div class="page-quesheng">
        <img src="../../assets/ico-quesheng.png" />
        <span class="f-12 text-grey">暂无任务</span>
      </div>
    </div>
  </el-main>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { getObjValue } from '@/utils/pubulic.js'
import { number, time } from 'echarts'
export default {
  data () {
    return {
      typelist: {},
      statuslsit: {},
      search: {
        orgId: '', // 组织id
        pageNo: 1, // 页码
        pageSize: 50, // 页数
        type: '', // 单据类型(任务类型)
        status: '', // 状态
        beginDate: '', // 下单时间 开始
        endDate: '', // 下单时间 结束
        user: '' // 操作人
      },
      windowHeight: 0,
      heightNum: 0,
      tableData: [],
      activeName: 'first',
      statistics: {}, // 核心数据
      openlist: [], // 最近打开
      value: '',
      _beforeUnload_time: '',
      _gap_time: ''
    }
  },
  computed: {
    ...mapState({
      orgId: state => (state && state.user ? state.user.orgId : null),
      unitDataList: state => state.storeData.allUnit
    }),
    getPageObjValue: function () {
      // 根据key值显示对应的键名
      return function (arr, key) {
        return getObjValue(arr, key)
      }
    }
  },
  watch: {
    orgId (value) {
      if (value) {
        this.search.orgId = value
        this.getFileDownManagerQuery()
      }
    }
  },
  created () {
    this.windowHeight = document.documentElement.clientHeight
    this.heightNum = this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16)
    this.getselectList()
    this.getOpendList()
    this.getFileDownManagerQuery()
    this.statisticsToal()
    // console.log('test jenkins')
    // 获取全局单位
    if (this.unitDataList.length == 0) {
      this.$http.get('SysConfig/GetUnitAllProperty').then(r => {
        if (r.status === 200) {
          this.setAllUnit(r.data)
        }
      })
    }
  },
  methods: {
    ...mapActions({
      setAllUnit: 'storeData/setAllUnit'
    }),
    //获取任务下拉和状态下拉数据
    getselectList () {
      this.$http.get('FileDownManager/GetStatus').then(res => {
        if (res.status === 200) {
          this.typelist = res.data.type
          this.statuslsit = res.data.status
        }
        // console.log('获取任务下拉和状态下拉数据', res)
      })
    },
    // 获取导出下载列表数据
    getFileDownManagerQuery () {
      this.$http.post('FileDownManager/FileDownManagerQuery', this.search).then(res => {
        if (res.status === 200) {
          this.tableData = res.data.list
        }
      })
    },
    // 核心数据统计
    statisticsToal () {
      // this.$http.get('Home/statistics').then(res => {
      //   if (res.status === 200) {
      //     this.statistics = res.data
      //     for (const key in this.statistics) {
      //       if (key !== 'createDate') {
      //         this.statistics[key] = Number(this.statistics[key]).toFixed(2) * 1
      //       }
      //     }
      //     console.log('核心数据统计', this.statistics)
      //   }
      // })
    },
    // 获取最近打开的数据
    getOpendList () {
      this.$http.post('Home/GetOpendList').then(res => {
        if (res.status === 200) {
          this.openlist = res.data
        }
      })
    },
    // // 点击测试提示语
    // TSYceshi(value) {
    //   this.$http.get('Public/get/httptip/' + value).then(res => {
    //     console.log(res)
    //   })
    // },
    // 点击最近打开
    handleOpenPage (item) {
      this.$router.push({
        path: item.path
      })
      //记录最近打开菜单
      this.$http.post('Home/open', { menuId: item.menuId })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/index.scss';

.isactive {
  ::v-deep(.page-main .lab1) {
    color: #4178d5 !important;
  }
}
</style>
