<!-- 个人题库 -->
<template>
  <div class="personal">
    <HomeCommon ref="common" :data="exercise_list" :total="total_count" @getList="pageQueryExerciseList">
      <template #default>
        <el-table-column prop="index" label="序号" width="70">
          <template slot-scope="{ $index }">{{ $index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="练习名称" width="280" />
        <el-table-column prop="tag" label="标签" width="180">
          <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="creator_name" label="创建者" width="160" />
        <el-table-column prop="create_time" label="创建时间" width="180" />
        <el-table-column prop="last_modifier_name" label="最近编辑" width="140" />
        <el-table-column prop="last_modify_time" label="最近编辑时间" width="180" />
        <el-table-column prop="intro" label="简介" width="240" />
        <el-table-column label="状态" min-width="100">
          <template slot-scope="{ row }">
            <span :class="statusList[row.status].class">{{ statusList[row.status].name }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="operation" label="操作" fixed="right" width="300">
          <template slot-scope="{ row }">
            <span class="link" @click="showExercise(row.id)">查看</span>
            <span class="link" @click="$router.push({ path: '/exercise', query: { id: row.id } })">编辑</span>
            <span class="link" @click="share(row.id)">推送</span>
            <span class="link" @click="copyExerciseToPublicStore(row.id)">共享</span>
            <span
              v-if="row.is_has_share_record === 'true'"
              class="link"
              @click="$router.push({ path: '/recovery', query: { exercise_id: row.id } })"
            >
              回收
            </span>
            <span class="link danger" @click="deleteExercise(row.id)">删除</span>
          </template>
        </el-table-column>
      </template>

      <template #operation>
        <el-button type="primary" @click="createExercise">创建练习</el-button>
      </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-input v-model="searchData.creator_name" placeholder="请输入内容" @keyup.enter.native="getPageList" />

        <span class="search-name">状态</span>
        <el-select v-model="searchData.status_list" multiple placeholder="全部" @change="getPageList">
          <el-option v-for="{ label, value } in statusType" :key="value" :label="label" :value="value" />
        </el-select>
      </template>
    </HomeCommon>

    <CreateExercise :dialog-visible.sync="dialogVisible" />
    <ShareDialog :dialog-visible.sync="visibleShare" :exercise-id="exerciseId" @generateLink="generateLink" />
    <ExerciseLink :visible.sync="visibleLink" :share-data="shareData" />
  </div>
</template>

<script>
import { PageQueryExerciseList, DeleteExercise, CopyExerciseToPublicStore } from '@/api/exercise';

import HomeCommon from '../common.vue';
import CreateExercise from './components/CreateExercise.vue';
import ShareDialog from './components/ShareDialog.vue';
import ExerciseLink from './components/ExerciseLink.vue';

export default {
  name: 'PersonalQuestion',
  components: {
    HomeCommon,
    CreateExercise,
    ShareDialog,
    ExerciseLink,
  },
  data() {
    return {
      // 搜索数据
      searchData: {
        search_content: '',
        creator_name: '',
        status_list: [],
      },
      statusType: [
        { label: '未公开', value: 0 },
        { label: '已公开', value: 1 },
      ],
      statusList: [
        { name: '未公开', class: 'unpublished' },
        { name: '已公开', class: 'published' },
      ],
      // 表格数据
      exercise_list: [],
      total_count: 0, // 总条数
      dialogVisible: false,
      exerciseId: '', // 分享id
      visibleShare: false, // 分享弹窗
      visibleLink: false, // 练习题链接弹窗
      shareData: undefined, // 分享数据
    };
  },
  methods: {
    getPageList() {
      this.$refs.common.getList();
    },
    pageQueryExerciseList(data) {
      PageQueryExerciseList({ ...data, store_type: 1, ...this.searchData }).then(({ total_count, exercise_list }) => {
        this.total_count = total_count;
        this.exercise_list = exercise_list;
      });
    },
    showExercise(exercise_id) {
      this.$router.push({
        path: '/answer',
        query: {
          exercise_id,
          type: 'show',
          question_index: 0,
          back_url: encodeURIComponent(window.location.href),
        },
      });
    },
    deleteExercise(exercise_id) {
      this.$confirm('是否删除当前练习题', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteExercise({ exercise_id })
            .then(() => {
              this.$message.success('删除成功');
              this.getPageList();
            })
            .catch(() => {
              this.$message.error('删除失败');
            });
        })
        .catch(() => {});
    },
    copyExerciseToPublicStore(exercise_id) {
      CopyExerciseToPublicStore({ exercise_id }).then(() => {
        this.$message.success('共享成功');
        this.getPageList();
      });
    },
    share(id) {
      this.exerciseId = id;
      this.visibleShare = true;
    },
    createExercise() {
      this.dialogVisible = true;
    },
    generateLink(data) {
      this.shareData = data;
      this.visibleShare = false;
      this.visibleLink = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.personal {
  height: 100%;

  .unpublished,
  .published {
    display: flex;
    align-items: center;

    &::before {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 8px;
      content: '';
      border-radius: 50%;
    }
  }

  .published {
    &::before {
      background-color: $main-color;
    }
  }

  .unpublished {
    &::before {
      background-color: $danger-color;
    }
  }
}
</style>
