<template>
  <el-card style="height: calc(100vh - 147px)">
    <template #header>
      <div style="display: flex;">
        <el-select v-model="positionCode" placeholder="请选择垛位" filterable size="large" class="titleSelect">
          <el-option :label="'垛位号: ' + item.positionName" :value="item.positionCode" v-for="item in positionList" :key="item.positionCode"></el-option>
        </el-select>
        <el-select v-model="temporaryName" placeholder="请选择单据" filterable size="large" class="titleSelect" clearable @focus="getTemporaryName">
          <el-option :label="'单据号: ' + item" :value="item" v-for="item in temporaryList" :key="item"></el-option>
        </el-select>
        <el-radio-group v-model="type" size="large" @change="changeType" style="margin-left: auto;margin-right: 15px;">
          <el-radio-button label="CANCEL">未激活</el-radio-button>
          <el-radio-button label="IN">入库激活</el-radio-button>
          <el-radio-button label="OUT">出库激活</el-radio-button>
        </el-radio-group>
        <el-button round size="large" type="primary" @click="reportData">上报单据</el-button>
        <el-button round size="large" type="warning" @click="clearData">清空数据</el-button>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}"
          :row-class-name="tableRowClassName" :data="logData" size="large" border style="width: 100%;height: 68vh;" max-height="660">
          <el-table-column type="index" label="序号" width="70" align="center"/>
          <el-table-column prop="type" label="作业类型" align="center">
            <template #default="scope">
              {{ scope.row.type == 'IN' ? '入库' : '出库' }}
            </template>
          </el-table-column>
          <el-table-column prop="goodsCode" label="品名代码" align="center"/>
          <el-table-column prop="goodsName" label="品名" align="center"/>
          <el-table-column prop="modelName" label="号型" align="center"/>
          <el-table-column prop="amount" label="箱内数量" align="center"/>
          <el-table-column prop="xhNo" label="箱号" align="center"/>
        </el-table>
        <el-pagination
          style="left: 40%;margin-top: 6px;"
          background
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        />
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div style="text-align: center;">
              <span class="card-title">总箱数</span>
            </div>
          </template>
          <div class="text">{{ total }}箱</div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, onBeforeUnmount } from 'vue'
import { ElMessage, ElCard } from 'element-plus'
import { postAction, getAction } from '@/api/manage'
import { Help, Monitor } from '@element-plus/icons-vue'
export default defineComponent({
    components: { Monitor, Help },
    setup(props, {emit}) {
      
      const logData = ref([])
      const positionCode = ref('')
      const positionList = ref([])
      const temporaryName = ref('')
      const temporaryList = ref([])
      const type = ref('')
      const pageNo = ref(1)
      const pageSize = ref(10)
      const total = ref(0)
    
  
      const state = reactive({
        url: {
          getTemporaryName: '/temporary/getTemporaryName',
          getSwitch: '/temporary/getSwitch',
          getPositionList: '/temporary/getPositionList',
          updateSwitch: '/temporary/updateSwitch',
          clearGoods: '/temporary/clearGoods',
          getPage: '/temporary/getPage',
          report: '/temporary/report',
        },
        storeInfo: {},
        storeCode: '',
        lockReconnect: false
      });


      const tableRowClassName = ( { row, rowIndex }) => {
        if (row.isShow) {
          return 'warning-row'
        }
        return ''
      }


      onBeforeUnmount(() => {
        console.log('A 组件，切换到 B 组件，A 组件消失时执行')
      })

      const getTableData= () => {
        console.log('刷新无单据数据')
        pageNo.value = 1
        getLogPage()
      }
      

      function handleCurrentChange (val) {
        pageNo.value = val
        getLogPage()
      }

      const loadData = () => {
        if (sessionStorage.getItem('storeInfo')) {
          initPositionList()  // 获取垛位
          getSwitch() // 获取无单据激活状态
          getTemporaryName() // 获取单据号
          getLogPage()
        } else {
          ElMessage.error('未获取到库房代码')
        }
      }

      const initPositionList =  () => {
        let storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
        postAction(state.url.getPositionList, { storeCode }).then(res => {
          positionList.value = res.data
          if (res.data.length > 0) {
            positionCode.value = res.data[0].positionCode
          }
        })
      }

      const getTemporaryName = () => {
        let storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
        postAction(state.url.getTemporaryName, { storeCode }).then(res => {
          temporaryList.value = res.data
        })

      }

      const getSwitch = () => {
        let storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
        postAction(state.url.getSwitch, { storeCode }).then(res => {
          type.value = res.data.temporaryType
        })
      }

      const getLogPage = () => {
        let storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
        postAction(state.url.getPage, { storeCode, pageNo: pageNo.value, pageSize: pageSize.value }).then(res => {
          logData.value = res.data.records
          total.value = res.data.totalRows - 0
        })
      } 

      const changeType = (value) => {
        let storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
        postAction(state.url.updateSwitch, { storeCode, temporaryType: value }).then(res => {
          if (res.code !== 99200) { // 失败就报错, 并且状态回到原来的值
            ElMessage.error(res.message);
            getSwitch()
          } else {
            ElMessage.success(res.message);
          }
        }) 
      }

      function clearData() {
        let storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
        if (type.value == 'CANCEL') {
          return ElMessage.error('未激活状态下无法清空');
        }
        postAction(state.url.clearGoods, {
          positionCode: positionCode.value,
          storeCode,
          temporaryName: temporaryName.value,
          type: type.value
        }).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          getLogPage()
        })
      }

      function reportData() {
        let storeCode = JSON.parse(sessionStorage.getItem('storeInfo')).storeCode
        if (type.value == 'CANCEL') {
          return ElMessage.error('未激活状态下无法上报');
        }
        postAction(state.url.report, {
          positionCode: positionCode.value,
          storeCode,
          temporaryName: temporaryName.value,
          type: type.value
        }).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          getLogPage()
        })

      }

      
      return {
        ...toRefs(state),
        positionCode,
        positionList,
        tableRowClassName,
        loadData,
        initPositionList,
        getTemporaryName,
        getSwitch,
        clearData,
        type,
        changeType,
        temporaryName,
        temporaryList,
        reportData,
        logData,
        getTableData,
        getLogPage,
        pageNo,
        pageSize,
        total,
        handleCurrentChange
      }
    },
})
</script>

<style lang="less">
.titleSelect .el-input__inner {
  color: #fff;
  font-size: 20px;
  font-weight: 'bold';
  font-family: 'Times New Roman', Times, serif;
}

.el-input__wrapper {
  background-color: var(--color-primary) !important;
  margin-right: 15px;
}


.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-5);
}


// 其他样式代码不变
.el-tabs--border-card >.el-tabs__content {
  padding: 0px !important;
  background-color: var(--color-primary);
}
.text {
  text-align: center;
  font-size: 40px;
}
.head-container {
  padding-bottom: 10px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-left: 6px;
  }
}

.title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
  padding-bottom: 17px;
  padding-top: 17px;
}




p {
  margin: 0;
  padding: 0;
}
.row {
  overflow: hidden;
  margin-bottom: 22px;
}
.row .col_left {
  float: left;
  width: 420px;
}
.row .col_right {
  float: left;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  height: 26px;
  font-size: 20px;
  font-weight: 'bold';
  font-family: 'Times New Roman', Times, serif;
}

</style>

<style scoped>
</style>
