<template>
  <div>
    <el-form :inline="true" :model="searchForm" ref='searchForm'>
      <el-form-item prop="timer">
        <el-date-picker
          v-model.trim="searchForm.timer"
          style="width: 400px"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="布置开始日期"
          end-placeholder="布置结束日期"
          :picker-options="{
            firstDayOfWeek: 1,
          }"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="status">
        <el-select placeholder="是否提交" v-model="searchForm.status" clearable>
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="isReplied">
        <el-select
          placeholder="是否评价"
          v-model="searchForm.isReplied"
          clearable
        >
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="search">搜索</el-button>
        <el-button type="primary" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      style="width: 100%"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      :data="tableList"
    >
      <el-table-column
        align="center"
        prop="createTime"
        label="布置时间"
        width="150"
      >
        <template slot-scope="scope">{{
          scope.row.createTime | dateForMinFormat
        }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="teacherName"
        label="布置老师"
      ></el-table-column>
      <el-table-column align="center" prop="title" label="训练标题">
        <template slot-scope="scope">
          <div>
            <div >
                <overflow-text :text="scope.row.title" :width="'100%'"></overflow-text>
            </div>
          </div>
        </template>
      </el-table-column>
            <el-table-column align="center" prop="title" label="训练内容">
        <template slot-scope="scope">
          <div>
            <div >
                 <overflow-text :text="scope.row.content" :width="'100%'"></overflow-text>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- content -->
      <el-table-column align="center" label="是否提交">
        <template slot-scope="scope">
          <div>{{ scope.row.status ? "是" : "否" }}</div>
        </template>
      </el-table-column>
            <el-table-column align="center" prop="isView" label="是否查看">
        <template slot-scope="scope">
          <div>{{ scope.row.isView ? "是" : "否" }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="isReplied" label="是否评价">
        <template slot-scope="scope">
          <div>{{ scope.row.isReplied ? "是" : "否" }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center"
                           label="操作"
                           fixed="right">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           v-permission="'afterWorkList/look'"
                           @click="lookDetail(scope.row)">查看</el-button>
              </div>
            </template>
          </el-table-column> -->
    </el-table>
    <pagination
      :total="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { getTimes } from "@/utils";
import pagination from "@/components/Pagination/index";
import { extracurricularExercisesReply } from "@/api/afterSchool";
import dayjs from 'dayjs'
export default {
  props: ["studentId"],
  components: { pagination },
  data() {
    return {
      searchForm: {
        search: "",
        timer: [],
        status: null,
        isReplied: null,
        isRepliedTimely: null,
        isView: null,
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      tableList: [],
    };
  },
  mounted() {
    if (this.searchForm.timer?.length < 1) {
      this.searchForm.timer = [dayjs(new Date().setDate(1)).format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')];
    }
    this.searchForm.search = this.studentId;
    this.getList()
  },
  methods: {
    onReset() {
      this.$refs.searchForm.resetFields()
      this.search()
    },
    search(){
      this.rules.page =1;
      this.getList()
    },
    getList() {
      const { timer, ...rest } = this.searchForm;
      let obj = {
        ...rest,
        page: this.rules.page,
        rows: this.rules.limit,
        ...getTimes(timer, ["submitStartTime", "submitEndTime"], "YYYY-MM-DD"),
      };
      extracurricularExercisesReply(obj).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
  },
};
</script>
