<!-- 出入库业务记录 -->
<template>
  <div>
    <a-space class="header">
      <div class="input-box">
        <div class="silt-title">
          <span style="width: 70px; display: block">{{ '作业单号' }}</span>
          <a-input style="width: 260px" v-model:value="informationData.bizNo" placeholder="请输入" />
        </div>
        <div class="silt-title">
          <span style="width: 60px; display: block">{{ '车牌号' }}</span>
          <a-input style="width: 260px" v-model:value="informationData.cph" placeholder="请输入" />
        </div>
        <div class="silt-title">
          <span style="width: 70px; display: block">{{ '作业时间' }}</span>
          <a-range-picker class="select-box" v-model:value="informationData.date" valueFormat="YYYY-MM-DD" />
        </div>
      </div>
      <div class="btnBox">
        <a-button style="margin-right: 16px" type="primary" @click="searchData">查询</a-button>
        <a-button style="margin-right: 16px" @click="reset">重置</a-button>
      </div>
    </a-space>
    <a-table :dataSource="dataSource" :row-key="(record) => record.key" :pagination="informationData"
      @change="onChangePage" :columns="columns">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span>
            <a-button class="check" @click="check(record)">查看</a-button>
          </span>
        </template>
      </template>
    </a-table>
  </div>
  <!-- 查看--编辑--新增等操作 -->
  <Supervise :dataObj="dataObj" @isVisible="isVisible" />
</template>
<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import Supervise from './supervise.vue'
const columns = [
  {
    title: '序号',
    dataIndex: 'Index',
    align: 'center',
    width: '80px',
    customRender: ({ text, record, index }) => {
      return `${index + 1}`
    }
  },
  {
    title: '作业单号',
    dataIndex: 'BizNo',
    align: 'center',
    key: 'BizNo'
  },
  {
    title: '车牌号',
    dataIndex: 'cph',
    align: 'center',
    key: 'cph',
  },
  {
    title: '品种',
    dataIndex: 'lspzmc',
    align: 'center',
    key: 'lspzmc'
  },
  {
    title: '性质',
    dataIndex: 'lsxzmc',
    align: 'center',
    key: 'lsxzmc',
  },
  {
    title: '毛重',
    dataIndex: 'mz',
    align: 'center',
    key: 'mz',
  },
  {
    title: '皮重',
    dataIndex: 'pz',
    align: 'center',
    key: 'pz'
  },
  {
    title: '作业时间',
    dataIndex: 'zykssj',
    align: 'center',
    key: 'zykssj',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    key: 'action',
    width: '120px'
  }
]
const dataSource = ref([])
const informationData = ref({
  bizNo: null,
  cph: null,
  date: [],
  current: 1,
  size: 10,
})
const dataObj = ref({
  visible: false,
  titleText: '',
  isType: '',
  id: ''
})
// 表格分页
const onChangePage = (ev) => {
  informationData.value = { ...ev }
  if (isShowName.value == '1') {
    informationData.value.bizNo = null
    informationData.value.cph = null
    informationData.value.date = []
  }
  onSearch()
}
// 列表分页
const onSearch = () => {
  if (informationData.value.date == null) {
    informationData.value.date = []
  }
  const [s, e] = informationData.value.date
  const fd = {
    current: informationData.value.current,
    size: informationData.value.size,
    bizNo: informationData.value.bizNo,
    cph: informationData.value.cph,
    startCrksj: s,
    endCrksj: e,
  }
  reserveDataApi.businessRecordPage(fd).then((res) => {
    dataSource.value = []
    informationData.value.total = res.total
    dataSource.value = res.records
  })
}
const isShowName = ref('1')
// 查询
const searchData = () => {
  informationData.value.current = 1
  if (informationData.value.total > 10) {
    isShowName.value = '2'
  } else {
    isShowName.value = '1'
  }
  onSearch()
}
// 重置
const reset = () => {
  dataObj.value.isType = ''
  informationData.value = {
    bizNo: '',
    cph: '',
    date: [],
    current: 1,
    size: 10
  }
  onSearch()
}
// 查看
const check = (row) => {
  dataObj.value.bizNo = row.BizNo
  dataObj.value.ywlx = row.ywlx === '出库' ? 2 : 1
  dataObj.value.isType = '3'
  dataObj.value.titleText = '查看入库作业监管'
  dataObj.value.visible = true
}
// 子组件传递
const isVisible = (val) => {
  dataObj.value.visible = false
  dataObj.value.showLock = false
  dataObj.value.titleText = ''
  informationData.value.bizNo = null
  informationData.value.cph = null
  informationData.value.date = []
  onSearch()
}

onMounted(() => {
  onSearch()
})
</script>
<style scoped>
.header {
  display: flex;
  padding: 20px;
  width: 100%;
}

.input-box {
  display: flex;
  width: 100%;
}

.input-box-sle {
  width: 56%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24px;
}

.title-box {
  width: 68px;
}

.inputBoxContent {
  width: 400px;
}

.silt-title {
  /* width: 280px; */
  display: flex;
  align-items: center;
  margin-right: 32px;
}

.btnBox {
  display: flex;
}

.ant-input-group-addon {
  border: 0;
}

.ant-input,
.ant-btn {
  border-radius: 5px;
}

.ant-pagination {
  margin-top: 12px;
  float: right;
  margin-right: 16px;
}

.ant-space-item {
  width: 26%;
}

/* 隐藏清除按钮 */
.hide-clear .ant-calendar-picker-container .ant-calendar-range-picker-input {
  padding-right: 0;
}

.hide-clear .ant-calendar-picker-container .ant-calendar-range-picker-input .ant-tag-close {
  display: none;
}

.add-btn {
  background-color: rgba(112, 125, 233);
}

.check {
  background-color: rgba(112, 125, 233);
  color: #fff;
  margin-left: 8px;
}

.edit {
  background-color: rgba(222, 186, 80);
  color: #fff;
  margin-left: 8px;
}

.flow {
  background-color: #22ce8d;
  color: #fff;
  margin-left: 8px;
}

.delete {
  background-color: rgba(255, 70, 70);
  color: #fff;
  margin-left: 8px;
}

.audit {
  background-color: rgba(83, 184, 36);
  color: #fff;
  margin-left: 8px;
}

.ant-table-thead>tr>th {
  text-align: center;
}

.ant-table-tbody>tr>td {
  text-align: center;
}

.ant-select-selector {
  display: none !important;
}

::v-deep .ant-pagination-options {
  display: none !important;
}
</style>
