<template>
  <div>
    <a-modal v-model:visible="visible" width="50%" :closable="false" :maskClosable="false" title="查看储备规模" :footer="null">
      <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <div class="text-box">
          <a-form-item label="企业单位">
            <a-select class="select-box" :disabled="true" v-model:value="formState.unitInfoId" :size="size"
              style="width: 100%" @change="monitoringCahnge" placeholder="请选择">
              <a-select-option v-for="item in enterpriseList" :key="item.unitInfoId" :value="item.unitInfoId">{{ item.dwmc
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="库区名称">
            <a-select class="select-box" :disabled="true" v-model:value="formState.orgInfoId" :size="size"
              style="width: 100%" placeholder="请选择">
              <a-select-option v-for="item in orgInfoList" :key="item.orgInfoId" :value="item.orgInfoId">{{ item.orgName
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="粮食品种">
            <a-select class="select-box" :disabled="true" v-model:value="formState.grainVarietyId" :size="size"
              style="width: 100%" placeholder="请选择">
              <a-select-option v-for="item in varietyList" :key="item.grainVarietyId" :value="item.grainVarietyId">{{
                item.enumname }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="粮食性质">
            <a-select class="select-box" :disabled="true" v-model:value="formState.grainNatureId" :size="size"
              style="width: 100%" placeholder="请选择">
              <a-select-option v-for="item in natureList" :key="item.grainNatureId" :value="item.grainNatureId">{{
                item.enumname }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="储备规模计划量（吨）">
            <a-input class="title-box" autocomplete="off" :disabled="true"
              v-model:value="formState.reservePlanQuantity" />
          </a-form-item>
          <a-form-item label="计划文号">
            <a-input class="title-box" autocomplete="off" :disabled="true" v-model:value="formState.planNo" />
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea class="title-box" :rows="4" placeholder="请输入" :maxlength="6" autocomplete="off" :disabled="true"
              v-model:value="formState.remark" />
          </a-form-item>
        </div>
        <div class="btn-box">
          <a-button @click="handleCancel">关闭</a-button>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import reserveQuantityApi from '@/api/reserve.info/reserveQuantityApi.js'
const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const formState = ref({})
const visible = ref(false)
const formRef = ref(null)
const emit = defineEmits(['isVisible'])
const enterpriseList = ref([])
const orgInfoList = ref([])
const varietyList = ref([])
const natureList = ref([])

//过滤筛选数据列表 
const orgId = ref('')
const monitoringCahnge = (val) => {
  enterpriseList.value.filter(item => {
    item.unitInfoId === val ? orgId.value = item.unitInfoId : ''
  })
  formState.value.orgInfoId = null
  orgInfoList.value = []
  monitorList(orgId.value)
}
// 库区名称
const monitorList = (val) => {
  reserveQuantityApi.getOrgInfoData({
    id: val
  }).then((res) => {
    orgInfoList.value = []
    res.forEach(item => {
      orgInfoList.value.push({
        orgInfoId: Number(item.orgId),
        orgName: item.orgName || ''
      })
    })
  })
}
// 企业名称
const getEnterpriseList = () => {
  reserveQuantityApi.getUnitInfoData().then((res) => {
    enterpriseList.value = []
    res.forEach(item => {
      enterpriseList.value.push({
        unitInfoId: item.id,
        dwmc: item.dwmc || ''
      })
    })
  })
}
// 粮食品种
const getLspzInfoList = () => {
  reserveQuantityApi.getLspzInfoData().then((res) => {
    varietyList.value = []
    res.forEach(item => {
      varietyList.value.push({
        grainVarietyId: Number(item.enumId),
        enumname: item.enumname || ''
      })
    })
  })
}
// 粮食性质
const getLsxzInfoList = () => {
  reserveQuantityApi.getLsxzInfoData({ parentId: '1032' }).then((res) => {
    natureList.value = []
    res.forEach(item => {
      natureList.value.push({
        grainNatureId: Number(item.enumId),
        enumname: item.enumname || ''
      })
    })
  })
}
// 取消按钮
const handleCancel = () => {
  colosData()
}
// 用于查看调用
const detailData = (id) => {
  reserveQuantityApi.reserveScaleDetail({ id: id }).then((res) => {
    monitorList(res.unitInfoId)
    formState.value = { ...res }
  })
}
// 取消按钮
const colosData = () => {
  visible.value = false
  emit('isVisible', false)
  formRef.value.resetFields() //resetFields()函数是组件库提供的
  formState.value = {}
}
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    visible.value = newValue.visible
    getEnterpriseList(), getLspzInfoList(), getLsxzInfoList()
    detailData(newValue.id)
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.ant-input {
  width: 80%;
}

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

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

/deep/.ant-input-number-input {
  text-align: left !important;
}

.title-box {
  width: 100%;
}

.ant-picker {
  width: 92%;
}

.from-input {
  width: 101.4%;
}

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

.text-box {
  margin: 0 auto;
  width: 60%;
}

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

.btn-type {
  background-color: #22ce8d;
  color: #fff;
}
</style>
