<template>
  <div class="main-container">
    <TableHeader
      :can-collapsed="
        likeSearchModel.conditionItems &&
        likeSearchModel.conditionItems.length !== 0
      "
      :search-model="likeSearchModel.conditionItems"
      :default-collapsed-state="true"
      title="查询条件"
      @doSearch="doSearch"
      @resetSearch="resetSearch"
    >
    </TableHeader>
    <TableBody ref="tableBody">
      <template>
        <el-table
          ref="table"
          height="441px"
          style="font-size: 14px"
          row-key="id"
          v-loading="tableLoading"
          :data="filterList || dataList"
          :header-cell-style="tableConfig.headerCellStyle"
          :size="tableConfig.size"
          :stripe="tableConfig.stripe"
          :border="tableConfig.border"
          @selection-change="handleSelectionChange"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          >
          <el-table-column align="center" label="日期" prop="time" />
          <el-table-column align="center" label="寝室楼" width="70px">
            <template slot-scope="scope">
              {{ scope.row.buildingNo + "号楼" }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="寝室号" width="130px">
            <template slot-scope="scope">
              {{ scope.row.roomNo }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="班级"
            prop="classroom"
            width="160px"
          />
          <el-table-column
            align="center"
            label="整洁星"
            prop="tidy"
            width="80px"
          >
            <template slot-scope="scope">
              {{ scope.row.tidy == 1 ? "合格" : "不合格" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="安全星"
            prop="safe"
            width="80px"
            ><template slot-scope="scope">
              {{ scope.row.safe == 1 ? "合格" : "不合格" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="健康星"
            prop="healthy"
            width="80px"
            ><template slot-scope="scope">
              {{ scope.row.healthy == 1 ? "合格" : "不合格" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="和谐星"
            prop="peace"
            width="80px"
            ><template slot-scope="scope">
              {{ scope.row.peace == 1 ? "合格" : "不合格" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="进步星"
            prop="progress"
            width="80px"
            ><template slot-scope="scope">
              {{ scope.row.progress == 1 ? "合格" : "不合格" }}
            </template>
          </el-table-column>
          <el-table-column label="图片" width="50px">
            <template slot-scope="scope">
              <el-button @click="showImg(scope.row)" type="text" size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="总评">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.total"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </TableBody>
    <TableFooter
      :current-page="pageVal"
      :page-size="pageModel.pageSize"
      :total-size="total"
      @pageSizeChanged="pageSizeChanged"
      @currentChanged="currentChanged"
      @onRefresh="doRefresh"
    />
    <el-dialog :visible.sync="dialogVisibleImg" top="2%" :modal="false">
      <el-image width="100%" :src="imgList[0]" :preview-src-list="imgList"></el-image>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { requestGet } from "@/utils/request/request";
import TableMixin, { PageModelMixin } from "@/mixins/TableMixin";
import {
  LikeSearchMixin,
  GetDataMixin,
  RefreshActionMixin,
} from "@/mixins/ActionMixin";
export default {
  name: "TableWithSearch",
  mixins: [
    TableMixin,
    LikeSearchMixin,
    GetDataMixin,
    PageModelMixin,
    RefreshActionMixin,
  ],
  computed: {
    //获取vuex数据
    ...mapGetters(["avatar", "token_"]),
  },
  data() {
    return {
      filterList: null,
      pageVal: 1,
      pageSize: "20",
      total: 0,
      tableLoading: false,
      select: {
        buildingNo: "",
        roomNo: "",
        classroom: "",
      },
      imgList: [],
      dialogVisibleImg: false,
    };
  },
  created() {
    
    this.selectTable(this.pageVal);
    this.initLikeSearch({
      url: "/",
      //自定义查询输入框
      conditionItems: [
        {
          name: "buildingNo",
          label: "楼号",
          value: "",
          type: "select",
          placeholder: "请选择楼号",
          selectOptions: [
            {
              label: "一号楼",
              value: 1,
            },
            {
              label: "二号楼",
              value: 2,
            },
            {
              label: "三号楼",
              value: 3,
            },
            {
              label: "四号楼",
              value: 4,
            },
            {
              label: "五号楼",
              value: 5,
            },
          ],
          span: 4,
        },
        {
          name: "roomNo",
          label: "寝室号",
          value: "",
          type: "input",
          placeholder: "请输入寝室号",
          span: 4,
        },
        {
          name: "classroom",
          label: "班级",
          value: "",
          type: "input",
          placeholder: "请输入班级",
          span: 8,
        },
      ],
      extraParams: () => this.withPageInfoData(),
      onResult: (res) => {
        this.handleSuccess(res);
      },
      onError: (error) => {
        console.log(error);
      },
    });
  },

  mounted() {},
  methods: {
    //获取表格数据
    selectTable(val) {
      this.tableLoading = true;
      this.filterList = [];
      requestGet({
        url: "/inspection/selectInspection",
        params: {
          pageValue: val,
          pageSize: this.pageSize,
          buildingNo: this.select.buildingNo,
          roomNo: this.select.roomNo,
          classroom: this.select.classroom,
        },
      }).then((res) => {
        this.tableLoading = false;
        this.filterList = res.data.data;
        this.total = res.data.num;
      });
    },
    //增加
    onAdd() {},
    //删除
    onDeleteMulti() {},
    //查询
    doSearch() {
      //获取筛选框输入数据
      const { buildingNo, roomNo, classroom } = this.generatorSearchParams();
      this.select.buildingNo = buildingNo;
      this.select.roomNo = roomNo;
      this.select.classroom = classroom;
      this.selectTable(1);
    },
    //重置查询
    resetSearch() {
      this.select.buildingNo = "";
      this.select.roomNo = "";
      this.select.classroom = "";
      this.selectTable(1);
    },
    //分页
    currentChanged(val) {
      this.pageVal = val;
      this.selectTable(val);
    },
    //每页几条数据
    pageSizeChanged(val) {
      this.pageSize = val;
      this.selectTable(this.pageVal);
    },
    //刷新分页
    doRefresh() {
      this.selectTable(this.pageVal);
    },
    //多选操作
    handleSelectionChange(val) {
      console.log(val);
    },
    showImg(row) {
      requestGet({
        url: "/inspection/selectImg",
        params: {
          buildingNo: row.buildingNo,
          roomNo: row.roomNo,
          time: row.time,
        },
      })
        .then((res) => {
          this.imgList = res.data.data[0].img;
          console.log(this.imgList);
          this.dialogVisibleImg = true;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  margin: 0 auto;
}
.avatar-container {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  vertical-align: middle;
  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .avatar-vip {
    border: 2px solid #cece1e;
  }
  .vip {
    position: absolute;
    top: 0;
    right: -9px;
    width: 15px;
    transform: rotate(60deg);
  }
}
.gender-container {
  .gender-icon {
    width: 20px;
  }
}
</style>
