<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-01-06 11:30:15
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-01-06 11:55:38
 * @FilePath: /fe-manage/src/views/DownLoad.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="DownLoad">
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      "
    >
      <div class="tab1">
        <div class="nameinp">
          <div class="namee">作业名称：</div>
          <a-input
            v-model:value="name"
            style="width: 330px; height: 40px; border-radius: 8px"
            placeholder="请输入作业名称"
          />
        </div>
        <div class="btns">
          <div class="btn1" @click="searchDownloadList">
            <div class="img1">
              <img src="../assets/images/courseManage/search0.png" />
            </div>
            <div class="wz">搜索</div>
          </div>
          <div class="btn2" @click="reseatDownloadList">
            <div class="img2">
              <img src="../assets/images/courseManage/reset1.png" />
            </div>
            <div class="wz">重置</div>
          </div>
        </div>
      </div>
      <div style="width: 200px">
        <div
          style="
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: rgba(153, 153, 153, 0.85);
            line-height: 22px;
            justify-content: space-between;
          "
        >
          <div>当前容量:</div>
          <div>{{formatCapacity(capacity)}} / 2GB</div>
        </div>
        <a-progress :percent="countCMB" :width="200" :show-info="false" :stroke-color="{
        '0%': countCMB>2?'#FF0000 ':'#45B058',
        '100%': countCMB>2?'#FF0000 ':'#45B058',
      }" />
        <div v-if="formatCapacityGB(capacity)>2" style="color:rgba(255, 116, 116, 1);font-size:12px;">容量已满，请删除文件</div>
      </div>
    </div>
    <!-- 文件容器 -->
    <div style="display:flex;flex-wrap:wrap;">
      <div v-if="homeWorkList.length==0" style="width:100%;height:500px;display:flex;justify-content:center;align-items:center;border:1px solid #d9d9d9;border-radius: 8px;margin-top: 60px;">
        <img src="../assets/images/courseManage/downloadnodata.png" />
      </div>
      <div v-else v-for="(values, index) in homeWorkList" class="zipcontainer" :key="index">
        <!-- 单个文件 -->
        <div v-if="values" class="item">
          <div class="itemup">
            <div class="lefttop"></div>
            <div class="cent">
              <div class="zip"></div>
              <div class="ziprit">
                <div class="textop">{{values.name}}</div>
                <div class="texdown">
                  <div class="timemanag" style="margin-top: 12px">
                    {{values.createTime?values.createTime:'-'}} {{values.createName?values.createName:'-'}}
                  </div>
                  <div class="timemanag">来源：{{{1:'项目',2:'路径图',3:'开课'}[values.type]+'-'+values.name}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="itemdown">
            <div class="download" @click="downLoadFile(values)">下载</div>
            <div class="delete" @click="removeFile(values)">删除</div>
          </div>
        </div>
      </div>
    </div>
    <div style="width:100%;margin-top: 90px;display: flex;justify-content: center;align-items: center;">
      <!-- 分页 -->
      <a-pagination
        v-if="total>10"
        :showSizeChanger="false"
        showQuickJumper="true"
        hideOnSinglePage="true"
        :pageSize="pageSize"
        :current="currentPage"
        :total="total"
        class="pagination"
        @change="changePaginationStu"
      />
    </div>
  </div>
</template>

<script>
import { toRefs, reactive } from "vue";
import { message } from "ant-design-vue";
import * as api from "@/api/indexTaskManage";
export default {
  name: "DownLoad",
  setup() {
    const state = reactive({
      name: "",
      homeWorkList: [],
      currentPage: 1,
      pageSize: 12,
      total: 0,
      capacity: 0,
      countCMB: 0,
    });

    function getData() {
      api.DownLoadList({
        current:state.currentPage,
        name: state.name,
        size: state.pageSize
      }).then(res=>{
        console.log(res)
        if(res.data.code==200){
          state.homeWorkList = res.data.data.records;
          state.total = res.data.data.total;
        }
      }).catch(err=>{
        console.log(err)
      })
    }

    // 获取可下载数据
    getData()

    function getDownLoadTotalSize() {
      api.DownLoadTotalSize().then(res=>{
        console.log(res)
        if(res.data.code==200){
          state.capacity = res.data.data;
        }else{
          state.capacity = 0;
        }
      }).catch(err=>{
        console.log(err)
      })
    }

    // 获取当前用户容量
    getDownLoadTotalSize()

    // 格式化容量显示
    function formatCapacity(data) {
      let num = Number(data);
      let CMB = (num / 1048576).toFixed(2);
      let countCMB = (num / 1048576*1024).toFixed(2);
      state.countCMB = countCMB;
      if(CMB%1024>1){
        CMB = (CMB/1024).toFixed(2) + 'GB';
      }else{
        CMB = CMB + 'MB';
      }
      console.log(CMB)
      return CMB
    }

    function formatCapacityGB(data) {
      let num = Number(data);
      let CMB = (num / (1048576*1024)).toFixed(2);
      return CMB
    }

    // 下载文件
    function downLoadFile(data) {
      console.log(data)
      window.open(process.env.VUE_APP_FILE_PATH + data.url)
    }
    // 删除文件
    function removeFile(data) {
      console.log(data)
      api.RemoveDownLoadHomeWork({
        id:data.id
      }).then(res=>{
        console.log(res)
        if(res.data.code==200){
          message.destroy()
          message.success("删除成功")
          getData()
        }
      }).catch(err=>{
        console.log(err)
        message.destroy()
        message.error("删除失败")
      })
    }

    // 搜索
    function searchDownloadList() {
      getData()
    }

    // 重置
    function reseatDownloadList() {
      state.name = "";
      state.currentPage = 1;
      getData()
    }

    // 分页
     //分页
     const changePaginationStu = (page) => {
      state.currentPage = page;
      getData();
    };

    return {
      ...toRefs(state),
      downLoadFile,
      removeFile,
      changePaginationStu,
      searchDownloadList,
      reseatDownloadList,
      formatCapacity,
      formatCapacityGB
    };
  },
};
</script>

<style lang="scss">
.DownLoad {
  width: 100%;
  margin: 42px 64px 0 32px;
  .tab1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .t1 {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
    .nameinp {
      display: flex;
      align-items: center;
      margin-top: 10px;
      margin-right: 10px;
      .namee {
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
      }
    }
    .btns {
      display: flex;
      margin-top: 10px;

      .btn1 {
        width: 100px;
        height: 40px;
        margin-right: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 14px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 1px solid #4ea6ff;
        cursor: pointer;
        .wz {
          margin-left: 10px;
        }
      }
      .btn1:hover {
        background: rgba(64, 158, 255, 0.76);

        .search {
          background-image: url("../assets/images/courseManage/search0.png");
        }

        .btnText {
          color: #ffffff;
        }
      }
      .btn1:active {
        background: #0982ff;
      }

      .btn2:hover {
        background: rgba(64, 158, 255, 0.1);
      }
      .btn2:active {
        background: rgba(64, 158, 255, 0.2);
      }
      .btn2 {
        width: 100px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4ea6ff;
        font-size: 14px;
        background: #ffffff;
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid #4ea6ff;
        .wz {
          margin-left: 10px;
        }
      }
    }
  }
  .zipcontainer {
    display: flex;
    width: 352px;
    height: 160px;
    flex-wrap: wrap;
    margin-right: 56px;
    margin-top: 90px;
    .item {
      margin-right: 50px;
      margin-bottom: 50px;
      .itemup {
        width: 352px;
        height: 160px;
        background: #ffffff;
        border-radius: 2px 2px 0px 0px;
        border: 1px solid #4ea6ff;
        position: relative;
        .lefttop {
          width: 8px;
          height: 21px;
          background: #4ea6ff;
          border-radius: 0px 4px 4px 0px;
          top: 18px;
          position: absolute;
        }
        .cent {
          display: flex;
          margin-top: 40px;
          margin-left: 40px;
          .zip {
            width: 62px;
            height: 72px;
            background-image: url(../assets/images/leveladd/zip.png);
            background-size: 100%;
          }
          .ziprit {
            margin-left: 20px;
            margin-top: -5px;
            .textop {
              font-size: 18px;
              font-weight: 600;
              color: #4ea6ff;
            }
            .texdown {
              .timemanag {
                font-size: 14px;
                font-weight: 400;
                color: #878b92;
              }
            }
          }
        }
      }
      .itemdown {
        width: 352px;
        height: 48px;
        border-radius: 0px 0px 2px 2px;
        border: 1px solid #4ea6ff;
        border-top: 0;
        display: flex;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        .download {
          width: 176px;
          height: 48px;
          color: #ffffff;
          cursor: pointer;
          background: #409eff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .download:hover {
          background-color: rgba(64, 158, 255, 0.76);
        }
        .download:active {
          background-color: #0982FF;
        }
        .delete {
          width: 176px;
          height: 48px;
          color: #4ea6ff;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .delete:hover{
          background-color: rgba(64, 158, 255, 0.10);
        }
        .delete:active{
          background-color: rgba(64, 158, 255, 0.20);
        }
        .outime {
          font-size: 16px;
          font-weight: 400;
          color: #878b92;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
