<template>
  <el-dialog title="气瓶详情" :visible.sync="detailOpen" width="1200px" append-to-body @close="cancel">
    <el-row>
      <el-col :span="14">
        <el-form ref="form" :model="form" label-width="120px">
          <div style="color: #1890ff;margin-bottom: 15px">气瓶基本信息</div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="储配站">
                <span>{{ form.stationName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="气瓶条码">
                <span>{{ form.bottleCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="自有编号">
                <span>{{ form.myselfNum }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="在站/离站">
                <span v-if="form.currentStatus == '0'">在站</span>
                <span v-if="form.currentStatus == '1'">离站</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="气瓶状态">
                <span v-if="form.bottleStatus == '1'">正常</span>
                <span v-if="form.bottleStatus == '2'">逾期未检</span>
                <span v-if="form.bottleStatus == '3'">报废</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="空满状态">
                <span v-if="form.emptyType == '0'">空瓶</span>
                <span v-if="form.emptyType == '1'">满瓶</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="登记日期">
                <span>{{ form.registerDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下检日期">
                <span>{{ form.nextCheckDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报废日期">
                <span>{{ form.scrapDate }}</span>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="8">
              <el-form-item label="使用登记代码">
                <span>{{ form.useRegisterCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="充装介质">
                <span>{{ form.chargeMedium }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <div style="color: #1890ff;margin-bottom: 15px ">气瓶规格参数</div>

          <el-row>
            <el-col :span="8">
              <el-form-item label="制造单位">
                <span>{{ form.produceUnit }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="制造年月">
                <span>{{ form.produceDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出厂编号">
                <span>{{ form.produceCode }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="规格Kg/MPa">
                <span>{{ form.bottleSpecs }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="气瓶容积L">
                <span>{{ form.bottleCapacity }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="公称压力Mpa">
                <span>{{ form.ratedPresure }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="壁厚">
                <span>{{ form.wallThickness }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="皮重">
                <span>{{ form.tare }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>

      <el-col :span="9">
        <div style="width: 100%;height: 450px; border: 1px solid rgb(218, 213, 213);margin-bottom: 10px;">
          <div style="width: 100%;height: 100%" id="gasBottleContainer"></div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import { EditorMap } from "@/utils/mapClass/getPath.js";
  export default {
    name: "index",
    data(){
      return{
        detailOpen: false,
        map: null,
        form: {}
      }
    },
    methods:{
      // 取消按钮
      cancel() {
        this.detailOpen = false;
        this.map.destroy();
      },
      //地图位置初始化
      initMap(devicePos){
        this.$nextTick(() => {
          this.map = new EditorMap("gasBottleContainer", {}, this);
          this.map.addDevice({ path: devicePos });
          this.map.nowMouseTarget = null;
          this.map.mousetoolClose(false);
        });
      }
    }
  }
</script>

<style scoped>

</style>