<template>
  <!-- 基本信息 -->
  <div class="component-stock-bill-basic-info">
    <el-form
      ref="dataFormRef"
      label-width="auto"
      :model="dataForm"
      :rules="rules"
      @submit.prevent
    >
      <span class="title">{{ $t('stock.basicInformation') }}</span>
      <el-divider />
      <!-- 基本信息 -->
      <!-- 库存点名称（新建） -->
      <el-form-item
        label="库存点名称"
        prop="stockPointId"
      >
        <el-select
          v-model="dataForm.stockPointId"
          placeholder="请选择"
          @change="onPointIdChange"
        >
          <el-option
            v-for="item in pointOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="type === 1 ? $t('stock.deliveryDate') : $t('stock.warehousingDate')"
        prop="businessTime"
      >
        <el-date-picker
          v-model="dataForm.businessTime"
          type="date"
          :placeholder="$t('admin.seleData')"
          value-format="YYYY-MM-DD HH:mm:ss"
          :disabled-date="businessTimeOptions"
          class="el-date-picker"
        />
      </el-form-item>
      <el-form-item
        ref="stockChangeReasonIdRef"
        :label="type === 1 ? $t('stock.deliveryReason') : $t('stock.warehousingReason')"
        prop="stockChangeReasonId"
      >
        <el-select
          v-model="dataForm.stockChangeReasonId"
          :placeholder="$t('tip.select')"
          @change="selectReason"
        >
          <el-option
            v-for="node in reasonList"
            :key="node.stockChangeReasonId"
            :label="node.reason"
            :value="node.stockChangeReasonId"
          />
        </el-select>
        <!--新建/刷新-->
        <div class="create-refresh-btn">
          <el-button
            type="primary"
            link
            class="default-btn text-btn"
            @click="getReasonList"
          >
            {{ $t('admin.refresh') }}
          </el-button>
          <el-divider direction="vertical" />
          <el-button
            type="primary"
            link
            class="default-btn text-btn"
            @click.stop="createReason()"
          >
            {{ $t('admin.newConstruction') }}
          </el-button>
        </div>
      </el-form-item>
      <el-form-item
        :label="$t('stock.remark')"
        prop="remark"
      >
        <el-input
          v-model="dataForm.remark"
          class="remark"
          maxlength="50"
          type="textarea"
          show-word-limit
          :row="5"
        />
      </el-form-item>
      <!-- 附件 -->
      <span class="title">{{ $t('stock.appendix') }}</span>
      <el-divider />
      <el-form-item :label="type === 1 ? $t('stock.deliveryCertificate') : $t('stock.warehousingCertificate')">
        <div class="business-qual">
          <imgs-upload
            v-model="dataForm.qualifications"
            :limit="4"
            :prompt="false"
          />
        </div>
        <div class="upload-tips">
          {{ type === 1 ? $t('stock.businessOutQualTips') : $t('stock.businessInQualTips') }}
        </div>
      </el-form-item>
    </el-form>
    <reason-add-or-update
      v-if="reasonAddOrUpdateVisible"
      ref="reasonAddOrUpdateRef"
      @refresh-data-list="getReasonList"
    />
  </div>
</template>

<script setup>
import ReasonAddOrUpdate from './customizereason-add-or-update.vue'
import { getList } from '@/api/stock/stock-bill-basic-info'
import { getListWarehouse } from '@/api/stock/stock.js'

const props = defineProps({
  type: {
    default: 0,
    type: Number // 1 出库 2 入库
  },
  stockBillLogId: {
    default: 0,
    type: Number
  },
  stockBillLogInfo: {
    default: () => {},
    type: Object
  }
})

const emit = defineEmits(['changeStockPointId'])

const dataForm = reactive({
  stockBillLogId: null,
  businessTime: '', // 出入库时间
  stockChangeReasonId: '', // 出入库原因id
  remark: '', // 出入库备注信息
  qualifications: '', // 出入库凭证
  status: '',
  stockPointId: ''
})
const reasonAddOrUpdateVisible = ref(false)
const reasonList = ref([]) // 出入库原因
// 出入库日期选择限制
const businessTimeOptions = (time) => {
  return time.getTime() > Date.now()
}
const validateWarehouseId = (rule, value, callback) => {
  if (value && warehouseList[value].type === 0 && !(warehouseList[value].provinceId && warehouseList[value].cityId && warehouseList[value].areaId)) {
    callback(new Error('请先将默认仓库的地址信息填写完整'))
  } else {
    callback()
  }
}
const rules = {
  businessTime: [
    { required: true, message: props.type === 1 ? $t('stock.deliveryDateNotEmpty') : $t('stock.warehousingDateNotEmpty'), trigger: 'blur' }
  ],
  stockChangeReasonId: [
    { required: true, message: props.type === 1 ? $t('stock.deliveryReasonNotEmpty') : $t('stock.warehousingReasonNotEmpty'), trigger: 'blur' }
  ],
  stockPointId: [
    { required: true, message: '请选择库存点', trigger: 'change' },
    { validator: validateWarehouseId, trigger: 'change' }
  ]
}
watch(
  () => props.stockBillLogInfo,
  (val) => {
    const data = JSON.parse(JSON.stringify(val))
    dataForm.stockBillLogId = data.stockBillLogId
    dataForm.businessTime = data.businessTime // 出入库时间
    dataForm.stockChangeReasonId = data.stockChangeReasonId// 出入库原因id
    dataForm.remark = data.remark// 出入库备注信息
    dataForm.qualifications = data.qualifications// 出入库凭证
    dataForm.status = data.status
    dataForm.warehouseType = data.warehouseType || ''
    dataForm.stockPointId = data.stockPointId || ''
    dataForm.stockMode = data.stockMode || ''
  },
  { immediate: true },
  { deep: true }
)

onMounted(() => {
  init()
})

const pointOptions = ref([])
const init = async () => {
  if (props.stockBillLogId) {
    getReasonList()
  } else {
    // 初始化出入库原因
    getReasonList()
  }
  pointOptions.value = await onGetPointList()
}
const stockChangeReasonIdRef = ref(null)
const selectReason = () => {
  stockChangeReasonIdRef.value.clearValidate()
}

const reasonAddOrUpdateRef = ref(null)
const createReason = () => {
  reasonAddOrUpdateVisible.value = true
  nextTick(() => {
    reasonAddOrUpdateRef.value.init(null, props.type)
  })
}
/**
 * 获取出入库原因
 */
const getReasonList = () => {
  getList(
    {
      status: 1,
      type: props.type
    }
  ).then((data) => {
    if (data && props.stockBillLogId && dataForm) {
      let isExist = false
      for (let i = 0; i < data.length; i++) {
        if (data[i].stockChangeReasonId === dataForm.stockChangeReasonId) {
          isExist = true
        }
      }
      if (!isExist) {
        dataForm.stockChangeReasonId = null
      }
    }
    reasonList.value = data
  })
}
const dataFormRef = ref(null)

/**
 * 校验表单数据，校验成功返回表单数据，校验失败返回null (父组件调用）
 */
const verifyDataForm = () => {
  return new Promise((resolve) => {
    dataFormRef.value.validate(valid => {
      if (!valid) {
        resolve(null)
      } else {
        dataForm.type = props.type
        resolve(dataForm)
      }
    })
  })
}

const onPointIdChange = async (val) => {
  dataForm.warehouseType = warehouseList[val].type
  // 选择的库存点改变，则清空选择的商品，并将库存点信息传递到商品选择组件
  emit('changeStockPointId', {
    defaultWarehouse: defaultWarehouse.value,
    warehouseType: dataForm.warehouseType,
    stockPointId: dataForm.stockPointId,
    stockMode: dataForm.stockMode
  })
}

const warehouseList = {}
const defaultWarehouse = ref(null)
/**
 * 获取库存点列表
 */
const onGetPointList = () => {
  return new Promise((resolve) => {
    getListWarehouse().then((res) => {
      const list = []
      res.forEach((item) => {
        warehouseList[item.warehouseId] = item
        if (item.type === 0) {
          // 仓库默认选择默认仓库
          dataForm.warehouseType = item.type
          dataForm.stockPointId = item.warehouseId
          defaultWarehouse.value = item.warehouseId
          emit('changeStockPointId', {
            defaultWarehouse: dataForm.stockPointId,
            warehouseType: dataForm.warehouseType,
            stockPointId: dataForm.stockPointId,
            stockMode: dataForm.stockMode
          })
          list.unshift({
            value: item.warehouseId,
            label: item.warehouseName
          })
          return
        }
        list.push({
          value: item.warehouseId,
          label: item.warehouseName
        })
      })
      resolve(list)
    })
  })
}

defineExpose({ verifyDataForm })
</script>

<style lang="scss" scoped>

.component-stock-bill-basic-info {
  .title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
  }
  .el-date-picker {
    width: 200px;
  }
  .remark {
    width: 30%;
  }
  .upload-tips {
    font-size: 12px;
    color: #999;
    height: 16px;
    line-height: 20px;
    margin-top: 13px;
  }
}
// 刷新 | 新建
.create-refresh-btn {
  display: inline-block;
  margin-left: 10px;
  & :deep(.el-divider--vertical) {
    margin: 0 2px;
  }
}

:deep(.el-form-item__content) {
  display: block;
}
</style>
