<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-button v-if="underfloorPlanList && underfloorPlanList.length>0" class="filter-item" size="mini" type="success" @click="submit()">确认使用新上传的图片</el-button>
      <el-upload
        class="upload-demo"
        action="/api/file/upload"
        multiple
        style="max-width: 400px;"
        :headers="httpHeaders"
        :limit="1"
        :on-success="upFileSuccess"
        :on-remove="upFileRemove"
        :on-error="upFileError"
        :on-exceed="upFileExceed"
        :before-upload="upFileBefore"
        :on-preview="openFile"
        :file-list="underfloorPlanList"
      >
        <el-button v-if="!(underfloorPlanList && underfloorPlanList.length>0)" class="filter-item" size="mini" type="primary">上传井下平面图</el-button>
        <div v-if="!(underfloorPlanList && underfloorPlanList.length>0)" slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过20M</div>
        <div v-if="underfloorPlanList && underfloorPlanList.length>0" slot="tip" class="el-upload__tip">点击预览上传就绪的图片：</div>
      </el-upload>
    </div>
    <!--图-->
    <template v-if="underfloorPlanListShow && underfloorPlanListShow.length>0">
      <div style="width: 100%;">
        <el-image v-for="file in underfloorPlanListShow" :key="file.url" style="width: 100%; height: auto" :src="baseApi+'/file'+file.url" fit="contain" />
      </div>
    </template>
  </div>
</template>

<script>
import mineApi from '@/api/kd/mine'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  name: 'EUnderfloorPlan', // 本页面名：没有Person前缀！这个功能和person没有直接关系~
  components: {},
  data() {
    return {
      selectedMine: {},
      httpHeaders: {
        'Authorization': getToken()
      },
      underfloorPlanPath: null,
      underfloorPlanList: [],
      underfloorPlanListShow: []
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ])
  },
  mounted() {
    const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
    let noMine = false
    if (!selectedMineJson) {
      noMine = true
    } else {
      const selectedMine = JSON.parse(selectedMineJson)
      if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
        noMine = true
      } else {
        this.selectedMine = selectedMine
      }
    }
       // if (noMine) {
    //   this.$message.error('当前未选择矿山')
    //   this.$router.replace('/dashboard')
    // }
    this.searchSubmit()
  },
  methods: {
    searchSubmit() {
      this.underfloorPlanPath = null
      this.underfloorPlanList = []
      this.underfloorPlanListShow = []
      mineApi.getUndergroundById(this.selectedMine.id).then(response => {
        this.underfloorPlanPath = response.underfloorPlanPath
        if (this.underfloorPlanPath) {
          this.underfloorPlanListShow = JSON.parse(this.underfloorPlanPath)
        }
      })
    },
    submit() {
      this.underfloorPlanPath = JSON.stringify(this.underfloorPlanList)
      console.log(this.underfloorPlanPath)
      mineApi.setUnderground({
        id: this.selectedMine.id,
        underfloorPlanPath: this.underfloorPlanPath
      }).then(() => {
        this.$message.success('修改成功')
        this.searchSubmit()
      })
    },
    upFileSuccess(response, file, fileList) {
      if (!this.underfloorPlanList) {
        this.underfloorPlanList = []
      }
      this.underfloorPlanList.push({
        name: file.name,
        url: response.result
      })
    },
    upFileError() {
      this.$message.error('上传失败，请稍后再试')
    },
    upFileRemove() {
      this.underfloorPlanList = []
    },
    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
    },
    upFileExceed() {
      this.$message.error('您已经上传了一张图，请删除后重新上传')
    },
    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>
