<template>
  <div class="app-container">
    <el-container>
      <el-aside width="300px" style="background-color:#fff">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          class="filter-tree"
          accordion
          @node-click="handleNodeClick"/>
      </el-aside>
      <el-main>
        <div class="filter-container">
          <div v-if="LEVELTYPE !='1'" class="filter-group">
            <div class="filter-lable">关键字：</div>
            <el-input v-model="KEYWORDS" placeholder="请输入文件名称" style="width: 200px;"/>
          </div>
          <el-button v-show="LEVELTYPE !='1'" class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">搜索</el-button>
          <el-button v-show="LEVELTYPE !='1'" type="success" icon="el-icon-refresh" @click="goKeyReset">重置</el-button>
          <el-button v-show="LEVELTYPE !='2'" type="success" icon="el-icon-plus" @click="handleAdd">新建文件夹</el-button>
          <el-button v-show="LEVELTYPE !='1'" type="primary" icon="el-icon-plus" @click="handleUpload">上传文件</el-button>
          <el-button v-show="MFOLDER_ID != '0'" icon="el-icon-arrow-left" @click="getList(PARENT_ID)">返回</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          v-if="LEVELTYPE !='2'"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          :header-cell-style="{
            'font-weight': 'bold',
            'color': '#000'
          }"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row
        >
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="55"
            align="center"/>
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column label="目录名">
            <template slot-scope="{row}">
              <div class="link-type" @click="getList(row.MFOLDER_ID)">
                <svg-icon :icon-class="row.NAME" class-name="disabled" />{{ row.NAME }}<i class="el-icon-arrow-right" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="CTIME" label="创建时间" />
          <el-table-column prop="SHARE" label="是否共享" >
            <template slot-scope="{row}">
              <span v-if="row.SHARE=='no'">私有文件</span>
              <span v-else>公共文件</span>
            </template>
          </el-table-column>
          <el-table-column prop="REMARKS" label="备注说明" />
          <el-table-column label="操作" align="center" width="250">
            <template slot-scope="{row}">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editFolder(row.MFOLDER_ID)">修改</el-button>
              <!--              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.MFOLDER_ID)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <!--      </el-main>-->
        <!--      <el-main>-->
        <el-table
          v-loading="listLoading"
          v-if="LEVELTYPE =='2'"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          :header-cell-style="{
            'font-weight': 'bold',
            'color': '#000'
          }"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row
        >
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="55"
            align="center"/>
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column label="文件名">
            <template slot-scope="{row}">
              {{ row.NAME }}
              <a v-show="row.extension_name == '.txt'" style="color:#0090ff;font-weight: bold;" @click="goViewTxt(row.NAME,row.FILEPATH)">[预览]</a>
              <a v-show="row.extension_name == '.pdf'" style="color:#0090ff;font-weight: bold;" @click="goViewTxt(row.NAME,row.FILEPATH)">[预览]</a>
              <a v-show="row.extension_name == '.mp4'" style="color:#0090ff;font-weight: bold;" @click="goViewVideo(row.NAME+'.'+row.extension_name,row.FILEPATH)">[预览]</a>
              <a
                v-show="row.extension_name == '.doc' || row.extension_name == '.xls' || row.extension_name == '.ppt' || row.extension_name == '.docx' || row.extension_name == '.xlsx' || row.extension_name == '.pptx'"
                :href="'http://view.officeapps.live.com/op/view.aspx?src='+serverurl+row.FILEPATH"
                title="查看"
                target="_blank"
                style="cursor:pointer;">[预览]</a>
            </template>
          </el-table-column>
          <el-table-column prop="POSTNO" label="发文号"/>
          <el-table-column label="文件大小">
            <template slot-scope="{row}">
              {{ row.FILESIZE > 1024 ? ((((row.FILESIZE)/1024)+'').substring(0,(((row.FILESIZE)/1024)+'').lastIndexOf('.')+3))+' MB' : row.FILESIZE + ' KB' }}
            </template>
          </el-table-column>
          <el-table-column prop="CTIME" label="上传时间" />
          <el-table-column v-if="false" prop="STARTTIME" label="颁布日期" />
          <el-table-column prop="STARTTIME" label="颁布日期" />
          <el-table-column prop="UNIT" label="颁布单位" />
          <el-table-column prop="ENDTIME" label="实施日期" />
          <el-table-column prop="ISVALID" label="时效状态" >
            <template slot-scope="{row}">
              <span v-if="row.ISVALID=='0'">无效</span>
              <span v-else>有效</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="350">
            <template slot-scope="{row}">
              <el-button v-show="LEVELTYPE =='2'" type="primary" icon="el-icon-edit" size="mini" @click="editFile(row.MFOLDER_ID)">修改</el-button>
              <el-button v-show="LEVELTYPE =='2'" type="primary" icon="el-icon-edit" size="mini" @click="downloadFile(row)">下载</el-button>
              <!--              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.MFOLDER_ID)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div />
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList1" />
        </div>
      </el-main>
    </el-container>

    <el-dialog :visible.sync="dialogForm" :title="folderMsg==='edit'?'修改文件夹':'新增文件夹'" width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" style="width: 500px;">
        <el-form-item label="目录名" prop="NAME">
          <el-input v-model="form.NAME" placeholder="这里输入名称..." />
        </el-form-item>
        <el-form-item label="分享状态" prop="SHARE">
          <el-radio-group v-model="form.SHARE">
            <el-radio label="yes">共享</el-radio>
            <el-radio label="no">不共享</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :rows="3" v-model="form.REMARKS" type="textarea" placeholder="这里输入备注..." />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogFormUpload" :title="msg==='upload'?'新增文件':'修改文件'" width="600px">
      <el-form ref="uploadForm" :model="form" :rules="rules" label-width="110px" style="width: 500px;">
        <el-form-item label="行政法规" prop="NAME">
          <el-input v-model="form.NAME" placeholder="请输入..." />
        </el-form-item>
        <el-form-item label="发文号" prop="POSTNO">
          <el-input v-model="form.POSTNO" placeholder="请输入..." />
        </el-form-item>
        <el-form-item label="颁布单位" prop="UNIT">
          <el-input v-model="form.UNIT" placeholder="请输入..." />
        </el-form-item>
        <el-form-item label="颁布日期" prop="STARTTIME">
          <el-date-picker v-model="form.STARTTIME" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="实施日期" prop="ENDTIME">
          <el-date-picker v-model="form.ENDTIME" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="时效状态" prop="ISVALID">
          <el-radio-group v-model="form.ISVALID">
            <el-radio :label="1">有效</el-radio>
            <el-radio :label="0">失效</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="附件">
          <span v-if="form.FFILE">{{ form.FFILE.name }}</span>
          <el-upload :before-upload="beforeFileUpload" class="avatar-uploader" action="" accept=".pdf">
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="form.FILEPATH" label="附件路径">
          <el-input v-model="form.FILEPATH" disabled />
        </el-form-item>
        <el-form-item label="分享状态" prop="SHARE">
          <el-radio-group v-model="form.SHARE">
            <el-radio label="yes">共享</el-radio>
            <el-radio label="no">不共享</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :rows="3" v-model="form.REMARKS" type="textarea" placeholder="这里输入备注..." />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormUpload = false">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogViewTxt" title="查看" width="1200px" height = "500px" >
      <iframe :src="dialogViewUrl" width="100%" height="500px" frameborder="1" />
    </el-dialog>
    <el-dialog :visible.sync="dialogViewVideo" title="查看" width="600px" height = "500px" >
      <video id="ptVideo" :src="dialogViewUrl" style="height: 500px; width: 100%; border: none;" loop controls="controls"/>
    </el-dialog>
  </div>

</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import { upload } from '@/utils/upload'
import waves from '@/directive/waves' // waves directive  src/utils/src/utils/.js.js
export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      KEYWORDS: '',
      varList: [],
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogFormEdit: false,
      SHARE: 'yes',
      treeData: [],
      defaultProps: {
        children: 'nodes',
        label: 'name'
      },
      LEVELTYPE: '0',
      MFOLDER_ID: '0',			// 主键ID
      PARENT_ID: '0',				// 上级ID
      msg: 'upload',
      folderMsg: 'add',
      serverurl: 'https://qask.qhdsafety.com/file',
      dialogViewTxt: false,
      dialogViewVideo: false,
      dialogViewUrl: '',

      dialogFormUpload: false,
      dialogForm: false,
      form: {
        NAME: '', //
        POSTNO: '',
        UNIT: '',
        STARTTIME: '',
        ENDTIME: '',
        ISVALID: 1,
        SHARE: 'yes',
        FFILE: null,
        REMARKS: ''
      },
      rules: {
        NAME: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
        // POSTNO: [{ required: true, message: '发文号不能为空', trigger: 'blur' }],
        // UNIT: [{ required: true, message: '颁布单位不能为空', trigger: 'blur' }],
        // STARTTIME: [{ required: true, message: '颁布日期不能为空', trigger: 'change' }],
        // ENDTIME: [{ required: true, message: '实施日期不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList(this.MFOLDER_ID)
    this.getDataTree()
  },
  methods: {
    getRowKey(row) {
      return row.MFOLDER_ID
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList1()
    },
    // 重置
    goKeyReset() {
      this.KEYWORDS = ''
      this.getQuery()
    },
    // 添加
    handleAdd() {
      this.resetForm()
      this.msg = 'upload'
      this.folderMsg = 'add'
      this.dialogForm = true
    },
    // 添加
    handleUpload() {
      this.resetForm()
      this.msg = 'upload'
      this.folderMsg = 'add'
      this.dialogFormUpload = true
    },
    // 修改
    editFolder(ID) {
      this.resetForm()
      this.folderMsg = 'edit'
      this.getData(ID)
      this.dialogForm = true
    },
    // 修改
    editFile(ID) {
      this.resetForm()
      this.msg = 'editUpload'
      this.getData(ID)
      this.dialogFormUpload = true
    },
    getData(ID) {
      requestFN(
        '/mfolderStipulate/goEdit',
        {
          MFOLDER_ID: ID

        }
      ).then((data) => {
        this.form = Object.assign({}, data.pd)
        console.log(this.form.MFOLDER_ID)
      }).catch((e) => {
      })
    },
    beforeFileUpload(file) {
      this.form.FFILE = file
      this.$forceUpdate()
      return false
    },
    resetForm() {
      this.form = {
        NAME: '', //
        POSTNO: '',
        UNIT: '',
        STARTTIME: '',
        ENDTIME: '',
        ISVALID: 1,
        SHARE: 'yes',
        FFILE: null,
        REMARKS: ''
      }
    },
    // 保存
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.form.MFOLDER_ID)
          requestFN(
            '/mfolderStipulate/' + this.folderMsg,
            {
              PARENT_ID: this.MFOLDER_ID,
              NAME: this.form.NAME,
              TYPE: 1,
              SHARE: this.form.SHARE,
              REMARKS: this.form.REMARKS,
              MFOLDER_ID: this.form.MFOLDER_ID
            }
          ).then((data) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            console.log(this.MFOLDER_ID)
            this.dialogForm = false
            this.getDataTree()
            this.getList(this.MFOLDER_ID)
          }).catch((e) => {
          })
        } else {
          return false
        }
      })
    },
    // 保存
    upload() {
      this.$refs.uploadForm.validate(valid => {
        if (!this.form.FFILE && this.form.FILEPATH == null) {
          this.$message({
            message: '请上传附件',
            type: 'error',
            duration: 5 * 1000
          })
          return
        }
        const loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.form.PARENT_ID = this.MFOLDER_ID
        this.form.TYPE = 2
        const formData = new FormData()
        Object.keys(this.form).map(key => {
          formData.append(key, this.form[key])
        })
        upload(
          '/mfolderStipulate/' + this.msg,
          formData
        ).then((data) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.dialogFormUpload = false
          this.getDataTree()
          this.getList(this.MFOLDER_ID)
          loading.close()
        }).catch((e) => {
          loading.close()
        })
      })
    },
    getList1() {
      this.getList(this.MFOLDER_ID)
    },
    // 获取列表
    getList(F_ID) {
      this.listLoading = true
      this.varList = []
      this.MFOLDER_ID = F_ID
      console.log(this.MFOLDER_ID)
      requestFN(
        '/mfolderStipulate/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS,
          MFOLDER_ID: this.MFOLDER_ID,
          SHARE: this.SHARE
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        if (data.varList != null && data.varList.length > 0) {
          this.LEVELTYPE = data.varList[0].TYPE
        } else {
          this.LEVELTYPE = '0'
        }
        this.PARENT_ID = data.PARENT_ID
        this.total = data.page.totalResult
        this.hasButton()
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取数据字典数据
    getDict: function() {
    },
    handleDelete(id) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/mfolderStipulate/delete',
          {
            MFOLDER_ID: id,
            FILEPATH: ''
          }
        ).then(() => {
          this.listLoading = false
          this.getDataTree()
          this.getList(this.MFOLDER_ID)
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    getDataTree() {
      this.listLoading = true
      requestFN(
        '/mfolderStipulate/listTree',
        {
          SHARE: this.SHARE
        }
      ).then((data) => {
        this.listLoading = false
        this.treeData = JSON.parse(data.zTreeNodes)
      })
        .catch((e) => {
          this.listLoading = false
        })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(node) {
      this.getList(node.id)
    },
    downloadFile(row) {
      this.$confirm('确定要下载此文件吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = false
        // window.open(config.httpurl + '/mfolderStipulate/download?MFOLDER_ID=' + MFOLDER_ID)
        window.open(config.fileUrl + row.FILEPATH, '_blank')
      }).catch(() => {
        this.listLoading = false
      })
      this.listLoading = false
    },
    goViewTxt(fileName, filePath) {
      this.dialogViewTxt = true
      this.dialogViewUrl = config.fileUrl + filePath
    },
    goViewVideo(fileName, filePath) {
      this.dialogViewVideo = true
      this.dialogViewUrl = config.fileUrl + filePath
    },
    goBack() {
      this.$parent.activeName = 'IndexList'
      this.$parent.indexVal = ''
      this.corpInfoId = ''
      if (this.$refs.form !== undefined) {
        this.$refs.form.resetFields()
        this.resetForm()
      }
    }
  }
}

</script>
