<!-- 技术员报表 -->
<template>
  <div class="container">
    <div class="top">
      <div class="left">
        <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>
        <DatePicker
          @on-change="dateClick"
          v-model="dataArea"
          type="daterange"
          placement="bottom-end"
          placeholder="请选择日期"
          style="flex: 1"
        ></DatePicker>
      </div>
      <div class="right">
        <div class="all">
          <Button
            @click="userClick()"
            :type="btnIndex === '' && btnType === '' ? 'primary' : 'default'"
            >全部人员</Button
          >
        </div>
        <div class="type">
          <div class="row">
            <Button style="margin-right: 0">直喷</Button>&nbsp;&nbsp;&nbsp;：
            <Button
              :type="
                btnIndex === index && btnType === '直喷' ? 'primary' : 'default'
              "
              :style="{ color: !item.isHasTake ? 'red' : '' }"
              @click="userClick(item.userId, '直喷', index)"
              v-for="(item, index) in userList.directInkPrinterList"
              :key="index"
              >{{ item.userName }}
            </Button>
          </div>
          <div class="row">
            <Button style="margin-right: 0">打纸</Button>&nbsp;&nbsp;&nbsp;：
            <Button
              :type="
                btnIndex === index && btnType === '打纸' ? 'primary' : 'default'
              "
              :style="{ color: !item.isHasTake ? 'red' : '' }"
              @click="userClick(item.userId, '打纸', index)"
              v-for="(item, index) in userList.paperPrinterList"
              :key="index"
              >{{ item.userName }}
            </Button>
          </div>
          <div class="row">
            <Button style="margin-right: 0">热转</Button>&nbsp;&nbsp;&nbsp;：
            <Button
              :type="
                btnIndex === index && btnType === '热转' ? 'primary' : 'default'
              "
              :style="{ color: !item.isHasTake ? 'red' : '' }"
              @click="userClick(item.userId, '热转', index)"
              v-for="(item, index) in userList.heatPrinterList"
              :key="index"
              >{{ item.userName }}
            </Button>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <Button type="primary" @click="toSiteInventory">现场库存盘点</Button>
    </div>
    <div class="bottom">
      <div class="bar">
        <div class="item">
          <div class="left">领料统计</div>
          <div class="center">
            <p>总数量（m）</p>
            <p class="number">{{ data.takeQty }}</p>
          </div>
          <div class="right">
            <p>总金额（元）</p>
            <p class="number">{{ data.takePrice }}</p>
          </div>
        </div>
        <div class="item">
          <div class="left">质检情况</div>
          <div class="center">
            <p>合格面积（m²）</p>
            <p class="number">{{ data.qualityArea }}</p>
          </div>
          <div class="right">
            <p>成品率</p>
            <p class="number red">{{ data.productRate }}</p>
          </div>
        </div>
        <div class="item">
          <div class="left">报废情况</div>
          <div class="center">
            <p>报废面积（m²）</p>
            <p class="number">{{ data.scrapArea }}</p>
          </div>
          <div class="right">
            <p>报废率</p>
            <p class="number red">{{ data.scrapRate }}</p>
          </div>
        </div>
      </div>
      <div class="tables">
        <div class="table-item">
          <div class="tr">
            <div class="th">排名</div>
            <div class="th">面料名称</div>
            <div class="th">领料数量（m）</div>
            <div class="th">领料金额</div>
          </div>
          <div class="tr" v-for="(item, index) in data.takeList" :key="index">
            <div class="td">{{ index + 1 }}</div>
            <div class="td">{{ item.materialName }}</div>
            <div class="td">{{ item.quantity }}</div>
            <div class="td">{{ item.price }}</div>
          </div>
        </div>
        <div class="table-item">
          <div class="tr">
            <div class="th">排名</div>
            <div class="th">面料名称</div>
            <div class="th">合格数量（m²）</div>
          </div>
          <div
            class="tr"
            v-for="(item, index) in data.qualityList"
            :key="index"
          >
            <div class="td">{{ index + 1 }}</div>
            <div class="td">{{ item.materialName }}</div>
            <div class="td">{{ item.quantity }}</div>
          </div>
        </div>
        <div class="table-item">
          <div class="tr">
            <div class="th">排名</div>
            <div class="th">面料名称</div>
            <div class="th">报废数量（m²）</div>
          </div>
          <div class="tr" v-for="(item, index) in data.scrapList" :key="index">
            <div class="td">{{ index + 1 }}</div>
            <div class="td">{{ item.materialName }}</div>
            <div class="td">{{ item.quantity }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { TechnicianReport, TechnicianReportUser } from '@/api/stock'
import MyTable from '_c/my-table/my-table'
export default {
  name: 'technician_reprot',
  components: {
    MyTable
  },
  data () {
    return {
      dataArea: [],
      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: {},
      tabIndex: 0,
      userId: '',
      btnType: '',
      btnIndex: '',
      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
      },
      beginTime: '',
      endTime: ''
    }
  },
  methods: {
    toSiteInventory () {
      this.$router.push({
        name: 'site_inventory'
      })
    },
    dateClick (date) {
      this.beginTime = date[0]
      this.endTime = date[1]
      this.getList()
    },
    userClick (value = '', type, index) {
      this.userId = value
      this.getList()
      if (value) {
        this.btnType = type
        this.btnIndex = index
      } else {
        this.btnType = ''
        this.btnIndex = ''
      }
    },
    /* 选项卡切换 */
    tabToggle (index) {
      this.tabIndex = index
      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) {
        var now = new Date() // 当前日期
        var nowMonth = now.getMonth() // 当前月
        var nowYear = now.getFullYear() // 当前年
        // 本月的开始时间
        var monthStartDate = new Date(nowYear, nowMonth, 1)
        // 本月的结束时间
        var 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]
      }
      this.getList()
      this.getUserData()
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getUserData () {
      TechnicianReportUser({
        beginTime: this.beginTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          this.userList = res.result
        }
      })
    },
    getList () {
      if (!this.beginTime || !this.endTime) {
        return this.$Message.error('请选择日期！')
      }
      TechnicianReport({
        topUserCount: 5,
        userId: this.userId,
        beginTime: this.beginTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
        }
      })
    }
  },
  mounted () {
    this.tabToggle(0)
    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;
    }
  }
  .center {
    margin: 10px 0;
    text-align: right;
  }
  .bottom {
    padding: 10px;
    flex: 1;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .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 {
      flex: 1;
      overflow: hidden;
      display: flex;
      justify-content: space-between;

      .table-item {
        flex: 1;
        overflow: auto;
        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;
          }
          .th {
            white-space: nowrap;
            overflow: hidden;
            background-color: #d7d7d7;
          }
        }
      }
    }
  }
  .tabs {
    margin-right: 10px;
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    background-color: #ffffff;
    .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;
      }
    }
  }
  .top {
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      flex: 2;
      overflow: hidden;
      margin-right: 100px;
      display: flex;
      justify-content: space-between;
      align-content: center;
    }
    .right {
      flex: 3;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .all {
        margin-right: 20px;
      }
      .type {
        flex: 1;
        overflow: auto;
        .row {
          margin-bottom: 10px;
          white-space: nowrap;
          button {
            margin-right: 10px;
            min-width: 120px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
