<template>
  <el-row>
    <el-col :span="6">
      <el-card style="height: calc(100vh - 147px);">
        <el-form label-position="right" size="large" label-width="100px" :model="formData" style="max-width: 460px;">
          <el-form-item label="开始时间">
            <el-date-picker v-model="searchData.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"/>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker v-model="searchData.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"/>
          </el-form-item>
          <el-form-item label="出入库">
            <el-select v-model="searchData.type" placeholder="请选择出入库" style="width: 100%;">
              <el-option value="IN" label="入库"></el-option>
              <el-option value="OUT" label="出库"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品名">
            <el-input v-model="searchData.goodsName" placeholder="请输入品名"/>
          </el-form-item>
          <el-form-item label="号型">
            <el-input v-model="searchData.modelName" placeholder="请输入号型"/>
          </el-form-item>
          <el-button round type="primary" style="width: 100%" @click="loadData">查询</el-button>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="18">
      <el-card style="height: calc(100vh - 147px);">
        <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '600'}" :data="logList" border size="large" style="width: 100%;height: 78vh;">
          <el-table-column type="index" label="序号" width="70" align="center"/>
          <el-table-column prop="inState" label="出入库" align="center">
            <template #default="scope"> 
               {{ scope.row.type == 'IN' ? '入库' : '出库' }}
            </template>
          </el-table-column>
          <el-table-column prop="billName" 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="createTime" label="出入库日期" align="center"/>
        </el-table>
        <el-pagination
          style="left: 40%;margin-top: 6px;"
          background
          @current-change="handleCurrentChange"
          :current-page="searchData.pageNo"
          :page-size="searchData.pageSize"
          layout="total, prev, pager, next"
          :total="total"
        />
      </el-card>
    </el-col>
  </el-row>
</template>


<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { postAction } from '@/api/manage'
export default defineComponent({
    setup() {
      const logList = ref([])
      const formData = ref({})
      const { proxy } = getCurrentInstance()
      const searchData = ref({
        pageNo: 1,
        pageSize: 10,
        type: 'IN',
        startTime: parseTime(new Date(new Date().setHours(0, 0, 0, 0))),
        endTime: parseTime(new Date())
      })
      const total = ref(0)

      function parseTime(time) {
        if (time) {
            var date = new Date(time)
            var year = date.getFullYear()
            /* 在日期格式中，月份是从0开始的，因此要加0
            * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            * */
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
            var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
            var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            // 拼接
            return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
        } else {
            return ''
        }
      }

      const state = reactive({
        url: {
          getGoodsRecord: '/log/getLogPage'
        }
      });

      function handleCurrentChange (val) {
        searchData.value.pageNo = val
        loadData()
      }

      
      const loadData = () => {
        if (sessionStorage.getItem('storeInfo')) {
          let config = JSON.parse(sessionStorage.getItem('storeInfo'))
          searchData.value.storeCode = config.storeCode
          postAction(state.url.getGoodsRecord, searchData.value).then(res => {
            if (res.code !== 99200) return ElMessage.error(res.message);
            logList.value = res.data.records
            total.value = res.data.totalRows - 0
          })
        }
      }

    //   loadData()
      return {
        ...toRefs(state),
        logList,
        formData,
        searchData,
        total, 
        loadData,
        handleCurrentChange
      }
    },
})
</script>