<template>
  <div class="app-container customer-control">
    <el-dialog
      v-model="dialogVisible"
      title="退货/退款"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        :label-position="labelPosition"
        label-width="130px"
        :model="formLabelAlign"
        style="max-width: 1000px"
      >
        <el-form-item
          v-if="refundState == '2'"
          label="拒绝原因"
          prop="rejectReason"
          :rules="[{ required: true, message: '请输入拒绝原因' }]"
        >
          <el-input type="textarea" v-model="rejectReason" />
        </el-form-item>
        <el-form-item
          v-if="refundState == '1'"
          label="退款金额"
          prop="refundPrice"
          :rules="[{ required: true, message: '请输入退款金额' }]"
        >
          <el-input type="number" v-model="refundPrice" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit()"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <div class="container-custom">
      <!-- 表格 -->
      <div class="table-cont">
        <!-- <el-table :data="tableData" style="width: 100%">
          <el-table-column property="productId" label="商品ID" width="100" />
          <el-table-column
            property="productName"
            label="商品名称"
            width="300"
          />
          <el-table-column label="图片" width="">
            <template #default="scope">
              <div class="tree-goods-subOrder-image">
                <img
                  style="width: 60px; height: 60px"
                  :src="scope.row.productImage"
                  alt=""
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="购买数量" width="">
            <template #default="scope">{{ scope.row.quantity }}</template>
          </el-table-column>
          <el-table-column label="商品单价" width="">
            <template #default="scope">{{ scope.row.unitPrice }}</template>
          </el-table-column>
          <el-table-column label="规格" width="">
            <template #default="scope">{{ scope.row.unit }}</template>
          </el-table-column>
          <el-table-column label="商品总价" width="">
            <template #default="scope">{{ scope.row.subtotalAmount }}</template>
          </el-table-column>
        </el-table> -->
        <div class="order-list-warp">
          <div class="order-list-warp-left">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-top: 20px;
              "
            >
              <el-icon size="30"><LocationFilled /></el-icon>
              <div class="order-list-warp-left-address">
                <div>{{ detailsData.receiverAddress }}</div>
                <div>
                  {{ detailsData.receiverName }} {{ detailsData.receiverPhone }}
                </div>
              </div>
            </div>
            <div class="order-list-warp-left-title">商品信息</div>
            <div
              v-for="(item, index) in detailsData.orderItemInfos"
              :key="item.id"
              class="order-list-warp-left-goods"
            >
              <div class="order-list-warp-left-goods-list">
                <img
                  style="width: 100px; height: 100px"
                  :src="item.productImage"
                  alt=""
                />
                <div class="order-list-warp-left-goods-list-info">
                  <div class="order-list-warp-left-goods-list-info-title">
                    {{ item.productName }}
                  </div>
                  <div class="order-list-warp-left-goods-list-info-info">
                    {{ item.unitPrice }}元/{{ item.unit }}
                  </div>
                </div>
              </div>
              <div>
                <div
                  style="
                    color: #25bf82;
                    font-size: 15px;
                    width: 100px;
                    text-align: right;
                  "
                >
                  ￥{{ item.subtotalAmount }}
                </div>
                <div
                  style="
                    font-size: 15px;
                    color: #999999;
                    width: 100px;
                    text-align: right;
                  "
                >
                  x{{ item.quantity }}
                </div>
              </div>
            </div>
          </div>
          <div class="order-list-warp-right">
            <div style="margin-top: 20px">
              <div
                style="
                  width: 100%;
                  text-align: left;
                  font-size: 18px;
                  font-weight: bold;
                "
              >
                订单详情<text
                  style="
                    color: #409eff;
                    font-size: 20px;
                    font-weight: bold;
                    margin-left: 20px;
                  "
                  >{{
                    detailsData.orderStatus == "1"
                      ? "待支付"
                      : detailsData.orderStatus == "2" ||
                        detailsData.orderStatus == "3"
                      ? "待发货"
                      : detailsData.orderStatus == "4" ||
                        detailsData.orderStatus == "5"
                      ? "已发货"
                      : detailsData.orderStatus == "6"
                      ? "已收货"
                      : detailsData.orderStatus == "7"
                      ? "已取消"
                      : detailsData.orderStatus == "8"
                      ? "已完成"
                      : detailsData.orderStatus == "10"
                      ? "退款中"
                      : ""
                  }}
                </text>
              </div>
              <div class="order-list-warp-right-list">
                <div>订单编号</div>
                <div style="color: #000000">{{ detailsData.orderNo }}</div>
              </div>
              <div class="order-list-warp-right-list">
                <div>订单备注</div>
                <div style="color: #000000">
                  {{ detailsData.orderNote ?? "暂无备注" }}
                </div>
              </div>
              <div class="order-list-warp-right-list">
                <div>商品总数</div>
                <div style="color: #000000">
                  {{ detailsData.totalQuantity }}
                </div>
              </div>
              <div
                v-if="
                  detailsData.orderStatus == '10' ||
                  detailsData.orderStatus == '11'
                "
                class="order-list-warp-right-list"
              >
                <div>退款理由</div>
                <div style="color: #000000">
                  {{ detailsData.totalQuantity }}
                </div>
              </div>
              <div
                v-if="
                  detailsData.orderStatus == '10' ||
                  detailsData.orderStatus == '11'
                "
                class="order-list-warp-right-list"
              >
                <div>退款描述</div>
                <div style="color: #000000">
                  {{ detailsData.totalQuantity }}
                </div>
              </div>
              <div class="order-list-warp-right-list">
                <div>创建时间</div>
                <div style="color: #999999">{{ detailsData.createTime }}</div>
              </div>
              <div
                v-if="detailsData.paymentTime"
                class="order-list-warp-right-list"
              >
                <div>付款时间</div>
                <div style="color: #999999">{{ detailsData.paymentTime }}</div>
              </div>
            </div>
            <div v-if="detailsData.orderStatus != '1'" style="margin-top: 30px">
              <div
                style="
                  width: 100%;
                  text-align: left;
                  font-size: 18px;
                  font-weight: bold;
                "
              >
                付款信息
              </div>
              <div class="order-list-warp-right-list">
                <div>商品总价</div>
                <div style="color: #000000">
                  ￥{{ detailsData.totalAmount }}
                </div>
              </div>
              <div class="order-list-warp-right-list">
                <div>运费</div>
                <div style="color: #000000">
                  ￥{{ detailsData.totalShipFee }}
                </div>
              </div>
              <div class="order-list-warp-right-list">
                <div>优惠金额</div>
                <div style="color: #999999">
                  ￥{{ detailsData.discountAmount }}
                </div>
              </div>
              <div class="order-list-warp-right-list">
                <div>实付金额</div>
                <div style="color: #999999">
                  ￥{{ detailsData.payableAmount }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            padding: 20px;
          "
        >
          <div
            v-if="detailsData.orderStatus == '10'"
            class="button-bottom"
            @click="agree('同意')"
          >
            同意退款
          </div>
          <div
            v-if="detailsData.orderStatus == '10'"
            class="button-bottoms"
            @click="refuse('拒绝')"
          > 
            拒绝退款
          </div>
          <!-- <div class="button-bottoms" @click="reAddress()">修改地址</div>
          <div
            v-if="
              detailsData.orderStatus == '2' ||
              detailsData.orderStatus == '3' ||
              detailsData.orderStatus == '4' ||
              detailsData.orderStatus == '5'
            "
            class="button-bottoms"
            @click="refund()"
          >
            退货/退款
          </div>
          <div
            v-if="detailsData.orderStatus == '1'"
            class="button-bottoms"
            @click="doCancel"
          >
            取消订单
          </div> -->
          <!-- <div class="button-bottoms">打印订单</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
import {
  createLogisticOrder,
  orderDetails,
  refund,
} from "../../api/order/list";
import { useRoute, useRouter } from "vue-router";
import { watch } from "vue";
const route = useRoute();
const router = useRouter();
const tableData = ref([]);
const detailsData = ref({});
const dialogVisible = ref(false);
const refundPrice = ref(null);
const rejectReason = ref("");
const refundState = ref(1);

watch(
  () => route.query.data,
  (newSearch) => {
    if (route.query.data) {
      getOrderDetails();
    }
  }
);

onMounted(() => {
  //   console.log(JSON.parse(route.query.data));
  //   tableData.value = JSON.parse(route.query.data).orderItemInfos;
  getOrderDetails();
});

const getOrderDetails = async () => {
  let response = await orderDetails({ id: route.query.data });
  if (response.code == 200) {
    tableData.value = response.data.records[0].orderItemInfos;
    detailsData.value = response.data.records[0];
    //   tableTotal.value = response.data.total;
  }
};

const inputData = reactive([
  {
    content: "",
  },
]);

let list = ref([]);

const options = [
  {
    label: "申通快递",
    value: "shentong",
  },
  {
    label: "韵达快递",
    value: "yunda",
  },
  {
    label: "京东快递",
    value: "jd",
  },
];
let optionsValue = ref("申通快递");

const column = ref([
  { prop: "goodId", label: "ID", width: "150" },
  {
    prop: "productImage",
    label: "商品图片",
    width: "150",
  },
  { prop: "productName", label: "商品名称", width: "150" },
  { prop: "goodPrice", label: "商品单价", width: "150" },
  { prop: "salesVolume", label: "购买数量", width: "150" },
  { prop: "pageView", label: "订单总价", width: "150" },
  { prop: "stock", label: "子订单数量", width: "150" },
  { prop: "isListed", label: "状态", width: "150" },
  { prop: "action", label: "操作", slotName: "action" },
]);

const addInput = () => {
  inputData.push({
    content: "",
  });
};

const deleteList = (index) => {
  inputData.splice(index, 1);
};

const agree = () => {
  refundState.value = "1";
  dialogVisible.value = true;
};

const refuse = () => {
  refundState.value = "2";
  dialogVisible.value = true;
};

const submit = () => {
  refund(
    refundState.value == "1"
      ? {
          id: detailsData.value.id,
          approveStatus: refundState.value,
          refundAmount: refundPrice.value,
        }
      : {
          id: detailsData.value.id,
          approveStatus: refundState.value,
          refuseReason: rejectReason.value,
        }
  ).then((res) => {
    dialogVisible.value = false;
    getOrderDetails();
  });
};

const send = async () => {};
</script>
<style lang="scss" scoped>
.order-list-warp {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  width: 100%;
  .order-list-warp-left {
    width: 50%;
    height: 60vh;
    .order-list-warp-left-title {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      text-align: left;
    }
    .order-list-warp-left-goods {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .order-list-warp-left-goods-list {
        display: flex;
        .order-list-warp-left-goods-list-info {
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          height: 100px;
          .order-list-warp-left-goods-list-info-title {
            text-align: left;
            width: 300px;
            font-size: 15px;
          }
          .order-list-warp-left-goods-list-info-info {
            margin-top: 10px;
            text-align: left;
            width: 300px;
            font-size: 12px;
            color: #999999;
          }
        }
      }
    }
    .order-list-warp-left-address {
      font-size: 15px;
      text-align: start;
      margin-left: 15px;
    }
  }
  .order-list-warp-right {
    width: 40%;
    height: 60vh;
    .order-list-warp-right-list {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        font-size: 14px;
        color: #999999;
      }
    }
  }
}

.button-bottom {
  text-align: center;
  cursor: pointer;
  width: 100px;
  border-radius: 10px;
  height: 40px;
  color: #fff;
  line-height: 40px;
  font-size: 15px;
  font-weight: bold;
  background-color: #409eff;
}
.button-bottoms {
  text-align: center;
  cursor: pointer;
  margin-left: 20px;
  width: 100px;
  border-radius: 10px;
  height: 40px;
  color: #000000;
  line-height: 40px;
  font-size: 15px;
  background-color: #ffffff;
  border: 1px solid #707070;
}
.select-send {
  padding: 5px 10px;
  margin-top: 10px;
  width: 100%;
  background-color: #fff;
}
.tree-goods-subOrder-image {
  width: 135px;
  height: 60px;
}
.table-cont {
  background-color: #f5f5f5 !important;
}
.sendGoods {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 10px 10px 30px 10px;
}
.logistics {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.address {
  width: 100%;
  background-color: #fff;
  font-size: 15px;
  color: #000000;
  margin: 20px 0px;
  padding: 20px 10px;
}
.send-button {
  text-align: center;
  width: 60px;
  height: 25px;
  line-height: 25px;
  border-radius: 5px;
  font-size: 15px;
  color: #fff;
  background-color: #409eff;
  cursor: pointer;
}
.tree-goods {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-left: 300px;
  align-items: center;
  .sendGoods {
    margin-left: 15px;
    padding: 5px 10px;
    background-color: #409eff;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .tree-goods-subOrder {
    // display: flex;
    // width: 1510px;
    height: 60px;
    .tree-goods-subOrder-list {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .tree-goods-subOrder-image {
        width: 135px;
        height: 60px;
      }
      .tree-goods-subOrder-name {
        width: 150px;
        height: 60px;
        line-height: 60px;
        padding: 0 15px;
      }
    }
  }
}
.table-toolbar {
  width: 300px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: end;
  padding: 14px 16px 0 0;
}
</style>
