<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="60%"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <div v-if="formData.order_id">
        <el-form ref="formRef" :model="formData" label-width="84px">
          <el-col>
            <el-row>
              <el-col :span="24" style="font-weight: 700"
                >订单号: &nbsp;&nbsp;{{ formData.order_sn }}</el-col
              >
            </el-row>
            <p class="tit">用户信息</p>
            <el-row>
              <el-col :span="12"
                >下单用户名称: &nbsp;&nbsp;{{ formData.user_name }}</el-col
              >
              <el-col :span="12"
                >下单用户联系方式:&nbsp;&nbsp;{{ formData.user_phone }}</el-col
              >
            </el-row>
            <p class="tit">收货人信息</p>
            <el-row>
              <el-col :span="6"
                >姓名: &nbsp;&nbsp;{{ formData.receiver_name }}</el-col
              >
              <el-col :span="6"
                >联系方式:&nbsp;&nbsp;{{ formData.receiver_phone }}</el-col
              >
              <el-col :span="12"
                >收货地址: &nbsp;&nbsp;{{ formData.receiver_address }}</el-col
              >
            </el-row>
            <p class="tit">商家信息</p>
            <el-row>
              <el-col :span="6"
                >名称: &nbsp;&nbsp;{{ formData.shop_name }}</el-col
              >
              <el-col :span="6"
                >联系方式:&nbsp;&nbsp;{{ formData.shop_phone }}</el-col
              >
              <el-col :span="12"
                >商家地址: &nbsp;&nbsp;{{ formData.shop_address }}</el-col
              >
            </el-row>
            <p class="tit">商品信息</p>
            <el-row>
              <el-col>
                <el-table :data="formData.product" stripe style="width: 100%">
                  <el-table-column prop="date" label="商品信息" width="400">
                    <template #default="{ row }">
                      <div class="products_info">
                        <div class="pro_img">
                          <img :src="row.goods_pic" alt="" />
                        </div>
                        &nbsp;
                        <div>
                          <div class="pro_info">
                            <p>{{ row.goods_name }}</p>
                            <p>规格:{{ row.goods_sku || "默认" }}</p>
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="goods_price" label="售价(元)" />
                  <el-table-column prop="number" label="购买数量">
                    <template #default="{ row }">
                      X {{ row.product_num }}{{ row.goods_unit }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="goods_total_price"
                    label="实付金额(元)"
                  />
                </el-table>
              </el-col>
            </el-row>
            <p class="tit">订单状态</p>
            <el-row>
              <el-col :sapn="24" style="padding: 0 10vw">
                <el-steps
                  :active="formData.records.length"
                  finish-status="success"
                >
                  <el-step
                    :title="formData.records[0].content"
                    :description="formData.records[0].create_time"
                  />

                  <el-step
                    v-if="formData.records.length > 1"
                    :title="formData.records[1].content"
                    :status="formData.status == 3 ? 'error' : 'success'"
                    :description="formData.records[1].create_time"
                  />
                  <el-step v-else title="等待揽件" />
                  <el-step
                    v-if="formData.records.length > 2"
                    :title="formData.records[2].content"
                    :description="formData.records[2].create_time"
                  />
                  <el-step v-else title="等待送达" />
                </el-steps>
              </el-col>
            </el-row>
            <p class="tit">配送员</p>
            <el-row>
              <el-col :span="6"
                >姓名: &nbsp;&nbsp;{{ formData.courier_name }}</el-col
              >
              <el-col :span="6"
                >联系方式: &nbsp;&nbsp; &nbsp;&nbsp;{{
                  formData.courier_phone
                }}</el-col
              >
              <el-col :span="12"
                >所属公司: &nbsp;&nbsp;{{ formData.courier_company }}</el-col
              >
            </el-row>
          </el-col>
        </el-form>
      </div>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import Popup from "@/components/popup/index.vue";
import { reactive, ref } from "vue";
import { orderDetil } from "@/api/logistics";

const emit = defineEmits(["success", "close"]);
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const popupTitle = computed(() => {
  return "订单详情";
});

//订单
const formData = reactive({
  id: 2,
  order_id: 432,
  order_sn: "wxo1691996422145222521",
  status: 0,
  user_id: 180,
  user_name: "132****3626",
  user_phone: "13228223626",
  courier_id: 227,
  courier_name: "冉琳",
  courier_phone: "13228223626",
  courier_company: "泸州市海之光商贸有限公司",
  shop_id: 15,
  shop_name: "美好超市",
  shop_user: "小美好",
  shop_phone: "13228223626",
  shop_address: "泸州市江阳区通滩镇通滩社区186号",
  shop_long: "",
  shop_lat: "",
  receiver_name: "段艺",
  receiver_phone: "13228223626",
  receiver_address: "四川省泸州市江阳区通滩镇通滩社区3队65号",
  receiver_take_code: 0,
  create_time: "2023-08-14 17:50:36",
  update_time: "2023-08-14 17:50:36",
  delete_time: 0,
  qh_time: "0",
  ps_time: "0",
  qx_time: "0",
  status_name: "待取货",
  product: [
    {
      product_num: 1,
      goods_name:
        "舒肤佳沐浴露纯白清香型柠檬清新型沐浴露芦荟呵护留香中性温和男女通用 柠檬清爽720g",
      goods_unit: "件",
      goods_pic:
        "http:\/\/lihai001.oss-cn-chengdu.aliyuncs.com\/copy\/f89fd2b2660fbd160339b3bf004770dd.jpg",
      goods_price: "19.80",
      goods_sku: "",
      goods_total_price: 19.8,
    },
  ],
  records: [
    {
      content: "用户132****3626已提交订单",
      create_time: "2023-08-14 17:50:36",
    },
    {
      content: "配送员weiz已提取商品",
      create_time: "2023-08-11 15:53:38",
    },
    {
      content: "用户191****8640用户提交订单",
      create_time: "2023-08-11 15:52:28",
    },
  ],
});

//
const open = async (id: number) => {
  popupRef.value?.open();
  let res = await orderDetil({ id });
  Object.keys(formData).forEach((key) => {
    //@ts-ignore
    formData[key] = res[key];
  });
  console.log(formData.records);
};

const handleSubmit = async () => {
  emit("close");
};
const handleClose = () => {
  emit("close");
};
defineExpose({
  open,
});
</script>

<style lang="scss">
.tit {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}
.products_info {
  display: flex;
  .pro_img {
    width: 5vw;
    height: auto;
  }
  .pro_info {
    display: flex;

    flex-direction: column;
  }
}
</style>
