<!-- 
    TODO 客户业务 / 能否收货
 -->
<template>
  <el-main class="custom-receive-goods">
    <div class="content">
      <el-form
        ref="customReceiveGoodsFormRef"
        :model="customReceiveGoodsForm"
        :rules="customReceiveGoodsState.customReceiveGoodRules"
        inline
        label-width="100px"
      >
        <el-form-item prop="customerId" label="客户：" class="datasyn-item">
          <BaseSelect
            v-model:modelValue="customReceiveGoodsForm.customerId"
            class="item"
            :options="customertList"
          />
        </el-form-item>
        <el-form-item prop="currencyCode" label="币种：" class="datasyn-item">
          <BaseSelect
            v-model:modelValue="customReceiveGoodsForm.currencyCode"
            class="item"
            :options="currencyList"
          />
        </el-form-item>
        <el-form-item prop="feeAmount" label="费用：" class="datasyn-item">
          <div class="datasyn-item flex align-center">
            <div class="flex-1">
              <el-input-number
                v-model="customReceiveGoodsForm.feeAmount"
                style="width: 100%"
                :clearable="true"
                :controls="false"
                :min="1"
              />
            </div>
            <div>
              <el-button
                type="primary"
                class="begin-btn"
                :loading="customReceiveGoodsState.loading"
                @click="hanleObtainResult"
              >
                查询
              </el-button>
            </div>
          </div>
        </el-form-item>
        <div v-show="customReceiveGoodsState.requestState">
          <el-divider content-position="left"> 查询结果 </el-divider>
          <el-alert
            :type="getCanDeliver ? 'success' : 'error'"
            :closable="false"
          >
            <el-form-item prop="dataId" label="能否收货：" class="datasyn-item">
              {{ getCanDeliver ? "能" : "不能" }}
            </el-form-item>
            <el-form-item prop="dataId" label="备注：" class="datasyn-item">
              {{ customReceiveGoodsState.customReceiveGoodData.message || "" }}
            </el-form-item>
          </el-alert>
        </div>
      </el-form>
    </div>
  </el-main>
</template>
<script lang="ts" setup name="dataSyn">
import {
  api_judgeDeliver,
  JudgeDeliverParam,
} from "@/api/receiveGoods/receiveGoods";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { useDropDownData } from "@/hooks/useDropDownData";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import { resCodeSuccess } from "@/utils/useReturnData";
import { ref, reactive, unref, computed, onBeforeMount } from "vue";

const customReceiveGoodsFormRef = ref();
const customReceiveGoodsForm = reactive<JudgeDeliverParam>({
  customerId: undefined,
  currencyCode: undefined,
  feeAmount: undefined,
});
const customReceiveGoodsState = reactive({
  requestState: false,
  loading: false,
  customReceiveGoodRules: {
    customerId: [
      { required: true, message: "请选择联系地址", trigger: "change" },
    ],
    currencyCode: [
      { required: true, message: "请选择联系地址", trigger: "change" },
    ],
    feeAmount: [{ required: true, message: "请输入公司全称", trigger: "blur" }],
  },
  customReceiveGoodData: {} as Recordable,
});
const getCanDeliver = computed(
  () => customReceiveGoodsState.customReceiveGoodData.canDeliver
);


const { storeDropDownData, customertList, currencyList } = useDropDownData();

const { formValidate } = useEleFormValidate();
onBeforeMount(() => {
  storeDropDownData.addCustomertList();
  storeDropDownData.addCurrencyList();
});
// 查询
const hanleObtainResult = async () => {
  const isValidate = await formValidate(unref(customReceiveGoodsFormRef));
  if (!isValidate) return;
  customReceiveGoodsState.requestState = true
  customReceiveGoodsState.loading = true;
  try {
    const res = await api_judgeDeliver(customReceiveGoodsForm);
    if (resCodeSuccess(res)) {
      customReceiveGoodsState.customReceiveGoodData = res.data;
    }
  } finally {
    customReceiveGoodsState.loading = false;
  }
};
</script>
<style lang="scss" scoped>
.custom-receive-goods {
  .content {
    max-width: 460px;
    .datasyn-item {
      width: 100%;
      .item {
        width: 100%;
      }
      .el-input-number {
          :deep(.el-input__inner) {
            text-align: left;
          }
      }
    }
    .begin-btn {
      margin-left: 15px;
    }
    .old-data-cover {
      margin-left: 10px;
    }

    .result-data {
      line-height: 1.5;
    }
  }
}
</style>
