/**
 * 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>
  <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 870 650"
    style="enable-background: new 0 0 870 650"
    xml:space="preserve"
    :width="Width"
    :height="Height"
  >
    <g>
      <path
        class="st0"
        d="M542.7,0.2h-18H345.1h-18v196.7L327,452.4v197.7h18h179.6h18V452.4c0-0.6,0-1.3,0.1-1.9L542.7,0.2L542.7,0.2z"
      />
      <g class="st1" v-if="showSidewalk">
        <g>
          <rect x="346.7" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="338.9" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="331.3" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="354.5" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="362.3" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="370.1" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="377.9" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="385.7" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="393.5" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="401.3" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="409.1" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="416.9" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="424.8" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="432.6" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="440.4" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="448.2" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="456" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="463.8" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="471.6" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="479.4" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="487.2" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="495" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="502.8" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="510.6" y="297.3" class="st2" width="4" height="56.3" />
        </g>
        <g>
          <rect x="518.4" y="297.3" class="st2" width="4" height="56.3" />
          <rect x="526.4" y="297.3" class="st2" width="4" height="56.3" />
          <rect x="534.3" y="297.3" class="st2" width="4" height="56.3" />
        </g>
      </g>
      <g>
        <path class="st3" d="M308.3,650.2V0.2l0,0h-1v650" />
      </g>
      <rect x="324.8" y="0.2" class="st4" width="3" height="650" />
      <g>
        <path class="st3" d="M561.7,0.2v650l0,0h1V0.2" />
      </g>
      <rect x="542.2" y="0.2" class="st4" width="3" height="650" />
      <polygon
        v-if="showPhaseIcon"
        id="东直行_18_"
        class="st5"
        points="387.9,228.3 387.9,252.5 384.2,252.5 389.4,261.6 394.6,252.5 390.9,252.5
   390.9,228.3"
      />
      <polygon
        v-if="showPhaseIcon"
        id="东直行_15_"
        class="st5"
        points="482.2,423 482.2,398.9 485.9,398.9 480.7,389.8 475.5,398.9 479.2,398.9
   479.2,423"
      />
    </g>
    <g>
      <rect x="347.3" y="372.8" class="st6" width="2" height="277.4" />
      <g id="XMLID_50_">
        <g>
          <rect x="465.8" y="587.3" class="st6" width="2" height="12" />
        </g>
      </g>
      <rect x="494.2" y="587.4" class="st6" width="2" height="12" />
      <g id="XMLID_49_">
        <g>
          <rect x="465.8" y="623.3" class="st6" width="2" height="12" />
        </g>
      </g>
      <rect x="494.2" y="623.3" class="st6" width="2" height="12" />
      <g>
        <g id="XMLID_47_">
          <g>
            <rect x="377.5" y="372.8" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="407.8" y="372.8" class="st6" width="2" height="12" />
        <g id="XMLID_46_">
          <g>
            <rect x="377.5" y="408.8" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="407.8" y="408.8" class="st6" width="2" height="12" />
        <g id="XMLID_45_">
          <g>
            <rect x="377.5" y="444.8" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="407.8" y="444.8" class="st6" width="2" height="12" />
        <g id="XMLID_44_">
          <g>
            <rect x="377.5" y="480.8" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="407.8" y="480.8" class="st6" width="2" height="12" />
        <g id="XMLID_43_">
          <g>
            <rect x="377.5" y="516.8" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="407.8" y="516.8" class="st6" width="2" height="12" />
        <g id="XMLID_42_">
          <g>
            <rect x="377.5" y="552.8" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="407.8" y="552.8" class="st6" width="2" height="12" />
        <g id="XMLID_41_">
          <g>
            <rect x="377.5" y="588.8" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="407.8" y="588.8" class="st6" width="2" height="12" />
        <g id="XMLID_40_">
          <g>
            <rect x="377.5" y="624.8" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="407.8" y="624.8" class="st6" width="2" height="12" />
      </g>
      <g>
        <g>
          <rect x="437.4" y="373.7" class="st4" width="2" height="276.5" />
        </g>
        <rect x="465.8" y="374.2" class="st6" width="2" height="189.2" />
        <rect x="494.2" y="374.2" class="st6" width="2" height="189.2" />
        <rect x="522.6" y="373.4" class="st6" width="2" height="276.8" />
        <polygon
          class="st6"
          points="511.9,374.8 509.5,374.8 475.9,374.8 473.4,374.8 437.4,374.8 437.4,372.8 542.2,372.8 542.2,374.8
         "
        />
      </g>
    </g>
    <g>
      <rect x="520.7" y="0.2" class="st6" width="2" height="277" />
      <g id="XMLID_20_">
        <g>
          <rect x="402.2" y="50.8" class="st6" width="2" height="12" />
        </g>
      </g>
      <rect x="373.8" y="50.7" class="st6" width="2" height="12" />
      <g id="XMLID_19_">
        <g>
          <rect x="402.2" y="14.8" class="st6" width="2" height="12" />
        </g>
      </g>
      <rect x="373.8" y="14.7" class="st6" width="2" height="12" />
      <g>
        <g id="XMLID_15_">
          <g>
            <rect x="490.5" y="265.3" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="460.2" y="265.3" class="st6" width="2" height="12" />
        <g id="XMLID_14_">
          <g>
            <rect x="490.5" y="229.3" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="460.2" y="229.3" class="st6" width="2" height="12" />
        <g id="XMLID_13_">
          <g>
            <rect x="490.5" y="193.3" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="460.2" y="193.3" class="st6" width="2" height="12" />
        <g id="XMLID_12_">
          <g>
            <rect x="490.5" y="157.3" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="460.2" y="157.3" class="st6" width="2" height="12" />
        <g id="XMLID_11_">
          <g>
            <rect x="490.5" y="121.3" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="460.2" y="121.3" class="st6" width="2" height="12" />
        <g id="XMLID_10_">
          <g>
            <rect x="490.5" y="85.3" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="460.2" y="85.3" class="st6" width="2" height="12" />
        <g id="XMLID_7_">
          <g>
            <rect x="490.5" y="49.3" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="460.2" y="49.3" class="st6" width="2" height="12" />
        <g id="XMLID_6_">
          <g>
            <rect x="490.5" y="13.3" class="st6" width="2" height="12" />
          </g>
        </g>
        <rect x="460.2" y="13.3" class="st6" width="2" height="12" />
      </g>
      <g>
        <g>
          <rect x="430.6" y="0.2" class="st4" width="2" height="276.1" />
        </g>
        <rect x="402.2" y="86.7" class="st6" width="2" height="189.2" />
        <rect x="373.8" y="86.7" class="st6" width="2" height="189.2" />
        <rect x="345.4" y="0.2" class="st6" width="2" height="276.5" />
        <polygon
          class="st6"
          points="358.1,275.3 360.5,275.3 394.1,275.3 396.6,275.3 432.6,275.3 432.6,277.3 327.8,277.3 327.8,275.3
         "
        />
      </g>
    </g>
  </svg>
</template>
<script>
export default {
  name: 'pedSectionSN',
  data () {
    return {}
  },
  props: {
    Width: {
      type: String,
      default: '870px'
    },
    Height: {
      type: String,
      default: '650px'
    },
    showSidewalk: {
      type: Boolean,
      default: false
    },
    showPhaseIcon: {
      type: Boolean,
      default: false
    }
  },
  methods: {},
  mounted () {}
}
</script>
<style scoped>
.st0 {
  fill: #3d3939;
}
.st1 {
  opacity: 0.9;
}
.st2 {
  fill: #f2f2f2;
}
.st3 {
  fill: #e5e5d8;
}
.st4 {
  fill: #ccb63a;
}
.st5 {
  fill: #ededed;
}
.st6 {
  fill: #dddddd;
}
</style>
