<template>
  <el-card style="height: calc(100vh - 147px)">
    <template #header>
      <div class="card-header">
        <span>查询</span>
      </div>
    </template>
    <el-row>
      <el-col :span="6">
        <el-card style="height: calc(100vh - 147px);">
          <el-radio-group v-model="logType" label="日志类型" @change="changeType">
            <el-radio-button label="normal">出入日志</el-radio-button>
            <el-radio-button label="error">异常日志</el-radio-button>
          </el-radio-group>
          <el-form label-position="left" size="large" label-width="80px" :model="formData" style="max-width: 460px;margin-top: 20px;">
            <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);" v-if="logType == 'normal'">
          <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '550'}" :data="logList" border size="large" style="width: 100%;height: 75.8vh;">
            <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-card style="height: calc(100vh - 147px);" v-if="logType == 'error'">
          <el-table :header-cell-style="{backgroundColor: '#f5f7fa',color: '#000',fontSize: '18px',fontWeight: '550'}" :data="logList" border size="large" style="width: 100%;height: 75.8vh;">
            <el-table-column type="index" label="序号" width="70" align="center"/>
            <el-table-column prop="type" label="出入库" align="center" width="100">
              <template #default="scope"> 
                {{ scope.row.type == 'IN' ? '入库' : '出库' }}
              </template>
            </el-table-column>
            <el-table-column prop="stationId" label="通道号" align="center" width="100"/>
            <el-table-column prop="content" label="异常说明" align="center"/>
            <el-table-column prop="createTime" label="最后更新时间" align="center" width="200"/>
            <el-table-column prop="handleFlag" label="状态" align="center" width="100">
              <template #default="scope">
                <el-tag v-if="scope.row.handleFlag == '2'" type="danger">未处理</el-tag>
                <el-tag v-if="scope.row.handleFlag == '1'">已处理</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-button type="primary" size="small" v-if="scope.row.handleFlag == '2'" @click="updateError(scope.row)">处理</el-button>
              </template>
            </el-table-column>
          </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>
  </el-card>
</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 logType = ref('normal')
      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',
          getErrorPage: '/error/getErrorPage',
          updateError: '/error/updateError'
        }
      });

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

      
      const loadData = () => {
        searchData.value.startTime = parseTime(new Date(new Date().setHours(0, 0, 0, 0)))
        searchData.value.endTime = parseTime(new Date())

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

      const changeType = (value) => {
        if (value) {
          searchData.value.pageNo = 1
          loadData()
        }
      }

      const updateError = (row) => {
        postAction(state.url.updateError, {errorId: row.errorId, handleFlag: 1}).then(res => {
          if (res.code !== 99200) return ElMessage.error(res.message);
          loadData()
        })
      }

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

<style scoped>
.card-header {
  height: 26px;
  font-size: 20px;
  font-weight: 'bold';
  font-family: 'Times New Roman', Times, serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>