<template>
  <el-form ref="businessInfoForm" :model="businessInfo" :rules="businessRules" size="medium" label-width="150px">
    <el-row style="margin-top: 20px">
      <el-col :span="6">
        <el-form-item label="业务类别" prop="businessType">
          <el-select v-model="businessInfo.businessType" placeholder="请选择业务类别" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in businessTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="主营品类" prop="mainCategory">
          <el-input v-model="businessInfo.mainCategory" placeholder="请输入主营品类" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="业务性质" prop="businessNature">
          <el-select v-model="businessInfo.businessNature" placeholder="请选择业务性质" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in businessNatureOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <div class="form-table">
        <div>
          <el-table :data="busDetailBrands" class="el-tab" border size="small" header-cell-class-name="form-table-header">
            <el-table-column prop="index" label="序号" width="100"/>
            <el-table-column prop="brandName" label="品牌名称" width="250"/>
            <el-table-column prop="brandProperty" label="品牌性质" width="250"/>
            <el-table-column prop="brandRegisterCertificateFilename" label="品牌注册证" width="300"/>
            <el-table-column prop="brandAuthCertificateFilename" label="品牌授权证明" width="300"/>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="delBrandDetail(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-button class="table-btn" type="primary" @click="showAddBrand">添加主营品牌</el-button>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="添加主营品牌" :close-on-click-modal="false" append-to-body>
          <el-form ref="dataForm" :rules="brandRules" :model="brandDetail" label-well-code="right" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="品牌名称" prop="brandName">
                  <el-input v-model.trim="brandDetail.brandName" type="text" placeholder="请输入品牌名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="品牌性质" prop="brandProperty">
                  <el-input v-model.trim="brandDetail.brandProperty" type="text" placeholder="请输入品牌性质" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="品牌注册证" prop="brandRegisterCertificate">
                  <el-upload
                    ref="brandRegistScanFileUpload"
                    action="action"
                    :file-list="brandRegistScanFileList"
                    :http-request="uploadBrandRegistScanFile"
                    :on-remove="handleBrandRegistScanFileRemove"
                    :on-exceed="brandRegistScanFileExceed"
                    :limit="1"
                    accept=".jpg,.jpeg,.png,.pdf"
                  >
                    <el-button size="small" type="primary" icon="el-icon-upload">
                      上传文件
                    </el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="品牌授权证明" prop="brandAuthCertificate">
                  <el-upload
                    ref="brandAuthScanFileUpload"
                    action="action"
                    :file-list="brandAuthScanFileList"
                    :http-request="uploadBrandAuthScanFile"
                    :on-remove="handleBrandAuthScanFileRemove"
                    :on-exceed="brandAuthScanFileExceed"
                    :limit="1"
                    accept=".jpg,.jpeg,.png,.pdf"
                  >
                    <el-button size="small" type="primary" icon="el-icon-upload">
                      上传文件
                    </el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveData">
              保存
            </el-button>
          </div>
        </el-dialog>
      </div>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="经营地址" prop="manageAddress">
          <el-input v-model="businessInfo.manageAddress" placeholder="请输入经营地址" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="办公场所性质" prop="officeNature">
          <el-select v-model="businessInfo.officeNature" placeholder="请选择办公场所性质" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in officeNatureOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="办公面积(平方米)" prop="officeSpace">
          <el-input v-model="businessInfo.officeSpace" placeholder="请输入办公面积" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDictByCode } from '@/api/system/dict'
import { validateIntPlus } from '@/utils/validate'
import { Uploadimg } from '@/api/common'
export default {
  name: 'BusinessInfo',
  data() {
    const squareValidator = (rule, value, callback) => {
      if (value !== undefined && value !== '' && validateIntPlus(value) === false) {
        callback(new Error('请输入非负整数'))
      } else {
        callback()
      }
    }
    return {
      businessInfo: {
        businessType: '',
        mainCategory: '',
        businessNature: '',
        manageAddress: '',
        officeNature: '',
        officeSpace: ''
      },
      businessTypeOptions: [],
      businessNatureOptions: [],
      officeNatureOptions: [],
      busDetailBrands: [],
      businessRules: {
        mainCategory: [{ required: true, message: '请输入主营品类', trigger: 'blur' }],
        manageAddress: [{ required: true, message: '请输入经营地址', trigger: 'blur' }],
        officeSpace: [{ required: true, message: '请输入办公面积', trigger: 'blur' }, { validator: squareValidator, trigger: 'blur' }],
        businessType: [{ required: true, message: '请选择业务类别', trigger: 'change' }],
        businessNature: [{ required: true, message: '请选择业务性质', trigger: 'change' }],
        officeNature: [{ required: true, message: '请选择办公场所性质', trigger: 'change' }]
      },
      brandRules: {
        brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
        brandProperty: [{ required: true, message: '请输入品牌性质', trigger: 'blur' }]
      },
      brandRegistScanFileList: [],
      brandAuthScanFileList: [],
      brandDetail: {
        brandName: '',
        brandProperty: '',
        brandRegisterCertificate: '',
        brandRegisterCertificateFilename: '',
        brandAuthCertificate: '',
        brandAuthCertificateFilename: ''
      },
      dialogVisible: false,
      businessInfoValid: false,
      brandDetailValid: false
    }
  },
  mounted() {
    this.getBusinessType()
    this.getBusinessNature()
    this.getOfficeNature()
  },
  methods: {
    getBusinessType: function() {
      getDictByCode('businessType').then(response => {
        if (response.code === 200) {
          this.businessTypeOptions = response.data
        }
      })
    },
    getBusinessNature: function() {
      getDictByCode('businessNature').then(response => {
        if (response.code === 200) {
          this.businessNatureOptions = response.data
        }
      })
    },
    getOfficeNature: function() {
      getDictByCode('officeNature').then(response => {
        if (response.code === 200) {
          this.officeNatureOptions = response.data
        }
      })
    },
    validateForm: function() {
      this.$refs.businessInfoForm.validate(valid => {
        this.businessInfoValid = valid
      })
    },
    clearForm() {
      this.businessInfo = {
        businessType: '',
        mainCategory: '',
        businessNature: '',
        manageAddress: '',
        officeNature: '',
        officeSpace: ''
      }
      this.busDetailBrands = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs.businessInfoForm.clearValidate()
      })
    },
    validateDialogForm() {
      this.$refs.dataForm.validate(valid => {
        this.brandDetailValid = valid
      })
    },
    showAddBrand() {
      this.dialogVisible = true
      // 清除已有的内容
      this.brandDetail = {
        brandName: '',
        brandProperty: '',
        brandRegisterCertificate: '',
        brandAuthCertificate: ''
      }
      this.brandRegistScanFileList = []
      this.brandAuthScanFileList = []

      this.$nextTick(() => {
        //  延时到下一帧才开始，也就是页面刚刚渲染结束！！
        this.$refs.dataForm.clearValidate()
      })
    },
    saveData() {
      this.validateDialogForm()
      if (this.brandDetailValid === true) {
        const brand = {}
        brand.index = this.busDetailBrands.length + 1
        brand.brandName = this.brandDetail.brandName
        brand.brandProperty = this.brandDetail.brandProperty
        brand.brandRegisterCertificate = this.brandDetail.brandRegisterCertificate
        brand.brandRegisterCertificateFilename = this.brandDetail.brandRegisterCertificateFilename
        brand.brandAuthCertificate = this.brandDetail.brandAuthCertificate
        brand.brandAuthCertificateFilename = this.brandDetail.brandAuthCertificateFilename
        this.busDetailBrands.push(brand)
        this.dialogVisible = false
      }
    },
    delBrandDetail(row) {
      for (const i in this.busDetailBrands) {
        if (this.busDetailBrands[i].index === row.index) {
          this.busDetailBrands.splice(i, 1)
          return
        }
      }
    },
    // 文件上传
    uploadBrandRegistScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.brandRegistScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.brandRegistScanFileList = [] // 只保留一张图片或一个文件
          this.brandRegistScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.brandDetail.brandRegisterCertificate = res.data.fileId
          this.brandDetail.brandRegisterCertificateFilename = res.data.fileName
          this.$refs.dataForm.validateField('brandRegisterCertificate')
          this.$message.success('文件上传成功')
        }
      })
    },
    uploadBrandAuthScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.brandAuthScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.brandAuthScanFileList = [] // 只保留一张图片或一个文件
          this.brandAuthScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.brandDetail.brandAuthCertificate = res.data.fileId
          this.brandDetail.brandAuthCertificateFilename = res.data.fileName
          this.$refs.dataForm.validateField('brandAuthCertificate')
          this.$message.success('文件上传成功')
        }
      })
    },
    handleBrandRegistScanFileRemove(file) {
      this.brandDetail.brandRegisterCertificate = ''
      this.brandDetail.brandRegisterCertificateFilename = ''
      this.handleRemove(file, this.brandRegistScanFileList)
      this.$refs.dataForm.validateField('brandRegisterCertificate')
    },
    handleBrandAuthScanFileRemove(file) {
      this.brandDetail.brandAuthCertificate = ''
      this.brandDetail.brandAuthCertificateFilename = ''
      this.handleRemove(file, this.brandAuthScanFileList)
      this.$refs.dataForm.validateField('brandAuthCertificate')
    },
    brandRegistScanFileExceed(file, fileList) {
      this.handleExceed(file, this.brandRegistScanFileList)
    },
    brandAuthScanFileExceed(file, fileList) {
      this.handleExceed(file, this.brandAuthScanFileList)
    },
    // 上传前判断文件格式及大小
    handleBeforeUpload(file, fileList) {
      let res = true
      // 判断文件格式
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
      const isPDF = file.type === 'application/pdf'
      if (!isJPG && !isPDF) {
        this.$message.error('上传文件只能是 图片 或 PDF 格式!')
        res = false
      }

      // 判断文件大小
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
        res = false
      }

      // 判断文件是否已经上传过
      for (const i in fileList) {
        if (fileList[i].name === file.name) {
          this.$message.error('该文件已上传过，请选择其他文件')
          res = false
        }
      }

      return res
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      for (const i in fileList) {
        if (fileList[i].name === file.name) {
          fileList.splice(i, 1)
          return
        }
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning('最多上传一个文件，请先删除再重新上传')
    }
  }
}
</script>

<style scoped lang="scss">
  .form-table {
    display: flex;
    margin: 0px 20px 20px 20px;

    .table-btn {
      margin-left: 100px;
    }

    ::v-deep .form-table-header {
      font-size: 16px;
    }
  }
</style>