<template>
  <div class="orderManagement">
    <!-- 搜索框 -->
    <el-card class="mobileCaed" v-if="isMobile">
      <el-row :span="24">
        <el-col :span="24" class="search">
          <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
            size="small">
            <!-- <el-option label="全部" value="all" /> -->

            <el-option label="订单号" value="id" />
            <el-option label="订单日期" value="order_date" />
            <el-option label="订单状态:未支付" value="0" />
            <el-option label="订单状态:已支付" value="1" />
            <el-option label="订单状态:已取消" value="3" />
          </el-select>
          <el-input size="small" v-show="this.select == 'id'" placeholder="请输入内容" class="input-with-select" @input="input"
            v-model="searchValue" clearable></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-top:5px;">
          <div v-if="select == 'order_date'">
            <div class="datePicker">
              <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="allPrice">
        <el-col :span="24">
          <span class="price" style="font-size: 18px">支付总金额:¥ {{ all_price }}</span>
          <el-button type="primary" class="searchSelectIcon" @click="set">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="pcCard" v-else style="height:80px;display: flex;justify-content: flex-start;align-items: center;">
      <el-row :span="24">
        <el-col :span="24" class="search" style="display: flex;justify-content: flex-start;align-items: center">
          <el-select v-model="select" filterable @change="selectSearch" class="searchSelect" placeholder="请选择"
            width="130px" size="small">
            <!-- <el-option label="全部" value="all" /> -->
            <el-option label="订单号" value="id" />
            <el-option label="订单日期" value="order_date" />
            <el-option label="订单状态:未支付" value="0" />
            <el-option label="订单状态:已支付" value="1" />
            <el-option label="订单状态:已取消" value="3" />
          </el-select>
          <el-input style="width: 150px;margin-left:10px;" size="small" v-show="this.select == 'id'" placeholder="请输入内容"
            class="input-with-select" @input="input" v-model="searchValue" clearable></el-input>
          <div v-if="select == 'order_date'">
            <div style="display:flex;margin-left:10px;">
              <el-date-picker size="small" @change="change" v-model="value1" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </div>
          <el-button type="primary" style="padding: 0 5px;height: 30px; margin-left:10px;" class="searchSelectIcon"
            @click="set">重置
          </el-button>
          <span
            style="font-size: 16px;padding-left:15px;display: flex;justify-content: center;align-items: center">支付总金额:
            <div style="width: 250px;line-height: 36px">
              <el-skeleton animated v-if="all_price_show" rows="2" />
              <span v-else> ¥ {{ all_price }}</span>
            </div>

          </span>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表格 -->
    <el-card class="orderList">
      <el-table border :data="tableData" class="table" height="calc(100vh - 280px)" v-loading="all_price_show">
        <!-- 序号 -->
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <!-- 订单名称 -->
        <el-table-column align="center" min-width="180" header-align="center" prop="source" label="产品名称">
        </el-table-column>
        <el-table-column align="center" min-width="300" header-align="center" prop="id" label="订单号"></el-table-column>
        <el-table-column align="center" header-align="center" label="订单原价">
          <template slot-scope="scope">
            <!--                <div style="padding-left: 35px">-->
            ￥{{ scope.row.countprice }}
            <!--                </div>-->
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="订单折后价">
          <template slot-scope="scope">
            {{ scope.row.amount ? "￥" + scope.row.amount : "-" }}
          </template>

        </el-table-column>
        <el-table-column align="center" header-align="center" label="订单类型">
          <template slot-scope="scope">
            <!--            {{ orderTypeMap(scope.row.business_op) }}-->
            <el-tag :style="{ padding: '0 8px' }" :type="orderTypeMap(scope.row.business_op).type">
              {{ orderTypeMap(scope.row.business_op).text }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" header-align="center" label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.order_status === '0'" style="padding: 0 5px" type="warning" effect="dark">
              {{ getResult(scope.row.order_status) }}
            </el-tag>
            <el-tag v-else-if="scope.row.order_status === '1'" style="padding: 0 5px" type="success" effect="dark">
              {{ getResult(scope.row.order_status) }}
            </el-tag>
            <el-tag v-else style="padding: 0 5px" type="info" effect="dark">
              {{ getResult(scope.row.order_status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" prop="order_date" label="订单日期"></el-table-column>
        <el-table-column align="center" header-align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="small" v-if="scope.row.order_status === '0'" type="primary" @click="orderDetails(scope.row)"
              style="padding: 8px 15px">去支付
            </el-button>
            <el-button size="small" v-else type="primary" @click="orderDetails(scope.row)" style="padding: 8px">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分 页-->
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderAPI } from "@/api/product/product";

export default {
  data() {
    return {

      all_price_show: true,//金额显示骨架屏
      // 获取用户代理字P串
      userAgent: window.navigator.userAgent,
      // 判断是否为移动设备
      isMobile: false,
      all_price: '',
      showDate: false,
      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]);
          }
        }]
      },
      value1: '',
      select: "",
      tableData: [],
      page: 1,
      searchValue: null,
      order_status_select: null,
      userId: sessionStorage.getItem("userId"),
      dialogVisible: false,
      orderDetail: {
        order_goods: [
          {
            productid: "",
            amount: "",
            list_price: "",
            quantity: "",
            discount: "",
            price: "",
          },
        ],
      },
    };
  },
  created() {
    this.getOrder();
    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
  },
  methods: {
    // 订单类型映射
    orderTypeMap(type) {
      switch (type) {
        case 'BUY_REVERSE':
          // return <el-tag type="danger"></el-tag>;
          return { text: "退款", type: "danger" };
        case 'RENEW':
          return { text: "续费", type: "primary" };
        case 'BUY':
          return { text: "购买", type: "success" };
        default:
          return { text: "-", type: "primary" };
      }
    },
    getOrder(data) {//获取订单
      let params = {};
      if (this.select) {
        if (this.select === 'id' && this.searchValue) {
          params['type'] = '200'
          params['id'] = this.searchValue
        }
        if (this.select === 'order_date' && this.value1) {
          params['start_time'] = data[0]
          params['end_time'] = data[1]
          params['type'] = '200'
        }
        if (this.select == '0') {
          params['type'] = '200'
          params['order_status'] = '0'
        }
        if (this.select == '1') {
          params['type'] = '200'
          params['order_status'] = '1'
        }
        if (this.select == '3') {
          params['type'] = '200'
          params['order_status'] = '3'
        }
      }
      getOrderAPI(params).then((res) => {
        this.all_price_show = false
        if (res.status == true) {
          this.tableData = res.data;
          this.all_price = res.all_price
        }
      });
    },
    change(e) {//选择时间
      this.value1 = e
      this.getOrder(e)
    },
    set() {//重置
      this.value1 = null
      this.searchValue = null
      this.select = null
      this.getOrder()

    },
    selectSearch(e) { //下拉搜索事件
      this.select = e
      this.getOrder(e)
    },
    input(e) {//input事件
      this.searchValue = e
      this.getOrder(e)
    },
    orderDetails(row) {  //查看订单详情
      this.$router.push({ name: "orderDetil", query: { id: row.id } });
    },
    getResult(data) {
      switch (data) {
        case "0":
          return "未支付";
        case "1":
          return "已支付";
        case "2":
          return "已关闭";
        case "3":
          return "已取消";
        case "4":
          return "后付费";
      }
    },
  },
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  }
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}

.orderManagement {
  height: calc(100vh - 180px);
  .mobileCaed {
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    .search {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .searchSelect {
        width: 150px;
      }

      .input-with-select {
        width: 150px;
        margin-left: 10px;
      }
    }

    .allPrice {
      margin-top: 5px;

      .searchSelectIcon {
        padding: 0 5px;
        height: 20px;
        margin-left: 10px;
      }

      .price {
        font-weight: 600;
        font-size: 14px;
      }

      .datePicker {
        display: flex;
        margin-left: 10px;
        width: auto;
      }
    }
  }

  .pcCard {
    .search {
      text-align: left;

      .input-with-select {
        width: 60%;

        .searchSelect {
          width: 150px;
        }

        .searchSelectIcon {
          width: 30px;
        }
      }
    }

    .orderList {
      margin-top: 10px;
      // height: calc(100vh - 180px);

      .table {
        width: 100%;
      }
    }
  }
}
.page{
  text-align: center;
  margin: 20px;
}
</style>
<style>
.el-table .el-table__header {
  background-color: #d0cff8;
}

::v-deep .el-tag {
  padding: 0 8px !important;
}

</style>
