<!--
  * 入库单 详情
  *
-->
<template>
  <div class="detail-header">
    <a-page-header :title="form.asnId ? '编辑入库单' : '添加入库单'" :avatar="{ src: '' }">
      <template #extra>
        <a-button @click="onSubmit" type="primary">
          <template #icon>
            <EditOutlined/>
          </template>
          保存
        </a-button>
        <a-button @click="onBack" type="primary" danger>
          <template #icon>
            <ArrowLeftOutlined/>
          </template>
          返回
        </a-button>
      </template>
      <div>
        <a-form ref="formRef" :model="form" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="客户" name="customerId">
                <CustomerSelect style="width: 100%" v-model:value="form.customerId" :disabled-flag="true"
                                @change="changeCustomerSelect"/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="客户订单号" name="customerNumber">
                <a-input style="width: 100%" v-model:value="form.customerNumber" placeholder="客户订单号"/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="单据类型" name="orderType">
                <SmartEnumSelect style="width: 100%" enum-name="ASN_ORDER_TYPE_ENUM" v-model:value="form.orderType"/>
              </a-form-item>
            </a-col>

          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="单位" name="addressId">
                <AddressSelect style="width: 100%" v-model:value="form.addressId" :disabled-flag="true"
                               @change="changeAddressSelect"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="联系人" name="person">
                <a-input style="width: 100%" v-model:value="form.person" placeholder="联系人"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item label="电话" name="telephone">
                <a-input style="width: 100%" v-model:value="form.telephone" placeholder="电话"/>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item label="订单日期" name="orderDate">
                <a-date-picker style="width: 100%" value-format="YYYY-MM-DD" v-model:value="form.orderDate"/>
              </a-form-item>
            </a-col>

          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-item label="地址" name="address">
                <a-textarea v-model:value="form.address" style="width: 100%; height: 100px; outline: none;" auto-size/>
              </a-form-item>
            </a-col>
          </a-row>


        </a-form>
      </div>
    </a-page-header>
  </div>
  <a-card class="smart-margin-top10" size="small">
    <a-tabs>
      <a-tab-pane key="asnDetail" tab="入库明细">
        <ReceiveDetailList :asnId="form.asnId"/>
      </a-tab-pane>
      <a-tab-pane key="asnTask" tab="收货详情">
      </a-tab-pane>
      <a-tab-pane key="dataTracer" tab="操作记录">
        <DataTracer :dataId="form.asnId" :type="DATA_TRACER_TYPE_ENUM.OA_ENTERPRISE.value"/>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script setup lang="ts">
import _ from 'lodash';
import {onMounted, reactive, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import DataTracer from '/@/components/support/data-tracer/index.vue';
import {DATA_TRACER_TYPE_ENUM} from '/@/constants/support/data-tracer-const';
import CustomerSelect from "/@/views/business/base/customer/customer-select.vue";
import SmartEnumSelect from "/@/components/framework/smart-enum-select/index.vue";
import AddressSelect from "/@/views/business/base/address/address-select.vue";
import dayjs from 'dayjs';
import {message} from "ant-design-vue";
import {SmartLoading} from "/@/components/framework/smart-loading";
import {asnApi} from "/@/api/business/receive/asn/asn-api";
import {smartSentry} from "/@/lib/smart-sentry";
import ReceiveDetailList from "/@/views/business/receive/asn/receive-detail-list.vue";

// 表单
const formRef = ref();
const formDefault = {
  asnId: undefined,//入库单id
  customerId: undefined, //客户
  customerNumber: undefined, //客户订单号
  orderType: undefined,//单据类型
  orderDate: dayjs().format('YYYY-MM-DD'),//订单日期
  addressId: undefined,//收货单位
  person: undefined,//联系人
  telephone: undefined,//电话
  address: undefined,//收货地址

};
let form = reactive({...formDefault});

//规则
const rules = {
  customerId: [{required: true, message: '客户 必填'}],
  customerNumber: [{required: true, message: '客户订单号 必填'}],
  orderType: [{required: true, message: '单据类型 必填'}],
  orderDate: [{required: true, message: '订单日期 必填'}],
  addressId: [{required: true, message: '收货单位 必填'}],

};

//选择客户
function changeCustomerSelect(selectValue: any) {
  if (selectValue) {
    form.customerId = selectValue.customerId;
  }
}

//选择收货单位
function changeAddressSelect(selectValue: any) {
  if (selectValue) {
    form.addressId = selectValue.addressId;
    form.address = selectValue.address;
    form.person = selectValue.person;
    form.telephone = selectValue.telephone;
  }
}

//数据展示
const route = useRoute();
onMounted(() => {
  //获取路由传过来的参数
  const id = route.query.id;
  if (typeof id === 'string') {
    // 从sessionStorage中获取数据
    const res = getDataFromSessionStorage(id);
    //编辑时自动填充数据
    if (res) {
      form.asnId = res.asnId;
      form.customerId = res.customerId;
      form.customerNumber = res.customerNumber;
      form.orderType = res.orderType;
      form.orderDate = res.orderDate;
      form.addressId = res.addressId;
      form.person = res.person;
      form.telephone = res.telephone;
      form.address = res.address;
    }
    // 获取数据后移除存储项
    sessionStorage.removeItem(id);
  }
});

//从sessionStorage中获取数据
function getDataFromSessionStorage(id: string) {
  try {
    const data = sessionStorage.getItem(id);
    return data ? JSON.parse(data) : null;
  } catch (error) {
    message.error('解析 sessionStorage 数据时出错:');
    return null;
  }
}

// 点击确定，验证表单
async function onSubmit() {
  try {
    await formRef.value.validateFields();
    await save();
  } catch (err) {
    message.error('参数验证错误，请仔细填写表单数据!');
  }
}

//保存/编辑
async function save() {
  SmartLoading.show();
  try {
    if (form.asnId) {
      let res = await asnApi.update(form);
      form.asnId = res.data.asnId;
    } else {
      let res = await asnApi.add(form);
      form.asnId = res.data.asnId;
    }
    message.success('操作成功');
  } catch (err) {
    smartSentry.captureError(err);
  } finally {
    SmartLoading.hide();
  }
}

//返回
let router = useRouter();

function onBack() {
  router.push({
    path: '/receive/asn/asn-list',
    query: {refresh: '1'}
  });
}
</script>

<style lang="less" scoped>
.detail-header {
  background-color: #fff;
  padding: 10px;
}
</style>
