<template>
  <div class="app-container">

      <el-form label-width="130px" label-position="right">
        <el-form-item label="文件描述">
          <el-input v-model="fileDescription"></el-input>
        </el-form-item>
        <el-form-item label="文件类型" prop="fileKind">
        <el-select v-model="fileKind" placeholder="请选择">
          <el-option
            v-for="item in fileKindOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="上传文件">
          <plupload
            v-if="showUpload"
            :file-list="files"
            :limit="1"
            :description="fileDescription"
            :file-kind = 'fileKind'
            biz-type="trainModule"
            accept-files=".cdr,.ai,.ps,.eps,.zip,.rar,.xml,.txt,.pdf,.docx,.doc,.xlsx,.xls,.ppt,.pptx,.mp4,.mp3,.gif,.png,.jpg,.jpeg,.bmp"
            @onChange="handleFileChange"
          />
        </el-form-item>
      </el-form>
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="dialogStatus==='1'?addBtn():editBtn()">确定上传</el-button>-->
<!--      </div>-->
  </div>
</template>

<script>
  import {fileList,addConfig,getConfigInfo,updateConfig} from '@/api/baseInfo/fileManagement.js'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'
  import plupload from '@/components/plupload/plupload.vue'


  const form={
    configKey: undefined,
    configName: undefined,
    configValue1: undefined,
    configValue2: undefined,
    configValue3: undefined,
    configType: 0,
    configModule: undefined,
    remark: undefined
  };

  export default {
    name:'fileUp',
    components: {
      Cancledialog,plupload
    },
    data() {
      return {
        dialogStatus: 1,//1增加，2修改
        dialogTitle: '',
        dialogVisible: false,

        innerVisible:false,

        search: {
          keyWord:''
        },
        form:Object.assign({}, form),

        confirmdialog:false,
        listLoading: false,
        tableData: [],

        listData:{
          total:0,
          page: 1,
          pageSize:10
        },


        fileKindOptions:[
          {
            value: 0,
            label: '设计'
          },
          {
            value: 1,
            label: '公文'
          },
        ],


        fileKind:0,
        fileDescription:'',
        showUpload:true,
        files:[]

      }
    },
    mounted() {
      this.getFileList();
    },
    methods: {
      //获取列表
      getFileList() {
        const _that = this
        _that.listLoading = true
        let params = _that.search;
        var page = {
          pageIndex:_that.listData.page,
          pageSize: _that.listData.pageSize,
        }
        let data = {
          "params": JSON.stringify(params),
          "page": JSON.stringify(page),
        }
        // console.log(data);
        fileList(data).then(response => {
          console.log(response)
          const data = response.data
          // //  组合表单数据
          _that.tableData = data
          // console.log(_that.tableData)
          _that.listData.total = response.total
          _that.listLoading = false
        }).catch(err => {
          _that.$message.error(err);
          _that.listLoading = false
        })
      },

      //增加上传文件
      handleCreateAdd(){
        const _that = this
        _that.form=Object.assign({},form)
        _that.dialogTitle = '上传文件'
        _that.dialogStatus = '1';
        _that.dialogVisible = true;
        _that.files=[];
        _that.fileKind=0;
        _that.fileDescription='';

        _that.showUpload=false;
        _that.$nextTick(() => (_that.showUpload = true))
      },

      //刷新变革
      tableRefresh(){
        //刷新变革
        this.getFileList()
      },

      //搜索
      searchData(){
        this.listData.page = 1;
        this.getFileList()
      },



      handleFileChange(fileList) {
        var _that = this;
        console.log('handleFileChange', fileList)
        _that.dialogVisible = false;
        setTimeout(()=> {
          _that.tableRefresh();

        },1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
  .tableItemInput{
    width: 30%;
  }
</style>
