<!-- 公共题库 -->
<template>
  <HomeCommon ref="common" :data="exercise_list" :total="total_count" @getList="pageQueryExerciseList">
    <template #default>
      <el-table-column label="序号" width="70">
        <template slot-scope="{ $index }">{{ $index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="练习名称" width="480" />
      <el-table-column prop="tag" label="标签" width="360">
        <template slot-scope="{ row }">
          <span v-for="(item, i) in row.label_list" :key="i" class="tag">{{ item }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="简介" width="280" />
      <el-table-column prop="teacher_name" label="发布者" width="180" />
      <el-table-column prop="create_time" label="创建日期" width="180" />
      <el-table-column prop="public_person_name" label="共享人" width="180" />
      <el-table-column prop="public_time" label="共享时间" min-width="180" />
      <el-table-column prop="operation" label="操作" fixed="right" width="220">
        <template slot-scope="{ row }">
          <span class="link" @click="showExercise(row.id)">查看</span>
          <span
            v-show="row.teacher_id === $store.state.user.user_code"
            class="link"
            @click="$router.push({ path: '/exercise', query: { id: row.id, back_url: '/' } })"
          >
            编辑
          </span>
          <span class="link" @click="copyExerciseToPersonalStore(row.id)">复制到个人题库</span>
        </template>
      </el-table-column>
    </template>

    <template #search>
      <span class="search-name">搜索</span>
      <el-input
        v-model="searchData.search_content"
        placeholder="全部"
        suffix-icon="el-icon-search"
        @keyup.enter.native="getPageList"
      />

      <span class="search-name">发布者</span>
      <el-select v-model="searchData.teacher_type" placeholder="全部" @change="getPageList">
        <el-option v-for="{ label, value } in teacherTypeList" :key="value" :label="label" :value="value" />
      </el-select>

      <span class="search-name">标签</span>
      <el-select v-model="searchData.label_list" multiple placeholder="全部" @change="getPageList">
        <el-option v-for="item in label_list" :key="item" :label="item" :value="item" />
      </el-select>
    </template>
  </HomeCommon>
</template>

<script>
import { PageQueryExerciseList, GetLabelList, CopyExerciseToPersonalStore } from '@/api/exercise';

import HomeCommon from '../common.vue';

export default {
  name: 'PublicQuestion',
  components: {
    HomeCommon,
  },
  data() {
    return {
      // 搜索数据
      searchData: {
        search_content: '',
        teacher_type: 'all',
        label_list: [],
      },
      teacherTypeList: [
        { label: '全部', value: 'all' },
        { label: '自己', value: 'self' },
        { label: '其他', value: 'other' },
      ],
      label_list: [],
      // 表格数据
      exercise_list: [],
      total_count: 0, // 总条数
    };
  },
  created() {
    this.getLabelList();
  },
  methods: {
    getPageList() {
      this.$refs.common.getList();
    },
    showExercise(exercise_id) {
      this.$router.push({
        path: '/answer',
        query: {
          exercise_id,
          type: 'show',
          question_index: 0,
          back_url: encodeURIComponent(window.location.href),
        },
      });
    },
    pageQueryExerciseList(data) {
      PageQueryExerciseList({
        ...data,
        store_type: 0,
        ...this.searchData,
      }).then(({ total_count, exercise_list }) => {
        this.exercise_list = exercise_list;
        this.total_count = total_count;
      });
    },
    getLabelList() {
      GetLabelList({ store_type: 0 }).then(({ label_list }) => {
        this.label_list = label_list;
      });
    },
    copyExerciseToPersonalStore(exercise_id) {
      CopyExerciseToPersonalStore({ exercise_id }).then(() => {
        this.$message.success('复制成功');
      });
    },
  },
};
</script>
