<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-select v-model="searchParam._mineIndex" placeholder="所属矿山" clearable size="small" class="filter-item" style="width: 200px;">
        <el-option v-for="mine in mineList" :key="mine.index" :label="mine.name" :value="mine.index" />
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchSubmit">查看</el-button>
    </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: 'CUnderfloorPlan', // 本页面名：没有Person前缀！这个功能和person没有直接关系~
  components: {},
  data() {
    return {
      mineList: [],
      httpHeaders: {
        'Authorization': getToken()
      },
      searchParam: {},
      underfloorPlanPath: null,
      underfloorPlanList: [],
      underfloorPlanListShow: []
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ])
  },
  mounted() {
    // 矿山选项卡
    mineApi.getEnableMine().then(response => {
      let i = 1
      response.results.forEach(x => { x.index = i++ })
      this.mineList = response.results
    })
  },
  methods: {
    searchSubmit() {
      this.underfloorPlanPath = null
      this.underfloorPlanList = []
      this.underfloorPlanListShow = []
      if (this.searchParam._mineIndex) {
        const mine = this.mineList[this.searchParam._mineIndex - 1]
        this.searchParam.mineType = mine.mineType
        this.searchParam.mineId = mine.id
      } else {
        this.$message.warning('请选择矿山')
        return
      }
      mineApi.getUndergroundById(this.searchParam.mineId).then(response => {
        this.underfloorPlanPath = response.underfloorPlanPath
        if (this.underfloorPlanPath) {
          this.underfloorPlanListShow = JSON.parse(this.underfloorPlanPath)
        } else {
          this.$message.warning('当前矿山未上传井下平面图')
        }
      })
    },
    submit() {
      this.underfloorPlanPath = JSON.stringify(this.underfloorPlanList)
      console.log(this.underfloorPlanPath)
      mineApi.setUnderground({
        id: this.searchParam.mineId,
        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>
