<template>
  <div class="inform">
    <el-card class="box-card" style="width: 1612px; height: 950px">
      <!-- 标题区域 -->
      <div slot="header" class="clearfix">
        <div class="inform-title">订单管理</div>
      </div>
      <!-- 主体内容区域 -->
      <div class="inform-body">
        <!-- 筛选条件区域 -->
        <div class="order-top">
          <!-- 订单号筛选 -->
          <el-input
            placeholder="请输入订单号或房间号"
            style="width: 261px"
            clearable
            v-model="value"
            @clear="getData(1)"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button @click="getData(1)">查询</el-button>

          <!-- 创建时间筛选 -->
          <div class="paydate">
            <span class="demonstration">创建时间:</span>
            <el-date-picker
              v-model="createTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="getData(1)"
            ></el-date-picker>
          </div>

          <!-- 支付时间筛选 -->
          <div class="paydate">
            <span class="demonstration">支付时间:</span>
            <el-date-picker
              v-model="payTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="getData(1)"
            ></el-date-picker>
          </div>

          <!-- 状态筛选 -->
          <div class="state">
            <span>状态:</span>
            <el-select v-model="state" clearable placeholder="请选择状态" @change="getData(1)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </div>

          <div class="export" @click="exportExcel">导出订单</div>
        </div>
        <!-- 表格区域 -->
        <div class="inform-table">
          <!-- 表格区域 -->
          <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
            max-height="576"
            height="576"
            style="width: 1550px"
            stripe
            class="Devicetable"
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)',
            }"
          >
            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
            <el-table-column
              prop="order.orderNo"
              width="180"
              label="订单号"
              align="center"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column width="100" align="center" label="状态">
              <template slot-scope="{ row }">{{ options[row.order.orderStatu].label }}</template>
            </el-table-column>

            <el-table-column prop="order.roomNo" width="160" align="center" label="房间"></el-table-column>
            <el-table-column align="center" width="130" label="电费（元）">
              <template slot-scope="{row}">{{row.allOfElectricPayment}}</template>
            </el-table-column>
            <el-table-column width="130" align="center" label="水费（元）">
              <template slot-scope="{ row }">{{ row.allOfWaterAmount }}</template>
            </el-table-column>
            <el-table-column prop="allOfReceiveAmount" align="center" width="150" label="收预付款（元）"></el-table-column>
            <el-table-column prop="refundPayment" width="150" align="center" label="退预付款（元）"></el-table-column>
            <el-table-column prop="order.createTime" width="180" align="center" label="创建时间"></el-table-column>
            <el-table-column prop="order.payTime" width="180" align="center" label="支付时间"></el-table-column>
            <el-table-column prop="address" align="center" label="操作">
              <template slot-scope="{ row }">
                <!-- 详情按钮 -->
                <span @click="handleEdit(row)" class="operate">详情</span>

                <!-- 详情弹窗区域 -->
                <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%">
                  <div class="userinfo">用户信息</div>
                  <div class="info">
                    <div class="user">
                      <div class="name">姓名</div>
                      <el-input :value="order.userName"></el-input>
                    </div>
                    <div class="user">
                      <div class="name">联系方式</div>
                      <el-input :value="order.userPhone"></el-input>
                    </div>
                  </div>
                  <div class="info">
                    <div class="user">
                      <div class="name">订单号</div>
                      <el-input :value="order.orderNo"></el-input>
                    </div>
                    <div class="user">
                      <div class="name">预付款金额（元）</div>
                      <el-input value="20.00"></el-input>
                    </div>
                  </div>
                  <div class="info">
                    <div class="user">
                      <div class="name">入住时间</div>
                      <el-input :value="order.realStartTime"></el-input>
                    </div>
                    <div class="user">
                      <div class="name">离住时间</div>
                      <el-input :value="order.realEndTime"></el-input>
                    </div>
                  </div>
                  <div class="info">
                    <div class="user">
                      <div class="name">入住天数</div>
                      <el-input value="1"></el-input>
                    </div>
                    <div class="user">
                      <div class="name">支付时间</div>
                      <el-input :value="order.payTime"></el-input>
                    </div>
                  </div>

                  <!-- 水费区域 -->
                  <div class="rate">水费明细</div>
                  <div class="water">
                    表计：101 楼层：{{ order.roomNo }} 抄表时间：2022-07-27
                    15:15:15
                  </div>
                  <el-table
                    :data="waterTable"
                    max-height="93"
                    style="width: 832px"
                    stripe
                    :cell-style="rowbg"
                    :header-cell-style="{
                      color: ' rgba(0, 0, 0, 1)',
                      background: 'rgba(240, 243, 247, 1)',
                    }"
                  >
                    <el-table-column prop="startOfWater" width="100" label="始码" align="center"></el-table-column>

                    <el-table-column prop="endOfWater" width="100" align="center" label="终码"></el-table-column>

                    <el-table-column prop="waterVolume" align="center" label="水量（吨）"></el-table-column>
                    <el-table-column prop="priceOfWater" align="center" label="水价（元）"></el-table-column>
                    <el-table-column prop="allowance" align="center" label="补助量（吨）"></el-table-column>
                    <el-table-column prop="cost" align="center" label="产生水费（元）"></el-table-column>
                  </el-table>

                  <!-- 电费区域 -->
                  <div class="rate">电费明细</div>
                  <div class="water">
                    表计：101 楼层：{{ order.roomNo }} 抄表时间：2022-07-27
                    15:15:15
                  </div>
                  <el-table
                    :data="electricTable"
                    max-height="93"
                    style="width: 832px"
                    stripe
                    :cell-style="rowbg"
                    :header-cell-style="{
                      color: ' rgba(0, 0, 0, 1)',
                      background: 'rgba(240, 243, 247, 1)',
                    }"
                  >
                    <el-table-column prop="startOfElectric" width="100" label="始码" align="center"></el-table-column>

                    <el-table-column prop="endOfElectric" width="100" align="center" label="终码"></el-table-column>

                    <el-table-column prop="electricVolume" align="center" label="电量（度）"></el-table-column>
                    <el-table-column prop="priceOfElectric" align="center" label="电价（元）"></el-table-column>
                    <el-table-column prop="allowance" align="center" label="补助量（度）"></el-table-column>
                    <el-table-column prop="cost" align="center" label="产生水费（元）"></el-table-column>
                  </el-table>
                </el-dialog>

                <!-- 删除按钮 -->
                <span v-if="row.order.orderStatu == 0" @click="handleDelete(row)" class="operate">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器区域 -->
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :current-page="curPage"
            layout="prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import dayjs from "dayjs";

export default {
  name: "Inform",
  data() {
    return {
      // 显示的总数据
      tableData: [],
      // 多选框按钮勾选的数据
      selectionTable: [],
      // 状态数组
      options: [
        {
          value: 0,
          label: "已取消"
        },
        {
          value: 1,
          label: "待支付"
        },
        {
          value: 2,
          label: "待入住"
        },
        {
          value: 3,
          label: "已入住"
        },
        {
          value: 4,
          label: "待结账"
        },
        {
          value: 5,
          label: "已完成"
        }
      ],
      // 筛选状态绑定数据
      state: "",
      // 筛选订单号绑定数据
      value: "",
      // 筛选支付时间绑定数据
      payTime: [],
      // 筛选创建时间绑定数据
      createTime: [],
      // 弹窗控制属性
      dialogVisible: false,
      waterTable: [],
      electricTable: [],
      order: [], // 用户信息
      // 当前页
      curPage: 1,
      // 每页条数
      pageSize: 8,
      // 总条数
      total: null
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取表格数据
    async getData(curPage) {
      if (curPage) {
        this.curPage = curPage;
      }
      if (!this.createTime) {
        this.createTime = [];
      }
      if (!this.payTime) {
        this.payTime = [];
      }
      let params = {
        curPage: this.curPage,
        pageSize: this.pageSize,
        statu: this.state,
        keyWord: this.value,
        payTime1: this.payTime[0],
        payTime2: this.payTime[1],
        createTime1: this.createTime[0],
        createTime2: this.createTime[1]
      };
      let res = await this.API.hotelOrder.hotelOrderAdminPage(params);
      // console.log(res);
      if (res.success) {
        this.tableData = res.data.list;
        this.total = res.data.totalCount;
        res.data.list.forEach(item => {
          // 水费电费计算后的价格
          if (item.orderBill) {
            // item.order.waterMoney =
            //   item.orderBill.priceOfWater *
            //   (item.orderBill.endOfWater - item.orderBill.startOfWater);
            // item.order.electricMoney =
            //   item.orderBill.priceOfElectric *
            //   (item.orderBill.endOfElectric - item.orderBill.startOfElectric);
            // console.log(item.orderBill.finishTime);
            // 支付时间转换
            item.orderBill.finishTime = dayjs(item.orderBill.finishTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
        });
      } else {
        this.$message.error(res.message);
      }
    },

    // 导出订单按钮回调
    exportExcel() {
      let params = {
        keyWord: this.value,
        statu: this.state,
        payTime1: this.payTime[0],
        payTime2: this.payTime[1],
        createTime1: this.createTime[0],
        createTime2: this.createTime[1]
      };
      this.API.hotelOrder.downOrder(params).then(res => {
        // console.log(res);
        let name = `订单数据`;
        var content = res;
        // var data = new Blob([content],{type:"application/octet-stream;charset=utf-8"});
        var data = new Blob([content], {
          type: "application/vnd.ms-excel;charset=utf-8"
        });
        var downloadUrl = window.URL.createObjectURL(data);
        var anchor = document.createElement("a");
        anchor.href = downloadUrl;
        anchor.download = name + ".xls";
        anchor.click();
        window.URL.revokeObjectURL(data);
        if (res) {
          this.$message.success("导出成功");
        } else {
          this.$message.error("导出失败");
        }
      });
    },

    // 导出表格
    // excel(id) {
    //   let xlsxParam = { raw: true };
    //   /* generate workbook object from table */
    //   let wb = XLSX.utils.table_to_book(document.querySelector(id));
    //   /* get binary string as output */
    //   let wbout = XLSX.write(wb, {
    //     bookType: "xlsx",
    //     bookSST: true,
    //     type: "array"
    //   });
    //   try {
    //     FileSaver.saveAs(
    //       new Blob([wbout], { type: "application/octet-stream" }),
    //       "订单管理.xlsx"
    //     );
    //   } catch (e) {
    //     if (typeof console !== "undefined") console.log(e, wbout);
    //   }
    //   return wbout;
    // },

    //详情按钮回调
    handleEdit(row) {
      // console.log(row);
      this.order = row.order;
      this.waterTable = [];
      this.electricTable = [];
      if (row.orderBill) {
        let waterTemList = [];
        let electricTemList = [];
        if (row.orderBill.priceOfWater == "0E-8") {
          row.orderBill.priceOfWater = 0;
          // console.log(row.orderBill.priceOfWater);
        }
        if (row.orderBill.priceOfElectric == "0E-8") {
          row.orderBill.priceOfElectric = 0;
        }
        waterTemList.push({
          startOfWater: row.orderBill.startOfWater,
          endOfWater: row.orderBill.endOfWater,
          priceOfWater: row.orderBill.priceOfWater,
          waterVolume: row.orderBill.endOfWater - row.orderBill.startOfWater,
          allowance: null,
          cost:
            row.orderBill.priceOfWater *
            (row.orderBill.endOfWater - row.orderBill.startOfWater)
        });

        electricTemList.push({
          startOfElectric: row.orderBill.startOfElectric,
          endOfElectric: row.orderBill.endOfElectric,
          priceOfElectric: row.orderBill.priceOfElectric,
          electricVolume:
            row.orderBill.endOfElectric - row.orderBill.startOfElectric,
          allowance: null,
          cost:
            row.orderBill.priceOfElectric *
            (row.orderBill.endOfElectric - row.orderBill.startOfElectric)
        });
        this.waterTable = waterTemList;
        this.electricTable = electricTemList;
      }
      this.dialogVisible = true;
    },

    //删除按钮回调
    handleDelete(row) {
      // console.log(row.order.id);
      this.$confirm("确认删除？")
        .then(async () => {
          let res = await this.API.hotelOrder.hotelOrderAdminDelete(
            row.order.id
          );
          // console.log(res);
          if (res.success) {
            this.$message.success("删除成功");
            let totalPage = Math.ceil((this.total - 1) / this.pageSize);
            let currentPage =
              this.curPage > totalPage ? totalPage : this.curPage;
            this.curPage = currentPage < 1 ? 1 : currentPage;
            this.getData();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },

    // 翻页逻辑回调
    handleCurrentChange(val) {
      this.curPage = val;
      this.getData();
    },

    // 多选框按钮操作
    handleSelectionChange(list) {
      // console.log(list);
      this.selectionTable = list;
    },

    // 表格样式设置
    rowbg(row) {
      if (row.rowIndex % 2 != 0) {
        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.inform /deep/ .el-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
  .clearfix {
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .inform-title {
      width: 96px;
      height: 36px;
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      margin-left: 33px;
    }
    .inform-header {
      display: flex;
      margin-right: 29px;
      .el-button {
        margin-left: 9px;
        background-color: rgba(41, 109, 227, 1);
      }
    }
  }
  .inform-body {
    .order-top {
      display: flex;
      align-items: center;
      padding: 33px 29px 34px 33px;
      font-size: 16px;
      font-weight: 400;
      color: #000;
      .el-button {
        background-color: rgba(41, 109, 227, 1);
        color: #fff;
        margin-left: 9px;
      }
      .paydate {
        margin: 0 0 0 44px;
        .el-date-editor {
          margin-left: 7px;
          width: 215px;
          .el-range__icon {
            display: none;
          }
        }
      }
      .state {
        margin-left: 30px;
        .el-input {
          width: 150px;
        }
      }
      .export {
        width: 94px;
        height: 32px;
        opacity: 1;
        color: #fff;
        text-align: center;
        line-height: 32px;
        background: rgba(41, 109, 227, 1);
        cursor: pointer;
        border-radius: 2px;
        margin-left: 170px;
      }
    }
    .inform-table {
      .execlTable,
      .selectTable {
        display: none;
      }
      .el-table {
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        .el-table__header-wrapper {
          border-radius: 5px;
          .el-checkbox.is-checked {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
          }

          .el-checkbox__input.is-checked,
          .el-checkbox__input.is-indeterminate {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
          }
        }
        tr {
          height: 64px;
          td {
            .cell {
              .el-checkbox.is-checked {
                .el-checkbox__inner {
                  background-color: rgba(41, 109, 227, 1);
                }
              }
              .is-indeterminate {
                .el-checkbox__inner {
                  background-color: rgba(41, 109, 227, 1);
                }
              }
              .operate {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                font-size: 16px;
                font-weight: 400;
                padding: 0 5px;
              }
              .el-dialog__wrapper {
                overflow: hidden;
                .el-dialog {
                  width: 968px !important;
                  margin-top: 80px !important;
                  height: 880px;
                  opacity: 1;
                  background: rgba(255, 255, 255, 1);
                  box-shadow: none;
                  .el-dialog__header {
                    height: 83px;
                    border-bottom: 1px solid rgba(230, 230, 230, 1);

                    span {
                      float: left;
                      font-size: 20px;
                      font-weight: 500;
                      color: #000;
                    }

                    .el-dialog__close {
                      width: 35px;
                      height: 35px;
                      &::before {
                        font-size: 24px;
                        color: #000;
                      }
                    }
                  }
                  .el-dialog__body {
                    padding: 0 38px;
                    .userinfo {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin-top: 15px;
                    }
                    .info {
                      display: flex;
                      .user {
                        .name {
                          text-align: left;
                          padding: 12px 0;
                        }
                        .el-input {
                          width: 283px;
                          height: 38px;
                          opacity: 1;
                          margin-right: 81px;
                          .el-input__inner {
                            color: #000;
                          }
                        }
                      }
                    }
                    .rate {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin: 15px 0;
                    }
                    .water {
                      text-align: left;
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 0, 0, 1);
                    }
                    .el-table {
                      margin: 10px 0;
                      tr {
                        height: 48px;
                      }
                      .el-table__body-wrapper {
                        overflow: visible;
                      }
                    }
                  }
                }
              }

              .el-dialog__title {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                padding: 10px 18px 0 18px;
              }
            }
          }
          .el-checkbox__inner {
            width: 18px;
            height: 18px;
            &::after {
              transform: rotate(45deg) scaleY(1.5);
              top: 3px;
              left: 5px;
            }
          }
        }
        th {
          font-weight: 400;
        }
      }
    }
    .block {
      height: 36px;
      margin: 66px 29px 0 0;
      float: right;
      .el-pagination {
        padding: 0;
        button {
          width: 36px;
          background: #fff;
          color: rgba(0, 0, 0, 1);
          height: 36px;
          font-size: 14px;
          border: 1px solid rgba(112, 112, 112, 1);
          border-radius: 8px;
        }
        ul {
          .active {
            background: #fff;
            color: rgba(0, 97, 255, 1);
            border: 1px solid rgba(0, 97, 255, 1);
            box-sizing: border-box;
          }
          .el-icon {
            border: none;
          }
          li {
            background: #fff;
            color: rgba(0, 0, 0, 1);
            width: 36px;
            height: 36px;
            font-size: 14px;
            border: 1px solid rgba(112, 112, 112, 1);
            border-radius: 8px;
            line-height: 36px;
          }
        }
        .el-pagination__jump {
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          margin-left: 10px;
          font-weight: 400;
          height: 36px;
          .el-input {
            width: 65px;
            height: 36px;
            margin: 0 10px;
            input {
              width: 65px;
              height: 36px;
              border: 1px solid rgba(0, 0, 0, 1);
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
  }
}
</style>
<style lang="scss">
.el-message-box__wrapper {
  .el-button--primary {
    background-color: #296de3;
  }
}
</style>