<script setup>
import { onMounted, reactive, ref } from "vue"
import border from "@/components/border.vue";
import AMapLeft from "./AMapLeft.vue";
import * as echarts from 'echarts';
import { useRoute } from "vue-router"
import { latestLogistics } from "@/api/index.js";
import { logisticsCount } from "@/api/index.js";
import { useAppStore } from "@/store/app.js"

const appStore = useAppStore();

const route = useRoute();

let noramlSize = 16;

const echartsRef = ref(null);

let datas = {
  textValue: "",
  colors: ["#31829d", "#009cff", "#4b5fdb"],
  legendArr: ["待取货", "配送中", "已送达"],
  dataArr: [
    { value: 0, name: "待取货" },
    { value: 0, name: "配送中" },
    { value: 0, name: "已送达" },
  ],
  company: "件"
};

const initEcahrts = () => {
  // 基于DOM元素初始化echarts实例
  const chart = echarts.init(echartsRef.value);

  let option = {
    backgroundColor: "rgba(0,0,0,0)",
    color: datas.colors,
    grid: {
      left: "0%",
      right: "0%",
      bottom: "0%",
      top: "0%"
    },
    graphic: {
      elements: [
        {
          type: 'text',
          left: 'center', // 相对父元素居中
          bottom: '50%',  // 相对父元素居中
          style: {
            fill: '#fff',
            text: datas.textValue,
            font: '18px Microsoft YaHei'
          }
        }
      ]
    },
    tooltip: {
      trigger: "item",
      backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
      textStyle: {
        color: '#fff'
      },
      borderColor: "rgba(18, 57, 60, .8)",
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(0, 11, 34, .4)',
        }
      },
      formatter: "{b}: {c}" + datas.company + " ({d}%)"
    },
    legend: {
      icon: "rect",
      bottom: "5%",
      left: "center",
      itemWidth: 12,
      itemHeight: 12,
      // itemGap: 50, //图例间隙
      textStyle: {
        color: "#fff",
        fontSize: noramlSize
      },
      data: datas.legendArr
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["45%", "60%"],
        center: ["50%", "45%"],
        itemStyle: {
          normal: {
            borderWidth: 10,
            borderColor: "#092846"
          }
        },
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'bottom'
        },
        labelLine: {
          normal: {
            show: true,
            lineStyle: {
              color: "#138af4"
            },
            length: 20,
            length2: 50,
          }
        },
        data: datas.dataArr
      },
      {
        type: "pie",
        radius: "40%",
        center: ["50%", "45%"],
        z: -2,
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          color: 'rgba(255,255,255,0.2)'
        },
        data: [100]
      },
    ]
  };

  // 使用配置项显示图表
  chart.setOption(option);
}

const info = ref({});
const delivery = ref({});

const loadInfo = () => {
  latestLogistics({
    areaCode: appStore.delivery_address.areaCode,
    streetCode: appStore.delivery_address.streetCode,
    courier_id: appStore.delivery_address.courier_id
  }).then(res => {
    info.value = res.data;
  })
  logisticsCount({
    areaCode: appStore.delivery_address.areaCode,
    streetCode: appStore.delivery_address.streetCode,
    courier_id: appStore.delivery_address.courier_id
  }).then(res => {
    delivery.value = res.data;
    datas.dataArr[0].value = res.data.pending_order_count;
    datas.dataArr[1].value = res.data.delivering_order_count;
    datas.dataArr[2].value = res.data.finished_order_count;
    initEcahrts();
    appStore.setDelivery(res.data);
  })
}

onMounted(() => {
  loadInfo();
})

</script>

<template>
  <border>
    <div class="box">
      <div class="title">配送详情</div>
      <div class="head-box b-box">商品信息</div>
      <div class="order_h">
        <div class="top">
          <div>
            订单编号
            <span style="margin-left: 1rem">{{ info.order_sn }}</span>
          </div>
          <div>{{ info.create_time?.split(" ")[0] }}</div>
        </div>
        <div class="line">
          <div class="c"></div>
          <div class="l"></div>
          <div class="c"></div>
        </div>
        <div class="bottom">
          <div>
            <img class="img" src="/src/assets/delivery_img/icon1.png" />
          </div>
          <div class="name">
            <div class="name1 b-box">
              <div>商户名称</div>
            </div>
            <div class="name2">
              <div>{{ info.mer_name }}</div>
            </div>
          </div>
          <div class="name">
            <div class="name1 b-box">
              <div>商品名称</div>
            </div>
            <div class="name2">
              <div>{{ info.store_name || "-" }}</div>
            </div>
          </div>
          <div>
            <img class="img" src="/src/assets/delivery_img/icon2.png" />
          </div>
        </div>
      </div>
      <div class="head-box b-box">收件人信息</div>
      <div class="order">
        <div class="bottom">
          <div>
            <img class="img" src="/src/assets/delivery_img/icon4.png" />
          </div>
          <div class="name">
            <div class="name1 b-box">
              <div>收件人</div>
            </div>
            <div class="name2">
              <div>{{ info.real_name }}</div>
            </div>
          </div>
          <div class="name">
            <div class="name1 b-box">
              <div>收件人电话</div>
            </div>
            <div class="name2">
              <div>{{ info.user_phone }}</div>
            </div>
          </div>
          <div>
            <img class="img" src="/src/assets/delivery_img/icon8.png" />
          </div>
        </div>
      </div>
      <div class="order">
        <div class="bottom">
          <div>
            <img class="img" src="/src/assets/delivery_img/icon6.png" />
          </div>
          <div class="name">
            <div class="name1 b-box">
              <div>收件地址</div>
            </div>
            <div class="name2">
              <div>{{ info.user_address }}</div>
            </div>
          </div>
          <div class="name">
            <div class="name1 b-box">
              <div>当前状态</div>
            </div>
            <div class="name2">
              <div>{{ info.status }}</div>
            </div>
          </div>
          <div>
            <img class="img" src="/src/assets/delivery_img/icon5.png" />
          </div>
        </div>
      </div>
      <div class="map">
        <AMapLeft :info="info" v-if="info.user_address"></AMapLeft>
        <div class="border"></div>
      </div>
      <div class="head-box b-box">物流信息</div>
      <div class="delivery">
        <div class="left">
          <div class="left-item">
            <img class="img" src="/src/assets/delivery_img/icon7.png" />
            <div>
              配送人员<span>{{ delivery.courier_name || "-" }}</span>
            </div>
          </div>
          <div class="left-item">
            <img class="img" src="/src/assets/delivery_img/icon3.png" />
            <div>
              配送车辆<span>{{ delivery.car_license || "-" }}</span>
            </div>
          </div>
        </div>
        <div class="right echarts" ref="echartsRef"></div>
      </div>
    </div>
  </border>
</template>

<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  padding: 1.25rem 1.25rem;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  .title {
    width: 100%;
    background-image: url(../../../assets/img/title.png);
    background-size: 100% 100%;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "ifonts";
    font-size: 1.2rem;
  }
  .head-box {
    font-size: 1.2rem;
    font-family: "ifonts";
    width: calc(100% - 1rem);
    text-align: left;
    padding: 0.5rem 0;
    padding-left: 1rem;
  }
  .order {
    width: 100%;
    background-image: url(../../../assets/delivery_img/box2.png);
    background-size: 100% 100%;
    height: 10%;
    .bottom {
      width: 90%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      .img {
        height: 4rem;
        width: 3.5rem;
      }
      .name {
        height: 60%;
        flex: 1;
        padding: 0.2rem 1.2rem;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name2 {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        div {
          margin-left: 0.4rem;
        }
      }
    }
  }
  .order_h {
    width: 100%;
    background-image: url(../../../assets/delivery_img/box3.png);
    background-size: 100% 100%;
    height: 15%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .top {
      width: 90%;
      box-sizing: border-box !important;
      padding-top: 1rem;
      display: flex;
      justify-content: space-between;
    }
    .line {
      display: flex;
      width: 90%;
      align-items: center;
      .c {
        width: 0.2rem;
        height: 0.2rem;
        background-color: #5bdbf6;
        border-radius: 50%;
      }
      .l {
        flex: 1;
        height: 0.1rem;
        background-color: #5bdbf6;
      }
    }
    .bottom {
      width: 90%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box !important;
      padding-bottom: 1rem;
      .img {
        height: 4rem;
        width: 3.5rem;
      }
      .name {
        height: 80%;
        flex: 1;
        padding: 0.2rem 1.2rem;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name2 {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        div {
          margin-left: 0.4rem;
        }
      }
    }
  }
  .map {
    height: 16%;
    width: 96%;
    margin: 0.5rem 0;
    border: 1px solid rgba(91, 219, 246, 1);
    position: relative;
    .border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
      pointer-events: none;
      overflow: hidden;
    }
  }
  .delivery {
    display: flex;
    width: 100%;
    height: 20%;
    .left {
      flex: 1;
      height: 100%;
      .left-item {
        height: 50%;
        display: flex;
        align-items: center;
        background-image: url(../../../assets/delivery_img/box1.png);
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-left: 10%;
        .img {
          height: 4rem;
          width: 3.5rem;
          margin-right: 0.5rem;
        }
        span {
          margin-left: 0.5rem;
        }
        font-size: 0.9rem;
      }
    }
    .right {
      flex: 1;
      height: 100%;
    }
  }
}
.b-box {
  background: linear-gradient(
    180deg,
    rgba(59, 74, 104, 0) 0%,
    rgba(59, 74, 104, 0.27) 50%,
    rgba(0, 168, 255, 0.4) 94%,
    rgba(0, 156, 255, 0.8) 100%
  );
}
</style>
