<template>
  <div class="hello">
    <div style="width: 100%;">
      <el-upload
        :http-request="handleUpload" 
        :before-remove="beforeRemove" 
        :limit="limit"
        :accept="accept" 
        :show-file-list="false" 
		:on-remove="handleRemove" 
        class="upload-demo" 
        action 
        multiple>
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">{{ tip }}</div>
      </el-upload> 
    </div>
    <div style="width: 100%;">
      <dataTable :table-data="fileList" :columns="columns" :is-pageobj="false">
        <el-table-column slot="operate" label="文件大小" align="center" fixed="right" width="300">
          <template slot-scope="scope">
            <div>{{getMb(scope.row.size)}}KB</div>
          </template>
        </el-table-column>
        <el-table-column slot="operate" label="价格" align="center" fixed="right" width="300">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.free">
              <el-radio :label="true">免费</el-radio>
              <el-radio :label="false">收费</el-radio>
			  <el-input-number v-model="scope.row.price"  v-show="scope.row.free==false" :min="0" :controls="false" :precision="2"  placeholder="价格(元)" ></el-input-number>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </dataTable>
    </div>
  </div>
</template>

<script>
import dataTable from '@components/nopageTable.vue'
import {
  put,
  getFileNameUUID
} from '@api/ali-oss'
import {
  getTime, getcurrentTime
} from '@utils/time'
export default {
  components: {
    dataTable
  },
  props: {
    accept: {
      type: String,
      default: '.pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx'
    },
    tip: {
      type: String,
      default: '上传大小不能超过100M'
    },
    limit: {
      type: Number,
      default: 3
    },
    action: {
      type: String,
      default: ''
    },
    headers: {
      type: Object,
      default: () => {}
    },
    name: {
      type: String,
      default: ''
    },
    listType: {
      type: String,
      default: 'text'
    },
    max: {
      type: Number,
      default: 99
    }
  },
  data() {
    return {
      fileList: [],
      tableData: [],
      columns: [{
        label: '文件名称',
        prop: 'name'
      },
    
      {
        label: '上传时间',
        prop: 'time'
      },
      {
        slot: 'operate'
      }
      ]
    }
  },
  methods: {
	  getMb(size){
		   let sieze1= size/1024
		    let integer= sieze1.toFixed(0)
	  		  return  integer
	  },
    emitInput(fileList) {
      let value = []
      for (let i = 0; i < fileList.length; i++) {
        let message = {}
        message.name = fileList[0].name
        message.size = fileList[0].size
        message.time = fileList[0].time
        message.url = fileList[0].url
        value.push(message)
      }
      this.$emit('input', value)
    },
    beforeUpload(file) {
      const max = this.max
      const isLt2M = file.size / 1024 / 1024 < max
      if (!isLt2M) {
        this.$message.error(`上传附件大小不能超过 ${max} MB!`)
      }
      return isLt2M
    },
    handleRemove(file, fileList, index) {
		console.log(fileList)
      this.$emit('on-remove', file, fileList)
      this.fileList = fileList
      this.emitInput(fileList)
    },
    // handleExceed(files, fileList) {
    //   this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
    // },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    /**
			 * 自定义上传方法
			 */
    handleUpload(option) {
      const max = this.max
      const isLt2M = option.file.size / 1024 / 1024 < max
      if (isLt2M) {
        // 生成的文件名称
        let objName = getFileNameUUID()
        // 调用 ali-oss 中的方法
        console.log(option)
        put(`${objName}${option.file.name}`, option.file).then(res => {
          res.size = option.file.size
		  res.uploadTime = getcurrentTime()
          res. time = getTime()
          res.free = true
          res.price = ''
         // /* res.fileName = res.name */
		  res.fileName = option.file.name
          res.fileUrl = res.url
          this.fileList.push(res)
          this.$emit('input', this.fileList)
        })
      }
    },
    handleDelete(index) {
      this.fileList.splice(index, 1)
      this.$emit('input', this.fileList)
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
