<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <link rel="stylesheet" href="./assets/style/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- <el-carousel :interval="4000" height="200px">
        <el-carousel-item v-for="(item, index) in pinList" :key="index">
          <h3 class="medium">{{ item.name }}</h3>
        </el-carousel-item>
      </el-carousel> -->
      <div class="upload_project">
        <el-upload
          class="upload-item"
          drag
          action=""
          multiple
          :show-file-list="false"
          :before-upload="e => checkProject('public',e)"
        >
          <img
            class="el-icon-upload public"
            src="./assets/img/public.svg"
            alt=""
          />
          <div class="el-upload__text">拖动或<em>点击上传</em>公开项目</div>
          <!-- <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div> -->
        </el-upload>
        <el-upload
          class="upload-item"
          drag
          action=""
          multiple
          :show-file-list="false"
          :before-upload="e => checkProject('private',e)"
        >
          <img class="el-icon-upload" src="./assets/img/private.svg" alt="" />
          <!-- <i class="el-icon-upload"></i> -->
          <div class="el-upload__text">拖动或<em>点击上传</em>私有项目</div>
          <!-- <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div> -->
        </el-upload>
      </div>
      <!-- <el-button @click="getProjectList">获取项目列表</el-button>
      <el-button @click="createProject('public')">新建公开项目</el-button>
      <el-button @click="createProject('private')">新建私有项目</el-button> -->

      <el-collapse
        accordion
        class="project_list"
        v-model="activePanel"
        @change="getRepositoryBranches"
        v-if="list.length"
      >
        <el-collapse-item
          class="project_item"
          v-for="item in list"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        >
          <template slot="title">
            <div class="project_panel">
              <img
                class="project_avatar"
                :src="item.avatar_url || 'https://static.wbolt.com/wp-content/uploads/2020/09/wordpress-repair-database-thumb.jpg'"
                alt=""
              />
              <div class="project_info">
                <div class="name">{{item.name}}</div>
                <div class="desc">{{item.description}}</div>
                <div class="detail">
                  <div class="time">{{item.last_activity_at}}</div>
                  <div class="data">
                    <div class="star">
                      <i class="el-icon-star-off"></i>
                      {{item.star_count}}
                    </div>
                    <div class="fork">
                      <i class="el-icon-share"></i>
                      {{item.forks_count}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="item.branches">
            <div v-if="item.branches.length">
              <div
                class="branch_item"
                v-for="branch in item.branches"
                :key="branch.name"
              >
                <div class="branch_name">{{branch.name}}</div>
                <div class="branch_controls">
                  <el-button circle icon="el-icon-refresh"></el-button>
                  <el-button
                    @click="downloadProject(item,branch)"
                    circle
                    icon="el-icon-download"
                  ></el-button>
                  <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定删除该分支吗？"
                    @confirm="deleteBranch(item,branch)"
                  >
                    <el-button
                      slot="reference"
                      circle
                      icon="el-icon-delete"
                    ></el-button>
                  </el-popconfirm>
                </div>
              </div>
            </div>
            <div v-else class="no_data">暂无分支</div>
          </template>
          <el-skeleton :rows="3" animated v-else />
        </el-collapse-item>
      </el-collapse>
      <div class="project_list" v-else>
        <el-skeleton
          animated
          class="empty_list"
          v-for="item in 6"
          :key="item"
        />
      </div>
    </div>
    <script src="./assets/js/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./assets/js/index.js" type="module"></script>
  </body>
</html>
