<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.id" :label="mine.name" :value="mine.id" />
      </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 picApi from '@/api/picManage/pic'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'

export default {
  name: 'CUnderfloorPlan', // 本页面名：没有Person前缀！这个功能和person没有直接关系~
  components: {},
  data() {
    return {
      dataList:[],
      total:0,
      form:{},
      searchForm:{
        page:1,
        size:10,
        type:8,
        enterpriseId:5,
      },
      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: {
    reset(){
      this.form={
        enterpriseId:null,
        fileName:null,
        filePath:null,
        id:null,
        type:8,
      }
    },
    getData(){
      picApi.getkdFile(this.searchForm).then(response => {
        this.dataList = response.body.list
      })
    }
  }
}
</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>
