<template>
  <!-- 订单分析 -->
  <div class="page flex-col">
    <s-header :name="'订单分析'" :noback="false"></s-header>
    <div class="Body flex-col">
      <div class="mod3 flex-col">
        <div class="group1 flex-col">
          <div class="titleBox flex-col">
            <div class="layer2 flex-row">
              <div class="section5 flex-col"></div>
              <div class="TextGroup2 flex-col">
                <span class="txt4">数据概览</span>
              </div>
            </div>
          </div>
          <div class="dateSelectBox">
            <dateSelectList @update="update($event)"></dateSelectList>
          </div>
          <div class="mod6 flex-row justify-between">
            <span class="info5">分组类型:</span>
            <div class="wrap1 flex-col justify-between">
              <div class="layer1 flex-row justify-between">
                <span class="word7">商户</span> <span class="word8">设备</span>
              </div>
              <div class="layer2 flex-col">
                <div class="group3 flex-col"></div>
              </div>
            </div>
          </div>
          <div class="mod7 flex-col">
            <div class="box1 flex-col justify-between">
              <div class="group4 flex-row">
                <div class="ImageText2 flex-col">
                  <div class="mod8 flex-row justify-between">
                    <div class="group5 flex-col"></div>
                    <div class="TextGroup2 flex-col">
                      <span class="txt1">订单明细</span>
                    </div>
                  </div>
                </div>
                <span class="info6">点击筛选</span>
                <div class="outer4 flex-col"></div>
                <div class="ImageText3 flex-col" @click="exportOrder()">
                  <div class="outer5 flex-row justify-between">
                    <div class="TextGroup3 flex-col">
                      <span class="txt2">导出excel</span>
                    </div>
                    <div class="box2 flex-col"></div>
                  </div>
                </div>
              </div>
              <img
                class="img2"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
              />
            </div>
          </div>
          <div v-for="(item, index) in list" :key="index" class="orderItem">
            <div class="mod9 flex-row">
              <span class="info7">&yen;</span>
              <span class="info8">{{item.priceTotal}}</span>
              <span class="word9">总销售额</span>
            </div>
            <div class="mod10 flex-row justify-between">
              <span class="txt3">{{item.username}}</span>
              <span class="txt4">{{item.name}},{{item.phone}}</span>
            </div>
            <span class="info9">{{item.address}}</span>
            <div class="mod11 flex-col">
              <span class="txt5">1台机器，所属上级：GDAE098</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>
<script>
import { getOrderList } from "@/service/orderExport";
import { onMounted, reactive, toRefs, ref } from "vue";
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { Toast } from "vant";
import { getLoginUser } from "@/common/js/utils";
import dateSelectList from "@/components/dateSelectList";
import dateUtil from "@/utils/dateUtil";

export default {
  name: 'orderExport',
  components: { sHeader, navBar, dateSelectList },
  setup() {
    const list = ref([]);
    let searchParams = reactive({
      type: "0", // 分组类型
      clientId: "", // 设备编号
      username: "",
      startDate: "2022/08/14 23:59:59",
      endDate: "2022/08/17 23:59:59",
      current: 1,
      size: 20
    });
    // 初始化页面获取列表
    onMounted(async () => {
      list.value = [];
      const user = getLoginUser();
      if (user) {
        searchParams.username = user.username;
        getList();
      }
    });
    // 获取设备列表数据
    const getList = async () => {
      const { data } = await getOrderList(Object.assign({}, searchParams));
      console.log(data);
      if (data) {
        // 列表值叠加
        list.value = data.OrderDaoChuDTOList;
      } else {
        Toast.fail(data.message);
      }
    };
    // 搜索点击
    const searchClick = () => { console.log("searchClick"); };
    const search = () => { getList(); }
    // 今日、明日、本周、本月、其他时间选择回调
    const update = (uDate) => {
      searchParams = Object.assign(searchParams, uDate);
      searchParams.startDate = dateUtil.formateDate(new Date(searchParams.startDate), 'yyyy/MM/dd hh:mm:ss');
      searchParams.endDate = dateUtil.formateDate(new Date(searchParams.endDate), 'yyyy/MM/dd hh:mm:ss');
      search();
    };
    const exportOrder = () => { console.log('exportOrder') }
    return {
      ...toRefs(searchParams),
      searchClick,
      update,
      list,
      exportOrder
    };
  }
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";
.page {
  background-color: #fff;
  position: relative;
  width: 375px;
  height: 946px;
  overflow: hidden;
  .Body {
    z-index: 22;
    position: relative;
    width: 375px;
    height: 881px;
    margin-bottom: 1px;
    overflow-y: auto;
    .mod3 {
      background-color: rgba(255, 255, 255, 1);
      z-index: 22;
      width: 375px;
      position: absolute;
      left: 0;
      top: 1px;
      .group1 {
        width: 375px;
        .titleBox {
          width: 100%;
          height: 16px;
          margin: 23px 0;

          .layer2 {
            width: 100%;
            height: 16px;

            .section5 {
              width: 14px;
              height: 16px;
              background: url("../../assets/home/titleIcon.png") top center
                no-repeat;
              background-size: 100%;
              margin-left: 15px;
            }

            .TextGroup2 {
              width: 56px;
              height: 14px;

              .txt4 {
                width: 56px;
                height: 14px;
                margin-left: 8px;
                overflow-wrap: break-word;
                color: rgba(64, 77, 116, 1);
                font-size: 14px;
                font-family: PingFangSC-Semibold;
                text-align: left;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
            }
          }
        }
        .dateSelectBox {
          padding-top: 20px;
          background: url("../../assets/home/line.png") top center no-repeat;
          background-size: 100% auto;
        }
        .mod6 {
          width: 345px;
          height: 21px;
          margin: 24px 0 0 15px;
          .info5 {
            width: 56px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            margin-top: 8px;
            display: block;
          }
          .wrap1 {
            width: 279px;
            height: 21px;
            .layer1 {
              width: 128px;
              height: 13px;
              margin-left: 58px;
              .word7 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(77, 106, 221, 1);
                font-size: 14px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
              .word8 {
                width: 28px;
                height: 13px;
                overflow-wrap: break-word;
                color: rgba(135, 135, 166, 1);
                font-size: 14px;
                text-align: center;
                white-space: nowrap;
                line-height: 14px;
                display: block;
              }
            }
            .layer2 {
              background-color: rgba(185, 186, 208, 1);
              z-index: 37;
              position: relative;
              width: 279px;
              height: 1px;
              margin-top: 7px;
              .group3 {
                background-color: rgba(77, 106, 221, 1);
                border-radius: 1px;
                z-index: 38;
                position: absolute;
                left: 49px;
                top: -1px;
                width: 40px;
                height: 2px;
              }
            }
          }
        }
        .mod7 {
          background-color: rgba(255, 255, 255, 1);
          height: 54px;
          margin-top: 20px;
          width: 375px;
          .box1 {
            width: 375px;
            height: 37px;
            margin-top: 17px;
            .group4 {
              width: 339px;
              height: 19px;
              margin-left: 19px;
              .ImageText2 {
                height: 18px;
                width: 79px;
                .mod8 {
                  width: 79px;
                  height: 18px;
                  .group5 {
                    width: 16px;
                    height: 18px;
                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6eab9bb59f4e323434f0d4ea3d3c086c0609bf09fb931e0f032488e88a0ebc56) -1px -1px
                      no-repeat;
                  }
                  .TextGroup2 {
                    height: 14px;
                    margin-top: 3px;
                    width: 56px;
                    .txt1 {
                      width: 56px;
                      height: 14px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 14px;
                      font-family: PingFangSC-Semibold;
                      text-align: left;
                      white-space: nowrap;
                      line-height: 14px;
                      display: block;
                    }
                  }
                }
              }
              .info6 {
                width: 48px;
                height: 17px;
                overflow-wrap: break-word;
                color: rgba(77, 106, 221, 1);
                font-size: 12px;
                text-align: center;
                white-space: nowrap;
                line-height: 17px;
                display: block;
                margin: 2px 0 0 116px;
              }
              .outer4 {
                width: 8px;
                height: 10px;
                border: 0.5px solid rgba(64, 77, 116, 0.5);
                background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/00f00922125d4b6db68281b49e809d40_mergeImage.png)
                  100% no-repeat;
                margin: 6px 0 0 6px;
              }
              .ImageText3 {
                height: 17px;
                width: 64px;
                margin: 2px 0 0 18px;
                .outer5 {
                  width: 64px;
                  height: 17px;
                  .TextGroup3 {
                    height: 17px;
                    width: 53px;
                    .txt2 {
                      width: 53px;
                      height: 17px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 12px;
                      text-align: center;
                      white-space: nowrap;
                      line-height: 17px;
                      display: block;
                    }
                  }
                  .box2 {
                    width: 8px;
                    height: 10px;
                    border: 0.5px solid rgba(64, 77, 116, 0.5);
                    background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a9b114750dad43f18e4b3016eb7c4e8f_mergeImage.png)
                      100% no-repeat;
                    margin-top: 4px;
                  }
                }
              }
            }
            .img2 {
              width: 375px;
              height: 2px;
              margin-top: 16px;
            }
          }
        }
        .orderItem {
          background: url("../../assets/home/line.png") bottom center no-repeat;
          background-size: 100% auto;
        }
        .mod9 {
          width: 135px;
          height: 30px;
          margin: 20px 0 0 16px;
          .info7 {
            width: 14px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 14px;
            font-family: PingFangSC-Semibold;
            text-align: center;
            white-space: nowrap;
            line-height: 20px;
            margin-top: 8px;
            display: block;
          }
          .info8 {
            width: 49px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
          .word9 {
            width: 52px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 10px 0 0 20px;
          }
        }
        .mod10 {
          width: 255px;
          height: 13px;
          margin: 10px 0 0 15px;
          .txt3 {
            width: 72px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            display: block;
          }
          .txt4 {
            width: 166px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            line-height: 14px;
            display: block;
          }
        }
        .info9 {
          width: 302px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 10px 0 0 15px;
        }
        .mod11 {
          background-color: rgba(246, 247, 252, 1);
          border-radius: 1px;
          height: 29px;
          width: 345px;
          margin: 15px 0 0 15px;
          margin-bottom: 15px;
          .txt5 {
            width: 168px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 8px 0 0 10px;
          }
        }
      }
    }
  }
}
</style>
