<template>
  <a-modal v-model:visible="visible" width="80%" :closable="false" :maskClosable="false" :title="titleText"
    :footer="null">
    <div class="top-box">
      <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="8"><a-form-item label="库区名称">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.orgName" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="单据号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.BizNo" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="计划单号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.jhdbh" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="合同号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.htbh" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="生产年份">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.scnf" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="产地">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.cd" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="客户名称">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.khmc" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="联系电话">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.khlxdh" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="身份证">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.slrsfzh" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="地址">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.slrdz" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="承运人">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.cyr" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="车牌号类型">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.cphlx" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="车辆类型">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.cllx" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="车辆编号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.cph" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="挂车号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.gch" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="粮食性质">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.lsxzmc" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="粮食品种">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.lspzmc" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="业务时间">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.zykssj" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="登记人">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.djr" />
            </a-form-item></a-col>
        </a-row>
        <p class="title-box-text">扦样信息</p>
        <a-row>
          <a-col :span="8"><a-form-item label="扦样单号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.qydh" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="扦样点位">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.qydw" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="扦样区域">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.qyqy" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="样品代表数量">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.ypdbsl" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="扦样时间">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.qysj" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="扦样人">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.qyr" />
            </a-form-item></a-col>
        </a-row>
        <p class="title-box-text">化验信息</p>
        <a-row>
          <a-col :span="8"><a-form-item label="化验单号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.jydh" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="检验结果">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.jyjg" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="粮油等级">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.lsdjmc" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="检验人">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.jyr" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="单价">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.dj" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="检验时间">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.jysj" />
            </a-form-item></a-col>
        </a-row>
        <div class="table-box" v-if="props.dataObj.ywlx == 1">
          <a-table :scroll="{ y: 300 }" :dataSource="dataSource" :pagination="false" @change="onChangePage"
            :row-key="(record) => record.key" :columns="columns">
            <template #bodyCell="{ column, record }"></template>
          </a-table>
        </div>
        <p class="title-box-text">检斤信息</p>
        <a-row>
          <a-col :span="8"><a-form-item label="检斤单号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.jjdh" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="仓房名称">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.cfmc" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="毛重">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.mz" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="称毛时间">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.cmzsj" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="毛检员">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.mjy" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="皮重">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.pz" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="称皮时间">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.cpzsj" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="毛皮员">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.pjy" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="卸载重量">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.xzzl" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="监磅员">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.jpy" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="监磅员意见">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.jpyyj" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="现场扣杂">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.xckz" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="现场扣水">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.xcks" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="作业开始时间">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.zyjssj" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="作业结束时间">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.zyjssj" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="开户行行别">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.hfyhhb" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="开户行号">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.khhh" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="开户银行名称">
              <a-input autocomplete="off" :disabled="true" placeholder="请输入" v-model:value="formState.hhyhmc" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item ref="uploadDataList" label="作业图片">
              <UPLoadData :beforeUpload="beforeUpload" :disabled="true" placeholder="请输入" listType="picture-card" multiple
                v-model:urls="formState.attachment" :change="changeUpload" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="btn-box">
        <a-button @click="handleCancel">关闭</a-button>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import global from '@/api/basic.info/global'
const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const formState = ref({})
const dataSource = ref([])
const columns = [
  {
    title: '指标项',
    dataIndex: 'enumname',
    align: 'center',
    key: 'enumname'
  },
  {
    title: '检验值',
    dataIndex: 'jyz',
    align: 'center',
    key: 'jyz',
  },
  {
    title: '增扣量比例',
    dataIndex: 'zkls1',
    align: 'center',
    key: 'zkls1'
  },
  {
    title: '增扣价比例',
    dataIndex: 'jykjje',
    align: 'center',
    key: 'jykjje',
  }
]

const isTypeData = ref('')
const visible = ref(false)
const titleText = ref('')

const emit = defineEmits(['isVisible'])
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  formState.value = {}
}


// 文件预览方式
function changeUpload(ev) {
  return global.uploadFile(ev).then((reg) => {
    return reg
  })
}
const uploadDataList = ref(null)
function beforeUpload() {
  uploadDataList.value.clearValidate()
}
// 用于查看调用
const detailData = (id, type) => {
  reserveDataApi.businessRecordDetail({ bizNo: id, ywlx: type }).then((res) => {
    formState.value = { ...res }
    dataSource.value = res.rkhyList
    if (res.tpList) {
      formState.value.attachment = res.tpList
      // formState.value.attachment = res.attachment.split(',') || ''
    }
  })
}
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    titleText.value = newValue.titleText
    visible.value = newValue.visible
    isTypeData.value = newValue.isType
    detailData(newValue.bizNo, newValue.ywlx)
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.ant-input {
  width: 80%;
}

/* 针对 a-form-item 的 label 应用样式 */
::v-deep .ant-form-item-label {
  width: 130px;
  text-align: right;
}

::v-deep .ant-form-item-control-input {
  width: 100%;
}

.title-box {
  width: 91.7%;
}

.ant-picker {
  width: 80%;
}

.ant-select {
  width: 80% !important;
}

.from-input {
  width: 101.4%;
}

::v-deep.ant-modal-footer {
  display: none !important;
}

.text-box {
  width: 94.6%;
}

.btn-box {
  width: 90%;
  background: rgba(190, 190, 190, 0.2);
  color: #d9d9d9;
  padding: 5px;
  font-size: 20px;
  text-align: center;
  box-shadow: 1px 2px 2px #bfbfbf;
  background-clip: padding-box;
  position: absolute;
  left: 4%;
  bottom: 2%;
}

.title-box-text {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.table-box {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 24px;
}

/deep/.ant-table-pagination.ant-pagination {
  display: none !important;
}

.top-box {
  max-height: 680px;
  overflow-y: auto;
}

/* 为所有滚动条设置样式 */
::-webkit-scrollbar {
  width: 8px;
  /* 设置滚动条的宽度 */
  border-radius: 10px;
}

/* 修改滚动条滑块的样式 */
.a-modal::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f5f5f5;
  /* 设置轨道的背景颜色 */
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  /* 设置滑块的背景颜色 */
  border-radius: 10px !important;
}
</style>
