<template>
  <div>
    <a-modal class="btn-box" v-model:visible="visible" width="80%" :footer="null" :closable="false" :maskClosable="false"
      :title="titleText">
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="8"><a-form-item label="编号">
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.archiveNumber" placeholder="自动生成" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="粮库名称"> <!-- 这里的粮库名称是在外面路由跳转进来带过来的id和name 新增传递时 id传递过去-->
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.orgName" placeholder="自动生成" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="报告类型" name="reportType">
              <a-select class="select-box" :disabled="showLock" @change="reportTypeChange"
                v-model:value="formState.reportType" placeholder="请选择">
                <a-select-option v-for="item in reportTypeList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="仓房名称" name="basicStorehouseId">
              <a-select class="select-box" @change="storehouseChange" :disabled="showLock"
                v-model:value="formState.basicStorehouseId" placeholder="请选择">
                <a-select-option v-for="item in basicStorehouseList" :key="item.storehouseId" :value="item.storehouseId">
                  {{ item.storehouseName }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
          <a-col :span="8">
            <a-form-item label="货位名称" name="warehouseId">
              <a-select class="select-box" @change="warehouseChange" :disabled="showLock"
                v-model:value="formState.warehouseId" placeholder="请选择">
                <a-select-option v-for="item in warehouseList" :key="item.warehouseId" :value="item.warehouseId">
                  {{ item.warehouseName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="仓房类型"> <!--这里的类型通过报告类型切换带出 回显用name 传递后端用storehouseType-->
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.storehouseTypeName"
                placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="粮食品种"><!--这里的类型通过报告类型切换带出 回显用name 传递后端用grainVarietyId-->
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.grainVarietyId" placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="保管员">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.keeper" placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="提交人"> <!--这里的是当前登录的账户 回显用name 传递用submitterId-->
              <a-input autocomplete="off" :disabled="true" placeholder="请输入"
                v-model:value="formState.submitterName" /></a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="报告日期" name="reportDate">
              <a-date-picker :disabled="showLock" v-model:value="formState['reportDate']" value-format="YYYY-MM-DD" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="最高温"> <!--这里的类型通过报告类型切换带出 回显用name -->
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.maximumTemperature"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="最低温"> <!--这里的类型通过报告类型切换带出 回显用name -->
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.minimumTemperature"
                placeholder="请输入" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="平均温"> <!--这里的类型通过报告类型切换带出 回显用name -->
              <a-input autocomplete="off" :disabled="true" v-model:value="formState.averageTemperature"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="仓外湿">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.ambientHumidity"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="仓内湿">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.storeroomHumidity"
                placeholder="请输入" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="天气情况">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.weatherCondition"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="虫害情况">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.insectHarmCondition"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="是否结霜">
              <a-select class="select-box" :disabled="showLock" v-model:value="formState.isCondensation"
                placeholder="请选择">
                <a-select-option v-for="item in frostingList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="霉变情况">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.moldCondition"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="有无鼠雀">
              <a-select class="select-box" :disabled="showLock" v-model:value="formState.isRodent" placeholder="请选择">
                <a-select-option v-for="item in isRodentList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="仓房有无漏雨">
              <a-select class="select-box" :disabled="showLock" v-model:value="formState.isLeakage" placeholder="请选择">
                <a-select-option v-for="item in isLeakageList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="是否返潮">
              <a-select class="select-box" :disabled="showLock" v-model:value="formState.isReturnDamp" placeholder="请选择">
                <a-select-option v-for="item in isReturnDampList" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="清洁卫生情况">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.cleanlinessCondition"
                placeholder="请输入" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="备注">
              <a-textarea :disabled="showLock" class="text-box" v-model:value="formState.remarks" :rows="8"
                placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="btn-box">
        <a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary" @click="handleOk">保存</a-button>
        <a-button @click="handleCancel">关闭</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import { message } from 'ant-design-vue'
import { useRoute } from 'vue-router';

const route = useRoute();

const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')

const formState = ref({})
const rules = ref({
  reportType: [{ required: true, message: '请选择', trigger: 'change' }],
  basicStorehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
  warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
  reportDate: [{ required: true, message: '请选择', trigger: 'blur' }]

})
const basicStorehouseList = ref([]) //仓房名称数据
const warehouseList = ref([]) //货位名称数据
const reportTypeList = ref([
  { value: 1, label: '日报' },
  { value: 2, label: '周报' },
  { value: 3, label: '月报' },
  { value: 4, label: '季报' },
  { value: 5, label: '年报' },
])
const frostingList = ref([{ value: 0, label: '否' }, { value: 1, label: '是' }]) //结霜
const isRodentList = ref([{ value: 0, label: '否' }, { value: 1, label: '是' }]) //有无鼠雀
const isLeakageList = ref([{ value: 0, label: '否' }, { value: 1, label: '是' }]) //漏雨
const isReturnDampList = ref([{ value: 0, label: '否' }, { value: 1, label: '是' }]) //返潮

const formRef = ref(null)
const emit = defineEmits(['isVisible'])

// 仓房名称
function storeHouseList() {
  reserveDataApi.getStoreHouseList({ orgId: route.query.orgId }).then((res) => {
    basicStorehouseList.value = res
  })
}
// 仓房名称change事件
function storehouseChange(val) {
  if (formState.value.reportType !== undefined && formState.value.reportType !== '') {
    warehouseListData(val)
  } else {
    formState.value.basicStorehouseId = null
    return message.warning('请先选择报告类型')
  }
}
// 货位名称
function warehouseListData(val) {
  reserveDataApi.getWarehouseList({ storehouseId: val }).then((res) => {
    warehouseList.value = res
  })
}
// 货位名称change事件
function warehouseChange(val) {
  reserveDataApi.getArchiveInfo({
    orgId: Number(route.query.orgId),
    reportType: formState.value.reportType,
    storehouseId: formState.value.basicStorehouseId
  }).then((res) => {
    // console.log('详情带出来的数据', res);
    formState.value.storehouseTypeName = res.storehouseTypeName
    formState.value.storehouseType = res.storehouseType
    formState.value.grainVarietyId = res.grainVarietyId
    formState.value.foodVarietyName = res.foodVarietyName
    formState.value.tempMax = res.tempMax
    formState.value.tempMin = res.tempMin
    formState.value.tempAvg = res.tempAvg
  })
}
// 报告类型change事件
function reportTypeChange(val) {
  if (formState.value.basicStorehouseId != undefined && formState.value.basicStorehouseId != '') {
    reserveDataApi.getArchiveInfo({
      orgId: Number(route.query.orgId),
      reportType: val,
      storehouseId: formState.value.basicStorehouseId
    }).then((res) => {
      // console.log('报告类型切换时数据', res);
      formState.value.storehouseTypeName = res.storehouseTypeName
      formState.value.storehouseType = res.storehouseType
      formState.value.grainVarietyId = res.grainVarietyId
      formState.value.foodVarietyName = res.foodVarietyName
      formState.value.tempMax = res.tempMax
      formState.value.tempMin = res.tempMin
      formState.value.tempAvg = res.tempAvg
    })
  }
}
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  formRef.value.resetFields() //resetFields()函数是组件库提供的
  formState.value = {}
}
// 确定按钮
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      // isTypeData === '1' 新增  2是编辑 3是查看
      if (isTypeData.value === '1') return addData()
      if (isTypeData.value === '2') return editData()
    })
    .catch((error) => {
      message.warning('请填写完善')
      console.log('error', error)
    })
}

// 用于新增提交
const addData = () => {
  reserveDataApi.getArchiveAdd(formState.value).then((res) => {
    handleCancel()
  })
}
// 用于修改提交
const editData = () => {
  let obj = {
    ...formState.value,
    id: props.dataObj.id
  }
  reserveDataApi.getArchiveEdit(obj).then((res) => {
    handleCancel()
  })
}
// 用于查看调用
const detailData = (id) => {
  reserveDataApi.getArchiveDetail({ id: id }).then((res) => {
    formState.value = { ...res }
    warehouseListData(res.basicStorehouseId), getOrgNameListData()
  })
}
function getOrgNameListData() {
  reserveDataApi.getOrgNameList().then(res => {
    let arrList = res
    arrList.forEach(i => {
      if (i.orgId == formState.value.orgId) {
        formState.value.orgName = i.orgName
      }
    })
  })
}
// 获取当前用户登录信息
function getUserInfoData(val) {
  // 详情时调用用户信息查询当前的提示人数据id
  reserveDataApi.getUserInfo({ id: val }).then((res) => {
    if (formState.value.submitterId != res.id) {
      formState.value.submitterName = res.name
      formState.value.submitterId = res.id
    } else {
      formState.value.submitterName = res.name
    }
  })
}
const idData = ref({})
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    idData.value = JSON.parse(localStorage.getItem('USER_INFO'))
    titleText.value = newValue.titleText
    visible.value = newValue.visible
    showLock.value = newValue.showLock
    isTypeData.value = newValue.isType
    // isType字段用于查看接口
    if (newValue.isType == '2' || newValue.isType == '3') {
      detailData(newValue.id), getUserInfoData(idData.value.id)
    } else {
      // 用于新增时清空表格数据
      formState.value = {}
      basicStorehouseList.value = []
      warehouseList.value = []
      formState.value.submitterId = idData.value.id
      formState.value.submitterName = idData.value.name
      formState.value.orgId = route.query.orgId
      formState.value.orgName = route.query.orgName
    }
    storeHouseList()
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.ant-input {
  width: 90%;
}

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

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

.ant-picker {
  width: 90%;
}

.ant-select {
  width: 90%;
}

.from-input {
  width: 101.4%;
}

.address-box {
  width: 91.6%;
}

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

.int-box {
  width: 90% !important;
}

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