<template>
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body destroy-on-close>
    <el-row>
      <el-col :span="14">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="单位名称">
                <span>{{ detailInfo.company }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="生产品种">
                <span>{{ detailInfo.contract }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人">
                <span>{{ detailInfo.username }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话">
                <span>{{ detailInfo.phone }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="流量计品牌">
                <span v-if="detailInfo.usernum">{{ $parent.meterModelCompanyFormatter(detailInfo) }}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="流量计型号">
                <span v-if="detailInfo.type == '1'">DN25</span>
                <span v-else-if="detailInfo.type == '2'">DN50</span>
                <span v-else-if="detailInfo.type == '3'">DN80</span>
                <span v-else-if="detailInfo.type == '4'">DN100</span>
                <span v-else-if="detailInfo.type == '5'">DN150</span>
                <span v-else-if="detailInfo.type == '6'">DN200</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="20">
              <el-form-item label="所属区域">
                <span>{{ detailInfo.countyName }}{{ detailInfo.streetName }}{{ detailInfo.villageName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="具体地址">
                <span v-if="detailInfo.address">{{ detailInfo.address}}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
          </el-row>

          <!--<el-row>-->
            <!--<el-col :span="12">-->

            <!--</el-col>-->
          <!--</el-row>-->

          <el-row>
            <el-col :span="12">
              <el-form-item label="通气日期">
                <span v-if="detailInfo.starttime">{{ detailInfo.starttime}}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开通状态">
                <span>{{ $parent.statusFormat(this.detailInfo) }}</span>
              </el-form-item>
            </el-col>
          </el-row>


          <!--<el-row>-->
            <!--<el-col :span="12">-->
              <!--<el-form-item label="表具类型">-->
                <!--<span v-if="detailInfo.meterType==1">皮膜</span>-->
                <!--<span v-if="detailInfo.meterType==2">超声</span>-->
                <!--<span v-else>-</span>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="12">-->
              <!--<el-form-item label="表具厂家">-->
                <!--<span v-if="detailInfo.meterCompany==1">金卡</span>-->
                <!--<span v-if="detailInfo.meterCompany==2">秦川</span>-->
                <!--<span v-else>-</span>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
          <!--</el-row>-->


          <!--<el-row>-->
            <!--<el-col :span="12">-->
              <!--<el-form-item label="表具型号">-->
                <!--<span v-if="detailInfo.meterModel==1">G1.5</span>-->
                <!--<span v-if="detailInfo.meterModel==2">G2.5</span>-->
                <!--<span v-if="detailInfo.meterModel==3">G4</span>-->
                <!--<span v-else>-</span>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="12">-->
              <!--<el-form-item label="进气方向">-->
                <!--<span v-if="detailInfo.direction==1">左</span>-->
                <!--<span v-if="detailInfo.direction==2">右</span>-->
                <!--<span v-else>-</span>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
          <!--</el-row>-->


          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <span v-if="detailInfo.remark">{{ detailInfo.remark }}</span>
                <span v-else>-</span>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
      </el-col>
      <el-col :span="10">
        <div id="industry_map" style="width: 100%;height: 500px;border: 1px solid"></div>
      </el-col>
    </el-row>

  </el-dialog>

</template>

<script>
  //import { getInfo } from "@/api/baseinfo/deviceInfo";
  import {  getIndustry } from "@/api/baseinfo/industry";
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  export default {
    name: "detail-info",
    data(){
      return{
        open: false,
        detailInfo: {},
        title: "",
        // 开通状态字典
        statusOptions: [],
        typeOptions:[],
        sceneOptions:[],
        dialogTableVisibles: false,
        bjlxList:[
          {
            id:1,
            name:'皮膜'
          },
          {
            id:2,
            name:"超声"
          }
        ],
        bjcjList:[
          {
            id:1,
            name:'金卡'
          },
          {
            id:2,
            name:"秦川"
          }
        ],
        bjxhList:[
          {
            id:1,
            name:'G1.5'
          },
          {
            id:2,
            name:"G2.5"
          },
          {
            id:3,
            name:"G4"
          }
        ],
        jqfxList:[
          {
            id:1,
            name:'左'
          },
          {
            id:2,
            name:"右"
          }
        ],
      }
    },

    methods: {
      getDetailInfo(id){
        getIndustry(id).then(response => {
          this.detailInfo = response.data;
          this.title = "工业用户信息详情";
          this.open = true;
          this.initMap();
        });
      },
      initMap(){
        this.$nextTick(() => {
            const path = eval(this.systemSetting.map_center);
            let map = new EditorMap(
                "industry_map",
                {
                  center: path,
                  //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
                  zoom: 14.5,
                },
                this
             );
            if(this.detailInfo.longitude){
              map.control = 1;
              map.addDevice(this.detailInfo);
              map.map.setCenter([this.detailInfo.longitude,this.detailInfo.latitude])
            }
        });
      }
    },
    computed: {
      ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped>

</style>
