<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="editing">
        <el-button class="filter-item" size="mini" icon="el-icon-circle-close" :loading="saving" @click="mainSubmitCancel">取消</el-button>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-edit" :loading="saving" @click="mainSubmit">保存</el-button>
      </div>
      <div v-else>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="doIotMachine">绑定物联网主机</el-button>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-edit" @click="doEditing">修改</el-button>
      </div>
    </div>
    <!--物联网主机弹窗-->
    <el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog1Show" :title="'绑定物联网主机'" width="580px">
      <el-form ref="dialog1Form" :model="dialog1Data" :rules="dialog1FormRules" size="small" label-width="180px" style="margin-right: 60px;">
        <el-form-item label="物联网主机编号：" prop="code">
          <el-input v-model="dialog1Data.code" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="更新时间：" prop="lastConnectDatetime">
          <el-input v-model="dialog1Data.lastConnectDatetime" :disabled="true" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialog1Show=false">取消</el-button>
        <el-button :loading="dialog1Saving" type="primary" @click="dialog1Submit">确认</el-button>
      </div>
    </el-dialog>
    <!--主体信息-->
    <el-form ref="mainForm" :hide-required-asterisk="!editing" :model="mainDataEditing" :rules="mainFormRules" size="mini" label-width="170px" style="margin-right: 100px;">
      <el-row :gutter="100">
        <el-divider content-position="center">基础信息</el-divider>
        <el-col :span="12">
          <el-form-item label="企业名称：" prop="name">
            <span v-show="!editing">{{ mainData.name }}</span>
            <el-input v-show="editing" v-model="mainDataEditing.name" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码：" prop="idCode">
            <span v-show="!editing">{{ mainData.idCode }}</span>
            <el-input v-show="editing" v-model="mainDataEditing.idCode" maxlength="100" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="行政区域：" prop="_administrativeAreaCascade">
            <span v-show="!editing">{{ mainData.administrativeAreaName }}</span>
            <el-cascader v-show="editing" v-model="mainDataEditing._administrativeAreaCascade" style="width: 100%;" :options="administrativeAreaList" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司地址：" prop="address">
            <span v-show="!editing">{{ mainData.address }}</span>
            <el-input v-show="editing" v-model="mainDataEditing.address" maxlength="500" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="单位性质：" prop="dict1">
            <span v-show="!editing">{{ mainData.dict1Name }}</span>
            <el-select v-show="editing" v-model="mainDataEditing.dict1" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in dict1List" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经济类型：" prop="dict2">
            <span v-show="!editing">{{ mainData.dict2Name }}</span>
            <el-select v-show="editing" v-model="mainDataEditing.dict2" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in dict2List" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="行业类别：" prop="dict3">
            <span v-show="!editing">{{ mainData.dict3Name }}</span>
            <el-select v-show="editing" v-model="mainDataEditing.dict3" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in dict3List" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="是否有注册资本：" prop="hasRegisteredCapital">
            <span v-show="!editing">
              {{ mainData.hasRegisteredCapital === true ? '是' : '' }}
              {{ mainData.hasRegisteredCapital === false ? '否' : '' }}
            </span>
            <el-radio-group v-show="editing" v-model="mainDataEditing.hasRegisteredCapital" size="mini">
              <el-radio-button :label="true">是</el-radio-button>
              <el-radio-button :label="false">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="mainDataEditing.hasRegisteredCapital" label="注册资本（万元）：" prop="registeredCapital">
            <span v-show="!editing">{{ mainData.registeredCapital }}</span>
            <el-input-number v-show="editing" v-model="mainDataEditing.registeredCapital" :precision="2" :controls="false" style="width: 100%;" :min="0" :max="999999" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="18">
          <el-form-item label="经营范围：" prop="businessScope">
            <span v-show="!editing">{{ mainData.businessScope }}</span>
            <el-input v-show="editing" v-model="mainDataEditing.businessScope" type="textarea" :rows="3" maxlength="1000" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="center">企业资质</el-divider>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="成立日期：" prop="setupDate">
            <span v-show="!editing">{{ mainData.setupDate }}</span>
            <el-date-picker v-show="editing" v-model="mainDataEditing.setupDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="经营期限（起）：" prop="beginLimitDate">
            <span v-show="!editing">{{ mainData.beginLimitDate }}</span>
            <el-date-picker v-show="editing" v-model="mainDataEditing.beginLimitDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营期限（止）：" prop="endLimitDate">
            <span v-show="!editing">{{ mainData.endLimitDate }}</span>
            <el-date-picker v-show="editing" v-model="mainDataEditing.endLimitDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="生产经营方式：" prop="dict4">
            <span v-show="!editing">{{ mainData.dict4Name }}</span>
            <el-select v-show="editing" v-model="mainDataEditing.dict4" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in dict4List" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="企业规模：" prop="dict5">
            <span v-show="!editing">{{ mainData.dict5Name }}</span>
            <el-select v-show="editing" v-model="mainDataEditing.dict5" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in dict5List" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否规模以上企业：" prop="dict6">
            <span v-show="!editing">{{ mainData.dict6Name }}</span>
            <el-select v-show="editing" v-model="mainDataEditing.dict6" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in dict6List" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="隶属层级：" prop="dict7">
            <span v-show="!editing">{{ mainData.dict7Name }}</span>
            <el-select v-show="editing" v-model="mainDataEditing.dict7" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in dict7List" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="责任人：" prop="liablePerson">
            <span v-show="!editing">{{ mainData.liablePerson }}</span>
            <el-input v-show="editing" v-model="mainDataEditing.liablePerson" maxlength="30" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="责任人电话：" prop="liablePersonPhone">
            <span v-show="!editing">{{ mainData.liablePersonPhone }}</span>
            <el-input v-show="editing" v-model="mainDataEditing.liablePersonPhone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="生产经营地址：" prop="businessAddress">
            <span v-show="!editing">{{ mainData.businessAddress }}</span>
            <el-input v-show="editing" v-model="mainDataEditing.businessAddress" maxlength="500" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="center">证书</el-divider>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="采矿许可证：" prop="_workLicenseFileList">
            <div v-for="file in mainData._workLicenseFileList" v-show="!editing" :key="file.url">
              <el-link type="primary" @click="openFile(file)">{{ file.name }}</el-link>
            </div>
            <el-upload
              v-show="editing"
              class="upload-demo"
              :action="`${baseApi}/api/file/upload`"
              multiple
              :headers="httpHeaders"
              :limit="1"
              :on-success="upFileSuccessWork"
              :on-remove="upFileRemoveWork"
              :on-error="upFileError"
              :on-exceed="upFileExceed"
              :before-upload="upFileBefore"
              :on-preview="openFile"
              :file-list="mainDataEditing._workLicenseFileListShow"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">图片不要超过20M，仅支持jpeg、png格式</div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <div>
            <el-form-item label="采矿许可有效期：" prop="workLicenseBeginDate">
              <span v-show="!editing">{{ mainData.workLicenseBeginDate }}</span>
              <el-date-picker v-show="editing" v-model="mainDataEditing.workLicenseBeginDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="至：" prop="workLicenseEndDate">
              <span v-show="!editing">{{ mainData.workLicenseEndDate }}</span>
              <el-date-picker v-show="editing" v-model="mainDataEditing.workLicenseEndDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="安全生产许可证：" prop="_safetyLicenseFileList">
            <div v-for="file in mainData._safetyLicenseFileList" v-show="!editing" :key="file.url">
              <el-link type="primary" @click="openFile(file)">{{ file.name }}</el-link>
            </div>
            <el-upload
              v-show="editing"
              class="upload-demo"
              :action="`${baseApi}/api/file/upload`"
              multiple
              :headers="httpHeaders"
              :limit="1"
              :on-success="upFileSuccessSafety"
              :on-remove="upFileRemoveSafety"
              :on-error="upFileError"
              :on-exceed="upFileExceed"
              :before-upload="upFileBefore"
              :on-preview="openFile"
              :file-list="mainDataEditing._safetyLicenseFileListShow"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">图片不要超过20M，仅支持jpeg、png格式</div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <div>
            <el-form-item label="安全许可有效期：" prop="safetyLicenseBeginDate">
              <span v-show="!editing">{{ mainData.safetyLicenseBeginDate }}</span>
              <el-date-picker v-show="editing" v-model="mainDataEditing.safetyLicenseBeginDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="至：" prop="safetyLicenseEndDate">
              <span v-show="!editing">{{ mainData.safetyLicenseEndDate }}</span>
              <el-date-picker v-show="editing" v-model="mainDataEditing.safetyLicenseEndDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-divider content-position="center">位置</el-divider>
      <el-row :gutter="100">
        <el-col :span="12">
          <el-form-item label="经度：" prop="longitude">
            <span v-show="!editing">{{ mainData.longitude }}</span>
            <el-input-number v-show="editing" v-model="mainDataEditing.longitude" :precision="6" :controls="false" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度：" prop="latitude">
            <span v-show="!editing">{{ mainData.latitude }}</span>
            <el-input-number v-show="editing" v-model="mainDataEditing.latitude" :precision="6" :controls="false" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="18">
          <el-form-item v-show="editing || mainDataEditing.longitude && mainDataEditing.latitude" label="位置地图：">
            <AMapSearchPoint :is-search="editing" :point="mapPoint" @choosePoint="choosePoint" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import enterpriseApi from '@/api/kd/enterprise'
import dictionaryApi from '@/api/kd/dictionary'
import administrativeAreaApi from '@/api/kd/administrativeArea'
import iotMachineApi from '@/api/kd/iotMachine'
import AMapSearchPoint from '@/components/AMap/AMapSearchPoint'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import { validatePhone } from '@/utils/validate'
const searchParam = {// 默认搜索条件
  page: 1,
  count: 10,
  searchCount: true
}
export default {
  name: 'EEnterprise', // 本页面名
  components: { AMapSearchPoint },
  data() {
    return {
      httpHeaders: {
        'Authorization': getToken()
      },
      administrativeAreaList: [],
      dict1List: [],
      dict2List: [],
      dict3List: [],
      dict4List: [],
      dict5List: [],
      dict6List: [],
      dict7List: [],
      searching: false,
      searchParam: {},
      searchResult: {
        total: 0,
        results: [] // 搜索结果
      },
      editing: false,
      saving: false,
      mainData: {},
      mainDataEditing: {},
      dialog1Show: false,
      dialog1Saving: false,
      dialog1Data: {},
      dialog1DataOld: {},
      dialog1FormRules: {
        code: [{ required: true, message: '请输入' }]
      },
      menus: [],
      mainFormRules: {
        name: [{ required: true, message: '请输入' }],
        idCode: [{ required: true, message: '请输入' }],
        _administrativeAreaCascade: [{ required: true, message: '请选择' }],
        address: [{ required: true, message: '请输入' }],
        dict1: [{ required: true, message: '请选择' }],
        dict2: [{ required: true, message: '请选择' }],
        dict3: [{ required: true, message: '请选择' }],
        hasRegisteredCapital: [{ required: true, message: '请选择' }],
        registeredCapital: [{ required: true, message: '请输入' }],
        businessScope: [{ required: true, message: '请输入' }],
        setupDate: [{ required: true, message: '请选择' }],
        beginLimitDate: [{ required: true, message: '请选择' }],
        endLimitDate: [{ required: true, message: '请选择' }],
        dict4: [{ required: true, message: '请选择' }],
        dict5: [{ required: true, message: '请选择' }],
        dict6: [{ required: true, message: '请选择' }],
        dict7: [{ required: true, message: '请选择' }],
        liablePerson: [{ required: true, message: '请输入' }],
        liablePersonPhone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        businessAddress: [{ required: true, message: '请输入' }],
        longitude: [{ required: true, message: '请选择位置' }],
        latitude: [{ required: true, message: '请选择位置' }],
        _workLicenseFileList: [{ required: true, message: '请选择' }],
        workLicenseBeginDate: [{ required: true, message: '请选择' }],
        workLicenseEndDate: [{ required: true, message: '请选择' }],
        _safetyLicenseFileList: [{ required: true, message: '请选择' }],
        safetyLicenseBeginDate: [{ required: true, message: '请选择' }],
        safetyLicenseEndDate: [{ required: true, message: '请选择' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ]),
    tableData() {
      // 此处对返回值进行算法重组
      return this.searchResult.results
    },
    mapPoint() {
      if (this.editing) {
        if (this.mainDataEditing.longitude && this.mainDataEditing.latitude) {
          return [this.mainDataEditing.longitude * 1, this.mainDataEditing.latitude * 1]
        }
      } else {
        if (this.mainData.longitude && this.mainData.latitude) {
          return [this.mainData.longitude * 1, this.mainData.latitude * 1]
        }
      }
      return null
    }
  },
  mounted() {
    administrativeAreaApi.cascadeElementUI().then(response => {
      this.administrativeAreaList = response.results
    })
    const dictGroups = [1, 2, 3, 4, 5, 6, 7]
    dictGroups.forEach(i => {
      dictionaryApi.getList({ 'groupCode': i }).then(response => {
        this['dict' + i + 'List'] = response.results
      })
    })
    this.searchParamReset()
    this.doSearch()
  },
  methods: {
    searchParamReset() {
      this.searchParam = JSON.parse(JSON.stringify(searchParam))
    },
    doIotMachine() {
      iotMachineApi.getMy().then(response => { // 查询当前绑定的物联网主机
        this.dialog1Data = response || {}
        this.dialog1DataOld = JSON.parse(JSON.stringify(response))
        this.dialog1Show = true // 显示弹窗
      })
    },
    dialog1Submit() {
      this.$refs['dialog1Form'].validate(valid => {
        if (!valid) {
          this.dialog1Saving = false
          return
        }
        if (this.dialog1Data.code === this.dialog1DataOld.code) {
          this.$message.warning('没有更改物联网主机')
          this.dialog1Show = false
          this.dialog1Saving = false
          return
        }
        iotMachineApi.addMy({
          code: this.dialog1Data.code
        }).then(() => {
          this.$message.success('绑定物联网主机成功')
          this.dialog1Show = false
          this.dialog1Saving = false
        }).catch(() => {
          this.dialog1Saving = false
        })
      })
    },
    doSearch() {
      enterpriseApi.getMy().then(response => {
        this.mainData = response
        this.mainDataEditing = response
        this.$nextTick(() => {
          this.$refs['mainForm'].clearValidate()
        })
        if (this.mainData.administrativeAreaCode) {
          administrativeAreaApi.cascadeUpElementUI(this.mainData.administrativeAreaCode).then(response => {
            this.$set(this.mainData, '_administrativeAreaCascade', response.cascade)
            this.$set(this.mainData, '_administrativeAreaAreaCode', response.areaCode)
          })
        }
        if (this.mainData.workLicenseFilePath) {
          this.mainData._workLicenseFileList = JSON.parse(this.mainData.workLicenseFilePath)
        }
        if (this.mainData.safetyLicenseFilePath) {
          this.mainData._safetyLicenseFileList = JSON.parse(this.mainData.safetyLicenseFilePath)
        }
      })
    },
    doEditing() {
      this.mainDataEditing = JSON.parse(JSON.stringify(this.mainData))
      if (this.mainDataEditing.workLicenseFilePath) {
        this.mainDataEditing._workLicenseFileList = JSON.parse(this.mainDataEditing.workLicenseFilePath)
        this.mainDataEditing._workLicenseFileListShow = JSON.parse(this.mainDataEditing.workLicenseFilePath) // 数据存放与原始绑定分开，可以防止中途赋值产生的闪烁问题
      }
      if (this.mainDataEditing.safetyLicenseFilePath) {
        this.mainDataEditing._safetyLicenseFileList = JSON.parse(this.mainDataEditing.safetyLicenseFilePath)
        this.mainDataEditing._safetyLicenseFileListShow = JSON.parse(this.mainDataEditing.safetyLicenseFilePath) // 数据存放与原始绑定分开，可以防止中途赋值产生的闪烁问题
      }
      this.editing = true
    },
    mainSubmit() {
      console.log(this.mainDataEditing._workLicenseFileList)
      this.$refs['mainForm'].validate(valid => {
        if (!valid) {
          this.$message({
            message: '填写不满足要求，请检查',
            type: 'error'
          })
          return
        } else if (this.mainDataEditing.beginLimitDate >= this.mainDataEditing.endLimitDate) {
          this.$message.error('经营期限（起）应小于经营期限（止）')
        } else if (this.mainDataEditing.workLicenseBeginDate >= this.mainDataEditing.workLicenseEndDate) {
          this.$message.error('采矿许可有效期（起）应小于采矿许可有效期（止）')
        } else if (this.mainDataEditing.safetyLicenseBeginDate >= this.mainDataEditing.safetyLicenseEndDate) {
          this.$message.error('安全许可有效期（起）应小于安全许可有效期（止）')
        } else {
          this.saving = true
          this.mainDataEditing.administrativeAreaCode = this.mainDataEditing._administrativeAreaCascade[this.mainDataEditing._administrativeAreaCascade.length - 1]
          if (this.mainDataEditing._workLicenseFileList) {
            this.mainDataEditing.workLicenseFilePath = JSON.stringify(this.mainDataEditing._workLicenseFileList)
          }
          if (this.mainDataEditing._safetyLicenseFileList) {
            this.mainDataEditing.safetyLicenseFilePath = JSON.stringify(this.mainDataEditing._safetyLicenseFileList)
          }
          enterpriseApi.setMy(this.mainDataEditing).then(() => {
            this.saving = false
            this.editing = false
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.doSearch()
          }).catch(() => {
            this.saving = false
          })
        }
      })
    },
    mainSubmitCancel() {
      this.editing = false
      this.doSearch()
    },
    choosePoint(lnglat) {
      console.log(lnglat)
      if (lnglat) {
        this.$set(this.mainDataEditing, 'longitude', lnglat[0])
        this.$set(this.mainDataEditing, 'latitude', lnglat[1])
      } else {
        this.$set(this.mainDataEditing, 'longitude', null)
        this.$set(this.mainDataEditing, 'latitude', null)
      }
    },
    elementuiUpListFormat(fileList) {
      const filePathArray = []
      fileList.forEach(f => {
        if (f.response && f.response.result) {
          filePathArray.push({
            name: f.name,
            url: f.response.result
          })
        } else if (f.name && f.url) {
          filePathArray.push({
            name: f.name,
            url: f.url
          })
        }
      })
      return filePathArray
    },
    upFileSuccessWork(response, file, fileList) {
      if (!this.mainDataEditing._workLicenseFileList) {
        this.mainDataEditing._workLicenseFileList = []
      }
      this.mainDataEditing._workLicenseFileList.push({
        name: file.name,
        url: response.result
      })
      this.$set(this.mainDataEditing, '_workLicenseFileList', this.mainDataEditing._workLicenseFileList)
    },
    upFileRemoveWork(file, fileList) {
      this.mainDataEditing._workLicenseFileList = this.elementuiUpListFormat(fileList)
    },
    upFileSuccessSafety(response, file, fileList) {
      if (!this.mainDataEditing._safetyLicenseFileList) {
        this.mainDataEditing._safetyLicenseFileList = []
      }
      this.mainDataEditing._safetyLicenseFileList.push({
        name: file.name,
        url: response.result
      })
      this.$set(this.mainDataEditing, '_safetyLicenseFileList', this.mainDataEditing._safetyLicenseFileList)
    },
    upFileRemoveSafety(file, fileList) {
      this.mainDataEditing._safetyLicenseFileList = this.elementuiUpListFormat(fileList)
    },
    upFileError() {
      this.$message.error('上传失败，请稍后再试')
    },
    upFileExceed() {
      this.$message.error('只可以上传一张照片')
    },
    upFileBefore(file) {
      const isIMG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLtSize = file.size / 1024 / 1024 < 20
      if (!isIMG) {
        this.$message.error('上传图片只能是 JPG/JPEG/PNG 格式')
        return false
      }
      if (!isLtSize) {
        this.$message.error('上传图片大小不能超过 20MB')
        return false
      }
      return true
    },
    openFile(file) {
      if (file.url) {
        window.open(this.baseApi + '/file' + file.url)
      } else if (file.response && file.response.result) {
        window.open(this.baseApi + '/file' + file.response.result)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
  ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
    height: 30px;
    line-height: 30px;
  }
</style>
