<!-- 每日面料使用率报表 -->
<template>
  <div class="container">
    <div class="tab-nav">
      <div class="date-filter-wrap">
        <span style="font-size: 14px;font-weight: bold;color: black">每日面料使用率报表</span>
          <Radio-group v-model="navType" @on-change="navTypeChange" style="margin-left:10px">
            <Radio label="1">按人员汇总</Radio>
            <Radio label="2">按工艺归类</Radio>
        </Radio-group>
      </div>
      
      <div class="date-filter-wrap">
        <date-select v-model="params" @change="selectTime"></date-select>
      </div>
    </div>
    <div class="border"></div>
    <div class="tab-nav" v-if="navType === '1'">
      <Row>
        <i-col span="6" style="display: flex">
          <div style="min-width: 40px; line-height: 32px; text-align: center">直喷:</div>
          <div class="row">
            <Button
              :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
              @click="userClick(item)"
              v-for="(item, index) in typeList['A007']"
              :key="index"
            >
              <span>{{ item.realName }}（</span>
              <span style="color: red">{{ item.useRate }}%</span>
              <span>）</span>
            </Button>
          </div>
        </i-col>
        <i-col span="6" style="display: flex">
          <div style="min-width: 40px; line-height: 32px; text-align: center">打纸:</div>
          <div class="row">
            <Button
              :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
              @click="userClick(item)"
              v-for="(item, index) in typeList['A012']"
              :key="index"
            >
              <span>{{ item.realName }}（</span>
              <span style="color: red">{{ item.useRate }}%</span>
              <span>）</span>
            </Button>
          </div>
        </i-col>
        <i-col span="6" style="display: flex">
          <div style="min-width: 40px; line-height: 32px; text-align: center">热转:</div>
          <div class="row">
            <Button
              :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
              @click="userClick(item)"
              v-for="(item, index) in typeList['A008']"
              :key="index"
            >
              <span>{{ item.realName }}（</span>
              <span style="color: red">{{ item.useRate }}%</span>
              <span>）</span>
            </Button>
          </div>
        </i-col>
        <i-col span="6" style="display: flex">
          <div style="min-width: 40px; line-height: 32px; text-align: center">电割:</div>
          <div class="row">
            <Button
              :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
              @click="userClick(item)"
              v-for="(item, index) in typeList['A017']"
              :key="index"
            >
              <span>{{ item.realName }}（</span>
              <span style="color: red">{{ item.useRate }}%</span>
              <span>）</span>
            </Button>
          </div>
        </i-col>
      </Row>
    </div>
    <div class="tab-nav" v-else>
      <Row>
        <i-col span="6" style="display: flex">
          <div style="line-height: 32px; text-align: center;margin-right:5px">
            <Button 
              :type="params.tech == '直喷' ? 'primary' : 'default'" 
              @click="techClick('直喷')">
                直喷 <span style="color:red">({{ typeList2.zhipeng }}%</span>)
            </Button>
          </div>
          <div class="row">
            <Button
              :type="params.userId === item.userId && params.tech == '直喷' ? 'primary' : 'default'"
              @click="userClick2(item,'直喷')"
              v-for="(item, index) in typeList2['直喷']"
              :key="index"
            >
              <span>{{ item.realName }}（</span>
              <span style="color: red">{{ item.useRate }}%</span>
              <span>）</span>
            </Button>
          </div>
        </i-col>
        <i-col span="6" style="display: flex">
          <div style="line-height: 32px; text-align: center;margin-right:5px">
            <Button 
              :type="params.tech == '打纸' ? 'primary' : 'default'" 
              @click="techClick('打纸')">
                打纸 (<span style="color:red">{{ typeList2.dazhi }}%</span>)
            </Button>
          </div>
          <div class="row">
            <Button
              :type="params.userId === item.userId  && params.tech == '打纸' ? 'primary' : 'default'"
              @click="userClick2(item,'打纸')"
              v-for="(item, index) in typeList2['打纸']"
              :key="index"
            >
              <span>{{ item.realName }}（</span>
              <span style="color: red">{{ item.useRate }}%</span>
              <span>）</span>
            </Button>
          </div>
        </i-col>
        <i-col span="6" style="display: flex">
          <div style="line-height: 32px; text-align: center;margin-right:5px">
            <Button 
              :type="params.tech == '热转' ? 'primary' : 'default'" 
              @click="techClick('热转')">
                热转 (<span style="color:red">{{ typeList2.rezhuang }}%</span>)
            </Button>
          </div>
          <div class="row">
            <Button
              :type="params.userId === item.userId  && params.tech == '热转' ? 'primary' : 'default'"
              @click="userClick2(item,'热转')"
              v-for="(item, index) in typeList2['热转']"
              :key="index"
            >
              <span>{{ item.realName }}（</span>
              <span style="color: red">{{ item.useRate }}%</span>
              <span>）</span>
            </Button>
          </div>
        </i-col>
        <i-col span="6" style="display: flex">
          <div style="line-height: 32px; text-align: center;margin-right:5px">
            <Button 
              :type="params.tech == '空白旗' ? 'primary' : 'default'" 
              @click="techClick('空白旗')">
                空白旗 (<span style="color:red">{{ typeList2.kongbai }}%</span>)
            </Button>
          </div>
          <div class="row">
            <Button
              :type="params.userId === item.userId ? 'primary' : 'default'"
              @click="userClick2(item,'空白旗')"
              v-for="(item, index) in typeList2['空白旗']"
              :key="index"
            >
              <span>{{ item.realName }}（</span>
              <span style="color: red">{{ item.useRate }}%</span>
              <span>）</span>
            </Button>
          </div>
        </i-col>
      </Row>
    </div>
    <div class="border"></div>
    <div class="table-filter">
      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 13%">
        <div class="label" style="border-right: 2px solid #dcdcdc">
          <span>排班</span>
        </div>
        <ul>
          <li>
            面积
            <span>{{ statisticsDetails.scheduleArea }}</span>
          </li>
        </ul>
      </div>
      <div class="fabric" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 28%">
        <div class="label" style="border-right: 2px solid #dcdcdc">
          <span class="cp" @click="getPicking(null)">领料</span>
        </div>
        <ul>
          <!-- <li>
            金额
            <span>{{ statisticsDetails.pickingMoney }}</span>
          </li> -->
          <li>
            卷数
            <span>{{ statisticsDetails.pickingNum }}</span>
          </li>
          <li>
            米数
            <span>{{ statisticsDetails.pickingMeters }}</span>
          </li>
          <li>
            面积
            <span>{{ statisticsDetails.pickingArea }}</span>
          </li>
        </ul>
      </div>
      <div class="fabric" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 24%">
        <div class="label" style="border-right: 2px solid #dcdcdc">
          <span  class="cp" @click="getReturnMaterialModal(null)">退料</span>
        </div>
        <ul>
          <!-- <li>
            金额
            <span>{{ statisticsDetails.backMoney }}</span>
          </li> -->
          <li>
            卷数
            <span>{{ statisticsDetails.backNum }}</span>
          </li>
          <li>
            米数
            <span>{{ statisticsDetails.backMeters }}</span>
          </li>
          <li>
            面积
            <span>{{ statisticsDetails.backArea }}</span>
          </li>
        </ul>
      </div>
      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 10%">
        <div class="labelOne" style="border-right: 2px solid #dcdcdc">
          <span style="line-height:60px"  class="cp"  @click="getCorrect(null)">修正</span>
        </div>
        <ul>
          <li>
            面积
            <span>{{statisticsDetails.headTailCorrectArea}}</span>
            <!-- <span>{{ (statisticsDetails.transferInArea * 1000 - statisticsDetails.transferOutArea * 1000) / 1000 }}</span> -->
          </li>
        </ul>
      </div>

      
      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 10%">
        <div class="labelOne" style="border-right: 2px solid #dcdcdc">
          <span>实际</span><br />
          <span>使用</span>
        </div>
        <ul>
          <li>
            面积
            <span>{{ statisticsDetails.actualUse }}</span>
          </li>
        </ul>
      </div>
      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 10%">
        <div class="labelOne" style="border-right: 2px solid #dcdcdc">
          <span>面料</span><br />
          <span>使用率</span>
        </div>
        <ul>
          <li>
            使用率
            <span>{{ statisticsDetails.useRate }}%</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="main">
      <my-table ref="table" :data="data" :columns="columns" :table-page="params" @on-change="changePage"></my-table>
    </div>
    <Modal
      v-model="pickingModal"
      title="领料详情"
      width="800"
      >
      <Table :loading="loading" :columns="pickingColumns" :data="pickingData"></Table>
    </Modal>
    <Modal
      v-model="correctModal"
      title="面料修正"
      width="900"
      >
      <Table :loading="loading" :columns="correctColumns" :data="correctData"></Table>
    </Modal>
    <Modal
      v-model="returnMaterialModal"
      title="退料详情"
      width="900"
      >
      <Table :loading="loading" :columns="returnMaterialColumns" :data="returnMaterialData"></Table>
    </Modal>
  </div>
</template>

<script>
import MyTable from '_c/my-table/my-table'
import axios from 'axios'
import dateSelect from '@/components/dateSelect/dateSelect'

export default {
  name: 'daily_report',
  components: { MyTable, dateSelect },
  data() {
    return {
      navType:'1',
      loading:false,
      returnMaterialColumns:[
      {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '退料时间',
          key: 'createTime'
        },

        {
          title: '退料人员',
          key: 'realName'
        },
        {
          title: '物料编码',
          key: 'materialCode' 
        },
        {
          title: '面料名称',
          key: 'materialName'
        },
        {
          title: '标签值',
          key: 'rfidCode',
        },
        {
          title: '米数',
          key: 'changeNum',
        },
        {
          title: '面积',
          key: 'area'
        },
      ],
      returnMaterialModal:false,
      returnMaterialData:[],
      pickingModal:false,
      correctColumns:[
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料编码',
          key: 'materialCode'
        },

        {
          title: '面料名称',
          key: 'materialName'
        },
        {
          title: '喷印人员',
          key: 'realName' 
        },
        {
          title: '修正面积',
          key: 'area'
        },
        {
          title: '修正原因',
          key: 'rfidCode',
          render: (h, params) => {
            return h('div', [h('span', '布头布尾')])
          }
        },
        {
          title: '喷印日期',
          key: 'createTime',
          render: (h, params) => {
            return h('div', [h('span', params.row.createTime.substring(0,11))])
          }
        },
        {
          title: '修正时间',
          key: 'createTime'
        },
      ],
      correctModal:false,
      correctData:[],
      pickingColumns:[
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '领料时间',
          key: 'createTime'
        },
        {
          title: '领料人员',
          key: 'realName' 
        },
        {
          title: '物料编码',
          key: 'materialCode'
        },
        {
          title: '面料名称',
          key: 'materialName'
        },
        {
          title: '标签值',
          key: 'rfidCode'
        },
        {
          title: '米数',
          key: 'changeNum'
        },
        {
          title: '面积',
          key: 'area'
        },
      ],
      pickingData:[],
      technologyType: '',
      typeList: {},
      typeList2:{},
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '人员',
          key: 'userName',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '排班面积',
          key: 'scheduleArea',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '面料名称',
          key: 'materialName',
          minWidth: 300,
          align: 'center'
        },
        {
          title: '领料面积',
          key: 'pickingArea',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            const v = this
            return h('div', [h('span',{style: {
              borderBottom: '1px solid #ddd',
              cursor:'pointer'
            },on: {
              click () {
                console.log(v.params)
                v.params.materialName = params.row.materialName
                v.getPicking(params.row.userId)
              }
            }}, params.row.pickingArea)])
          }
        },
        {
          title: '退仓面积',
          key: 'backArea',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            const v = this
            return h('div', [h('span',{style: {
              borderBottom: '1px solid #ddd',
              cursor:'pointer'
            },on: {
              click () {
                console.log(v.params)
                v.params.materialName = params.row.materialName
                v.getReturnMaterialModal(params.row.userId)
              }
            }}, params.row.backArea)])
          }
        },
        {
          title: '修正面积',
          key: 'headTailCorrectArea',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            const v = this
            return h('div', [h('span',{style: {
              borderBottom: '1px solid #ddd',
              cursor:'pointer'
            },on: {
              click () {
                console.log(v.params)
                v.params.materialName = params.row.materialName
                v.getCorrect(params.row.userId)
              }
            }}, params.row.headTailCorrectArea)])
          }
        },
        // {
        //   title: '转出面积',
        //   key: 'transferOutArea',
        //   minWidth: 100,
        //   align: 'center'
        // },
        {
          title: '实际使用面积',
          key: 'actualUse',
          minWidth: 100,
          align: 'center',
          className: 'add-color',
          render: (h, params) => {
            if (params.row.actualUse !== void 0) {
              return h('div', {}, parseFloat(Number(params.row.actualUse)).toFixed(2))
            } else {
              return h('div', [h('span', '----')])
            }
          }
        },
        {
          title: '面料使用率',
          key: 'useRate',
          minWidth: 150,
          align: 'center',
          className: 'add-color',
          render: (h, params) => {
            if (params.row.useRate !== void 0) {
              return h(
                'div',
                {
                  style: {
                    color: 'red'
                  }
                },
                params.row.useRate + '%'
              )
            } else {
              return h('div', [h('span', '----')])
            }
          }
        }
      ],
      btnIndex: '',
      params: {
        pageIndex:1,
        pageNum: 1,
        pageSize: 10,
        type: '3',
        beginTime: null,
        endTime: null,
        total: 0,
        technologyType: '',
        jobNo: '',
        userId: '',
        tech:null,
      },
      statisticsDetails: {
        scheduleArea: '',
        pickingMoney: '',
        pickingNum: '', 
        pickingMeters: '',
        pickingArea: '',
        backMoney: '',
        backNum: '',
        backMeters: '',
        backArea: '',
        useRate: '',
        actualUse: ''
      }
    }
  },
  mounted() {
    this.getAllList()
  },
  methods: {
    //顶部radio切换
    navTypeChange(){
      this.params = {
        pageIndex:1,
        pageNum: 1,
        pageSize: 10,
        type: '3',
        beginTime: this.params.beginTime,
        endTime: this.params.endTime,
        total: 0,
        technologyType: '',
        jobNo: '',
        userId: '',
        tech:null,
      }
      this.getList()
    },
    //点击工艺
    techClick(techName){
      this.params.userId = null
      this.params.materialName = null
      this.params.jobNo = null
      if(techName == this.params.tech){
        this.params.tech = null
      }else{
        this.params.tech = techName
      }
      this.getList()
    },
    
    getReturnMaterialModal(_userId){
      axios
        .post('/cloudApi/stockBack/returnMaterial', {
          beginTime: this.params.beginTime,
          endTime: this.params.endTime,
          userId:_userId || this.params.userId,
          tech: this.params.tech,
          materialName:this.params.materialName,
        })
        .then(res => {
          this.returnMaterialData = res.data.data
          this.returnMaterialModal = true
        })
    },
    getCorrect(_userId){
      axios
        .post('/cloudApi/stockBack/correct', {
          beginTime: this.params.beginTime,
          endTime: this.params.endTime,
          userId:_userId || this.params.userId,
          tech: this.params.tech,
          materialName:this.params.materialName,
        })
        .then(res => {
          this.correctData = res.data.data
          this.correctModal = true
        })
    },
    getPicking(_userId){
      axios
        .post('/cloudApi/stockBack/picking', {
          beginTime: this.params.beginTime,
          endTime: this.params.endTime,
          userId:_userId || this.params.userId,
          tech: this.params.tech,
          materialName:this.params.materialName,
        })
        .then(res => {
          this.pickingData = res.data.data
          this.pickingModal = true
        })
    },
    selectTime() {
      this.getAllList()
    },
    getAllList() {
      axios
        .post('/cloudApi/stockBack/userStatistics', {
          beginTime: this.params.beginTime,
          endTime: this.params.endTime
        })
        .then(res => {
          this.typeList = res.data.data
          this.getList()
        })
      axios
        .post('/cloudApi/stockBack/techStatistics', {
          beginTime: this.params.beginTime,
          endTime: this.params.endTime
        })
        .then(res => {
          res.data.data.zhipeng = res.data.data['直喷use']
          res.data.data.dazhi = res.data.data['打纸use']
          res.data.data.rezhuang = res.data.data['热转use']
          res.data.data.kongbai = res.data.data['空白旗use']
          this.typeList2 = res.data.data
          console.log(this.typeList2)
        })
    },
    userClick2(item,techName){
      const v = this
      this.params.pageIndex = 1
      this.params.pageNum = 1
      if(item.userId == v.params.userId && techName == v.params.tech){
        v.params.userId = null
        v.params.tech = null
        v.params.jobNo = null
      }else{
        v.params.userId = item.userId
        v.params.tech = techName
        v.params.jobNo = item.jobNo
      }
      v.getList()
    },
    userClick(item) {
      this.params.pageIndex = 1
      this.params.pageNum = 1
      console.log(this.params)
      if (this.btnIndex === item.userId + '_' + item.technologyType) {
        this.params.userId = ''
        this.params.jobNo = ''
        this.params.technologyType = ''
        this.btnIndex = item.userId + '_' + ''
      } else {
        this.params.userId = item.userId
        this.params.jobNo = item.jobNo
        this.params.technologyType = item.technologyType
        this.btnIndex = item.userId + '_' + item.technologyType
      }
      this.getList()
    },
    changePage(pageNum) {
      this.params.pageNum = pageNum
      this.getList()
    },
    getList() {
      axios
        .post('/cloudApi/stockBack/statisticsDetails', {
          beginTime: this.params.beginTime,
          endTime: this.params.endTime,
          technologyType: this.params.technologyType,
          jobNo: this.params.jobNo,
          userId: this.params.userId,
          tech:this.params.tech,
        })
        .then(res => {
          this.statisticsDetails = res.data.data
        })
      axios
        .post('/cloudApi/stockBack/statisticsPage', {
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
          beginTime: this.params.beginTime,
          endTime: this.params.endTime,
          technologyType: this.params.technologyType,
          jobNo: this.params.jobNo,
          userId: this.params.userId,
          tech:this.params.tech,
        })
        .then(res => {
          this.data = res.data.data.records
          this.params.total = res.data.data.total
        })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .tab-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .date-filter-wrap {
      display: flex;
      align-items: center;
      .date-filter {
        width: 300px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ffffff;
        border-radius: 4px;
        &.other {
          width: 100%;
          height: 100%;
          .date-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 9px;
            height: 100%;
            white-space: nowrap;
            cursor: auto;
            &.active {
              background-color: #333333;
              font-size: 14px;
              font-weight: bold;
            }
            .num {
              padding-top: 5px;
              font-weight: bold;
              font-size: 14px;
              &.red {
                color: red;
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }
        }
        .date-tab {
          flex: 1;
          padding: 9px 4px;
          line-height: 1;
          text-align: center;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          border-right: none;
          cursor: pointer;
          font-weight: 500;
          &:first-child {
            border-radius: 4px 0 0 4px;
          }
          &:last-child {
            border-radius: 0 4px 4px 0;
            border-right: 1px solid #e6e6e6;
          }
          &.active {
            background-color: #3f92f9;
            color: #ffffff;
          }
        }
      }
    }
    &.sub-nav {
      .other-tab {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 5px 10px;
        text-align: center;
        border: 1px solid #e6e6e6;
        border-right: none;
        font-weight: bold;
        cursor: pointer;
        white-space: nowrap;
        &:first-child {
          border-radius: 2px 0 0 2px;
        }
        &:last-child {
          border-radius: 0 2px 2px 0;
          border-right: 1px solid #e6e6e6;
        }
        &.active {
          background-color: #ffffff !important;
          color: blue !important;
          border: 1px solid blue;
        }
      }
    }
    .all {
      margin-right: 20px;
    }
    .row {
      // white-space: nowrap;
      button {
        margin-right: 10px;
        min-width: 120px;
        margin-bottom: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .border {
    margin: 10px 0;
    width: 100%;
    height: 1px;
    background-color: #d7d7d7;
  }
  .table-filter {
    display: flex;
    justify-content: space-between;
  }
  .table-filter > div {
    background: #ffffff;
    border: 1px solid #dddcdc;
    font-size: 14px;
    height: 60px;
    line-height: 60px;
    color: #3f3f3f;
    ul {
      display: flex;
      li {
        list-style: none;
        font-size: 12px;
        color: #838383;
        line-height: 24px;
        padding: 6px 0;
        span {
          color: #3f3f3f;
          font-weight: bold;
          font-size: 18px;
          display: block;
        }
      }
    }
  }
  .fabric {
    display: flex;
    .label {
      width: 14%;
      text-align: center;
    }
    ul {
      width: 86%;
      li {
        width: 33.3%;
        text-align: center;
        line-height: 24px; 
        span {
          font-size: 16px !important;
        }
      }
    }
  }
  .fabricOne {
    display: flex;
    .label {
      width: 40%;
      text-align: center;
    }
    .labelOne {
      width: 40%;
      line-height: 30px;
      text-align: center;
    }
    ul {
      width: 60%;
      li {
        width: 100%;
        text-align: center;
        line-height: 24px;
        span {
          font-size: 16px !important;
        }
      }
    }
  }
  .ink {
    display: flex;
    .label {
      width: 25%;
      text-align: center;
    }
    ul {
      width: 75%;
      li {
        width: 50%;
        text-align: center;
      }
    }
  }
  .main {
    flex: 1;
    overflow: hidden;
  }
}
::v-deep {
  .ivu-row {
    width: 100% !important;
  }
  .add-color {
    color: red;
  }
}
.cp{
  cursor: pointer;
  border-bottom: 1px solid #000;
}
</style>
