<template>
  <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body destroy-on-close :close-on-click-modal="false">
    <el-row>
      <el-col :span="14">
        <el-form label-width="100px">
          <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.usernum }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="合同号">
                <span>{{ detailInfo.contract }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <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>{{ $parent.getAddressFormatter(detailInfo.city) }}{{ $parent.getAddressFormatter(detailInfo.county) }}{{ $parent.getAddressFormatter(detailInfo.street) }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="具体地址">
                <span>{{ detailInfo.address }}</span>
              </el-form-item>
            </el-col>
          </el-row>

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

            <el-col :span="12">
              <el-form-item label="表计类型">
                <span>{{ $parent.typeFormatter(detailInfo) }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="开通状态">
                <span>{{ $parent.statusFormatter(detailInfo) }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="通气日期">
                <span>{{ detailInfo.starttime }}</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>
              </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>
              </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>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="进气方向" prop="direction">
                <span v-if="detailInfo.direction == 1">左</span>
                <span v-if="detailInfo.direction == 2">右</span>
              </el-form-item>
            </el-col>
          </el-row>

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

    <el-row>
      <el-col :span="24">
        <div style="font-size: 14px;color: #606266;font-weight: 700;margin: 18px 1px 12px 0px;">燃气用具</div>
        <table border="1" cellspacing="0" style="width: 100%;text-align:center;">
          <thead>
          <tr>
            <th>燃气用具</th>
            <th>双眼灶</th>
            <th>单眼灶</th>
            <th>多眼灶</th>
            <th>大锅灶</th>
            <th>民用灶</th>
            <th>烧烤灶</th>
            <th>低汤灶</th>
            <th>煲仔炉</th>
            <th>矮仔炉</th>
            <th>烤箱（炉）</th>
            <th>蒸汽炉（箱）</th>
            <th>煮面桶</th>
            <th>壁挂炉</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>数量</td>
            <td>{{ gasUseDevice.bothEyes }}</td>
            <td>{{ gasUseDevice.singleEyes }}</td>
            <td>{{ gasUseDevice.manyEyes }}</td>
            <td>{{ gasUseDevice.cauldron }}</td>
            <td>{{ gasUseDevice.civil }}</td>
            <td>{{ gasUseDevice.barbecue }}</td>
            <td>{{ gasUseDevice.lowSoup }}</td>
            <td>{{ gasUseDevice.clayPot }}</td>
            <td>{{ gasUseDevice.dwarf }}</td>
            <td>{{ gasUseDevice.oven }}</td>
            <td>{{ gasUseDevice.steamer }}</td>
            <td>{{ gasUseDevice.barrel }}</td>
            <td>{{ gasUseDevice.wall}}</td>
          </tr>
          </tbody>
        </table>

      </el-col>

    </el-row>

  </el-dialog>

</template>

<script>
  import { getBusiness } from "@/api/baseinfo/businessInfo";
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  export default {
    name: "detail-info",
    data(){
      return{
        open: false,
        detailInfo: {},
        title: "",
        gasUseDevice: {}
      }
    },

    methods: {
      getDetailInfo(businessId){
        getBusiness(businessId).then(response => {
          this.detailInfo = response.data;
          this.title = "餐饮用户信息详情";
          this.gasUseDevice = JSON.parse(this.detailInfo.device);
          this.open = true;
          this.initMap();
        });
      },
      initMap(){
        this.$nextTick(() => {
          const path = eval(this.systemSetting.map_center);
          let map = new EditorMap(
            "buss_map",
            {
              center: path,
              //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
              zoom: 14.5,
            },
            this
          );
          if(this.detailInfo.longitude){
            map.control = 1;
            map.addDevice({longitude:this.detailInfo.longitude,latitude:this.detailInfo.latitude,deviceName:this.detailInfo.username});
            map.map.setCenter([this.detailInfo.longitude,this.detailInfo.latitude])
          }
        });
      }
    },
    computed: {
      ...mapGetters(["systemSetting"]),
  },
  }
</script>

<style scoped>

</style>
