<template>
  <div>
    <!-- 标题 -->
    <el-row class="tag">查询订单</el-row>

    <!-- 分割线 -->
    <hr style="background-color: #cccccc; height: 1px; border: 0" />
    <div style="margin: 20px 0"></div>

    <!-- 按钮和筛选框区域 -->
    <el-row>
      <el-col :span="3">
        <el-button type="primary" @click="deriveExcel">导出excel</el-button>
      </el-col>
      <el-col :span="6">
        选择查询日期：
        <el-date-picker
          v-model="time"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          @change="changeTime"
        ></el-date-picker>
      </el-col>

      <el-col :span="6">
        选择订单状态：
        <el-select clearable v-model="searStatus" placeholder="订单筛选" @change="changeStatus">
          <el-option v-for="(item, index) in order_sta" :label="item" :value="index + 1" :key="index"></el-option>
        </el-select>
      </el-col>
    </el-row>

    <div style="margin: 20px 0"></div>
    <hr style="background-color: #cccccc; height: 1px; border: 0" />

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      highlight-current-row
      height="618"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column prop="orderId" label="订单号" align="center"></el-table-column>
      <el-table-column prop="repairsFault.faultName" label="故障类型" align="center"></el-table-column>
      <el-table-column prop="repairsStudent.dormNumber" label="宿舍楼栋" align="center"></el-table-column>
      <el-table-column prop="orderCompleteTime" label="时间" align="center"></el-table-column>
      <el-table-column prop="repairsWork.workName" label="维修人员" align="center"></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <span :style="order_sty[row.orderStatus]">
            {{ order_sta_w[row.orderStatus] }}
          </span>
          <span v-if="row.orderStatus === '3'">
            {{ compareTime(row.orderExpectedTime, row.orderCompleteTime) ? '（按时维修）' : '（延迟维修）' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button @click="getOrderDetail(row.orderId)" type="primary" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 55px 0"></div>

    <!-- 分页器 -->
    <el-row>
      <div class="pagination_smoke">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="totalCount"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          @current-change="changeCurPage"
        ></el-pagination>
      </div>
    </el-row>

    <!-- 订单详情弹窗 -->
    <el-dialog title="订单信息" :visible.sync="detailObj.detailVisible" width="30%" append-to-body v-if="detailObj">
      <div class="dialog_form">
        <div class="form_itm">
          <span>订单号：</span>
          <span>{{ detailObj.orderId }}</span>
        </div>
        <div class="form_itm">
          <span>报修类型：</span>
          <span>{{ detailObj.repairsFault.faultName }}</span>
        </div>
        <div class="form_itm">
          <span>宿舍楼栋：</span>
          <span>{{ detailObj.repairsStudent.dormNumber }}</span>
        </div>
        <div class="form_itm">
          <span>预期时间：</span>
          <span>{{ detailObj.orderExpectedTime }}</span>
        </div>
        <div class="form_itm">
          <span>联系电话：</span>
          <span>{{ detailObj.repairsStudent.studentPhone }}</span>
        </div>
        <div class="form_itm">
          <span>备选电话：</span>
          <span>{{ detailObj.repairsStudent.studentOtherPhone }}</span>
        </div>
        <div class="form_itm">
          <span>故障图片：</span>
          <template v-if="imgArr != null">
            <div class="img_field" v-for="(item, i) in imgArr" :key="i">
              <img
                @click="item.innerVisible = true"
                :src="item.img"
                alt=""
                style="max-width: 55px; max-height: 55px; margin-right: 20px"
              />
              <el-dialog width="30%" title="故障图片" :visible.sync="item.innerVisible" append-to-body>
                <img :src="item.img" alt="故障图片" style="width: 100%; max-height: 100%" />
              </el-dialog>
            </div>
          </template>
          <span v-else>--</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order_sta: ['待接单', '已接单', '已维修'],
      order_sta_w: ['新订单', '待接单', '已接单', '已维修'],
      order_sty: ['color:green', 'color:red', 'color:orange', 'color:green'],
      loading: false,
      time: null,
      tableData: [],
      totalCount: null, // 总条数
      pageSize: 10, // 每页多少条
      pageNum: 1, // 当前页
      searStatus: '',
      orderStatus: 123,
      imgArr: [],
      detailObj: '',
    }
  },
  created() {
    this.getAllOrderList()
  },
  methods: {
    async getAllOrderList() {
      this.loading = true
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        time: this.time,
        orderStatus: this.orderStatus,
      }
      let res = await this.$API.repair.reqGetOrder(params)
      // console.log(res);
      if (res.status == 200) {
        this.tableData = res.data.list
        this.totalCount = res.data.total
      } else {
        console.log('获取列表数据失败')
        this.$message.error(res.errmsg)
      }
      this.loading = false
    },

    async getOrderDetail(orderId) {
      let params = {
        orderId: orderId,
      }
      let res = await this.$API.repair.reqGetRepairListDetail(params)
      // console.log(res);
      if (res.status == 200) {
        this.imgArr = null
        this.detailObj = res.data
        this.$set(this.detailObj, 'detailVisible', true)
        if (this.detailObj.orderImages) {
          this.imgArr = this.detailObj.orderImages.match(/[^\;]+/g)
          this.imgArr = this.imgArr.map((item) => {
            return { innerVisible: false, img: item }
          })
        }
      } else {
        console.log('获取详情数据失败')
        this.$message.error(res.errmsg)
      }
    },

    deriveExcel() {
      this.time == null
        ? (window.location.href = `/baoxiu/repairApi/order/queryOrderExecl?orderType=${this.orderStatus}`)
        : (window.location.href = `/baoxiu/repairApi/order/queryOrderExecl?time=${this.time}&orderType=${this.orderStatus}`)
      this.$message.success('导出成功')
    },

    changeTime() {
      this.pageNum = 1
      this.getAllOrderList()
    },

    changeStatus() {
      if (this.searStatus == '') {
        this.orderStatus = 123
      } else {
        this.orderStatus = this.searStatus
      }
      this.pageNum = 1
      this.getAllOrderList()
    },

    changeCurPage(val) {
      this.pageNum = val
      this.getAllOrderList()
    },
    compareTime(startTime, endTime) {
      console.log('duibi对比')
      var start_time = startTime.replace(/-|\s|:|\//g, '')
      var end_time = endTime.replace(/-|\s|:|\//g, '')
      if (start_time < end_time) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<style scoped>
.tag {
  width: 108px;
  height: 50px;
  font-size: 24px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: bold;
  line-height: 60px;
}
.pagination_smoke {
  text-align: center;
}
.el-dialog__body .form_itm {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  margin-bottom: 15px;
  font-size: 20px;
}
</style>
