<!-- 消耗详情 -->
<template>
  <div class="container">
    <div class="tab-nav">
      <div class="date-filter">
        <div
          class="date-tab"
          v-for="(item, index) in dateTabs" :key="index"
          :class="index === dateTabIndex ? 'active' : ''"
          @click="dateTabToggle(index)"
        >
          {{ item.label }}
        </div>
      </div>
      <DatePicker
        @on-change="dateClick"
        v-model="dataArea"
        type="daterange"
        placement="bottom-end"
        placeholder="请选择日期"
        style="width: 200px"
      >
      </DatePicker>
    </div>
    <div class="top">
      <div class="title">
        <Icon type="md-person" size="24"/>
        <span class="text">人员排名</span>
      </div>
      <div class="bar">
        <div class="item">
          <div class="left">{{ titleData.directRank.consumeTotal.technologyType }}</div>
          <div class="center">
            <p>总金额（元）</p>
            <p class="number">{{ titleData.directRank.consumeTotal.totalAmount }}</p>
          </div>
          <div class="right">
            <p>{{ dateTabIndex === 1 ? '本周' : dateTabIndex === 2 ? '本月' : dateTabIndex === 3 ? '今年' : '本日'  }}消耗（元）</p>
            <p class="number red">{{ titleData.directRank.consumeTotal.consumeAmount }}</p>
          </div>
        </div>
        <div class="item">
          <div class="left">{{ titleData.heatRank.consumeTotal.technologyType }}</div>
          <div class="center">
            <p>总金额（元）</p>
            <p class="number">{{ titleData.heatRank.consumeTotal.totalAmount }}</p>
          </div>
          <div class="right">
            <p>{{ dateTabIndex === 1 ? '本周' : dateTabIndex === 2 ? '本月' : dateTabIndex === 3 ? '今年' : '本日'  }}消耗（元）</p>
            <p class="number red">{{ titleData.heatRank.consumeTotal.consumeAmount }}</p>
          </div>
        </div>
        <div class="item">
          <div class="left">{{ titleData.paperRank.consumeTotal.technologyType }}</div>
          <div class="center">
            <p>总金额（元）</p>
            <p class="number">{{ titleData.paperRank.consumeTotal.totalAmount }}</p>
          </div>
          <div class="right">
            <p>{{ dateTabIndex === 1 ? '本周' : dateTabIndex === 2 ? '本月' : dateTabIndex === 3 ? '今年' : '本日'  }}消耗（元）</p>
            <p class="number red">{{ titleData.paperRank.consumeTotal.consumeAmount }}</p>
          </div>
        </div>
      </div>
      <div class="tables">
        <div class="table-item">
          <div class="table-title">人员排名</div>
          <div class="tr">
            <div class="th">排名</div>
            <div class="th">人员</div>
            <div class="th">米数</div>
            <div class="th">金额</div>
          </div>
          <div class="tr" v-for="(item, index) in titleData.directRank.rankPersonItems" :key="index">
            <div class="td">{{ index + 1 }}</div>
            <div class="td">{{ item.userName }}</div>
            <div class="td">{{ item.quantity }}</div>
            <div class="td">{{ item.amount }}</div>
          </div>
        </div>
        <div class="table-item">
          <div class="table-title">人员排名</div>
          <div class="tr">
            <div class="th">排名</div>
            <div class="th">人员</div>
            <div class="th">米数</div>
            <div class="th">金额</div>
          </div>
          <div class="tr" v-for="(item, index) in titleData.heatRank.rankPersonItems" :key="index">
            <div class="td">{{ index + 1 }}</div>
            <div class="td">{{ item.userName }}</div>
            <div class="td">{{ item.quantity }}</div>
            <div class="td">{{ item.amount }}</div>
          </div>
        </div>
        <div class="table-item">
          <div class="table-title">人员排名</div>
          <div class="tr">
            <div class="th">排名</div>
            <div class="th">人员</div>
            <div class="th">米数</div>
            <div class="th">金额</div>
          </div>
          <div class="tr" v-for="(item, index) in titleData.paperRank.rankPersonItems" :key="index">
            <div class="td">{{ index + 1 }}</div>
            <div class="td">{{ item.userName }}</div>
            <div class="td">{{ item.quantity }}</div>
            <div class="td">{{ item.amount }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div>
        <div class="title">
          <Icon type="ios-document" size="24"/>
          <span class="text">消耗详情</span>
        </div>
        <div class="tabs">
          <div
            class="tab"
            v-for="(item, index) in tabs" :key="index"
            :class="index === tabIndex ? 'active' : ''"
            @click="tabToggle(index)"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="user-list">
          <Button @click="userSelect()" :type="btnIndex === '' ? 'primary' : 'default'">全部人员</Button>
          <Button
            :type="btnIndex === index ? 'primary' : 'default'"
            v-for="(item, index) in (tabIndex === 0 ? userList.directUser : tabIndex === 1 ? userList.heatUser : userList.paperUser)"
            :key="index"
            @click="userSelect(item.userId, index)"
          >
            {{ item.userName }}
          </Button>
        </div>
      </div>
      <div class="table" style="height: 100px">
        <my-table
          :data="data"
          :columns="columns"
          :is-show-filter="false"
          :table-page="params"
          @on-change="changePage"
        >
        </my-table>
      </div>
    </div>
  </div>
</template>

<script>
import { GetTodayConsumeRank, GetTodayConsumeUser, GetTodayConsumeDetail } from '@/api/storageHome'
import MyTable from '_c/my-table/my-table'
export default {
  name: 'use_detail',
  components: {
    MyTable
  },
  data () {
    return {
      titleData: {
        'directRank': {
          'consumeTotal': {
            'technologyType': '',
            'totalAmount': 0,
            'consumeAmount': 0
          },
          'rankPersonItems': []
        },
        'heatRank': {
          'consumeTotal': {
            'technologyType': '',
            'totalAmount': 0,
            'consumeAmount': 0
          },
          'rankPersonItems': []
        },
        'paperRank': {
          'consumeTotal': {
            'technologyType': '',
            'totalAmount': 0,
            'consumeAmount': 0
          },
          'rankPersonItems': []
        }
      },
      userList: {},
      dateTabIndex: 0,
      tabIndex: 0,
      btnIndex: '',
      userId: '',
      dateTabs: [
        { label: '本日' },
        { label: '本周' },
        { label: '本月' },
        { label: '今年' }
      ],
      tabs: [
        { label: '直喷' },
        { label: '打纸' },
        { label: '热转' }
      ],
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '人员',
          key: 'userName',
          tooltip: true,
          minWidth: 100
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '门幅',
          key: 'width',
          minWidth: 150
        },
        {
          title: '用途',
          key: 'purpose',
          minWidth: 150
        },
        {
          title: '消耗米数',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '消耗金额',
          key: 'amount',
          minWidth: 150
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      dataArea: [],
      beginTime: '',
      endTime: ''
    }
  },
  methods: {
    /* 选项卡切换 */
    dateTabToggle (index) {
      this.dateTabIndex = index
      this.btnIndex = ''
      this.userId = ''
      if (index === 0) {
        let time = new Date().getTime()
        this.beginTime = this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        this.endTime = this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        console.log(this.beginTime)
        console.log(this.endTime)
        this.dataArea = [this.beginTime, this.endTime]
      } else if (index === 1) {
        let Nowdate = new Date()
        let WeekFirstDay = Nowdate.getDay() ? new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000) : new Date(Nowdate - (Nowdate.getDay() + 6) * 86400000)
        let WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000)
        this.beginTime = this.$dayjs(WeekFirstDay).format('YYYY-MM-DD HH:mm:ss')
        this.endTime = this.$dayjs(WeekLastDay).format('YYYY-MM-DD HH:mm:ss')
        console.log(this.beginTime)
        console.log(this.endTime)
        this.dataArea = [this.beginTime, this.endTime]
      } else if (index === 2) {
        let now = new Date() // 当前日期
        let nowMonth = now.getMonth() // 当前月
        let nowYear = now.getFullYear() // 当前年
        // 本月的开始时间
        let monthStartDate = new Date(nowYear, nowMonth, 1)
        // 本月的结束时间
        let monthEndDate = new Date(nowYear, nowMonth + 1, 0)
        this.beginTime = this.$dayjs(monthStartDate).format('YYYY-MM-DD HH:mm:ss')
        this.endTime = this.$dayjs(monthEndDate).format('YYYY-MM-DD HH:mm:ss')
        console.log(this.beginTime)
        console.log(this.endTime)
        this.dataArea = [this.beginTime, this.endTime]
      } else if (index === 3) {
        let now = new Date() // 当前日期
        let nowYear = now.getFullYear() // 当前年
        // 本年的开始时间
        let monthStartDate = new Date(nowYear, 0, 1)
        // 本年的结束时间
        let monthEndDate = new Date(nowYear, 11, 31)
        this.beginTime = this.$dayjs(monthStartDate).format('YYYY-MM-DD HH:mm:ss')
        this.endTime = this.$dayjs(monthEndDate).format('YYYY-MM-DD HH:mm:ss')
        this.dataArea = [this.beginTime, this.endTime]
      }
      this.getTitleData()
      this.getUserData()
      this.getList()
    },
    dateClick (date) {
      this.beginTime = date[0]
      this.endTime = date[1]
      // this.getList()
    },
    userSelect (userId = '', index = '') {
      this.userId = userId
      this.getList()
      this.btnIndex = index
    },
    /* 选项卡切换 */
    tabToggle (index) {
      this.tabIndex = index
      this.btnIndex = ''
      this.userId = ''
      this.getList()
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getTitleData () {
      GetTodayConsumeRank({
        beginTime: this.beginTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          this.titleData = res.result
        }
      })
    },
    getUserData () {
      GetTodayConsumeUser({
        beginTime: this.beginTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          this.userList = res.result
        }
      })
    },
    getList () {
      GetTodayConsumeDetail({
        ...this.params,
        technologyType: this.tabIndex,
        userId: this.userId,
        beginTime: this.beginTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
    this.dateTabToggle(0)
    this.getList()
    this.getTitleData()
    this.getUserData()
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    .text {
      margin-left: 10px;
    }
  }
  .bar {
    display: flex;
    justify-content: space-between;
    .item {
      flex: 1;
      overflow: hidden;
      margin-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      border-radius: 5px 5px 0 0;
      background-color: #FFFFFF;
      border: 1px solid #e6e6e6;
      &:last-child {
        margin-right: 0;
      }
      .left, .center, .right {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        border-right: 1px solid #e6e6e6;
        .number {
          margin-top: 5px;
          font-size: 16px;
          font-weight: bold;
          color: #3F92F9;
          &.red {
            color: #DB0020;
          }
        }
      }
      .left {
        flex: 3;
        font-size: 16px;
        font-weight: bold;
      }
      .center {
        flex: 5;
      }
      .right {
        flex: 4;
        border-right: none;
      }
      &.more {
        flex: none;
        margin-right: 0;
        padding: 0 20px;
        justify-content: center;
        width: 140px;
        background-color: #333333;
        color: #FFFFFF;
        cursor: pointer;
      }
    }
  }
  .tables {
    display: flex;
    justify-content: space-between;

    .table-item {
      flex: 1;
      overflow: hidden;
      margin-right: 20px;
      border-radius: 0 0 5px 5px;
      background-color: #FFFFFF;
      border: 1px solid #e6e6e6;
      border-top: none;
      &:last-child {
        margin-right: 0;
      }
      .table-title {
        padding: 5px 3px;
        font-size: 14px;
        font-weight: bold;
        background-color: #d7d7d7;
      }
      .tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        &:last-child {
          border-bottom: none;
        }
        .th, .td {
          flex: 1;
          overflow: hidden;
          padding: 5px 3px;
          text-align: center;
        }
      }
    }
  }
  .bottom {
    flex: 1;
    overflow: hidden;
    margin-top: 18px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tabs {
      display: flex;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 5px 5px 0 0;
      background-color: #FFFFFF;
      .tab {
        flex: 1;
        overflow: auto;
        padding: 8px 3px;
        text-align: center;
        border: 1px solid #e6e6e6;
        border-right: none;
        font-weight: bold;
        cursor: pointer;
        &:last-child {
          border-right: 1px solid #e6e6e6;
        }
        &.active {
          background-color: #3F92F9;
          color: #FFFFFF;
        }
      }
    }
    .user-list {
      overflow: auto;
      padding: 10px;
      display: flex;
      align-items: center;
      background-color: #FFFFFF;
      border: 1px solid #e6e6e6;
      border-bottom: none;
      border-top: none;
      button {
        min-width: 100px;
        margin-right: 10px;
      }
    }
    .table {
      padding-bottom: 10px;
      flex: 1;
      overflow: hidden;
      background-color: #FFFFFF;
      border: 1px solid #e6e6e6;
      /deep/ .ivu-table-wrapper {
        border: none;
      }
    }
  }
  .tab-nav {
    display: flex;
    justify-content: flex-end;
    margin-right: 0;
    .date-filter {
      width: 400px;
      margin-right: 10px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 5px;
      background-color: #FFFFFF;

      .date-tab {
        flex: 1;
        padding: 5px 2px;
        text-align: center;
        border: 1px solid #e6e6e6;
        border-right: none;
        font-weight: bold;
        cursor: pointer;

        &:last-child {
          border-right: 1px solid #e6e6e6;
        }

        &.active {
          background-color: #3F92F9;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
