<template>
    <div style="display:flex;flex-direction:column;height:100vh">
        <el-tabs v-model="activeName" class="hide-tabs-content" @tab-click="changeTypeHandler" style="margin-left:10px;padding-bottom:10px;" v-if="queryTime.queryType==0">
            <el-tab-pane label="引流数据" name="xiansuo"></el-tab-pane>
            <el-tab-pane label="订单数据" name="order"></el-tab-pane>
        </el-tabs>
        <div v-if="queryTime.queryType!=3" v-show="activeName=='xiansuo'" style="flex:1">
            <clueComponent :isDrawer="true" :title="formatDrawTitle" :queryTime="queryTime"></clueComponent>
        </div>
        <div class="tools" v-if="queryTime.queryType==3||queryTime.queryType==0"  v-show="activeName=='order'">
            <div class="tools-item">
                <el-tag class="f12" size="medium" style="margin-top:10px;margin-left:10px;">{{formatDrawTitle}}</el-tag>
            </div>
        </div>
        <div style="flex:1;overflow-y:auto;" v-if="queryTime.queryType==3||queryTime.queryType==0"  v-show="activeName=='order'">
            <orderList :dataList="dataList" :loading="loading"></orderList>
        </div>
        <div v-show="activeName=='order'"  v-if="queryTime.queryType==3||queryTime.queryType==0">
            <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
                :page-sizes="[15, 30, 60, 90, 100]" :page-size="msg.pageSize" layout="total, sizes, prev, pager, next"
                @size-change="handleSizeChange" :total="total">
            </el-pagination>
        </div>
  </div>
</template>

<script>
import clueComponent from "@/components/clueManagement/clueComponent";
import orderList from "../customerManage/orderList.vue";
export default {
  inject: ["selfParams"],
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 15,
        OrderId: "", //订单id
        GuestName: "", //客人姓名
        GuestId: "", //客人id
        StartCityName: "", //出发城市
        EndCityName: "", //到达城市
        EnterID: "", //业务员id
        CreateBy: "", //引流员id
        TicketStatus: "0", //出票状态
        VisaStatus: "0", //出签状态
        OrderStatus: "0", //订单状态
        Q_IsCollect: "0", //收款状态
        StartTime: "", //订单开始时间
        EndTime: "", //订单结束时间
        OrderType: "", //订单类型
      },
      dataList: [],
      MultipleChoiceList: [
        //多选项目
        {
          Name: "机票",
          Id: "1",
          show: false,
        },
        {
          Name: "签证",
          Id: "2",
          show: false,
        },
        {
          Name: "地接",
          Id: "3",
          show: false,
        },
        {
          Name: "套餐",
          Id: "4",
          show: false,
        },
        {
          Name: "其他",
          Id: "5",
          show: false,
        },
      ],
      loading: true,
      total: 0,
      activeName: "xiansuo",
      formatDrawTitle: "",
    };
  },
  computed: {
    queryTime() {
      return this.selfParams.queryTime;
    },
  },
  components: {
    clueComponent,
    orderList,
  },
  created() {
    this.formatDrawTitle = this.formatTitleHandler(
      this.queryTime.queryType,
      this.queryTime.queryVal
    );
    if (this.queryTime.queryType == 3 || this.queryTime.queryType == 0) {
      this.msg.StartTime = this.queryTime.StartTime;
      this.msg.EndTime = this.queryTime.EndTime;
      this.msg.OrderType = this.queryTime.OrderType;
      this.getList();
      this.activeName = this.queryTime.queryType == 3 ? "order" : "xiansuo";
    }
  },
  mounted() {},
  methods: {
    changeTypeHandler() {
      this.formatDrawTitle = this.formatTitleHandler(
        this.activeName == "xiansuo" ? 0 : 3,
        ""
      );
    },
    getList() {
      this.loading = true;
      this.apipost(
        "/api/Order/GetGuestOrderStatisticsPageList",
        this.msg,
        (res) => {
          if (res.data.resultCode == 1) {
            let data = res.data.data.Data.pageData;
            let addList = function(arr) {
              arr.forEach((item) => {
                item.More = "";
                item.actuallyReceived = false;
                item.cost = false;
                item.selectedType = "";
                item.checkList = [];
                item.MultipleChoiceList = [];
                item.MoreList = [
                  {
                    Name: "取消订单",
                    Id: "1",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6
                        ? true
                        : false,
                  },
                  {
                    Name: "订单转交",
                    Id: "2",
                    show: true,
                  },
                  {
                    Name: "修改订单金额",
                    Id: "3",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6 &&
                      (item.TicketStatus == 1 || item.VisaStatus == 1)
                        ? true
                        : false,
                  },
                  {
                    Name: "修改出票状态",
                    Id: "4",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6 &&
                      item.TicketStatus < 3
                        ? true
                        : false,
                  },
                  {
                    Name: "修改出签状态",
                    Id: "5",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6 &&
                      item.VisaStatus == 1
                        ? true
                        : false,
                  },
                  {
                    Name: "订单收损",
                    Id: "8",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6
                        ? true
                        : false,
                  },
                  {
                    Name: "收损完结",
                    Id: "9",
                    show:
                      (item.OrderStatus == 3 || item.OrderStatus == 4) &&
                      item.DueinMoney == 0 
                        ? true
                        : false,
                  },
                  {
                    Name: "订单完结",
                    Id: "6",
                    show:
                      item.OrderStatus == 1 && item.DueinMoney == 0
                        ? true
                        : false,
                  },
                  {
                    Name: "操作日志",
                    Id: "7",
                    show: true,
                  },
                ];
              });
            };
            addList(data);
            data.forEach((item) => {
              if (item.OrderType) {
                let list = item.OrderType && item.OrderType.split(",");
                for (let j = 0; j < list.length; j++) {
                  for (let i = 0; i < this.MultipleChoiceList.length; i++) {
                    if (list[j] == this.MultipleChoiceList[i].Id) {
                      item.MultipleChoiceList.push(
                        JSON.parse(JSON.stringify(this.MultipleChoiceList[i]))
                      );
                    }
                  }
                }
              }
              if (item.LossList.length > 0) {
                for (let i = 0; i < item.LossList.length; i++) {
                  for (let j = 0; j < item.MultipleChoiceList.length; j++) {
                    if (
                      item.LossList[i].OrderType ==
                      item.MultipleChoiceList[j].Id
                    ) {
                      item.MultipleChoiceList[j].show = true;
                    }
                  }
                }
              }
            });
            this.dataList = res.data.data.Data.pageData;
            this.total = res.data.data.Data.count;
            this.loading = false;
          } else {
            this.$message.error(res.data.message);
            this.loading = false;
          }
        }
      );
    },
    formatTitleHandler(type, val) {
      let dateStr =
        this.queryTime.StartTime != this.queryTime.EndTime
          ? this.queryTime.StartTime + " 至 " + this.queryTime.EndTime
          : this.queryTime.StartTime;
      if (type == 0) {
        return `${dateStr} 全部引流信息`;
      } else if (type == 1) {
        return `${dateStr} ${
          val == "0" ? "全部" : val == "1" ? "有效" : "无效"
        }引流信息`;
      } else if (type == 2) {
        let typeStr = "";
        switch (val) {
          case "1":
            typeStr = "社群聊天";
            break;
          case "2":
            typeStr = "线下拜访";
            break;
          case "3":
            typeStr = "直客介绍";
            break;
          case "4":
            typeStr = "同行介绍";
            break;
          case "6":
            typeStr = "其它";
            break;
          case "7":
            typeStr = "小红书";
            break;
          case "8":
            typeStr = "飞猪";
            break;
          case "9":
            typeStr = "抖音";
            break;
        }
        return `${dateStr} 来源于：${typeStr}引流信息`;
      } else if (type == 3) {
        let typeStr = "";
        switch (val) {
          case "1":
            typeStr = "机票";
            break;
          case "2":
            typeStr = "签证";
            break;
          case "3":
            typeStr = "地接";
            break;
          case "4":
            typeStr = "套餐";
            break;
          case "":
            typeStr = "全部";
            break;
        }
        return `${dateStr} 转化的${typeStr}类型订单`;
      }
    },
    handleSizeChange(val) {
      this.msg.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
  },
};
</script>

<style>
</style>
