<template>
  <div>
    <a-modal v-model:visible="visible" width="75%" :closable="false" :maskClosable="false" :title="titleText"
      :footer="null">
      <div class="top-box">
        <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="8">
              <a-form-item label="单据号">
                <a-input :disabled="true" v-model:value="formState.bizNo" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="品种">
                <a-input :disabled="true" v-model:value="formState.lspzName" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="明细品种:">
                <a-input :disabled="true" v-model:value="formState.mxpzName" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="row-box">
            <a-col :span="24">
              <a-table :scroll="{ y: 200 }" :dataSource="columnsData" :row-key="(record) => record.id" :columns="columns">
                <template #bodyCell="{ column, index, record }"></template>
              </a-table>
            </a-col>
          </a-row>
        </a-form>
        <div class="btn-box">
          <a-button @click="handleCancel">关闭</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const formState = ref({})
// 考核指标设置表头
const columns = [
  {
    title: '指标项名称',
    dataIndex: 'zbxmcName',
    align: 'center',
    key: 'zbxmcName'
  },
  {
    title: '检验值',
    dataIndex: 'jyz',
    align: 'center',
    key: 'jyz'
  },
  {
    title: '检验扣价(%)',
    dataIndex: 'jykj',
    align: 'center',
    key: 'jykj'
  },
  {
    title: '检验扣量(%)',
    dataIndex: 'jykl',
    align: 'center',
    key: 'jykl',
  }
]
const columnsData = ref([]) //列表数据

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

const emit = defineEmits(['isVisible'])

// 用于查看调用
const detailData = (id) => {
  reserveDataApi.findJyDetail({ dataId: id }).then((res) => {
    // console.log(res, 'rerjxdsd');
    formState.value = {
      bizNo: res.bizNo,
      lspzName: res.lspzName,
      mxpzName: res.mxpzName
    }
    columnsData.value = res.jyxxMxList
  })
}
// 取消按钮
const handleCancel = () => {
  colosData()
}
// 取消按钮
const colosData = () => {
  visible.value = false
  emit('isVisible', false)
  formRef.value.resetFields() //resetFields()函数是组件库提供的
  formState.value = {}
  columnsData.value = []
}
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    titleText.value = newValue.titleText
    visible.value = newValue.visible
    isTypeData.value = newValue.isType
    // isType字段用于查看接口
    detailData(newValue.id, 1)
    // 用于新增时清空表格数据
    formState.value = {}
    columnsData.value = []
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.ant-input {
  width: 100%;
}

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

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

::v-deep .ant-pagination {
  display: none;
}

.title-box {
  width: 100%;
}

.from-input {
  width: 101.4%;
}

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

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

.btn-box {
  text-align: center;
}

.row-box {
  margin-bottom: 20px;
}
</style>
	