<template>
  <div class="recovery">
    <div class="title nowrap-ellipsis" :title="exercise_info.exercise_name">{{ exercise_info.exercise_name }}</div>

    <el-table :data="list" height="100%">
      <el-table-column prop="index" label="序号" width="70">
        <template slot-scope="{ $index }">{{ $index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="url" label="链接" width="800" />
      <el-table-column prop="name" label="分享名称" width="120" />
      <el-table-column label="类型" width="60">
        <template slot-scope="{ row }">
          <span>{{ row.access_popedom === 1 ? '协作' : '答题' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="memo" label="备注" width="180" />
      <el-table-column prop="finish_person_count" label="完成练习" width="180" />
      <el-table-column prop="begin_date" label="开始日期" width="120" />
      <el-table-column prop="end_date" label="截止日期" min-width="120" />

      <el-table-column prop="operation" label="操作" fixed="right" width="200">
        <template slot-scope="{ row }">
          <template v-if="row.access_popedom === 1 && row.status === 0">
            <span class="link danger" @click="stopShareRecord(row.id)">停止协作</span>
          </template>
          <template v-if="row.access_popedom === 2">
            <span
              class="link"
              @click="
                $router.push({ path: '/answer_data', query: { share_record_id: row.id, exercise_id: exercise_id } })
              "
            >
              查看
            </span>
            <span v-if="row.status === 0" class="link danger" @click="stopShareRecord(row.id)">停止</span>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <PaginationPage ref="pagination" :total="total" @getList="pageQueryExerciseShareRecordList" />
  </div>
</template>

<script>
import { PageQueryExerciseShareRecordList, StopShareRecord } from '@/api/exercise';

import PaginationPage from '@/components/common/PaginationPage.vue';

export default {
  name: 'RecoveryList',
  components: {
    PaginationPage,
  },
  data() {
    const { query } = this.$route;

    return {
      exercise_id: query.exercise_id,
      exercise_info: {
        exercise_name: '',
      },
      total: 0,
      list: [],
    };
  },
  methods: {
    getPageList() {
      this.$refs.pagination.getList();
    },
    pageQueryExerciseShareRecordList(data) {
      PageQueryExerciseShareRecordList({ ...data, exercise_id: this.exercise_id })
        .then(({ total_count, exercise_info, share_record_list }) => {
          this.list = share_record_list;
          this.exercise_info = exercise_info;
          this.total = total_count;
        })
        .catch(() => {});
    },
    stopShareRecord(share_record_id) {
      this.$confirm('是否停止当前分享记录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          StopShareRecord({ share_record_id })
            .then(() => {
              this.$message.success('停止成功');
              this.getPageList();
            })
            .catch(() => {
              this.$message.error('停止失败');
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.recovery {
  @include list;

  .title {
    width: 217px;
    height: 28px;
    font-size: 20px;
    font-weight: bold;
  }
}
</style>
