/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div :style="{position: 'absolute', left: Data.busleft, top: Data.bustop}" class="southbusmap">
    <div :class="Data.id >= 13 && Data.id <= 16 ? '' : 'hide'">
      <svg
        version="1.1"
        id="图层_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 24 91"
        style="enable-background:new 0 0 24 91;"
        xml:space="preserve"
        :width="IconWdith"
        :height="IconLengh"
      >
        <g id="有轨电车-南" v-if="Data.controltype === 5">
          <path
            class="st0"
            d="M24,87V4c0-2.2-1.8-4-4-4H4C1.8,0,0,1.8,0,4v83c0,2.2,1.8,4,4,4h16C22.2,91,24,89.2,24,87z"
          ></path>
          <g>
            <path
              class="st1"
              d="M13.9,44.8L13.9,44.8c-3.4,0-6.2,2.8-6.2,6.2v3.2l-0.5-0.8c0-0.1-0.1-0.1-0.3-0.1c-0.1,0-0.1,0.1-0.3,0.1
              l-1.2,3.1c0,0.1,0,0.3,0.1,0.4c0.1,0,0.3,0,0.4-0.1l1-2.6l0.6,1v21.3c0,0.4,0.3,0.6,0.6,0.6h7.8c0.4,0,0.6-0.3,0.6-0.6v-0.4v-0.6
              v-0.9v-0.4v-0.9v-4.9v-0.9V67v-0.9v-4.9v-0.9v-0.4V59v-5.3v-0.9v-0.4v-0.9V51v-4.3C16.8,45.6,14.9,44.8,13.9,44.8z M12.6,73.8
              c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5h-2.2c-0.3,0-0.5-0.3-0.5-0.5v-1.6c0-0.3,0.3-0.5,0.5-0.5H12.6z M12.6,70.8
              c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5h-2.2c-0.3,0-0.5-0.3-0.5-0.5v-1.6c0-0.3,0.3-0.5,0.5-0.5H12.6z M12.6,67.5
              c0.3-0.1,0.5,0.2,0.5,0.4v1.6c0,0.3-0.3,0.5-0.5,0.5h-2.2c-0.3,0-0.5-0.3-0.5-0.5V68c0-0.3,0.3-0.5,0.5-0.5H12.6L12.6,67.5z
               M12.6,64.5c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5h-2.2c-0.3,0-0.5-0.3-0.5-0.5V65c0-0.3,0.3-0.5,0.5-0.5H12.6z
               M12.6,61.4c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5h-2.2c-0.3,0-0.5-0.3-0.5-0.5v-1.6c0-0.3,0.3-0.5,0.5-0.5H12.6z
               M12.6,58.1c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5h-2.2c-0.3,0-0.5-0.3-0.5-0.5v-1.6c0-0.3,0.3-0.5,0.5-0.5H12.6z
               M12.6,55c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5h-2.2c-0.3,0-0.5-0.3-0.5-0.5v-1.6c0-0.3,0.3-0.5,0.5-0.5H12.6z
               M12.6,52c0.3,0,0.5,0.3,0.5,0.5v1.6c0,0.3-0.3,0.5-0.5,0.5h-2.2c-0.3,0-0.5-0.3-0.5-0.5v-1.7c0-0.3,0.3-0.5,0.5-0.5h2.2V52z
               M15,47.6c0.4-0.1,0.8,0.3,0.8,0.7v1.6c0,0.4-0.4,0.8-0.8,0.8h-4.3c-0.4,0-0.8-0.4-0.8-0.8c0-1.3,1-2.3,2.3-2.3H15L15,47.6z"
            ></path>
            <path
              class="st1"
              d="M17.7,77.9v-34c0-0.3,0.3-0.5,0.5-0.5s0.5,0.3,0.5,0.5v34c0,0.3-0.3,0.5-0.5,0.5S17.7,78.2,17.7,77.9z"
            ></path>
          </g>
        </g>
        <g id="公交车-南" v-if="Data.controltype === 3">
          <path
            class="st0"
            d="M24,87V4c0-2.2-1.8-4-4-4H4C1.8,0,0,1.8,0,4v83c0,2.2,1.8,4,4,4h16C22.2,91,24,89.2,24,87z"
          ></path>
          <g>
            <path
              class="st1"
              d="M15.8,52.8c1,0,1.8-0.8,1.8-1.8s-0.8-1.8-1.8-1.8S14,50,14,51C14,51.8,14.8,52.8,15.8,52.8z M15.8,52.3
              c-0.6,0-1.3-0.5-1.3-1.3s0.5-1.3,1.3-1.3c0.6,0,1.3,0.5,1.3,1.3C17,51.8,16.4,52.3,15.8,52.3z"
            ></path>
            <path
              class="st1"
              d="M15.8,70.1c1,0,1.8-0.8,1.8-1.8s-0.8-1.8-1.8-1.8S14,67.3,14,68.3S14.8,70.1,15.8,70.1z M15.8,69.6
              c-0.6,0-1.3-0.5-1.3-1.3c0-0.6,0.5-1.3,1.3-1.3c0.6,0,1.3,0.5,1.3,1.3C17.1,69,16.4,69.6,15.8,69.6z"
            ></path>
            <path
              class="st1"
              d="M9.6,77.3h4.7c0.3-1.1,0.9-3.8,1.3-5.2v-1.5c-1.3,0-2.3-1.1-2.3-2.4s1-2.3,2.3-2.4V53.3
              c-1.3,0-2.3-1.1-2.3-2.4s1-2.3,2.3-2.4v-3.4v-0.9V44c0-0.4-0.3-0.6-0.6-0.6h-3.4l-0.4,0.8h-3c-1,0-1.8,0.8-1.8,1.8v27.7
              C6.3,75.8,7.8,77.3,9.6,77.3z M8.3,48c-0.4,0-0.6-0.3-0.6-0.6v-1c0-0.4,0.3-0.6,0.6-0.6H14c0.4,0,0.6,0.3,0.6,0.6v0.9
              c0,0.4-0.3,0.6-0.6,0.6L8.3,48L8.3,48z M8.1,55c-0.3,0-0.5-0.3-0.5-0.5v-4.9c0-0.3,0.3-0.5,0.5-0.5h2.1c0.3,0,0.5,0.3,0.5,0.5v4.9
              c0,0.3-0.3,0.5-0.5,0.5H8.1z M8.1,61.7c-0.3,0-0.5-0.3-0.5-0.5v-4.9c0-0.3,0.3-0.5,0.5-0.5h2.1c0.3,0,0.5,0.3,0.5,0.5v4.9
              c0,0.3-0.3,0.5-0.5,0.5H8.1z M8.1,68.5c-0.3,0-0.5-0.3-0.5-0.5v-5c0-0.3,0.3-0.5,0.5-0.5h2.1c0.3,0,0.5,0.3,0.5,0.5v5
              c0,0.3-0.3,0.5-0.5,0.5H8.1z M8.1,75.3c-0.3,0-0.5-0.3-0.5-0.5v-4.9c0-0.3,0.3-0.5,0.5-0.5h2.1c0.3,0,0.5,0.3,0.5,0.5v4.9
              c0,0.3-0.3,0.5-0.5,0.5H8.1z"
            ></path>
          </g>
        </g>
        <g id="BRT-南" v-if="Data.controltype === 4">
          <path
            class="st0"
            d="M24,87V4c0-2.2-1.8-4-4-4H4C1.8,0,0,1.8,0,4v83c0,2.2,1.8,4,4,4h16C22.2,91,24,89.2,24,87z"
          ></path>
          <g>
            <path
              class="st1"
              d="M5.6,74.5v-4.2c0-1.2,0.1-2,0.3-2.4C6.1,67.4,6.5,67,7,66.7c0.5-0.3,1.1-0.5,1.8-0.5c0.6,0,1.2,0.1,1.7,0.4
              s0.9,0.6,1.1,1.1c0.2-0.6,0.6-1.1,1.1-1.5s1.2-0.5,2-0.5c0.9,0,1.7,0.2,2.4,0.7s1,1,1.2,1.6c0.1,0.4,0.2,1.4,0.2,3v3.6L5.6,74.5
              L5.6,74.5z M7.7,72.4h3V71c0-0.8,0-1.4,0-1.6c-0.1-0.4-0.2-0.6-0.5-0.9s-0.6-0.3-1-0.3s-0.7,0.1-0.9,0.3c-0.2,0.2-0.4,0.4-0.4,0.6
              c-0.1,0.2-0.1,0.9-0.1,2v1.3H7.7z M12.8,72.4h3.4v-2c0-0.9,0-1.4-0.1-1.7c-0.1-0.2-0.3-0.5-0.5-0.6c-0.3-0.2-0.6-0.3-1-0.3
              s-0.8,0.1-1,0.3s-0.5,0.4-0.6,0.7c-0.1,0.3-0.2,0.9-0.2,1.8V72.4z"
            ></path>
            <path
              class="st1"
              d="M18.4,62.7H5.6v-4.5c0-1.1,0.1-2,0.3-2.5s0.6-0.9,1.2-1.2S8.4,54,9.2,54c1,0,1.8,0.2,2.4,0.7
              c0.6,0.5,1,1.2,1.2,2.1c0.3-0.5,0.7-0.8,1.1-1.1S15,55,16,54.5l2.5-1.3v2.5l-2.8,1.5c-1,0.6-1.6,0.9-1.9,1.1s-0.4,0.4-0.5,0.6
              s-0.1,0.6-0.1,1.1v0.4h5.4v2.3H18.4z M11,60.6V59c0-1,0-1.6-0.1-1.8s-0.3-0.5-0.5-0.6s-0.6-0.2-1-0.2s-0.7,0.1-1,0.2
              S8,57,7.9,57.3c-0.1,0.2-0.1,0.8-0.1,1.7v1.7H11V60.6z"
            ></path>
            <path class="st1" d="M18.4,48.6H7.7v3.1H5.6v-8.4h2.2v3.1h10.7v2.2H18.4z"></path>
          </g>
        </g>
        <g id="非机动车-南" v-if="Data.controltype === 6">
          <path
            class="st0"
            d="M0,4v83c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V4c0-2.2-1.8-4-4-4H4C1.8,0,0,1.8,0,4z"
          ></path>
          <path
            class="st1"
            d="M15.1,67.1c2.6,0,4.7-2.1,4.7-4.7c0-2.4-1.8-4.4-4.1-4.7v-1.4c0-0.1,0-0.1,0-0.1h-0.3l0,0l0.2-0.1
            c0,0,0,0,0-0.1c0,0,0-0.1-0.1-0.1l0,0l0,0l-5.3-5.4l0.7-0.2c0.8,1.6,2.4,2.6,4.2,2.6c2.6,0,4.7-2.1,4.7-4.7s-2.1-4.7-4.7-4.7
            s-4.7,2.1-4.7,4.7c0,0.2,0,0.5,0.1,0.7l-4.4,1.4C5.6,50.5,4.7,51,4.7,52v1.3C4.7,53.6,5,54,5.5,54s0.7-0.3,0.7-0.7V52
            c0-0.1,0.2-0.3,0.4-0.3l0.8-0.2v7.2L7,58.9v-0.7c0-0.4-0.3-0.7-0.7-0.7c-0.2,0-0.4,0.1-0.5,0.2S5.6,58,5.6,58.2v3
            c0,0.4,0.3,0.7,0.7,0.7c0.2,0,0.4-0.1,0.5-0.2C6.9,61.6,7,61.4,7,61.2v-0.7L8.2,60l2.5,1.2c-0.1,0.4-0.2,0.8-0.2,1.3
            C10.4,65,12.5,67.1,15.1,67.1z M8.8,51.1l4.9,4.9l-4.9,2C8.8,58,8.8,51.1,8.8,51.1z M14.2,61.3l-1.7-0.8c0.4-0.6,1-1,1.7-1.2V61.3z
             M9.9,59.2l4.3-1.8v0.3c-1.3,0.2-2.4,1-3.1,2L9.9,59.2z M15.7,59.2c1.5,0.3,2.6,1.6,2.6,3.2c0,1.8-1.5,3.2-3.2,3.2
            c-1.8,0-3.2-1.5-3.2-3.2c0-0.2,0-0.4,0.1-0.6l2.7,1.3c0.2,0.1,0.5,0.1,0.7,0s0.3-0.4,0.3-0.6V59.2z M11.9,48.4c0-0.1,0-0.2,0-0.3
            c0-1.8,1.5-3.2,3.2-3.2c1.8,0,3.2,1.5,3.2,3.2c0,1.8-1.5,3.2-3.2,3.2c-1.1,0-2.2-0.6-2.8-1.6l3.1-1c0.4-0.1,0.6-0.5,0.5-0.9
            c-0.1-0.2-0.2-0.3-0.4-0.4s-0.4-0.1-0.6,0L11.9,48.4z"
          ></path>
        </g>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  name: 'southBusSvg',
  props: {
    IconLengh: {
      // 相位图标长度
      type: String,
      default: '91px'
    },
    IconWdith: {
      // 相位图标宽度
      type: String,
      default: '24px'
    },
    Data: {
      type: Object
    }
  },
  methods: {},
  mounted () {}
}
</script>
<style scoped>
.invisible {
  visibility: hidden;
}
.hide {
  display: none;
}
.st0 {
  opacity: 0.8;
  fill: #5f5f5f;
  enable-background: new;
}
.st1 {
  fill: #ffffff;
}
</style>
