<!--申请书-->
<template>
  <div class="admin-upload">
    <!--申请书-->
    <el-form
      :model="resourceForm"
      :rules="rules"
      ref="resourceForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="文件名称"
        prop="name"
      >
        <el-input v-model="resourceForm.name"></el-input>
      </el-form-item>
      <el-form-item
        label="上传文件"
        prop="body"
      >
        <el-upload
          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"
          accept=".jpg,.jpeg,.png"
          list-type="picture-card"
        >
          <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-item
        label="上传人员"
        prop="resource_ids"
      >
        <el-button
          type="primary"
          @click="submitForm('resourceForm')"
          size="small"
        >点击选择人员</el-button>
        <div style="margin-top:10px;">
          <el-tag style="margin-right:10px;" v-for="(item,index) in nameList" :key="index">{{item}}</el-tag>
        </div>
      </el-form-item>
      <el-form-item>
        <div style="margin-top:30px;">
          <el-button
            type="primary"
            @click="sureSend('resourceForm')"
          >上传</el-button>
          <el-button @click="resetForm">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
    <div
      class="tips"
      v-if="tips.remark"
    >
      <div class="tips-title">
        上传文件注意事项：
      </div>
      <div class="tips-content">
        {{tips.remark}}
      </div>
      <div
        @click="exportModel"
        class="downModel"
      >下载模板</div>
    </div>
    <!--选择上传人员-->
    <el-dialog
      title="选择发送人员"
      center
      :visible.sync="dialogTableVisible"
    >
      <div class="search">
        <el-form
          ref="searchParams"
          :model="searchParams"
          label-width="80px"
        >
          <el-input
            v-model="searchParams.no"
            placeholder="学号"
          ></el-input>
          <el-input
            v-model="searchParams.name"
            placeholder="姓名"
          ></el-input>
          <el-input
            v-model="searchParams.class"
            placeholder="班级"
          ></el-input>
          <el-button
            type="primary"
            @click="searchFile" icon="el-icon-search"
          >搜索</el-button>
        </el-form>
      </div>
      <el-table
        :data="tableList"
        ref="tb"
        @selection-change="seleceTtem"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="true_name"
          label="姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="no"
          label="学号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="class"
          label="班级"
        >
        </el-table-column>
        <el-table-column
          prop="organization.name"
          label="所在支部"
        >
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="searchParams.page"
          background
          :page-sizes="[15,20,30,50,100,200]"
          layout="total, sizes, prev, pager, next, jumper"
          :total='totalPage'
        >
        </el-pagination>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
        center
      >
        <el-button
          type="primary"
          @click="dialogTableVisible=false"
        >确定</el-button>
        <el-button
          type=""
          @click="cancelSendPerson"
        >取消</el-button>
      </span>
    </el-dialog>
   
  </div>
</template>
<script>
import { uploadArchives, fileTips } from "@/api/process/index";
import { setTimeout } from "timers";
import { personnelList } from "@/api/personnel/index";

import store from "@/store";
import { Select } from "element-ui";
export default {
  data() {
    return {
      fileData: {
        file_type: "img"
      },
       tips: "",
      nameList: [], //选中学生姓名列表
      fileList: [], //上传文件列表
      dialogTableVisible: false,
      file: "",
      resourceForm: {
        name: "",
        resource_type: 1,
        resource_ids: [],
        body: "",
        organization_id: "",
        key: "",
        user_id: "",
        staff_id: ""
      },
      tableList: [], //人员列表
      totalPage: 0,
      resourceIds: [],
      searchParams: {
        name: "",
        no: "",
        class: "",
        title: "", //上传人员
        limit: 15, //每页显示条数
        page: 1 //当前页码
      }, //搜索框数据
      rules: {
        name: [{ required: true, message: "请输入文件名称", trigger: "blur" }],
        key: [{ required: true, message: "流程类型", trigger: "blur" }],
        body: [
          { required: true, message: "请选择需要上传的文件", trigger: "click" }
        ],
        resource_ids: [
          { required: true, message: "请选择人员", trigger: "change" }
        ],
      },
    };
  },
  mounted() {
    //console.log(store.getterrs,"anme")
    const id = this.$route.query.id;
    let selectedZb = JSON.parse(sessionStorage.getItem("selectedZb"));
    this.resourceForm.organization_id = this.$route.query.id;
    this.resourceForm.name = selectedZb.name;
    this.resourceForm.key = selectedZb.key;
    this.user_id = store.getters.id;
    this.staff_id = store.getters.staff_id;
    console.log(JSON.parse(sessionStorage.getItem("selectedZb")), "anme");
    const params = {
      key: selectedZb.key
    };
    fileTips(params).then(res => {
      console.log(res.data.data[0], "ceshi");
      this.tips = res.data.data[0];
    });
  },
  methods: {
    //获取人员列表
    async personnelList(params) {
      this.loadingFull = true;
      await personnelList(params).then(res => {
        console.log(res, "获取人员列表");
        this.tableList = res.data.data;
        this.dialogTableVisible = true;
        this.totalPage = res.data.meta.pagination.total;
        this.loadingFull = false;
      });
    },
    //图片放大图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //选择上传人员
    submitForm(formName) {
       this.personnelList();
    },
    //确定上传
    sureSend(formName) {
       let that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$refs.upload.submit();
          this.uploadFile();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      
    },

    resetForm() {
      this.$store.dispatch("tagsView/delView", this.$route);
      // 返回上一步路由
      this.$router.go(-1);
      //this.$refs[formName].resetFields();
    },
    //点击上传
    async uploadFile() {
      await uploadArchives(this.resourceForm).then(res => {
        console.log(res, "shangchuan ");
        this.$message.success("上传成功");
        this.$router.push({ name: "applylist", query: {} });
      });
    },
    //搜索上传人员
    searchFile() {
      this.personnelList(this.searchParams);
    },

    //上传图片
    uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.file = response.data.url;
        this.resourceForm.resource_ids.push(response.data.id);
        this.resourceIds.push(response.data.id);
        this.resourceForm.body = response.data.url;
      }
    },
    //移除已上传的文件
    handleRemove(file, fileList) {
      console.log(file, this.fileList);
      fileList.map(item => {
        let id = item.response.data.id;
        this.resourceForm.resource_ids.push(id);
        this.resourceIds.push(item.response.data.id);
      });
    },
    //选择人员
    seleceTtem(select) {
      let selectedZb = JSON.parse(sessionStorage.getItem("selectedZb"));
      console.log(selectedZb.is_branch, "kkkkkkkkkk");
      if (selectedZb.is_branch == 0) {
        if (select.length > 1) {
          this.$refs.tb.clearSelection();
          this.$refs.tb.toggleRowSelection(select.pop());
          console.log(select, "select");
          return;
        } else {
          console.log(select, "select");
          let arr = [];
          let name = [];
          select.map(item => {
            console.log(item.id);
            arr.push(item.id);
            name.push(item.true_name);
          });
          console.log(arr, "arr");
          this.nameList = name;
          this.resourceForm.staff_id = arr;
          console.log(this.creatForm, "this.creatForm");
        }
      } else {
        console.log(select, "select");
        let arr = [];
        let name = [];
        select.map(item => {
          console.log(item.id);
          arr.push(item.id);
          name.push(item.true_name);
        });
        console.log(arr, "arr");
        this.nameList = name;
        this.resourceForm.staff_id = arr;
        console.log(this.creatForm, "this.creatForm");
      }
    },
    //取消选择人员
    cancelSendPerson() {
      this.dialogTableVisible = false;
      this.nameList = [];
      this.resourceForm.staff_id = [];
    },
    //切换页码
    handleSizeChange1(e) {
      console.log(e, "切换页码");
      this.searchParams.limit = e;
      const data = this.searchParams;
      this.personnelList(data);
    },
    //切换每页显示数量
    handleCurrentChange1(e) {
      console.log(e, "当前页码");
      this.searchParams.page = e;
      const data = this.searchParams;
      this.personnelList(data);
    },
    //下载模板
    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>
.admin-upload {
  position: relative;
  .demo-ruleForm {
    width: 40%;
    margin: 0 auto;
    margin-left: 20%;
    display: inline-block;
    vertical-align: top;
    margin-top: 50px;
  }
  .search .el-input {
    width: 200px !important;
  }
  .tips {
    position: absolute;
    top: 30px;
    right: 5%;
    padding: 10px;
    margin-left: 30%;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgb(171 13 13 / 30%);
    .tips-title {
      height: 30px;
      line-height: 30px;
      border-left: solid 5px #ab0d0d;
      padding-left: 10px;
      font-size: 18px;
      color: rgb(78, 78, 78);
      margin-bottom: 10px;
      font-weight: bold;
    }
    .tips-content {
      width: 280px;
      padding-left: 15px;
      font-size: 14px;
      word-break: break-all;
      white-space: normal;
      line-height: 24px;
    }
    .downModel {
      padding-left: 15px;
      color: #ab0d0d;
      margin-top: 20px;
      font-size: 16px;
    }
  }
}
</style>