<template>
  <el-card class="box-card">
    <div style="padding: 8px; text-align: center" v-if="orderDetail.code || orderDetail.wlnCode">
      <span style="font-size: 18px; font-weight: 700">{{ orderDetail.code }} </span>
      <span style="font-size: 18px; font-weight: 700" v-if="orderDetail.wlnCode"> ({{ orderDetail.wlnCode }})</span>
    </div>
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
      <template #type>
        <div style="width: 100%">
          <span v-if="formData.data.type == 1">退款退货</span>
          <span v-else-if="formData.data.type == 2">换货</span>
        </div>
      </template>
      <template #img>
        <div style="width: 100%">
          <el-upload
            v-model:file-list="fileList"
            action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
            list-type="picture-card"
            multiple
            :data="uploadData"
            :before-upload="beforeUpload"
            :on-preview="onPreview">
            <el-icon><Plus /></el-icon>
          </el-upload>
        </div>
      </template>
      <template #orderExchangeDetailList>
        <div style="width: 100%; padding: 0 1vw">
          <el-table :data="formData.data.orderExchangeDetailList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
            <el-table-column label="SKU品号" prop="skuSpecCode" width="160" />
            <el-table-column label="SKU品名" prop="skuSpecName" min-width="240" />
            <el-table-column label="购买数量" prop="buyQuantity" width="120" />
            <el-table-column label="售后数量" width="160">
              <template #default="{ row, $index }">
                <el-form-item :prop="'orderExchangeDetailList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true" style="width: 100%">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="row.quantity"
                    placeholder="净重"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="0" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template #deliveryAddress>
        <div style="width: 100%">
          <el-row>
            <el-col :span="3">
              <el-form-item label-width="0" prop="province" style="width: 100%">
                <el-input v-model="formData.data.province" placeholder="请输入省" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0" prop="city" style="width: 100%">
                <el-input v-model="formData.data.city" placeholder="请输入市" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0" prop="county" style="width: 100%">
                <el-input v-model="formData.data.county" placeholder="请输入区/县" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label-width="0" prop="detailedAddress" style="width: 100%">
                <el-input v-model="formData.data.detailedAddress" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="0" prop="postcode" style="width: 100%">
                <el-input v-model="formData.data.postcode" placeholder="请输入邮编" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </template>
      <template #consignee>
        <div style="width: 100%">
          <el-row>
            <el-col :span="6">
              <el-form-item label-width="0" prop="consignee" style="width: 100%">
                <el-input v-model="formData.data.consignee" placeholder="请输入联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="0" prop="consigneeNumber" style="width: 100%">
                <el-input v-model="formData.data.consigneeNumber" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </template>
    </byForm>
    <div style="text-align: center; margin: 10px" v-if="!formOption.disabled">
      <el-button @click="clickCancel()" size="large">取 消</el-button>
      <el-button type="primary" @click="submitForm()" size="large" v-preReClick>提 交</el-button>
    </div>
  </el-card>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import byForm from "/src/components/byForm/index";
import useTagsViewStore from "/src/store/modules/tagsView";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const warehouseList = ref([]);
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
  disabled: false,
});
const formData = reactive({
  data: {
    type: "",
    orderExchangeDetailList: [],
    fileList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "售后详情",
      label: "",
    },
    {
      type: "slot",
      slotName: "type",
      label: "售后处理",
      itemWidth: 51,
    },
    {
      type: "select",
      label: "售后入仓",
      prop: "warehouseId",
      data: warehouseList.value,
      itemWidth: 51,
    },
    {
      type: "input",
      prop: "reason",
      label: "售后原因",
      itemType: "text",
      itemWidth: 51,
    },
    {
      type: "input",
      prop: "remark",
      label: "备注",
      itemType: "textarea",
      itemWidth: 51,
    },
    {
      type: "slot",
      slotName: "img",
      label: "商品图片",
    },
    {
      type: "title",
      title: "售后商品",
      label: "",
    },
    {
      type: "slot",
      slotName: "orderExchangeDetailList",
    },
    {
      type: "title",
      title: "地址",
      label: "",
    },
    {
      type: "slot",
      slotName: "deliveryAddress",
      label: "收货地址",
    },
    {
      type: "slot",
      slotName: "consignee",
      label: "收货人",
    },
  ];
});
const rules = ref({
  warehouseId: [{ required: true, message: "请选择仓库", trigger: "change" }],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  reason: [{ required: true, message: "请输入售后原因", trigger: "blur" }],
  province: [{ required: true, message: "请输入省", trigger: "blur" }],
  detailedAddress: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
  consignee: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  consigneeNumber: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
});
const getDemandData = () => {
  proxy.post("/warehouse/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      warehouseList.value = res.rows
        .map((item) => {
          return {
            dictKey: item.id,
            dictValue: item.name,
          };
        })
        .filter((item) => ["1684037357424099330", "1684037305712525313"].includes(item.dictKey));
    }
  });
};
getDemandData();
const fileList = ref([]);
const uploadData = ref({});
const beforeUpload = async (file) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  uploadData.value = res.uploadBody;
  file.id = res.id;
  file.fileName = res.fileName;
  file.fileUrl = res.fileUrl;
  return true;
};
const onPreview = (file) => {
  window.open(file.raw.fileUrl, "_blank");
};
const orderDetail = ref({});
onMounted(() => {
  if (route.query && route.query.orderInfoId) {
    formData.data.orderInfoId = route.query.orderInfoId;
    formData.data.type = route.query.type;
    proxy.post("/orderInfo/detail", { id: route.query.orderInfoId }).then((res) => {
      orderDetail.value = res;
      if (res.orderSkuList && res.orderSkuList.length > 0) {
        formData.data.orderExchangeDetailList = res.orderSkuList.map((item) => {
          return {
            orderSkuId: item.id,
            skuSpecCode: item.code,
            skuSpecName: item.name,
            buyQuantity: item.quantity,
            quantity: undefined,
          };
        });
      } else {
        formData.data.orderExchangeDetailList = [];
      }
    });
  } else if (route.query && route.query.id) {
    formOption.disabled = true;
    proxy.post("/orderExchange/detail", { id: route.query.id }).then((res) => {
      formData.data = res;
      proxy.post("/orderInfo/detail", { id: formData.data.orderInfoId }).then((resOrder) => {
        orderDetail.value = resOrder;
      });
      proxy.post("/fileInfo/getList", { businessIdList: [route.query.id] }).then((fileObj) => {
        if (fileObj[route.query.id] && fileObj[route.query.id].length > 0) {
          fileList.value = fileObj[route.query.id].map((item) => {
            return {
              raw: item,
              name: item.fileName,
              url: item.fileUrl,
            };
          });
        }
      });
    });
  }
});
const clickCancel = () => {
  const useTagsStore = useTagsViewStore();
  useTagsStore.delVisitedView(router.currentRoute.value);
  if (route.query && route.query.orderInfoId) {
    router.replace({
      path: "/group/order/order-management",
    });
  } else {
    router.replace({
      path: "/group/order/after-sale",
    });
  }
};
const submitForm = () => {
  proxy.$refs.submit.handleSubmit(() => {
    if (formData.data.orderExchangeDetailList && formData.data.orderExchangeDetailList.length > 0) {
      if (fileList.value && fileList.value.length > 0) {
        formData.data.fileList = fileList.value.map((item) => {
          return {
            id: item.raw.id,
            fileName: item.raw.fileName,
            fileUrl: item.raw.fileUrl,
          };
        });
      } else {
        formData.data.fileList = [];
      }
      proxy.post("/orderExchange/add", formData.data).then(() => {
        ElMessage({ message: "提交成功", type: "success" });
        clickCancel();
      });
    } else {
      return ElMessage("请添加售后商品");
    }
  });
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
