<!--数据列表-->
<template>
  <div class="home">
    <div v-loading.fullscreen.lock="loadingFull" />

    <div class="left">
      <el-tree
        :data="treeList"
        node-key="id"
        default-expand-all
        :highlight-current="true"
        @current-change="clickChange"
        :expand-on-click-node="false"
        :props="{ label: 'name' }"
      >
      </el-tree>
    </div>
    <div class="right">
      <!--文件列表-->
      <div>
        <el-breadcrumb
          class="nav-breadcrumb"
          separator="/"
        >
          <el-breadcrumb-item>当前位置：<span class="wtag">{{
              currentNode.name
              }}</span></el-breadcrumb-item>
        </el-breadcrumb>
        <div class="search">
          <el-form
            ref="searchParams"
            :model="searchParams"
            label-width="80px"
          >
            <el-input
              v-model="searchParams.name"
              placeholder="文件名称"
              clearable
            ></el-input>
            <el-button
              type="primary"
              @click="searchFile"
              icon="el-icon-search"
            >搜索</el-button>
            <el-button
              type="danger"
              @click="uploadNewFile"
              icon="el-icon-upload el-icon--left"
            >上传{{ currentNode ? currentNode.name : "" }}</el-button>
            <el-button
              type="danger"
              icon="el-icon-download"
              @click="exportModel"
            >下载{{ currentNode ? currentNode.name : "" }}模板</el-button>
          </el-form>
        </div>
        <el-table
          :data="applyList"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="staff.no"
            label="学号"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="staff.name"
            label="姓名"
            width="80"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="staff.class"
            label="班级"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="user.name"
            label="上传人员"
            width="100"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="organization.name"
            label="所属支部"
            align="center"
          >
          </el-table-column> -->
          <el-table-column
            prop="updated_at"
            label="更新时间"
            width="155"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="55"
            align="center"
          >
            <template slot-scope="{ row }">
              <el-tag
                size="mini"
                type="success"
                v-if="row.status == 1"
              >正常</el-tag>
              <el-tag
                size="mini"
                type="danger"
                v-else
              >暂停</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="250"
          >
            <template slot-scope="{ row }">
              <el-button
                plain
                type="primary"
                size="mini"
                @click="lookDetail(row)"
              >详情</el-button>
              <el-button
                type="success"
                plain
                size="mini"
                @click="editFile(row)"
              >编辑</el-button>
              <el-button
                type="warning"
                plain
                size="mini"
                @click="deleteFile(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            background
            :page-sizes="[15, 20, 30, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
          >
          </el-pagination>
        </div>
        <!--资源详情-->
        <el-dialog
          title="资源详情"
          :visible.sync="dialogVisible"
          width="50%"
          center
        >
          <div class="detail-con">
            <div class="detail-title">{{ detailList.name }}</div>
            <div class="title1">({{ detailList.is_branch_text }})</div>

            <div class="edit-image">
              <div
                class="img-list"
                @click="imageDetail(item)"
                v-for="(item, index) in detailList.resource"
              >
                <img
                  :src="item"
                  alt=""
                />
              </div>

              <div
                class="big-img"
                v-show="imgDetaildialogVisible"
                @click="closeBigImg"
              >
                <img
                  :src="bigImage"
                  alt=""
                />
              </div>
            </div>
          </div>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              type="primary"
              @click="dialogVisible = false"
            >关 闭</el-button>
          </span>
        </el-dialog>
        <!--修改资源-->
        <el-dialog
          title="编辑"
          :visible.sync="putVisible"
          width="50%"
          center
        >
          <el-form
            :model="editForm"
            ref="editForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <!-- <el-form-item label="流程类型" prop="key">
              <el-input v-model="editForm.key"></el-input>
            </el-form-item> -->
            <el-form-item
              label="文件名称"
              prop="name"
            >
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item
              label="上传文件"
              prop="body"
            >
              <div
                v-if="type == 0"
                class="edit-image"
              >
                <div
                  class="img-list"
                  v-for="(item, index) in editForm.resource"
                >
                  <img
                    :src="item"
                    alt=""
                  />
                </div>

              </div>

              <div v-if="type == 0">
                <el-button
                  size="small"
                  class="resput"
                  type="primary"
                  @click="resUpload"
                >重新上传</el-button>
              </div>
              <el-upload
                v-if="type == 1"
                class="upload-demo"
                ref="upload"
                :action="base_url+'/upload'"
                :file-list="fileList"
                :auto-upload="true"
                :on-success="uploadSuccess"
                :data="fileData"
               :multiple="true"
                :on-remove="handleRemove"
                list-type="picture-card"
                accept=".jpg,.jpeg,.png"
              >
                <i
                  slot="default"
                  class="el-icon-plus"
                ></i>
                <div
                  slot="tip"
                  class="el-upload__tip"
                >
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="putVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="editSave()"
            >保存编辑</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import {
  archivesList,
  deleteArchives,
  archivesDetail,
  putArchives,
  uploadArchives,
  fileTips
} from "@/api/process/index";
import { setTimeout } from "timers";
import { treeOrganizationList } from "@/api/personnel/index";
import store from "@/store";
export default {
  data() {
    return {
      bigImage: "",
      imgDetaildialogVisible: false,
      dialogVisible: false,
      putVisible: false,
      loadingFull: false,
      applyList: [], //数据列表
      detailList: "", //详情数据
      searchParams: {
        userName: "", //上传人员
        organization_id: "", //支部id
       // user_id: "", //上传人员id
        key: "", //步骤key
        accoun: "", //支部名称
      }, //搜索框数据
        limit: 15, //每页显示条数
        page: 1, //当前页码
      totalPage: 0, //总页码
      editForm: {
        key: "",
        name: "",
        resource_ids: [],
        resource: ""
      }, //编辑表单
      fileData: {
        file_type: "img"
      },
      fileList: [], //上传文件列表
      file: "",
      type: 0,
      resourceForm: {
        name: "",
        resource_type: "",
        resource_ids: [],
        body: "",
        key: ""
      },
      rules: {
        name: [{ required: true, message: "请输入文件名称", trigger: "blur" }],
        key: [{ required: true, message: "流程类型", trigger: "blur" }]
      },
      organizationId: sessionStorage.getItem("organizationId"),
      treeList: [], //支部列表
      currentNode: []
    };
  },
  created() {},
  mounted() {
    //console.log(store.getters,"anme")
    this.getTreeLists();
    let selectedZb = JSON.parse(sessionStorage.getItem("selectedZb"));
    this.currentNode = selectedZb;
    console.log(selectedZb, "Mead===");
    let organizationId = sessionStorage.getItem("organizationId");
    this.searchParams = {
      userName: "", //上传人员
      organization_id: store.getters.organization_ids[0], //支部id
     // user_id: store.getters.id, //上传人员id
      key: selectedZb.key, //步骤key
    };
    this.archivesList(this.searchParams);
    const params = {
      key: selectedZb.key
    };
    fileTips(params).then(res => {
      this.tips = res.data.data[0];
    });
  },
  methods: {
    //关闭大图
    closeBigImg() {
      this.imgDetaildialogVisible = false;
    },
    //查看大图
    imageDetail(item) {
      this.imgDetaildialogVisible = true;
      this.bigImage = item;
    },

    //点击切换组织
    clickChange(e) {
      let params={
        organization_id : e.id,
        key:this.searchParams.key
      }
       
      this.searchParams.organization_id=e.id
      this.archivesList(params);
    },
    //获取组织树状列表
    async getTreeLists() {
      this.loadingFull = true;
      await treeOrganizationList().then(res => {
        this.treeList = res.data;
        console.log(res, "获取组织树状列表");
        let selectedZb = JSON.parse(sessionStorage.getItem("selectedZb"));
        this.searchParams.key = selectedZb.key;
        this.searchParams.organization_id = res.data[0].id;
        this.archivesList(this.searchParams);
        //this.personnelList();
      });
    },
    //点击上传
    async uploadFile() {
      await uploadArchives(this.resourceForm).then(res => {
        console.log(res, "shangchuan ");
        this.archivesList(this.searchParams);
      });
    },

    //搜索
    searchFile() {
      this.archivesList(this.searchParams);
    },
    //获取列表数据
    async archivesList(data) {
      let that = this;
    
      this.loadingFull = true;
      await archivesList(data).then(res => {
        this.totalPage = res.data.meta.pagination.total;
        console.log(res.data.data, "res");
        this.applyList = res.data.data;
        setTimeout(function() {
          that.loadingFull = false;
        }, 300);
      });
    },
    //删除数据
    async deleteFile(id) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteArchives(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async deleteArchives(params) {
      this.loadingFull = true;
      await deleteArchives(params)
        .then(res => {
          this.loadingFull = false;
          console.log(res, "删除");
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.archivesList(this.searchParams);
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(err => {
          this.loadingFull = false;
        });
    },
    //查看详情
    lookDetail(row) {
      let id = row.id;
      this.loadingFull = true;
      archivesDetail(id)
        .then(res => {
          this.detailList = res.data;
          this.dialogVisible = true;
          this.loadingFull = false;
          console.log(res, "查看详情");
        })
        .catch(err => {
          this.loadingFull = false;
        });
    },

    //编辑
    editFile(row) {
      this.loadingFull = true;
      let id = row.id;
      this.putVisible = true;
      archivesDetail(id).then(res => {
        this.editForm = {
          id: row.id,
          key: res.data.key,
          name: res.data.name,
          resource_ids: "",
          resource: res.data.resource,
          organization_id: res.data.organization_id,
          resource_type: res.data.resource_type,
          staff_id: res.data.staff_id
        };
        this.loadingFull = false;
      });
    },
    //保存编辑
    editSave() {
      var that = this;
      that.putArchives(that.editForm);
      setTimeout(function() {
        that.editForm = [];
        that.type = 0;
      }, 500);
    },
    async putArchives(data) {
      console.log(data, "data");
      await putArchives(data).then(res => {
        this.$message.success("编辑成功");
        this.putVisible = false;
      });
    },
    //重新上传按钮
    resUpload() {
      this.type = 1;
      this.editForm.resource_ids = [];
      this.editForm.resource = "";
    },
    //上传图片
    uploadSuccess(response, file, fileList) {
      let that = this;
      if (response.code == 200) {
        this.file = response.data.url;
        let arr = [];
        arr.push(response.data.id);
        console.log(fileList,"ppppppppppp--------------")
        this.editForm.resource_ids.push(response.data.id);
        this.resourceForm.body = response.data.url;
      }
    },
    //上传新文件
    uploadNewFile() {
      let id = this.searchParams.organization_id;
      this.$router.push({ name: "application", query: { id: id } });
    },
    //切换页码
    handleSizeChange(e) {
      console.log(e, "切换页码");
      this.searchParams.limit = e;
      const data = {
        userName:this.searchParams.userName, //上传人员
        organization_id: this.searchParams.organization_id, //支部id
        key: this.searchParams.key, //步骤key
        limit:e
      }
      this.archivesList(data);
    },
    //切换每页显示数量
    handleCurrentChange(e) {
      console.log(e,this.page,'----------------------------------')
      
     const data = {
        userName:this.searchParams.userName, //上传人员
        organization_id: this.searchParams.organization_id, //支部id
        key: this.searchParams.key, //步骤key
        page:e
      }
      this.archivesList(data);
    },
    //移除已上传的文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //下载模板
    exportModel() {
      let url = this.tips.resource;

      let a = document.createElement("a");
      a.style.display = "none";
      document.body.appendChild(a);
      let triggerDownload = $(a)
        .attr("href", url)
        .attr("download", "人员名单")
        .attr('target','_blank');
      triggerDownload[0].click();
      document.body.removeChild(a);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/content.scss";
.nav-breadcrumb {
  padding-bottom: 15px;
  .wtag {
    color: red;
  }
}
.demo-ruleForm {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
}
.el-dialog {
  margin-top: 5vh !important;
}

.detail-con {
  margin: 0 auto;
  text-align: center;
  .detail-title {
    height: 50px;
    line-height: 50px;
    font-size: 24px;
  }
  .image {
    width: 100%;
    height: auto;
    margin-top: 20px;
  }
  .title1 {
    height: 30px;
    line-height: 30px;
    margin-bottom: 30px;
  }
}

.edit-image {
  text-align: center;
  display: flex;
  flex-flow: row wrap;
}

.img-list {
  flex: 0 0 200px;
  height: 200px;
  width: 200px;
  margin: 20px 5px 5px;
  overflow: hidden;
  img {
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 200px;
    width: 200px;
  }
}
.big-img {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  img {
    margin-top: 3%;
    width: 33%;
    height: auto;
  }
}
.resput {
  margin-top: 20px;
}
.home {
  display: flex;
  .left {
    min-height: 100vh;
    box-shadow: 5px 5px 7px 7px #f3f2f2;
    flex: 0 0 270px;
    padding-bottom: 20px;
    .el-tree-node__content {
      height: 40px;
    }
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      color: #409eff;
      background-color: #ffffff;
    }
  }
  .right {
    position: relative;
    flex: 1;
    margin-left: 20px;
    padding-bottom: 50px;
    .search {
      .el-form {
        width: 100%;
        .el-input {
          width: 200px !important;
        }
      }
      .el-dropdown {
        margin-left: 10px;
      }
    }
    .paging {
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
