<template>
  <div class="tableBox">
    <div class="tableTop">
      <span style="margin-left: 1vw">查询日期：</span>
      <el-date-picker
          v-model="dateTime"
          :clearable="false"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          range-separator="~"
          start-placeholder="开始日期"
          style="width: 190px;"
          type="daterange"
          value-format="YYYY-MM-DD"
      />
      <span style="margin-left: 1vw">通道号：</span>
      <el-select v-model="searchObj.opName" clearable placeholder="通道号" style="width: 8vw;">
        <el-option
            v-for="item in opNameList"
            :key="item.工位名称"
            :label="item.工位描述"
            :value="item.工位名称">
        </el-option>
      </el-select>
      <span style="margin-left: 1vw">项目编号：</span>
      <el-input
          v-model="searchObj.projectCode"
          clearable
          placeholder="项目编号"
          style="width: 180px"
      />
      <span style="margin-left: 1vw">项目名称：</span>
      <el-input
          v-model="searchObj.projectName"
          clearable
          placeholder="项目名称"
          style="width: 180px"
      />
      <span style="margin-left: 1vw">车节：</span>
      <el-input
          v-model="searchObj.carJ"
          clearable
          placeholder="车节"
          style="width: 180px"
      />
      <span style="margin-left: 1vw">车号：</span>
      <el-input
          v-model="searchObj.carH"
          clearable
          placeholder="车号"
          style="width: 180px"
      />
      <el-button :icon="Search" style="margin-left: 1vw" type="success" @click="searchTable">查询</el-button>
    </div>

    <el-table :data="tableData" border height="80vh" stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80"/>
      <el-table-column align="center" label="通道号" width="90">
        <template #default="scope">
          {{ getOpNameDescription(scope.row.台位名称) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="位置1" width="70">
        <template #default="scope">
          <el-tag v-if="scope.row.位置1文本 === '不使用'" type="info">{{ scope.row.位置1文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置1文本 === '缺料'" type="warning">{{ scope.row.位置1文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置1文本 === '需送料'" type="danger">{{ scope.row.位置1文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置1文本 === '已到位'" type="success">{{ scope.row.位置1文本 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="位置2" width="70">
        <template #default="scope">
          <el-tag v-if="scope.row.位置2文本 === '不使用'" type="info">{{ scope.row.位置2文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置2文本 === '缺料'" type="warning">{{ scope.row.位置2文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置2文本 === '需送料'" type="danger">{{ scope.row.位置2文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置2文本 === '已到位'" type="success">{{ scope.row.位置2文本 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="位置3" width="70">
        <template #default="scope">
          <el-tag v-if="scope.row.位置3文本 === '不使用'" type="info">{{ scope.row.位置3文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置3文本 === '缺料'" type="warning">{{ scope.row.位置3文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置3文本 === '需送料'" type="danger">{{ scope.row.位置3文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置3文本 === '已到位'" type="success">{{ scope.row.位置3文本 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="位置4" width="70">
        <template #default="scope">
          <el-tag v-if="scope.row.位置4文本 === '不使用'" type="info">{{ scope.row.位置4文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置4文本 === '缺料'" type="warning">{{ scope.row.位置4文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置4文本 === '需送料'" type="danger">{{ scope.row.位置4文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置4文本 === '已到位'" type="success">{{ scope.row.位置4文本 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="位置5" width="70">
        <template #default="scope">
          <el-tag v-if="scope.row.位置5文本 === '不使用'" type="info">{{ scope.row.位置5文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置5文本 === '缺料'" type="warning">{{ scope.row.位置5文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置5文本 === '需送料'" type="danger">{{ scope.row.位置5文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置5文本 === '已到位'" type="success">{{ scope.row.位置5文本 }}</el-tag>
        </template>
      </el-table-column>
            <el-table-column align="center" label="位置6" width="70">
        <template #default="scope">
          <el-tag v-if="scope.row.位置6文本 === '不使用'" type="info">{{ scope.row.位置6文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置6文本 === '缺料'" type="warning">{{ scope.row.位置6文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置6文本 === '需送料'" type="danger">{{ scope.row.位置6文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置6文本 === '已到位'" type="success">{{ scope.row.位置6文本 }}</el-tag>
        </template>
      </el-table-column>
            <el-table-column align="center" label="位置7" width="70">
        <template #default="scope">
          <el-tag v-if="scope.row.位置7文本 === '不使用'" type="info">{{ scope.row.位置7文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置7文本 === '缺料'" type="warning">{{ scope.row.位置7文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置7文本 === '需送料'" type="danger">{{ scope.row.位置7文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置7文本 === '已到位'" type="success">{{ scope.row.位置7文本 }}</el-tag>
        </template>
      </el-table-column>
            <el-table-column align="center" label="位置8" width="70">
        <template #default="scope">
          <el-tag v-if="scope.row.位置8文本 === '不使用'" type="info">{{ scope.row.位置8文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置8文本 === '缺料'" type="warning">{{ scope.row.位置8文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置8文本 === '需送料'" type="danger">{{ scope.row.位置8文本 }}</el-tag>
          <el-tag v-else-if="scope.row.位置8文本 === '已到位'" type="success">{{ scope.row.位置8文本 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="left" label="项目编号">
        <template #default="scope">
          {{ scope.row.项目编号 }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="项目名称">
        <template #default="scope">
          {{ scope.row.项目名称 }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="车号" width="150">
        <template #default="scope">
          {{ scope.row.车号 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="车节" width="90">
        <template #default="scope">
          {{ scope.row.车节 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="送料状态" width="90">
        <template #default="scope">
          {{ scope.row.送料状态文本 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="开始时间" width="170">
        <template #default="scope">
          {{ scope.row.开始时间 }}
        </template>
      </el-table-column>
      <!-- 删除列，只有角色编号为1的用户才显示 -->
      <el-table-column v-if="user.role == '1'" align="center" label="操作" width="100">
        <template #default="scope">
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 5px;">
      <el-pagination
          v-model:current-page="page.pageList"
          v-model:page-size="page.pageSize"
          :page-sizes="[30, 50, 100, 200]"
          :total="page.total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="padding-left: 1vw"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {inject, onMounted, reactive, ref} from 'vue'
import {Search, Delete} from "@element-plus/icons-vue";
import { useAppStore } from "@/store/app.js";
import { storeToRefs } from 'pinia';
import { ElMessageBox, ElMessage } from 'element-plus'

const CreateData = inject('CreateData')
const ExecDatabase = inject('ExecDatabase')
const store = useAppStore();
const { user } = storeToRefs(store);

const dateTime = ref([new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], new Date().toISOString().split('T')[0]]) // 开始结束时间段

const opNameList = reactive([])
const tableData = reactive([])
const searchObj = reactive({
  opName: '',
  projectCode: '',
  projectName: '',
  carH: '',
  carJ: '',
})
const page = reactive({
  total: 0, // 总条数
  pageSize: 50, // 每页显示条数
  pageList: 1, // 后台获取页
  loading: false, // 是否显示加载
})


onMounted(() => {
  getOpName()
  searchTable()
  console.log(user.value)
});


const searchTable = () => {
  page.loading = true
  tableData.length = 0
  var param = []
  param.push(['开始时间', dateTime.value[0]])
  param.push(['结束时间', dateTime.value[1]])
  param.push(['台位名称', searchObj.opName])
  param.push(['项目编号', searchObj.projectCode])
  param.push(['项目名称', searchObj.projectName])
  param.push(['车号', searchObj.carH])
  param.push(['车节', searchObj.carJ])
  param.push(['PageCurrent', page.pageList])
  param.push(['PageSize', page.pageSize])
  param.push(['PageCount', '1111', 'int', '1'])
  param.push(['ItemCount', '1111', 'int', '1'])
  var Data = CreateData('11', 'CRRC_台位_RGV送料Moby_历史_查询', param)
  ExecDatabase(Data).then(response => {
    if (response.data.length !== 0) {
      tableData.push(...response.data.result)
    }
    page.total = parseInt(response.data.output[0].ItemCount)
    page.loading = false
  })
}

const getOpNameDescription = (opName) => {
  return opNameList.find(item => item.工位名称 === opName)?.工位描述 || opName
}

const getOpName = () => {
  opNameList.length = 0
  // 获取当前操作员名称
  var param = [['OPType',2]]

  var Data = CreateData('11', 'CRRC_台位_Moby_登录台位列表_查询', param)
  ExecDatabase(Data).then(response => {
    if (response.data.length > 0) {
      opNameList.push(...response.data)
    }
  })
}

// 分页
const handleSizeChange = (val) => {
  page.pageList = 1
  page.pageSize = val
  searchTable()
}

const handleCurrentChange = (val) => {
  page.pageList = val
  searchTable()
}

// 删除功能
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除该记录吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      dangerouslyUseHTMLString: true
    }
  ).then(() => {
    // 调用删除存储过程
    var param = []
    param.push(['ID', row.ID])
    var Data = CreateData('12', 'CRRC_台位_RGV送料Moby_历史_删除', param)
    ExecDatabase(Data).then(response => {
      ElMessage.success('删除成功')
      // 重新加载数据
      searchTable()
    }).catch(error => {
      ElMessage.error('删除失败：' + error.message)
    })
  })
}
</script>

<style lang="scss" scoped>
.tableBox {
  width: 98vw;
  margin: 2vh auto 0 auto;
  border: 1px solid #9f9f9f;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;

  .tableTop {
    width: 100%;
    margin: 1vh auto;
  }

  .block {
    margin-bottom: 1vh;
  }
}
</style>
