<template>
  <!-- 订单分析 -->
  <div class="page flex-col">
    <s-header :name="$t('orderExport.orderAnalysis')" :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">{{ $t("orderExport.dataOverview") }}</span>
              </div>
            </div>
          </div>
          <div class="dateSelectBox">
            <dateSelectList @update="update($event)"></dateSelectList>
          </div>
          <div class="l-f l-flex-e o-plr-15">
            <span class="o-mr-6 c-text-13 c-text-color">{{ $t("orderExport.groupType") }}:</span>
            <kTabs @tabchg="tabChg" :tabList="tabList"></kTabs>
          </div>
          <div class="mod7 flex-col">
            <div class="box1 flex-col justify-between">
              <div class="group4 l-flex-between">
                <div class="ImageText2 l-flex-RC">
                  <div class="mod8 l-flex-RC">
                    <div class="group5 flex-col"></div>
                    <div class="TextGroup2 flex-col">
                      <span class="txt1 c-text-w6">{{
                          $t("orderExport.orderDetails")
                      }}</span>
                    </div>
                  </div>
                </div>
                <div class="l-flex-RC">
                  <div class="c-text-13 l-flex-RC" style="color:#4D6ADD;">
                    <span @click="noticeClk" class="">{{
                        $t("orderExport.clickFilter")
                    }}</span>
                    <div class="outer4 flex-col o-ml-6"></div>
                  </div>
                  <div @click="exportOrder()" class="c-text-13 l-flex-RC o-ml-20 c-text-color">
                    <span class="">{{
                        $t("orderExport.exportToExcel")
                    }}</span>
                    <div class="outer4 flex-col o-ml-6"></div>
                  </div>
                </div>
              </div>
              <img class="img2" referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a" />
            </div>
          </div>
          <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" :finished-text="$t('common.noMoreTxt')" @load="onLoad"
              :offset="300" :immediate-check="false">
              <div v-for="(item, index) in tableData" :key="index" class="orderItem">
                <div class="mod9 flex-row">
                  <span class="info7">&yen;</span>
                  <span class="info8">{{ item.priceTotal }}</span>
                  <span class="word9">{{ $t("orderExport.totalSales") }}</span>
                </div>
                <div class="mod10 flex-row">
                  <span class="txt3 o-mr-10">{{ item.username }}</span>
                  <span class="txt4 c-text-line1">{{ item.name }},{{ item.phone }}</span>
                </div>
                <span class="info9">{{ item.address }}</span>
                <div class="mod11 flex-col">
                  <span v-if="type == 2" class="txt5">{{ item.equipmentTotal }}{{ $t("orderExport.machines") }}，{{
                      $t("orderExport.superior")
                  }}：{{ item.lastUsername }}</span>
                  <div v-else class="txt5 l-flex-RC">
                    <div>{{ item.equipmentType }}</div>
                    <div class="lineCon o-mlr-6"></div>
                    <div>{{ item.clientId }}</div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
    <!-- 筛选弹窗 -->
    <kDialog :dialogTitle="$t('orderExport.searchPop.title')" :cancelBtnTxt="$t('orderExport.searchPop.clearFilter')"
      :confirmBtnTxt="$t('orderExport.searchPop.filter')" ref="kDialogRef" @confirmclk="confirmClk"
      :isCloseForCancel="false" @cancelclk="cancelClk">
      <template #content>
        <div class="cust_vantBorder">
          <van-field clearable v-model="searchForm.orderNo" :placeholder="$t('orderExport.searchPop.orderNoPlace')"
            :label="$t('orderExport.searchPop.orderNo')" />
          <van-field clearable v-model="searchForm.busiName" :placeholder="$t('orderExport.searchPop.busiNamePlace')"
            :label="$t('orderExport.searchPop.busiName')" />
          <van-field @click-input="changeTypeInpClk" readonly clearable v-model="searchForm.ifForeignName"
            :placeholder="$t('orderExport.searchPop.mainOverPlace')" :label="$t('orderExport.searchPop.mainOver')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.ifForeignName" @click="
  searchForm.ifForeignName = '';
searchForm.ifForeign = '';
                " class="o-mr-6" name="clear" />
                <van-icon @click="changeTypeInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field>
        </div>
      </template>
    </kDialog>
    <!-- 大陆或海外弹窗 -->
    <van-popup v-model:show="changeTypeShow" position="bottom">
      <van-picker :title="$t('orderExport.searchPop.mainOverPlace')" :columns="changeTypePopList"
        :columns-field-names="changeTypePopFieldName" @confirm="changeTypePopConfirm"
        @cancel="changeTypeShow = false" />
    </van-popup>
  </div>
</template>
<script>
import { getOrderList, Api_getOrderExport } from "@/service/orderExport";
import { onMounted, reactive, toRefs, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getLoginUser, $M_ExportFile } from "@/common/js/utils";
import dateSelectList from "@/components/dateSelectList";
import dateUtil from "@/utils/dateUtil";
import kTabs from "@/components/commom/kTabs/index.vue";
import { useI18n } from "vue-i18n";
import kDialog from "@/components/commom/kDialog/index.vue";
import moment from 'moment';
export default {
  name: "orderExport",
  components: { sHeader, dateSelectList, kTabs, kDialog },
  setup() {
    // 分页
    const pageNo = ref(1);
    const pageSize = ref(20);
    let ruleData = reactive({
      tableData: [],
    });
    // 上拉刷新
    const loading = ref(true);
    const finished = ref(false);
    // 下拉刷新
    const refreshing = ref(false);
    // 初始化页面获取列表
    onMounted(() => {
      const user = getLoginUser();
      // 今日
      searchParams.startDate = moment().format("YYYY-MM-DD") + " 00:00:00";
      searchParams.endDate = moment().format("YYYY-MM-DD") + " 59:59:59";
      if (user) {
        onRefresh();
      }
    });
    // 下拉刷新
    const onRefresh = (idx) => {
      ruleData.tableData = [];
      // 解决请求两次问题
      if (!idx) {
        finished.value = false;
      }
      loading.value = true;
      // 初始化分页
      pageNo.value = 1;
      pageSize.value = 20;
      getList();
    };
    // 上拉加载
    const onLoad = () => {
      pageNo.value++;
      getList();
    };
    // 获取列表数据
    const getList = () => {
      // 如果存在chartType去掉
      if (searchParams.chartType) {
        delete searchParams.chartType;
      }
      let param = {
        current: pageNo.value,
        size: pageSize.value,
      };
      getOrderList(Object.assign(param, searchParams)).then((res) => {
        const { data } = res.data;
        console.log('data',data)
        if (data) {
          refreshing.value = false;
          ruleData.tableData.push(...data.records);
          // 加载状态结束
          loading.value = false;
          if (ruleData.tableData.length >= data.total) {
            finished.value = true;
          }
        }
      });
    };
    // 引入语言
    const { t } = useI18n();
    // 大陆或海外弹窗
    // 控制显示
    const changeTypeShow = ref(false);
    // 点击显示弹窗
    const changeTypeInpClk = () => {
      changeTypeShow.value = true;
    };
    // 弹窗选中的值
    const changeTypePopFieldName = reactive({
      text: "name",
      value: "id",
    });
    // 弹窗选项
    const changeTypePopList = [
      {
        name: t('orderExport.searchPop.mainland'),
        id: 1,
      },
      {
        name: t('orderExport.searchPop.overseas'),
        id: 0,
      },
    ];
    // 点击弹窗的确定按钮
    const changeTypePopConfirm = (e) => {
      console.log('e')
      searchForm.ifForeign = e.id;
      searchForm.ifForeignName = e.name;
      changeTypeShow.value = false;
    };
    // 点击导出按钮
    const exportOrder = async () => {
      const param = {
        current: pageNo.value,
        size: pageSize.value,
      };
      const { headers, data } = await Api_getOrderExport(Object.assign(param,searchParams));
      console.log('headers', headers)
      console.log('data', data)
      $M_ExportFile(data, headers);
    };
    // 筛选弹窗的元素
    const kDialogRef = ref(null);
    // 点击筛选
    const noticeClk = () => {
      kDialogRef.value.openDialog();
    };
    // 筛选弹窗
    const searchForm = reactive({
      orderNo: "",
      busiName: "",
      ifForeign: "0",
      ifForeignName: "大陆",
    });
    // 点击筛选条件的清空条件按钮
    const cancelClk = () => {
      searchForm.orderNo = '';
      searchForm.busiName = '';
      searchForm.ifForeign = '0';
      searchForm.ifForeignName = '大陆';
    };
    // 点击筛选条件的筛选按钮
    const confirmClk = () => {
      searchParams.clientId = searchForm.orderNo;
      searchParams.username = searchForm.busiName;
      searchParams.ifForeign = searchForm.ifForeign;
      getList();
    };
    // 商户设备tab栏
    const tabList = ref([
      {
        name: t("orderExport.merchant"),
        icon: "",
        id: 1,
      },
      {
        name: t("orderExport.equipment"),
        icon: "",
        id: 2,
      },
    ]);
    // 点击tab
    const tabChg = (e) => {
      if (e == 1) {
        searchParams.type = 1;
      } else {
        searchParams.type = 2;
      }
      getList();
    };
    let searchParams = reactive({
      type: "2", // 分组类型
      clientId: "", // 设备编号
      username: "",
      startDate: "",
      endDate: "",
      ifForeign: '0'
    });
    // 搜索点击
    const searchClick = () => {
      console.log("searchClick");
    };
    // 今日、明日、本周、本月、其他时间选择回调
    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"
      );
      onRefresh(1);
    };
    return {
      ...toRefs(searchParams),
      searchClick,
      update,
      exportOrder,
      tabChg,
      tabList,
      confirmClk,
      searchForm,
      noticeClk,
      kDialogRef,
      cancelClk,
      changeTypePopList,
      changeTypePopConfirm,
      changeTypeShow,
      changeTypeInpClk,
      changeTypePopFieldName,
      pageNo,
      pageSize,
      loading,
      finished,
      refreshing,
      onRefresh,
      onLoad,
      getList,
      ...toRefs(ruleData),
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";

.page {
  background-color: #fff;
  width: 100%;
  height: calc(100%-44px);
  overflow: hidden;
  overflow-y: auto;

  .Body {
    z-index: 22;
    position: relative;
  width: 100%;

    .mod3 {
      background-color: rgba(255, 255, 255, 1);
  width: 100%;

      .group1 {
  width: 100%;

        .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;
        }

        .mod7 {
          background-color: rgba(255, 255, 255, 1);
          height: 54px;
          margin-top: 20px;
          width: 100%;

          .box1 {
          width: 100%;
            height: 37px;
            margin-top: 17px;

            .group4 {
          width: 100%;
              height: 19px;
              padding: 0 19px;

              .ImageText2 {
                height: 18px;
                width: 79px;

                .mod8 {
                  width: 79px;
                  height: 18px;

                  .group5 {
                    width: 16px;
                    height: 16px;
                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6eab9bb59f4e323434f0d4ea3d3c086c0609bf09fb931e0f032488e88a0ebc56) no-repeat;
                  }

                  .TextGroup2 {
                    height: 14px;
                    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: 16px;
                height: 16px;
                background: url('../../assets/order/gotoRight.png') top center no-repeat;
                background-size: 100%;
              }
            }

            .img2 {
              width: 100%;
              height: 2px;
              margin-top: 16px;
            }
          }
        }

        .orderItem {
          background: url("../../assets/home/line.png") bottom center no-repeat;
          background-size: 100% auto;
          padding: 15px;
        }

        .mod9 {
          width:100%;
          padding: 10px 0;

          .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: 59px;
            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:100%;
            padding: 10px 0;

          .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:100%;
            padding: 10px 0;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          line-height: 13px;
          display: block;
        }

        .mod11 {
          background-color: rgba(246, 247, 252, 1);
          border-radius: 1px;
          height: 29px;

          .lineCon {
            width: 1px;
            height: 20px;
            border: 1px solid #B9BAD0;
            transform: scale(0.6);
          }

          .txt5 {
            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>
