<template>
  <q-dialog
    v-model="persistent"
    content-class="bg-grey-1"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 900px; max-width: 900px">
      <q-card-section>
        <div class="text-h6">事件记录</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        <q-table
          :pagination="msg"
          :loading="loading"
          no-data-label="暂无相关数据"
          flat
          class="sticky-column-table"
          separator="none"
          :data="data"
          :columns="columns"
          row-key="name"
        >
          <template v-slot:top="props">
            <!-- <div class="col-2 q-table__title">事件记录</div> -->
          </template>
          <template v-slot:body-cell-EventType="props">
            <q-td :props="props">
              <div v-if="props.row.EventType === 1" style="color: #ff0000">
                处分
              </div>
              <div v-if="props.row.EventType === 2" style="color: #00ff00">
                奖励
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-optioned="props">
            <q-td :props="props">
              <div>
                <q-btn
                  size="xs"
                  color="accent"
                  style="font-weight: 400"
                  label="修改"
                  @click="modify(props.row)"
                />
              </div>
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination
              class="full-width justify-end"
              v-model="msg.pageIndex"
              color="primary"
              :max="pageCount"
              :input="true"
              @input="changePage"
            />
          </template>
        </q-table>
      </q-card-section>
      <q-card-actions align="right" class="bg-white">
        <q-btn
          label="取消"
          flat
          color="grey-10"
          style="font-weight: 400 !important"
          @click="closeSaveForm"
        />
        <!-- <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="save" /> -->
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import { getEventLogPageList } from "../../api/stuMan/index.js";
export default {
  props: {
    setObj: {
      type: Object,
    },
  },
  data() {
    return {
      persistent: true,
      loading: false,
      pageCount: 0,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        rowsPerPage: 10,
        StuId: 0,
        EventType: 0,
      },
      data: [],
      columns: [
        {
          name: "Title",
          label: "标题",
          align: "left",
          field: "Title",
        },
        {
          name: "EventType",
          label: "类型",
          align: "left",
          field: "EventType",
        },
        {
          name: "EventContent",
          label: "内容",
          align: "left",
          field: "EventContent",
          required: true,
        },

        {
          name: "CreateByName",
          label: "创建人",
          align: "left",
          field: "CreateByName",
        },
        {
          name: "CreateTime",
          label: "创建时间",
          align: "left",
          field: "CreateTime",
        },
        {
          name: "optioned",
          label: "操作",
          align: "left",
        },
      ],
    };
  },
  mounted() {
    if (this.setObj) {
      this.msg.StuId = this.setObj.Id;
    }

    this.getList();
  },
  methods: {
    closeSaveForm() {
      this.$emit("close");
      this.persistent = false;
    },
    getList() {
      getEventLogPageList(this.msg).then((res) => {
        if (res.Code === 1) {
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }
      });
    },
    //重新查询
    resetSearch() {
      this.msg.pageIndex = 1;
      this.getList();
    },
    //翻页
    changePage(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    //修改
    modify(item) {
      this.persistent = false;
      this.$emit("modify", item);
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  color: #8c939d;
  position: relative;
  overflow: hidden;
}

.addDutyMain {
  display: inline-block;
  width: 118px;
  height: 118px;
  font-size: 70px;
  border: 1px dashed #d9d9d9;
  line-height: 120px;
}

.ItemImgDiv {
  width: 118px;
  height: 118px;
  position: relative;
  margin: 0 10px 10px 0;
  display: inline-block;
}

._delete_img {
  position: absolute;
  top: 0px;
  height: 82px;
  width: 143px;
  line-height: 34px;
  text-align: center;
  background-color: rgba(2, 2, 2, 0.6);
  display: inherit;
  opacity: 0;
  transition: all linear 0.5s;
}

._delete_img i.iconfont {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #e95252 !important;
  background-color: rgba(251, 251, 251, 0.9);
  margin-top: 26px;
}

._upload_box ul li {
  float: left;
  height: 82px;
  width: 143px;
  padding: 0px 20px 20px 0;
  text-align: center;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}

._upload_box ul li img {
  height: 82px;
  width: 143px;
}

._upload_box ul li:hover ._delete_img {
  opacity: 1;
}

._upload_tips {
  font-size: 12px;
  position: absolute;
  top: 71%;
  width: 100%;
  left: 0;
  text-align: center;
  color: #949494;
}
</style>
