<template>
  <SysDialog :visible="dialog.visible" v-bind="getBindValue" @onClose="onclose" @onConfirm="confirm">
    <template #content>
      <!-- 表单数据 -->
      <el-form ref="ladingBillStateUpdateRef" :inline="true" :model="ladingBillStateUpdateForm"
        :rules="ladingBillStateUpdateRules" label-width="95px" class="ladingbillstate-form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态类型：" prop="stateType">
              <BaseSelect v-model:modelValue="ladingBillStateUpdateForm.stateType" clearable :filterable="false"
                :options="storeStateType.getLadingBillStateTypeList" placeholder="状态类型" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：" prop="state">
              <BaseSelect v-model:modelValue="ladingBillStateUpdateForm.state" clearable :filterable="false"
                :options="selectList" placeholder="状态类型" @change="changeState" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import type { ListIitem } from "@/api/base/BaseDataModel";
import SysDialog from "@/components/SysDialog.vue";
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import useDialog from "@/hooks/useDialog";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import { useStateType } from "@/store/list_StateType";
import { ref, reactive, unref, computed } from 'vue';
import { LadingBillUpdateState } from "@/api/lading/ladingModle";
import { isNonNegativeInteger } from "@/utils/is";
import { cloneDeep } from "@/utils/cloneDeep";
import { deal_ResetObject } from "@/utils/dealData";

// 弹框一些配置
const getBindValue = reactive({
  title: "批量更新状态",
  width: 560,
  height: 0,
});
const emit = defineEmits(["saveUpdate"])
const { dialog, onClose, onShow } = useDialog();
const { formValidate, resetForm } = useEleFormValidate();
// 基础数据
const ladingBillStateUpdateRef = ref()
const ladingBillStateUpdateForm = reactive({
  stateType: undefined,
  state: undefined,
  selectList: [] as ListIitem[],//关联的下拉列表数据
})
// 参数
const ladingBillUpdateParams = reactive<LadingBillUpdateState>({
  ids: [],
  stateType: undefined,
  bookingState: undefined,
  operateState: undefined,
  receivableState: undefined,
  payState: undefined
})
const ladingBillStateUpdateRules = reactive({
  stateType: [{ required: true, message: '请输入模板名称', trigger: 'change' }],
  state: [{ required: true, message: '请输入模板名称', trigger: 'change' }],
})
// 状态数据
const storeStateType = useStateType()
// 显示/隐藏
const show = (ids: number[]) => {
  ladingBillUpdateParams.ids = ids
  onShow()
}
const onclose = () => {
  resetForm(unref(ladingBillStateUpdateRef))
  const resetObj = deal_ResetObject(ladingBillUpdateParams)
  Object.assign(ladingBillUpdateParams, resetObj)
  onClose()
}
// 加载对应状态列表数据
const selectList = computed(() => {
  const stateType = Number(ladingBillStateUpdateForm.stateType)
  if (!isNonNegativeInteger(stateType)) return []
  ladingBillUpdateParams.stateType = stateType
  ladingBillStateUpdateForm.state = undefined
  switch (stateType) {
    // 订舱状态
    case 0:
      return storeStateType.getBookingStateList
    // 操作状态
    case 1:
      return storeStateType.getOperateStateList
    // 应收状态
    case 2:
      return storeStateType.getReceivableStateList
    // 应付状态
    case 3:
      return storeStateType.getPayStateList
    default:
      return []
  }
})
// 选择改变对应的状态
const changeState = (val) => {
  const stateType = Number(ladingBillStateUpdateForm.stateType)
  if (!isNonNegativeInteger(stateType)) return
  switch (stateType) {
    // 订舱状态
    case 0:
      ladingBillUpdateParams.bookingState = val
      break;
    // 操作状态
    case 1:
      ladingBillUpdateParams.operateState = val
      break;
    // 应收状态
    case 2:
      ladingBillUpdateParams.receivableState = val
      break;
    // 应付状态
    case 3:
      ladingBillUpdateParams.payState = val
      break;
    default:
      break;
  }
}

// 确定
const confirm = async () => {
  const isValidate = await formValidate(unref(ladingBillStateUpdateRef))
  if (!isValidate) return
  const params = cloneDeep(ladingBillUpdateParams)
  emit("saveUpdate", params, onclose)
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.ladingbillstate-form {
  margin-top: 10px;

  .el-form-item {
    margin-right: 8px;
  }
}
</style>