<template>
	<basic-container>
	  <avue-crud 
			ref="crud"
			:option="option"
			:table-loading="loading"
			:data="tableList"
			:permission="permissionList"
			@on-load="onLoad"
			@refresh-change="onLoad"
			@search-change="searchChange"
			@search-reset="searchReset"
			v-model="formData"
			@row-save="rowSave"
			@row-update="rowUpdate"
			@row-del="handleDelete"
			v-model:page="page"
			@current-change="currentChange"
			@size-change="sizeChange"
			:before-open="beforeOpen"
			:upload-error="uploadError"
			:upload-before="uploadBefore"
			:upload-preview="uploadPreview">
	  </avue-crud>
	</basic-container>
</template>

<script>
	import {getList, getDetail, add, update, remove} from "@/api/systemSet/technicalData";
	import {mapGetters} from "vuex";
	
	export default {
		data () {
			return {
				query: {},
				loading: false,
				page: {
				  pageSize: 10,
				  currentPage: 1,
				  total: 0
				},
				tableList: [{}],
				formData: {},
				option: {
					height: 'auto',
					calcHeight: 32,
					index: true,
					indexLabel: '序号',
					indexWidth: 60,
					menuFixed: true,
					menuWidth: 200,
					border: true,
					searchMenuSpan:6,
					searchMenuPosition: "left",
					searchGutter:20,
					labelWidth: 98,
					dialogWidth: '800',
					gutter:10,
					column:[
						{
							label: '标题名称',
							prop: 'name',
							minWidth: 200,
							search: true,
							span:24,
							rules: [{
								required: true,
								message: '请输入',
								trigger: 'blur',
							}],
						},
						{
							label:'资料说明',
							prop: 'description',
							minWidth: 200,
							span:24,
							type: 'textarea',
						},
						{
							label: '创建时间',
							prop: 'createTime',
							minWidth: 200,
							display:false,
						},
						{
						  label: '上传文件',
						  prop: 'href',
						  type: 'upload',
						  loadText: '上传中，请稍等',
						  span: 24,
							limit:1,
							// dataType: 'string',
							dataType: 'object',
						  propsHttp: {
								home:this.imgUrl,
						    res: 'data',
								url:'name',
								name:'originalName'
						  },
							action: '/blade-resource/oss/endpoint/put-file?code=aliyun',
							tip:'1.您可以上传需要用到的技术资料，每份最大30MB，支持格式:jpg、png、gif、doc、docx、ppt、pdf、xls、xlsx、txt、mp4、mp3、avi、mov、mmvb、mm、fliv、3gp；2.禁止上传违反新能源相关规定的内容，一切风险均由本人承担!',
							hide:true,
							rules: [{
								required: true,
								message: '请上传',
								trigger: 'change',
							}],
						},
					]
				},
			}
		},
		computed: {
		  ...mapGetters(["permission"]),
		  permissionList() {
		    return {
		      addBtn: this.validData(this.permission.technicalData_add, false),
					editBtn:this.validData(this.permission.technicalData_edit, false),
					delBtn:this.validData(this.permission.technicalData_del, false),
		    };
		  },
		},
		methods:{
			beforeOpen(done, type) {
			  if (['edit', 'view'].includes(type)) {
					if(this.formData.href){
						this.formData.href = [{
							label:this.formData.originalName,
							value:this.formData.href
						}];
					}
			  }
			  done();
			},
			uploadBefore(file, done, loading, column) {
				const maxSize = 30 * 1024 * 1024;
				if(file.size > maxSize){
					this.$message.error('文件大小不能超过 30MB!');
				}else{
					done()
				}
			},
			uploadError (error, column) {
				this.$message.success('上传失败，' + error)
			},
			uploadPreview(file,column,done){
				let suffix = file.url.substring(file.url.lastIndexOf('.') + 1) //获取文件后缀
				if(suffix.search(/doc|docx|ppt|pdf|xls|xlsx|txt/) != -1){
					window.open(file.url, "_blank");
				}else{
					done();
				}
			},
			onLoad() {
			  this.loading = true;
			  getList(this.page, this.query).then(res => {
			    const data = res.data.data;
			    this.page.total = data.total;
			    this.tableList = data.records;
			    this.loading = false;
			  });
			},
			searchReset() {
			  this.query = {};
			  this.onLoad();
			},
			searchChange(params, done) {
			  this.query = params;
			  this.page.currentPage = 1;
			  this.onLoad();
			  done();
			},
			currentChange(currentPage){
			  this.page.currentPage = currentPage;
			},
			sizeChange(pageSize){
			  this.page.pageSize = pageSize;
			}, 
			rowSave(row, done, loading) {
				let formData = JSON.parse(JSON.stringify(row))
				formData.originalName = row.href[0].label;
				formData.href = row.href[0].value;
			  add(formData).then(res => {
					this.onLoad();
					this.$message({
						type: 'success',
						message: '操作成功!',
					});
					done(formData);
				}, error => {
					window.console.log(error);
					loading();
				});
			},
			rowUpdate(row, index, done, loading) {
				let formData = JSON.parse(JSON.stringify(row))
				formData.originalName = row.href[0].label;
				formData.href = row.href[0].value;
			  update(formData).then(() => {
			    this.onLoad();
			    this.$message({
			      type: "success",
			      message: "操作成功!"
			    });
			    done();
			  }, error => {
			    loading();
			    console.log(error);
			  });
			},
			handleDelete(row) {
			  this.$confirm("是否确认删除该技术资料?", {
			    confirmButtonText: "确定",
			    cancelButtonText: "取消",
			    type: "warning"
			  }).then(() => {
					return remove(row.id);
				}).then(() => {
					this.onLoad();
					this.$message({
						type: "success",
						message: "操作成功!"
					});
				});
			},
		}
	}
</script>

<style>
</style>