<template>
    <div class="app-container">
      <!--工具栏-->
      <!-- 表单渲染 -->
      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="520px">
        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" style="width: 380px;" />
          </el-form-item>
          <el-form-item label="角色级别" prop="level">
            <el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
          </el-form-item>
          <el-form-item label="数据范围" prop="dataScope">
            <el-select v-model="form.dataScope" style="width: 140px" placeholder="请选择数据范围" @change="changeScope">
              <el-option
                v-for="item in dateScopes"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="描述信息" prop="description">
            <el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <el-dialog
      title="文件夹"
      :visible.sync="folderModal"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form ref="folderForm" label-width="120px" :model="folderForm" :rules="folderRules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="folderForm.name" size="small" clearable placeholder="请输入名称" style="width: 200px;" class="filter-item" />
        </el-form-item>
        <el-form-item label="顺序" prop="order">
          <el-input v-model="folderForm.order" size="small" clearable placeholder="请输入顺序" style="width: 200px;" class="filter-item" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="folderModal = false">取消</el-button>
        <el-button type="primary" @click="confirmFolder">确定</el-button>
      </div>
    </el-dialog>
          <!-- 新增窗口 -->
    <el-dialog
      title="文件上传"
      :visible.sync="fileUploadModal"
      :close-on-click-modal="false"
    >
      <el-form ref="formInfo" label-width="120px">
        <el-form-item>
          <el-input v-model="fileType" size="small" clearable placeholder="请输入文件分类" style="width: 200px;" class="filter-item" />
        </el-form-item>
        <el-form-item>
          <label
            class="import-file-dg"
            style="
              color: #1890ff;
              display: inline-block;
              border: 1px solid #1890ff;
            "
          >
            上传文件
            <input
              :ref="`addhdpic`"
              class="helloworld"
              type="file"
              hidden
              @change="addhdPicChange"
            />
          </label>
        </el-form-item>
        <el-form-item label="">
          <div v-for="(item, index) in addEnterhdPics" :key="item.name + index">
            {{ item.name }}
          </div>
        </el-form-item> 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fileUploadModal = false">取消</el-button>
        <el-button type="primary" @click="confirmUploadFile">确定</el-button>
      </div>
    </el-dialog>
      <el-row :gutter="15">
        <!-- 菜单授权 -->
        <el-col :span="6" style="margin-bottom: 10px">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <el-button
                icon="el-icon-minus"
                size="mini"
                style="float: right; margin-left:6px;"
                type="danger"
                @click="delFolder">
               删除</el-button>
               <el-button
                icon="el-icon-plus"
                size="mini"
                style="float: right;"
                type="primary"
                @click="updateFolder">
                修改</el-button>
              <el-button
                icon="el-icon-plus"
                size="mini"
                style="float: right;"
                type="primary"
                @click="addFolder">
                添加</el-button>
              
            </div>
            <el-tree
              ref="menu"
              :data="menus"
              :props="defaultProps"
              check-strictly
              accordion
              show-checkbox
              node-key="id"
               @check="menuChange"
               @node-click="menuClick"
            />
            <!-- <el-tree
              ref="menu"
              lazy
              :data="menus"
              :default-checked-keys="menuIds"
              :load="getMenuDatas"
              :props="defaultProps"
              check-strictly
              accordion
              show-checkbox
              node-key="id"
               @check="menuChange"
               @node-click="menuClick"
            /> -->
          </el-card>
        </el-col>
        
        <!--角色管理-->
        <el-col  :span="16">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <el-button  type="primary" size="mini" @click="fileUploadModal=true">上传文件</el-button>
                <el-input v-model="query.blurry" size="small" clearable placeholder="查询文件分类" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
                <date-range-picker v-model="query.createTime" class="date-item" />
                <el-input v-model="query.blurry" size="small" clearable placeholder="查询文件名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
                <el-button  type="primary" size="mini">查询</el-button>
            </div>
            <el-table ref="table" style="width: 100%;" :data="fileDataList">
              <el-table-column type="" width="55" />
              <el-table-column prop="originallyName" label="文件名称"/>
              <el-table-column label="文件分类" prop="classification" width="100" />
              <el-table-column width="200px" prop="createTime" label="录入时间" />
              <el-table-column label="操作" width="230px" align="center">
                <template slot-scope="scope">
                    <el-button  type="success" size="mini" @click="downFileById(scope.row)">下载</el-button>
                    <el-button  type="danger" size="mini" @click="delFileById(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="currenetPageDegree"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalElement"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import crudRoles from '@/api/system/role'
  // import edoc{ getfileByFolderId, getFolderList, addFileByFolderId, delfileById } from '@/api/kd/edoc'
  import edocApi from '@/api/kd/edoc'

  import { getMenusTree, getChild } from '@/api/system/menu'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
  import DateRangePicker from '@/components/DateRangePicker'
  import { mapGetters } from 'vuex'
  import { getToken } from '@/utils/auth'
  
  const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 }
  export default {
    name: 'Folder',
    components: { Treeselect, pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
    cruds() {
      return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    data() {
      return {
        folderModal: false,
        folderForm: {
          name: '',
          order: 0,
        },
        fileType: '',
        fileUploadModal: false,
        addEnterhdPics: [],
        currentFolderId: '',
        currentCheckedFolderId: '',
        fileDataList: [],
        totalElement: 0,
        currentPage: 0,
        currenetPageDegree: 10,
        dateScopes: ["全部",  "本级及以下", "自定义",],
        defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
        level: 3,
        currentId: 0, currentName: '', menuLoading: false, showButton: false,
        menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
        permission: {
          add: ['admin', 'roles:add'],
          edit: ['admin', 'roles:edit'],
          del: ['admin', 'roles:del']
        },
        folderRules: {
          order: [
            { required: true, message: '请输入顺序', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
    },
    mounted(){
      this.getDataList() // 获取所有文件夹
    },
    created() {
      // crudRoles.getLevel().then(data => {
      //   this.level = data.level
      // })
    },
    methods: {
        // 当前页的条数变化
    handleSizeChange(val) {
      this.currenetPageDegree = val;
      this.getfileByFolderId();
     

    },
    // 当前第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getfileByFolderId();
    },
    getDataList(){
      edocApi.getDataList({
        }).then((res)=>{
          this.menus = res.body

        })
    },
    confirmFolder(){
      if(!this.currentFolderId){
        this.$message.warning('请选择文件夹')             
        return
      }
      this.$refs['folderForm'].validate(valid => {
        if (valid) {
          
          edocApi.addFolder({
            ...this.folderForm,
            pid: this.currentFolderId,
          }).then((res)=>{
            this.$message.success('操作成功')
            this.getDataList()
          })
        }
      })
      
    },

    addFolder(){
     this.folderModal = true
     this.folderForm = {name:'', order:''}
    },
    delFolder(){
      if(!this.currentCheckedFolderId){
        this.$message.warning('请勾选要操作的文件夹')             
        return
      }
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(
        () => {
          edocApi.delFolder([this.currentCheckedFolderId]).then((res)=>{
            this.$message.success('操作成功')
            this.getDataList()
          })
        },
        () => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        }
      );
    },
    downFileById(row) {
      this.isExportLoading = true;
      // 导出信息
      axios.defaults.headers.common["Authorization"] = getToken();
      axios({
        url: process.env.VUE_APP_BASE_API + "/api/thCompany/export",
        responseType: "blob",
        method: "get",
        params: { county: localStorage.getItem("county") },
      }).then((res) => {
        console.log(res, "export");
        let data = res.data;
        let dis = res.headers["content-disposition"];
        let url = URL.createObjectURL(data);
        let fileName = dis.split("attachment;filename*=utf-8''")[1];
        this.down(url, fileName);
        this.isExportLoading = false;
      });
    },
    down(fileUrl, fileName) {
      // 下载模板
      fileName = decodeURIComponent(fileName);
      let a = document.createElement("a");
      a.setAttribute("href", fileUrl);
      a.setAttribute("download", fileName);
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    delFileById(row){
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(
        () => {
          edocApi.delFileById([row.id]).then((res)=>{
            this.$message.success('操作成功')
            this.getfileByFolderId(this.currentFolderId)
          })
        },
        () => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        }
      );
    },
    updateFolder(){

    },
      getfileByFolderId(){
        edocApi.getfileByFolderId({
          catalogueId: this.currentFolderId,
          page: this.currentPage,
          size: this.currenetPageDegree
        }).then((res)=>{
          this.fileDataList = res.body.results
          this.totalElement = res.body.total
        })
      },
      confirmUploadFile(){
        if(!this.currentFolderId){
          this.$message.warning('请选择文件夹')             
          return
        }
        if(!this.addEnterhdPics.length){
          this.$message.warning('请上传文件')             
          return
        }
        const formData = new FormData();
        // console.log(this.formInfo.hdstatus1, "haStatus");
          formData.append('fileList', this.addEnterhdPics[0]);
          formData.append('catalogueId', this.currentFolderId);
          formData.append('classification', this.fileType);

        edocApi.addFileByFolderId(formData).then((res)=>{
          this.$message.success('操作成功')
          this.getfileByFolderId()
          this.fileUploadModal = false

        })
      },
      addhdPicChange(event) {
           // event.target 是触发事件的 input 元素
    const files = event.target.files; // 获取用户选择的文件列表

      // 检查是否有文件选择
      if (files.length > 0) {
          const file = files[0]; // 选择第一个文件
          console.log(`文件名: ${file.name}`);
          console.log(`文件大小: ${file.size} bytes`);
          console.log(`文件类型: ${file.type}`);
      }
        this.addEnterhdPics = [files[0]]
        
      },
      getMenuDatas(node, resolve) {
        setTimeout(() => {
          getMenusTree(node.data.id ? node.data.id : 0).then(res => {
            if (this.user && this.user.isAdmin) {
              res.forEach(menu => {
                menu.label = (menu.enterpriseType === 0 ? '局）' : '企）') + menu.label
              })
            }
            resolve(res)
          })
        }, 100)
      },
      // 触发单选
      handleCurrentChange(val) {
        if (val) {
          const _this = this
          // 清空菜单的选中
          this.$refs.menu.setCheckedKeys([])
          // 保存当前的角色id
          this.currentId = val.id
          this.currentName = val.name
          // 初始化默认选中的key
          this.menuIds = []
          val.menus.forEach(function(data) {
            _this.menuIds.push(data.id)
          })
          this.showButton = true
        }
      },
      menuClick(data, node, target){
        console.log('menuClick', data, node, target)
        // 传递文件夹ID，获取对应文件夹下的文件数据
        this.currentFolderId = data.id
        this.getfileByFolderId()

      },
      menuChange(data, node, target) {
        console.log('menuChange', data, node, target)
         const menu = data
         this.currentCheckedFolderId = node.checkedKeys.length ? node.checkedKeys[0] : ''
         
        // // 获取该节点的所有子节点，id 包含自身
        // getChild(menu.id).then(childIds => {
        //   // 判断是否在 menuIds 中，如果存在则删除，否则添加
        //   if (this.menuIds.indexOf(menu.id) !== -1) {
        //     for (let i = 0; i < childIds.length; i++) {
        //       const index = this.menuIds.indexOf(childIds[i])
        //       if (index !== -1) {
        //         this.menuIds.splice(index, 1)
        //       }
        //     }
        //   } else {
        //     for (let i = 0; i < childIds.length; i++) {
        //       const index = this.menuIds.indexOf(childIds[i])
        //       if (index === -1) {
        //         this.menuIds.push(childIds[i])
        //       }
        //     }
        //   }
        //   this.$refs.menu.setCheckedKeys(this.menuIds)

        //   /**
        //    * 1 勾选菜单后 
        //    * 
        //    */

        // })
      },
      // 保存菜单
      saveMenu() {
        this.menuLoading = true
        const role = { id: this.currentId, menus: [] }
        // 得到已选中的 key 值
        this.menuIds.forEach(function(id) {
          const menu = { id: id }
          role.menus.push(menu)
        })
        crudRoles.editMenu(role).then(() => {
          this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.menuLoading = false
          this.update()
        }).catch(err => {
          this.menuLoading = false
          console.log(err.response.data.message)
        })
      },
      // 改变数据
      update() {
        // 无刷新更新 表格数据
        crudRoles.get(this.currentId).then(res => {
          for (let i = 0; i < this.crud.data.length; i++) {
            if (res.id === this.crud.data[i].id) {
              this.crud.data[i] = res
              break
            }
          }
        })
      },
      // 获取部门数据
      getDepts() {
        getDepts({ enabled: true }).then(res => {
          this.depts = res.content.map(function(obj) {
            if (obj.hasChildren) {
              obj.children = null
            }
            return obj
          })
        })
      },
      getSupDepts(depts) {
        const ids = []
        depts.forEach(dept => {
          ids.push(dept.id)
        })
        getDeptSuperior(ids).then(res => {
          const date = res.content
          this.buildDepts(date)
          this.depts = date
        })
      },
      buildDepts(depts) {
        depts.forEach(data => {
          if (data.children) {
            this.buildDepts(data.children)
          }
          if (data.hasChildren && !data.children) {
            data.children = null
          }
        })
      },
      // 获取弹窗内部门数据
      loadDepts({ action, parentNode, callback }) {
        if (action === LOAD_CHILDREN_OPTIONS) {
          getDepts({ enabled: true, pid: parentNode.id }).then(res => {
            parentNode.children = res.content.map(function(obj) {
              if (obj.hasChildren) {
                obj.children = null
              }
              return obj
            })
            setTimeout(() => {
              callback()
            }, 200)
          })
        }
      },
      // 如果数据权限为自定义则获取部门数据
      changeScope() {
        if (this.form.dataScope === '自定义') {
          this.getDepts()
        }
      },
      checkboxT(row) {
        return row.level >= this.level
      }
    }
  }
  </script>
  
  <style rel="stylesheet/scss" lang="scss">
    .role-span {
      font-weight: bold;color: #303133;
      font-size: 15px;
    }
  </style>
  
  <style rel="stylesheet/scss" lang="scss" scoped>
   ::v-deep .el-input-number .el-input__inner {
      text-align: left;
    }
   ::v-deep .vue-treeselect__multi-value{
      margin-bottom: 0;
    }
   ::v-deep .vue-treeselect__multi-value-item{
      border: 0;
      padding: 0;
    }
  </style>
  