<template>

    <!-- <h2>
      <div class="squrt"></div>评论列表
    </h2> -->
    <div class="m-core">
      <el-form :inline="true" class="searchForm" v-model.trim="searchForm">
        <!-- 状态 指导老师 活动方案-->
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            @keyup.enter.native="search"
            placeholder="请输入课程组名称 ID"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="请选择分部" v-model="searchForm.organId" clearable>
            <el-option
              v-for="(item,index) in organList"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="请选择状态" v-model="searchForm.isOver" clearable>
            <el-option label="已完成" value="1"></el-option>
            <el-option label="进行中" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="请选择指导老师" v-model="searchForm.teacherId" clearable filterable>
            <el-option
              v-for="(item,index) in teacherList"
              :label="item.realName"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="是否完成评价" v-model="searchForm.hasReport" clearable>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
          :clearable='false'
            v-model="searchForm.month"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择年月"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="danger">搜索</el-button>
          <el-button @click="onReSet" type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{background:'#EDEEF0',color:'#444'}"
          :data="tableData"
        >
          <el-table-column align="center" prop="id" label="课程组编号"></el-table-column>
          <el-table-column align="center" prop="name" label="课程组名称"></el-table-column>
          <el-table-column align="center" prop="organName" label="分部名称"></el-table-column>
          <!-- <el-table-column align="center" prop="id" label="类型"></el-table-column> -->
          <el-table-column align="center" prop="id" label="收费类型">
            <template slot-scope="scope">
              <div>{{scope.row.buyMonths>0?'付费':'免费'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <div>{{ scope.row.coursesExpireDate | coursesStatus}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="teacherName" label="指导老师"></el-table-column>
          <el-table-column align="center" label="课次">
            <template slot-scope="scope">
              <div>{{scope.row.currentClassTimes+'/'+scope.row.totalClassTimes}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="是否评价">
            <template slot-scope="scope">
              <div>{{scope.row.evaluateStatus?'是':'否'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" v-permission="'evaluateList/look'" v-show='scope.row.evaluateStatus' @click="gotoEvakuateDetail(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>
    </div>

</template>
<script>
import pagination from "@/components/Pagination/index";
import { getReviews, getTeacher, getEmployeeOrgan } from "@/api/buildTeam";
export default {
  components: { pagination },
  data() {
    return {
      searchForm: {
        organId: null,
        isOver: "",
        teacherId: null,
        hasReport: "",
        month: null,
        search: null
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      tableData: [],
      teacherList: [],
      subjectList: [],
      organList: []
    };
  },
  created() {
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
        if (this.$route.query.search) {
        this.$route.query.search instanceof Object ? this.searchForm = this.$route.query.search : this.searchForm = JSON.parse(this.$route.query.search);
      }
      if (this.$route.query.rules) {
        this.$route.query.rules instanceof Object ? this.rules = this.$route.query.rules : this.rules = JSON.parse(this.$route.query.rules);
      }
      if (!this.searchForm.month) {
        var now = new Date();
        this.searchForm.month = new Date(
          Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
        )
          .toISOString()
          .slice(0, 7);
      }

      // 获取指导老师
      getTeacher({}).then(res => {
        if (res.code == 200) {
          this.teacherList = res.data;
        }
      });
      // 获取分部
      getEmployeeOrgan().then(res => {
        if (res.code == 200) {
          this.organList = res.data;
        }
      });
      this.getList();
      // getReviews()
    },
    getList() {
      // 数据效验
      let obj = {};
      obj.hasReport = this.searchForm.hasReport || null;
      obj.isOver = this.searchForm.isOver || null;
      obj.month = this.searchForm.month || null;
      obj.organId = this.searchForm.organId || null;
      obj.page = this.rules.page;
      obj.rows = this.rules.rows;
      obj.search = this.searchForm.search|| null
      obj.teacherId = this.searchForm.teacherId || null;
      getReviews(obj).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows;
          this.rules.total = res.data.total; 
        }
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = { organId: null,
        isOver: "",
        teacherId: null,
        hasReport: "",
        month: null,
        search: null}
            var now = new Date();
        this.searchForm.month = new Date(
          Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
        )
          .toISOString()
          .slice(0, 7);
      
    },
    gotoEvakuateDetail(row){
      let id = row.id;
      let evaluateId = row.evaluateId
      let search = JSON.stringify(this.searchForm)
      let rules = JSON.stringify(this.rules)
      this.$router.push({path:'/business/evaluateDetail',query:{id,evaluateId,search,rules}})
    }
  },
  filters: {
    coursesStatus(val) {
      return new Date().getTime() - new Date(val) > 0 ? "已完成" : "进行中";
    }
  }
};
</script>