<template>
  <div>
    <template>
      <Spin fix v-if="spinShow">
        <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
        <div>正在提交中,请稍等片刻...</div>
      </Spin>
    </template>
    <Row class="head-toolbar">
      <iCol>
        <Button type="primary" style="padding:0 8px;" @click.stop="sub">
          <!-- LiuKexin 20201123 修改确定图标 -->
          <Icon custom="fa fa-save"></Icon>&nbsp;确定
        </Button>
      </iCol>
    </Row>
    <div class="content-toolbar">
      <Form ref="helperFrom" :rules="helperValidate" :label-width="80">
        
        <Row>
          <iCol span="11">
            <FormItem label="文件名称" prop="name" :maxlength="50">
              <Input v-model.trim="helper.name" placeholder="请输入文件名称" />
            </FormItem>
          </iCol>
        </Row>
        <Row>
          <iCol span="11">
            <FormItem label="文件类别" prop="type" :maxlength="50">
              <!-- <Input v-model.trim="helper.type" placeholder="请输入文件类别" /> -->
              <RadioGroup v-model="helper.type">
                <Radio :label="1">使用手册</Radio>
                <Radio :label="0">标准规范</Radio>
                <Radio :label="2">操作视频</Radio>
              </RadioGroup>
            </FormItem>
          </iCol>
        </Row>
        <Row>
          <iCol span="22">
            <FormItem label="描述" prop="description">
              <Input
                v-model.trim="helper.description"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入报表描述"
              />
            </FormItem>
          </iCol>
        </Row>
        <template v-if="isAdd">
          <Row>
            <iCol span="22">
              <FormItem label="文件" prop="file">
                <Upload
                  action
                  :before-upload="handleBeForeUpload"
                  show-upload-list
                >
                  <Button icon="ios-cloud-upload-outline">{{
                    fileName == null ? '点击上传文件' : fileName
                  }}</Button>
                </Upload>
              </FormItem>
            </iCol>
          </Row>
        </template>
      </Form>
    </div>
  </div>
</template>
<script>
import { add, edit } from '@/api/helper'
export default {
  props: {
    paraData: Object,
  },
  data() {
    return {
      helper: {
        file: '',
        name: '',
        type: 1,
        description: '',
      },
      fileName: null,
      helperValidate: {
        name: [
          {
            validator: (rule, value, callback) => {
              if (
                this.helper.name == null ||
                this.helper.name == undefined ||
                this.helper.name.length == 0
              ) {
                callback(new Error('文件名称不能为空'))
                return
              } else if (this.helper.name.length > 20) {
                callback(new Error('文件名称不能超过20个字'))
                return
              }
              callback()
            },
            required: true,
            message: '文件名称不能为空',
            trigger: 'blur',
          },
        ],
        type: [
          {
            validator: (rule, value, callback) => {
              if (
                this.helper.type == null ||
                this.helper.type == undefined ||
                this.helper.type.length == 0
              ) {
                callback(new Error('文件类型不能为空'))
                return
              }
              callback()
            },
            required: true,
            message: '文件类型不能为空',
            trigger: 'blur',
          },
        ],

        description: [
          {
            validator: (rule, value, callback) => {
              if (this.helper.description.length > 50) {
                callback(new Error('备注超出限制'))
                return
              }
              callback()
            },
            trigger: 'blur',
          },
        ],
        file: [
          {
            validator: (rule, value, callback) => {
              if (
                this.helper.file == null ||
                this.helper.file == undefined ||
                this.helper.file == ''
              ) {
                callback(new Error('请选择上传文件'))
                return
              }
              callback()
            },
            required: true,
            trigger: 'blur',
          },
        ],
      },
      isAdd: true,
      spinShow: false
    }
  },
  computed: {},
  mounted() {
    if (this.paraData) {
      this.isAdd = false
      this.helper = Object.assign({}, this.paraData)
    } else {
      this.isAdd = true
      this.helper = {
        file: '',
        name: '',
        type: 1,
        description: '',
      }
    }
  },
  methods: {
    handleFormatError(file) {},
    handleBeForeUpload(file) {
      let size = file.size
      if (size > 1024 * 1024 * 150) {
        this.$Notice.error({ title: '提示', desc: '上传文件不能大于150M!' })
        return false;
      }
      this.fileName = file.name
      let fileFormat = this.fileName.substring(this.fileName.lastIndexOf('.'))

      this.helper.file = file
      return false
    },
    sub() {
      // LiuKexin 20210315 描述为null
      if(this.helper.description == null){
        this.helper.description = ''
      }
      this.$refs.helperFrom.validate((valid) => {
        this.backupValue = null
        if (valid) {
          // //对input框的值去除特殊字符 liuyimeng 20200403
          // this.helper.name = this.helper.name.replace(
          //   /[ `~!@#$%^&*()_\-+=<>?:"{}|,.\\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,
          //   ''
          // )
          // if (this.helper.description) {
          //   this.helper.description = this.helper.description.replace(
          //     /[ `~!@#$%^&*()_\-+=<>?:"{}|,.\\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,
          //     ''
          //   )
          // }
          let param = new FormData() // 创建form对象
          param.append('file', this.helper.file)
          param.append('name', this.helper.name)
          param.append('description', this.helper.description)
          param.append('type', this.helper.type)
          if (this.isAdd) {
            this.add(param)
          } else {
            this.edit(this.helper)
          }
        }
      })
    },
    edit(param) {
      edit(param).then((res) => {
        if (res.data && res.data.state === 'ok') {
          this.$Notice.success({ title: '提示', desc: '修改成功!' })
          this.$emit('reload')
        } else {
          this.$Notice.error({
            title: '提示',
            desc:
              res.data.msg != null
                ? res.data.msg
                : '未知错误，请联系管理员解决',
          })
        }
      })
    },
    add(param) {
      this.spinShow = true
      add(param).then((res) => {
        if (res.data && res.data.state === 'ok') {
          this.$Notice.success({ title: '提示', desc: '添加成功!' })
          //2020年11月23日 解决添加后页面不刷新 yangchengwu
          this.helper = {
            file: '',
            name: '',
            type: 1,
            description: '',
          }
          this.fileName = null
          this.spinShow = false
          this.$emit('reload')
        } else {
          this.$Notice.error({
            title: '提示',
            desc:
              res.data.msg != null
                ? res.data.msg
                : '未知错误，请联系管理员解决',
          })
        }
        this.$emit('close', true)
      })
    },
  },
  watch: {
    paraData(newValue) {
      if (newValue) {
        this.isAdd = false
        this.helper = Object.assign({}, newValue)
      } else {
        this.isAdd = true
        this.helper = {
          file: '',
          name: '',
          type: 1,
          description: '',
        }
      }
    },
  },
}
</script>
<style>
.head-toolbar {
  padding-top: 4px;
  padding-bottom: 3px;
  padding-left: 4px;
  border-bottom: 1px solid #d7dde4;
  background: #fff;
  height: 100%;
}
.ivu-card-body {
  padding: 0px;
}
.content-toolbar {
  padding: 16px;
}
</style>
