<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="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="searchWork"
          placeholder="选择维修工"
          @change="changeSearchWork"
        >
          <el-option
            v-for="item in workers"
            :label="item.workName"
            :value="item.workId"
            :key="item.workId"
          ></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"
      style="width: 100%"
      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"
        show-overflow-tooltip
      >
      </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
        prop="orderAdvice"
        label="修后评价"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            @click="getOrderDetail(row.orderId)"
            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="detailVisible"
      width="30%"
      append-to-body
      center
      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"
                style="max-width: 55px; max-height: 55px; margin-right: 20px"
              />
              <el-dialog
                width="30%"
                :visible.sync="item.innerVisible"
                append-to-body
                top="2vh"
              >
                <img
                  :src="item.img"
                  alt="故障图片"
                  style="width: 100%; max-height: 100%"
                />
              </el-dialog>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false, //加载效果
      tableData: [], //评价列表
      workers: [], //工人列表
      detailObj: null, //详情信息
      totalCount: null, //总条数
      pageSize: 10, //每页多少条
      pageNum: 1, //当前页
      detailVisible: false, //查看详情弹窗
      imgArr: null, //查看详情弹窗图片列表
      searchWork: "", // 查询人员ID
      time: "", // 查询时间
    };
  },
  mounted() {
    this.getWorker();
    this.getAllComplaintList();
  },
  methods: {
    //获取选择框工人数据
    async getWorker() {
      let params = {
        pageSize: 9999,
      };
      let res = await this.$API.repair.reqGetWorkList(params);
      // console.log(res);
      if (res.status == 200) {
        this.workers = res.data.list;
      } else {
        console.log("获取维修工列表数据请求失败");
        this.$message.error(res.errmsg);
      }
    },

    //获取工人列表数据
    async getAllComplaintList() {
      this.loading = true;
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        time: this.time,
        workId: this.searchWork,
      };
      let res = await this.$API.repair.reqGetRepairWorkList(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) {
      this.detailVisible = true;
      let params = {
        orderId: orderId,
      };
      let res = await this.$API.repair.reqGetRepairListDetail(params);
      // console.log(res);
      if (res.status == 200) {
        this.detailObj = res.data;
        this.imgArr = null;
        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);
      }
    },

    // 筛选框数据改变回调
    changeSearchWork() {
      this.pageNum=1
      this.getAllComplaintList()
    },

    // 时间框数据改变回调
    changeTime() {
      this.pageNum=1
      this.getAllComplaintList()
    },

    // 翻页回调
    changeCurPage(val) {
      this.pageNum = val;
      this.getAllComplaintList();
    },
  },
};
</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>