<template>
  <div>
    <el-row class="order_tab">
      <el-col :span="24">
        <div class="order_list_sel">
          <div class="sel_item" v-if="memberType !== 1">
            <span class="name">门店：</span>
            <el-select size="small" class="item1" v-model="params.shopId" placeholder="请选择门店">
              <el-option v-for="(v,i) in shopList" :key="i" :label="v.name" :value="v.shopId"></el-option>
            </el-select>
          </div>
          <div class="sel_item sel_item2">
            <span class="name">日期：</span>
            <el-date-picker size="small" v-model="value1" class="item3" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <el-button size='small' @click="search" style="background: #0D1E40;color:#fff">查询</el-button>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-table :data="flowList">
        <el-table-column prop="shopName" label="门店"></el-table-column>
        <el-table-column prop="" label="订单来源/编号" min-width="100px">
          <template slot-scope="scope">
            <div>{{showType(scope.row.orderType)}}</div>
            <div>{{scope.row.outOrderId}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="orderSn" label="平台订单号" min-width="120px"></el-table-column>
        <el-table-column prop="createTime" label="消费时间" min-width="110px"></el-table-column>
        <el-table-column prop="remark" label="用途" min-width="100px"></el-table-column>
        <el-table-column prop="" label="支付方式">
          <template slot-scope="scope">
            <div>{{showPayMent(scope.row.paymentType)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额">
          <template slot-scope="scope">
            <div>{{scope.row.type === 1 ? '+' : '-'}}{{ scope.row.amount.toFixed(2) }}</div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div style="text-align: center;margin-top: 20px;">
      <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getAccountFlow } from "../../api/amount.js";
import { getShopList } from "../../api/shop.js";
export default {
  data() {
    return {
      flowList: [],
      shopList: [],
      params: {
        source: 2,
        pageNum: 1,
        pageSize: 10,
        shopId: "",
        startTime: "",
        endTime: "",
      },
      total: 0,
      value1: [],
      memberType: this.$store.state.userInfo.memberType,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: true,
    },
  },
  created() {
    this.init();
    this.search();
    if (this.memberType !== 1) {
      this.getShopList();
    }
  },
  methods: {
    init() {
      const start = new Date().getTime() - 3600 * 1000 * 24 * 7;
      this.params.startTime = start;
      this.params.endTime = new Date();
      this.value1 = [this.params.startTime, this.params.endTime];
    },
    search() {
      if (this.value1 && this.value1.length) {
        this.params.startTime = this.$tool.getFormatDate(
          this.value1[0],
          "yyyy-MM-dd"
        );
        this.params.endTime = this.$tool.getFormatDate(
          this.value1[1],
          "yyyy-MM-dd"
        );
      } else {
        this.params.startTime = "";
        this.params.endTime = "";
      }
      this.params.pageNum = 1;
      this.flowList = [];
      this.getAccountFlow();
    },
    getShopList() {
      getShopList().then((res) => {
        if (res.code === 200) {
          this.shopList = res.data.map((v) => {
            return { name: v.name, shopId: v.id };
          });
          this.shopList.unshift({ name: "全部", shopId: "" });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.flowList = [];
      this.getAccountFlow();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.flowList = [];
      this.getAccountFlow();
    },
    getAccountFlow() {
      getAccountFlow(this.params).then((res) => {
        if (res.code == 200) {
          this.flowList = res.data.data || [];
          this.total = res.data.totalNums || 0;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    showType(type){
      let name;
      switch (type) {
        case 1:
          name="美团"
          break;
        case 2:
          name="饿了么"
          break;
        case 3:
          name="饿百"
          break;
        case 99:
          name="手动发单"
          break;
      
        default:
          name= '--'
          break;
      }
      return name
    },
    showPayMent(type) {
      let name;
      switch (type) {
        case 1:
          name= '支付宝支付'
          break;
        case 2:
          name= '微信支付'
          break;
        case 3:
          name= '银联支付'
          break;
        case 4:
          name= '余额支付'
          break;
        case 5:
          name= '三方运力支付'
          break;

        default:
          name = "--";
          break;
      }
      return name;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table td.el-table__cell {
  text-align: center !important;
}
/deep/ .el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}
.order_tab {
  width: 100%;
  background: #fff;
  .search {
    display: flex;
    margin-left: 20px;
    .header_serch {
      width: 80%;
      height: 74px;
      padding-right: 25px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .Manual {
        width: 118px;
        height: 44px;
        background: #fc7200;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 44px;
        margin-left: 18px;
      }

      .search_inp {
        width: 380px;
        height: 44px;
        display: flex;
        align-items: center;
        position: relative;

        .inp {
          width: 100%;
          // height: 44px;
          border: none;
        }

        .btn {
          font-size: 22px;
          position: absolute;
          right: 15px;
        }
      }
    }
  }
  .order_list_sel {
    display: flex;
    align-items: center;
    margin: 0 0 10px 20px;
    .sel_item {
      display: flex;
      align-items: center;
      margin-right: 10px;
      .name {
        font-size: 14px;
        flex-shrink: 0;
        color: #999;
      }
    }
  }
}
</style>
