<!-- 消耗详情 -->
<template>
  <div class="container">
    <div class="top">
      <div class="item">
        <div class="label" style="font-size: 16px;font-weight: bold">盘点情况</div>
        <p class="value">
          <DatePicker
            v-model="month"
            @on-change="topDateChange"
            type="month" placeholder="Select month" :clearable="false" style="width: 90px">
          </DatePicker>
        </p>
      </div>
      <div class="item">
        <div class="label">系统盘点次数</div>
        <p class="value">{{ topData.autoCheckCount }}</p>
      </div>
      <div class="item">
        <div class="label">人工盘点次数</div>
        <p class="value">{{ topData.userCheckCount }}</p>
      </div>
      <div class="item">
        <div class="label">
          盘点人数
          <Icon @click="handleForm(1)" type="ios-arrow-dropright" size="18" style="margin-left: 5px;"/>
        </div>
        <p class="value">{{ topData.checkUserCount }}</p>
      </div>
      <div class="item">
        <div class="label">
          异常标签
          <Icon @click="handleForm(3)" type="ios-arrow-dropright" size="18" style="margin-left: 5px;"/>
        </div>
        <p class="value red">{{ topData.errorTag }}</p>
      </div>
      <div class="item">
        <div class="label">
          异常物料
          <Icon @click="handleForm(2)" type="ios-arrow-dropright" size="18" style="margin-left: 5px;"/>
        </div>
        <p class="value red">{{ topData.errorMaterial }}</p>
      </div>
      <div class="item">
        <div class="label">
          盘盈亏金额
          <Icon @click="handleForm(4)" type="ios-arrow-dropright" size="18" style="margin-left: 5px;"/>
        </div>
        <p class="value red">{{ topData.amount || 0 }}元</p>
      </div>
    </div>
    <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>
      <span style="padding: 0 10px">共有
        <span style="color: red">{{ data.totalCount }}</span>
        条盘点记录
      </span>
    </div>
    <div class="border"></div>
    <div class="tab-nav sub-nav">
      <div class="date-filter" style="width: auto">
        <div
          class="other-tab"
          v-for="(item, index) in oneTabs" :key="index"
          :class="index === oneIndex ? 'active' : ''"
          @click="oneTabToggle(index, item.id)"
        >
          {{ `${item.label}
            (${
              index ===1 ?
              data.firstFloorCount || 0 : index === 2 ?
              data.fourFloorCount || 0 :
              (data.firstFloorCount + data.fourFloorCount) || 0
            })`
          }}
        </div>
      </div>
      <div class="date-filter" style="width: auto">
        <div
          class="other-tab"
          v-for="(item, index) in twoTabs" :key="index"
          :class="index === twoIndex ? 'active' : ''"
          @click="twoTabToggle(index)"
        >
          {{ `${item.label}
            (${
              index ===1 ?
              data.autoCheckCount || 0 : index === 2 ?
              data.peopleCheckCount || 0 :
              (data.autoCheckCount + data.peopleCheckCount) || 0
            })`
          }}
        </div>
      </div>
      <div class="date-filter" style="width: auto">
        <div
          class="other-tab"
          v-for="(item, index) in threeTbas" :key="index"
          :class="index === threeIndex ? 'active' : ''"
          @click="threeTabToggle(index)"
        >
          <span>
            <span>{{ item.label }}</span>
            <span :style="{ color: index === 2 ? 'red' : '' }">{{ `
              (${
                index ===1 ?
                data.normalCount || 0 : index === 2 ?
                data.errorCount || 0 :
                (data.normalCount + data.errorCount) || 0
              })`
            }}
            </span>
          </span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="table">
        <my-table
          :data="data.checkRecordsList && data.checkRecordsList.list"
          :columns="columns"
          :is-show-filter="false"
          :table-page="params"
          @on-change="changePage"
        >
        </my-table>
      </div>
    </div>
    <user-form v-model="userFormShow" :month="month" :checkUserTip="topData.checkUserTip"></user-form>
    <error-material-form v-model="errorMaterialShow" :month="month"></error-material-form>
    <error-tag-form v-model="errorTagShow" :month="month"></error-tag-form>
    <profit-form v-model="profitShow" :month="month"></profit-form>
  </div>
</template>

<script>
import axios from 'axios'
import { GetCheckRecordPageList, GetCheckRecordMonthStat, DelUserCheck } from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import UserForm from './user-form'
import ErrorMaterialForm from './error-material-form'
import ErrorTagForm from './error-tag-form'
import ProfitForm from './profit-form'
import { GetStockHouse } from '@/api/baseData'
export default {
  name: 'use_detail',
  components: {
    MyTable,
    UserForm,
    ErrorMaterialForm,
    ErrorTagForm,
    ProfitForm
  },
  data () {
    return {
      formData: {},
      profitShow: false,
      errorTagShow: false,
      errorMaterialShow: false,
      userFormShow: false,
      userList: {},
      dateTabIndex: 1,
      oneIndex: 0,
      twoIndex: 0,
      threeIndex: 0,
      oneTabs: [],
      twoTabs: [
        { label: '全部' },
        { label: '自动盘点' },
        { label: '人工盘点' }
      ],
      threeTbas: [
        { label: '全部' },
        { label: '结果正常' },
        { label: '结果异常' }
      ],
      dateTabs: [
        { label: '本日' },
        { label: '本周' },
        { label: '本月' },
        { label: '今年' }
      ],
      tabs: [
        { label: '直喷' },
        { label: '打纸' },
        { label: '热转' }
      ],
      data: [],
      topData: {},
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '发起时间',
          key: 'createTime',
          tooltip: true,
          minWidth: 100
        },
        {
          title: '执行时间',
          key: 'taskRunTime',
          tooltip: true,
          minWidth: 100
        },
        {
          title: '盘点类型',
          key: 'type',
          minWidth: 150
        },
        {
          title: '仓库名称',
          key: 'stockHouseName',
          minWidth: 150
        },
        {
          title: '盘点进度',
          key: 'process',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.process !== '已发起' ? 'red' : ''
              }
            }, params.row.process)
          }
        },
        {
          title: '盘点结果',
          key: 'result',
          minWidth: 150,
          render: (h, params) => {
            return h('span', {
              style: {
                color: params.row.result !== '正常' ? 'red' : ''
              }
            }, params.row.result)
          }
        },
        {
          title: '盘点时间',
          key: 'checkTime',
          minWidth: 150
        },
        {
          title: '盘点人',
          key: 'operUser',
          minWidth: 150
        },
        {
          title: '盘点详情',
          key: 'purchaseBillNo',
          fixed: 'right',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            let _this = this
            if (params.row.type === '人工盘点' && params.row.isEdit) {
              return h('div', [
                h('a', {
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click () {
                      _this.$router.push({
                        name: 'inventory_update',
                        query: {
                          id: params.row.id
                        }
                      })
                    }
                  }
                }, '修改'),
                h('a', {
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click () {
                      _this.$router.push({
                        name: 'inventory_record_new',
                        query: {
                          type: params.row.type === '自动盘点' ? 3 : 4,
                          recordId: params.row.id
                        }
                      })
                    }
                  }
                }, '查看'),
                h('a', {
                  on: {
                    click () {
                      _this.$MyModal.show({ text: '是否删除该人工盘点记录？' }).$on('confirm', () => {
                        DelUserCheck({
                          id: params.row.id
                        }).then(res => {
                          if (res.code === 0) {
                            _this.$Message.info(res.msg || '操作成功！')
                            _this.getList()
                          }
                        })
                      })
                    }
                  }
                }, '删除')
              ])
            } else {
              return h('div', [
                h('a', {
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click () {
                      _this.$router.push({
                        name: 'inventory_record_new',
                        query: {
                          type: params.row.type === '自动盘点' ? 3 : 4,
                          recordId: params.row.id
                        }
                      })
                    }
                  }
                }, '查看')
              ])
            }
          }
        }
      ],
      month: this.$dayjs(new Date().getTime()).format('YYYY-MM-DD'),
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      dataArea: [],
      beginTime: '',
      endTime: ''
    }
  },
  methods: {
    handleForm (type) {
      switch (type) {
        // 盘点认数
        case 1:
          this.userFormShow = true
          break
        case 2:
          // 异常物料
          this.errorMaterialShow = true
          break
        case 3:
          // 异常标签
          this.errorTagShow = true
          break
        case 4:
          // 盘盈亏
          this.profitShow = true
          break
      }
    },
    /* 选项卡切换 */
    dateTabToggle (index) {
      this.params.pageIndex = 1
      this.dateTabIndex = index
      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.getList()
    },
    dateClick (date) {
      this.beginTime = date[0]
      this.endTime = date[1]
      this.getList()
    },
    oneTabToggle (index, id = '') {
      this.oneIndex = index
      this.params.pageIndex = 1
      this.params.stockHouseId = id
      this.getList()
    },
    twoTabToggle (index) {
      this.twoIndex = index
      this.params.pageIndex = 1
      this.params.type = index === 0 ? '' : index === 1 ? 3 : index === 2 ? 4 : ''
      this.getList()
    },
    threeTabToggle (index) {
      this.threeIndex = index
      this.params.pageIndex = 1
      this.params.checkResult = index === 0 ? '' : index === 1 ? 1 : index === 2 ? 0 : ''
      this.getList()
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    topDateChange (date) {
      console.log(date)
      this.month = this.$dayjs(date).format('YYYY-MM-DD')
      this.getCheckRecordMonthStat()
    },
    getCheckRecordMonthStat () {
      GetCheckRecordMonthStat({
        month: this.$dayjs(this.month).format('YYYY-MM-DD')
      }).then(res => {
        if (res.code === 0) {
          this.topData = res.result
        }
      })
    },
    getStockHouse () {
      GetStockHouse().then(res => {
        if (res.code === 0) {
          this.oneTabs = res.result.map(item => {
            return {
              label: item.name,
              id: item.id
            }
          })
          this.oneTabs.unshift({
            label: '全部',
            id: ''
          })
        }
      })
    },
    getList () {
      GetCheckRecordPageList({
        ...this.params,
        timeStart: this.beginTime,
        timeEnd: this.endTime
      }).then(res => {
        if (res.code === 0) {
          
          axios.post('http://120.79.80.64:8055/javaApi/inventoryRecord',{
              "beginTime": this.beginTime,
              "endTime": this.endTime
          }).then(res1=>{
            console.log(res1)
            this.data = res.result
            this.params.total = res.result.checkRecordsList.totalCount
            if(this.data.checkRecordsList.list){
              for (let i = 0; i < res.result.checkRecordsList.list.length; i++) {
                const element = res.result.checkRecordsList.list[i];
                for (let j = 0; j < res1.data.result.length; j++) {
                  const jelement = res1.data.result[j];
                  if(jelement.id == element.id){
                    if(jelement.abnormal == 0){
                      element.result = '正常'
                    }else{
                      element.result = '异常'
                    }
                  }
                }
              }
            }
          })
        }
      })
    }
  },
  mounted () {
    this.dateTabToggle(1)
    this.getCheckRecordMonthStat()
    this.getStockHouse()
  }
}
</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;
      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;
      }
    }
  }
  .top {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      height: 100%;
      padding: 10px 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid #e6e6e6;
      border-right: none;
      background-color: #FFFFFF;
      &:first-child {
        border-radius: 5px 0 0 5px;
      }
      &:last-child {
        border-radius: 0 5px 5px 0;
        border-right: 1px solid #e6e6e6;
      }
      .label {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .value {
        font-size: 16px;
        font-weight: bold;
        &.red {
          color: red;
        }
      }
    }
  }
  .tab-nav {
    display: flex;
    align-items: center;
    margin-right: 0;
    .date-filter {
      width: 400px;
      margin-right: 10px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #FFFFFF;

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

        &:first-child {
          border-radius: 2px 0 0 2px ;
        }
        &:last-child {
          border-radius: 0 2px 2px 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;
        }
      }
    }
  }
}
.border {
  margin: 5px 0;
  width: 100%;
  height: 1px;
  background-color: #333333;
}
/deep/ .ivu-input:focus {
  box-shadow: none;
}
/deep/ .ivu-input {
  border: none;
}
</style>
