<template>
  <SysDialog
    class="course-return"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onClose"
    @onConfirm="onconfirm"
  >
    <template #content>
      <el-form
        ref="courseReturnFormRef"
        :model="courseReturnParams"
        class="coursereturn-form"
      >
        <template
          v-for="(item, index) in courseReturnParams.orderReCountFeeDtoList"
          :key="index + new Date().getTime()"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                :prop="`orderReCountFeeDtoList.${index}.ladingId`"
                class="item-course-return"
                label="提单号"
                label-width="90px"
                :rules="[
                  { required: true, message: '请输入内容', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="item.ladingId"
                  clearable
                  placeholder="提单号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="flex multiple-order">
                <div class="flex-1">
                  <el-form-item prop="orderIdList" class="w-98" label="订单号">
                    <BaseMultipleOrder
                      :modelValue="item"
                      field="orderIdList"
                      @getMultiOrders="getMultiOrders($event, item)"
                    />
                  </el-form-item>
                </div>
                <div class="add">
                  <el-button
                    type="primary"
                    link
                    :icon="Plus"
                    @click="hanleAdd"
                    v-show="index === 0"
                  />
                  <div></div>
                  <el-button
                    type="danger"
                    link
                    :icon="Delete"
                    v-show="index > 0"
                    @click="hanleRemove(index)"
                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </template>
        <el-row>
          <el-col :span="12">
            <el-form-item
              prop="ladingId"
              class="item-course-return"
              label-width="90px"
              label="拉取数据"
            >
              <el-select v-model="courseReturnParams.pullData">
                <el-option label="是" :value="true"></el-option>
                <el-option label="否" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { OrderReCountFeeDto, OrderReCountFeeParam } from "@/api/lading/ladingModle";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { Plus, Delete } from "@element-plus/icons-vue";
import { ref, reactive, unref } from "vue";
import BaseMultipleOrder from "@/components/BaseMultipleOrder/index.vue";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";

const emit = defineEmits<{
    (e: 'saveReturn', params: OrderReCountFeeParam, onclose: Fn, setLoading: Fn): void
}>()
// 弹框一些配置
const getBindValue = reactive({
  title: "尾程重算",
  width: 660,
  height: 0,
});
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
const courseReturnFormRef = ref();
// 校验表单
const { formValidate } = useEleFormValidate();

const courseReturnParams = reactive<OrderReCountFeeParam>({
  pullData: false,
  orderReCountFeeDtoList: [{ ladingId: "", orderIdList: [] }],
});
// 初始化提单号
const initList = (data: OrderReCountFeeDto[]) => {
  if(data.length === 0) {
    return
  }
  courseReturnParams.orderReCountFeeDtoList = data
}
// 显示、隐藏
const onclose = () => {
  courseReturnParams.pullData = false;
  courseReturnParams.orderReCountFeeDtoList = [
    { ladingId: "", orderIdList: [] },
  ];
  onClose();
};
const show = (data) => {
  initList(data)
  onShow();
};
const hanleAdd = () => {
  courseReturnParams.orderReCountFeeDtoList.push({
    ladingId: "",
    orderIdList: [],
  });
};
const hanleRemove = (index: number) => {
  courseReturnParams.orderReCountFeeDtoList.splice(index, 1);
};
// 更新当前订单号
const getMultiOrders = (multiOrders: string[], item: Recordable) => {
  item.orderIdList = multiOrders;
};
const onconfirm = async () => {
  const isValidate = await formValidate(unref(courseReturnFormRef));
  if (!isValidate) return;
  emit("saveReturn", courseReturnParams, onclose, setLoading);
};
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.course-return {
  .coursereturn-form {
    padding-right: 6px;

    .item-course-return {
      width: calc(100% - 32px);
    }

    .multiple-order {
      width: 100%;
      margin-right: 10px;
    }

    .w-98 {
      width: 98%;
    }

    .add {
      line-height: 32px;
    }
  }
}
</style>
