<template>
  <div class="project-tab">
    <el-button v-if="isCreator"
               class="tabs-function-button"
               type="primary"
               @click="openProjectDialog">
      新建项目
    </el-button>
    <el-tabs v-model="tabName">
      <el-tab-pane label="公共项目" name="public">
        <div v-if="projects!==null">
          <div v-if="projects.public.length===0">
            当前没有公共项目
          </div>
          <div v-else>
            <project-long-card v-for="item in projects.public" :key="'project'+item.id"
                               :project="item" is-public :is-teacher="isCreator"
                               @fork="handleForkProject(item.id)"
                               @switch="handleSwitchProject(item.id)"/>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="私有项目" name="private">
        <div v-if="projects!==null">
          <div v-if="projects.private.length===0">
            当前没有私有项目
          </div>
          <div v-else>
            <project-long-card v-for="item in projects.private" :key="'project'+item.id"
                               :project="item" :is-teacher="isCreator"
                               @switch="handleSwitchProject(item.id)"/>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <el-dialog v-model="projectDialog" :before-close="handleProjectFormClose" title="新建项目">
    <el-form :model="projectForm" :rules="projectFormRule" ref="projectFormRef" label-position="right">
      <el-form-item label="项目名称" prop="name">
        <el-input ref="name" v-model="projectForm.name" placeholder="请输入项目名称(小写英文字母开头，由字母和-组成的字符串，长度为3-30)"/>
      </el-form-item>
      <el-form-item label="项目描述" prop="description">
        <el-input v-model="projectForm.description" placeholder="请输入项目描述"/>
      </el-form-item>
      <el-form-item label="是否公共" prop="isPublic">
        <el-select v-model="projectForm.isPublic">
          <el-option label="公共" :value="true"/>
          <el-option label="私有" :value="false"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleProjectFormConfirm">
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import ProjectLongCard from "@/views/CourseDetailPage/tabs/ProjectTab/ProjectLongCard.vue";
import {ElMessage} from "element-plus";

export default {
  name: "ProjectTab",
  components: {
    ProjectLongCard,
  },
  props: {
    courseId: {
      required: true,
    },
    teacherId: {
      required: true,
    },
  },
  data() {
    return {
      tabName: "public",
      projects: null,

      projectDialog: false,
      projectForm: {
        name: "",
        description: "",
        isPublic: false,
      },
      projectFormRule: {
        name: [{required: true, message: "项目名称不能为空"},
          {
            type: "string",
            message: "项目名称格式不正确",
            trigger: "blur",
            transform(value) {
              var namereg = /^[a-z]([a-z]|-){2,29}$/;
              if (!namereg.test(value)) {
                return false;
              } else {
                return String(value);
              }
            }
          }],
      },
    };
  },
  computed: {
    isCreator() {
      return Number(this.teacherId) === Number(this.$store.state.user.id);
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const _this = this;
      const projectRes = (await _this.$apis.findProjectsByCourse(_this.courseId)).data;
      if (projectRes.code) {
        ElMessage.error(projectRes.message);
      } else {
        _this.projects = projectRes.data;
      }
    },

    async handleForkProject(id) {
      const _this = this;
      const res = (await _this.$apis.forkProject(id, null)).data;
      if (!res.code) {
        _this.projects.private.push(res.data);
        _this.tabName = "private";
        ElMessage.success("Fork完成");
      } else {
        ElMessage.error(res.message);
      }
    },

    async handleSwitchProject(id) {
      const _this = this;
      const res = (await _this.$apis.updateCourseProjectState(id)).data;
      if (!res.code) {
        if (res.data) {
          removeProject(_this.projects.private, _this.projects.public);
          _this.tabName="public";
        } else {
          removeProject(_this.projects.public, _this.projects.private);
          _this.tabName="private";
        }
      }

      function removeProject(array1, array2) {
        for (const index in array1) {
          if (array1[index].id === id) {
            array2.push(array1[index]);
            array1.splice(index, 1);
            return;
          }
        }
      }
    },

    handleProjectFormClose() {
      const _this = this;
      _this.projectDialog = false;
      _this.$refs.projectFormRef.resetFields();
    },

    async handleProjectFormConfirm() {
      const _this = this;
      const res = (await _this.$apis.createProject({
        courseId: _this.courseId,
        ..._this.projectForm,
      })).data;
      if (res.code) {
        ElMessage.error(res.message);
      } else {
        if (_this.projectForm.isPublic) {
          _this.projects.public.push(res.data);
          _this.tabName = "public";
        } else {
          _this.projects.private.push(res.data);
          _this.tabName = "private";
        }
        _this.projectDialog = false;
        _this.$refs.projectFormRef.resetFields();
      }
    },

    openProjectDialog() {
      const _this = this;
      _this.projectDialog = true;
    }
  },
};
</script>

<style scoped>
@import "../tabs.css";
</style>