<template>
  <div class="order-detail wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 订单信息 -->
    <div class="cont">
      <div class="table">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column prop="name" label="商品" align="center" width="300">
            <template slot-scope="scope">
              <div class="good_info">
                <div class="l">
                  <img :src="imgUrl + scope.row.goods_image" alt />
                </div>
                <div class="r">
                  <p>{{ scope.row.goods_name }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="order_no"
            label="订单编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="num"
            label="物品数量"
            align="center"
            width="80"
          ></el-table-column>

          <el-table-column prop="point" label="实付积分" align="center" width="140">
          </el-table-column>
          <el-table-column prop="price" label="实付余额" align="center" width="140">
          </el-table-column>
          <el-table-column
            prop="order_status"
            label="订单状态"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.goods_sku_detail.type == 1">
                <div v-if="scope.row.order_status == 1">待发货</div>
                <div v-if="scope.row.order_status == 3">已发货</div>
                <div v-if="scope.row.order_status == 10">已收货</div>
              </div>
              <div v-if="scope.row.goods_sku_detail.type == 2">虚拟商品</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        class="infoBoxF"
        v-if="pointData.goods_sku_detail.type == 1 && pointData.order_status == 3"
      >
        <div class="btns">
          <div class="gl" @click="takeDelivery">确认收货</div>
        </div>
      </div>
    </div>
    <!-- 物流信息 -->
    <div class="playInfo" style="padding-bottom: 0">
      <div class="left">
        <div class="item">
          <div class="l">订单信息</div>
          <div class="r">
            <p>
              订单编号：{{ pointData.order_no }} |
              <span @click="playCopy(pointData.order_no)">复制</span>
            </p>
            <p>
              下单时间：{{
                $dayjs(pointData.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
              }}
            </p>
            <p>
              付款时间：{{
                $dayjs(pointData.pay_time * 1000).format("YYYY-MM-DD HH:mm:ss")
              }}
            </p>
          </div>
        </div>

        <!-- <div class="item">
          <div class="l">物流信息</div>
          <div class="r">
            <p>logisticsData.trace.reason</p>
          </div>
        </div> -->
      </div>
      <div class="right" v-if="pointData.goods_sku_detail.type == 1">
        <div class="item">
          <div class="l">收货信息</div>
          <div class="r">
            <p>{{ pointData.name }} {{ pointData.mobile }}</p>
            <p>{{ pointData.full_address }}{{ pointData.address }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 物流进度 -->
    <div
      class="logisticsBox"
      v-if="pointData.goods_sku_detail.type == 1 && !(pointData.order_status == 1)"
    >
      <div class="logisticsHead">
        <img class="logo" :src="imgUrl + logisticsData.company_info.logo" alt="" />
        <div class="logisticsInfo">
          <div>
            承运公司<span class="con">{{ logisticsData.company_info.company_name }}</span>
          </div>
          <div>
            快递编号
            <span class="con"
              >{{ logisticsData.logistic_code }} |
              <span @click="playCopy(logisticsData.logistic_code)">复制</span></span
            >
          </div>
        </div>
      </div>

      <el-steps direction="vertical" :active="0" :space="100">
        <el-step
          v-for="(v, i) in logisticsList"
          :key="i"
          :title="v.remark"
          :description="v.datetime"
        ></el-step>
      </el-steps>
    </div>
  </div>
</template>
<script>
import Setting from "~/setting";
export default {
  auth: false,
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      imgUrl: Setting.uplodBaseURL,
      tableData: [],
      pointData: {
        goods_sku_detail: {},
      },
      order_id: undefined,
      logisticsData: {
        company_info: {
          logo: "",
        },
      },
      logisticsList: [],
    };
  },
  mounted() {
    this.order_id = this.$route.query.order_id;
    this.getPointData();
    this.getPointLogistics();
  },
  methods: {
    getPointData() {
      let obj = {
        order_id: this.order_id,
      };
      this.$axios
        .post(`/goodsexchange/getExchangeOrderDetail`, obj)
        .then((res) => {
          this.tableData.push(res.data);
          this.pointData = res.data;
          console.log(this.pointData);
        })
        .catch((err) => {});
    },
    // 复制
    playCopy(v) {
      let url = v; //拿到想要复制的值
      let copyInput = document.createElement("input"); //创建input元素
      document.body.appendChild(copyInput); //向页面底部追加输入框
      copyInput.setAttribute("value", url); //添加属性，将url赋值给input元素的value属性
      copyInput.select(); //选择input元素
      document.execCommand("Copy"); //执行复制命令
      this.$message.success("复制成功"); //弹出提示信息，不同组件可能存在写法不同
      //复制之后再删除元素，否则无法成功赋值
      copyInput.remove(); //删除动态创建的节点
    },

    getPointLogistics() {
      let obj = {
        order_id: this.order_id,
      };
      this.$axios
        .post(`/goodsexchange/package`, obj)
        .then((res) => {
          this.logisticsData = res.data;
          this.logisticsList = res.data.list;
          console.log(this.logisticsData);
        })
        .catch((err) => {});
    },
    takeDelivery() {
      let obj = {
        order_id: this.order_id,
      };
      this.$axios
        .post(`/goodsexchange/takeDelivery`, obj)
        .then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.$router.push({ path: "/order" });
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.order-detail {
  .crumbs {
    margin: 20px 0;
  }
  .cont {
    background: #ffffff;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
    .table {
      .good_info {
        display: flex;
        .l {
          width: 100px;
          height: 100px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .r {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20px;
          p {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #222222;
            text-align: left;
            line-height: 100px;
          }
          span {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #585858;
            text-align: left;
          }
        }
      }
    }
    .infoBoxF {
      margin-top: 30px;
      display: flex;
      flex-direction: row-reverse;
      div {
        width: 80px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        // margin-left: 15px;
        cursor: pointer;
      }
      .gl {
        background: var(--themeColor);
        color: #ffffff;
      }
    }
  }
  .playInfo {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
    .left,
    .right {
      width: 50%;
      .item {
        display: flex;
        margin-bottom: 20px;
        .l {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #585858;
        }
        .r {
          margin-left: 70px;

          p {
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #222222;
            margin-bottom: 15px;
            span {
              // color: #0094f9;
              color: var(--themeColor);

              cursor: pointer;
            }
          }
          p:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .logisticsBox {
    background: #ffffff;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
    .logisticsHead {
      width: 100%;
      display: flex;
      margin-bottom: 20px;
      .logo {
        width: 80px;
        height: 80px;
      }
      .logisticsInfo {
        margin: 0 40px;
        div {
          height: 40px;
          line-height: 40px;
          .con {
            margin-left: 30px;
            span {
              color: var(--themeColor);
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
