/**
 * 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 id="T型西">
      <g>
        <g>
          <path
            id="东右转_30_"
            class="st0"
            d="M270.4,346.6h-13.8v3h13.9c3.1,0,5.7-2.6,5.8-5.7l0.4-2.9l3.7,0.5l-3.9-9.7L270,340
l3.7,0.5l-0.5,3.3C273.2,345.3,272,346.6,270.4,346.6L270.4,346.6z"
          />
          <path
            id="东左转_30_"
            class="st1"
            d="M273.2,396.6l0.4,3l-3.7,0.5l6.5,8.2l3.9-9.7l-3.7,0.5l-0.4-2.9c0-3.2-2.6-5.7-5.8-5.7
h-13.9v3h13.9c1.5,0,2.8,1.3,2.8,2.8L273.2,396.6L273.2,396.6z"
          />
          <polygon
            id="东直行_30_"
            class="st1"
            points="255.6,370.8 270.8,370.8 270.8,374.5 279.9,369.3 270.8,364.1 270.8,367.8
255.6,367.8"
          />
        </g>
        <g>
          <path
            id="东右转_29_"
            class="st0"
            d="M412.3,160.6v-13.8h-3v13.9c0,3.1,2.6,5.7,5.7,5.8l2.9,0.4l-0.5,3.7l9.7-3.9l-8.2-6.5
l-0.5,3.7l-3.3-0.5C413.6,163.4,412.3,162.2,412.3,160.6L412.3,160.6z"
          />
          <path
            id="东左转_29_"
            class="st1"
            d="M362.3,163.4l-3,0.4l-0.5-3.7l-8.2,6.5l9.7,3.9l-0.5-3.7l2.9-0.4c3.2,0,5.7-2.6,5.7-5.8
v-13.9h-3v13.9c0,1.5-1.3,2.8-2.8,2.8H362.3z"
          />
          <polygon
            id="东直行_29_"
            class="st1"
            points="388.1,145.8 388.1,161 384.4,161 389.6,170.1 394.8,161 391.1,161 391.1,145.8
"
          />
        </g>
        <g>
          <path
            id="东右转_28_"
            class="st0"
            d="M457.4,489.2V503h3v-13.9c0-3.1-2.6-5.7-5.7-5.8l-2.9-0.4l0.5-3.7l-9.7,3.9l8.2,6.5
l0.5-3.7l3.3,0.5C456.1,486.4,457.4,487.6,457.4,489.2L457.4,489.2z"
          />
          <path
            id="东左转_28_"
            class="st1"
            d="M507.4,486.4l3-0.4l0.5,3.7l8.2-6.5l-9.7-3.9l0.5,3.7l-2.9,0.4c-3.2,0-5.7,2.6-5.7,5.8
v13.9h3v-13.9c0-1.5,1.3-2.8,2.8-2.8L507.4,486.4L507.4,486.4z"
          />
          <polygon
            id="东直行_28_"
            class="st1"
            points="481.6,504 481.6,488.8 485.3,488.8 480.1,479.7 474.9,488.8 478.6,488.8
478.6,504"
          />
        </g>
      </g>
    </g>
    <path
      class="st2"
      d="M542.8,196.4V-0.3l0,0h-18H345.2h-18l0,0v196.7c-0.1,11.5-9.5,20.9-21.1,21H-0.2l0,0v18V413v18l0,0H306
c11.5,0,20.9,9.4,21,21v197.7l0,0h18h179.6h18l0,0V452"
    />
    <g id="人行道" :class="showPed === true ? '' : 'invisible'">
      <g class="st3">
        <g>
          <rect x="346.8" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="339" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="331.4" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="354.6" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="362.4" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="370.2" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="378" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="385.8" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="393.6" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="401.4" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="409.2" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="417" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="424.9" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="432.7" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="440.5" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="448.3" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="456.1" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="463.9" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="471.7" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="479.5" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="487.3" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="495.1" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="502.9" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="510.7" y="199.1" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="518.5" y="199.1" class="st4" width="4" height="16.3" />
          <rect x="526.4" y="199.1" class="st4" width="4" height="16.3" />
          <rect x="534.3" y="199.1" class="st4" width="4" height="16.3" />
        </g>
      </g>
      <g class="st3">
        <rect x="309.3" y="236.8" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="228.5" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="220.6" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="244.6" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="252.3" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="260" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="267.7" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="275.5" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="283.2" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="290.9" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="298.6" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="306.3" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="314.1" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="321.8" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="329.5" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="337.2" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="345" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="352.7" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="360.4" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="368.1" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="375.8" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="383.6" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="391.3" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="399" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="406.7" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="414.4" class="st4" width="16.5" height="4" />
        <rect x="309.3" y="422.7" class="st4" width="16.5" height="4" />
      </g>
      <g class="st3">
        <g>
          <rect x="519.4" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="527.4" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="534.8" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="511.6" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="503.8" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="496" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="488.2" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="480.4" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="472.6" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="464.8" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="457" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="449.2" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="441.3" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="433.5" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="425.7" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="417.9" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="410.1" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="402.3" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="394.5" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="386.7" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="378.9" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="371.1" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="363.3" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="355.5" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="347.7" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="340.1" y="433" class="st4" width="4" height="16.3" />
        </g>
        <g>
          <rect x="332.7" y="433" class="st4" width="4" height="16.3" />
        </g>
      </g>
    </g>
    <path class="st5" d="M1.2,226.4L1.2,226.4C1.3,226.4,1.4,226.4,1.2,226.4z" />
    <path class="st5" d="M1.2,226.4L1.2,226.4C1.1,226.4,1,226.4,1.2,226.4z" />
    <path class="st6" d="M562.7,649.7v-650h-1l0,0v650" />
    <path
      class="st6"
      d="M-0.2,451h296c6.3,0,11.5,5.1,11.5,11.5v187.2h1l0,0V462.5c0-6.9-5.6-12.5-12.5-12.5h-296L-0.2,451L-0.2,451z"
    />
    <path
      class="st7"
      d="M-0.2,434h308.4c9.2,0,16.6,7.5,16.6,16.6v199.1h3V450.6c0-10.8-8.8-19.6-19.6-19.6H-0.2V434z"
    />
    <g>
      <path
        class="st6"
        d="M-0.2,198.4h296c6.9,0,12.5-5.6,12.5-12.5V-0.3l0,0h-1v186.2c0,6.3-5.1,11.5-11.5,11.5h-296L-0.2,198.4
L-0.2,198.4z"
      />
    </g>
    <path
      class="st7"
      d="M-0.2,214.4h308.4c9.2,0,16.6-7.5,16.6-16.6V-0.3h3v198.1c0,10.8-8.8,19.6-19.6,19.6H-0.2V214.4z"
    />
    <rect x="542.2" y="-0.3" class="st7" width="3" height="649.6" />
    <g>
      <rect x="0.1" y="236" class="st8" width="300.3" height="2" />
      <g id="XMLID_50_">
        <g>
          <rect x="73.9" y="354.5" class="st8" width="12" height="2" />
        </g>
      </g>
      <rect x="73.9" y="383" class="st8" width="12" height="2" />
      <g id="XMLID_49_">
        <g>
          <rect x="37.9" y="354.5" class="st8" width="12" height="2" />
        </g>
      </g>
      <rect x="37.9" y="383" class="st8" width="12" height="2" />
      <g id="XMLID_48_">
        <g>
          <rect x="1.9" y="354.5" class="st8" width="12" height="2" />
        </g>
      </g>
      <rect x="1.9" y="383" class="st8" width="12" height="2" />
      <g>
        <g id="XMLID_47_">
          <g>
            <rect x="288.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="288.5" y="296.5" class="st8" width="12" height="2" />
        <g id="XMLID_46_">
          <g>
            <rect x="252.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="252.5" y="296.5" class="st8" width="12" height="2" />
        <g id="XMLID_45_">
          <g>
            <rect x="216.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="216.5" y="296.5" class="st8" width="12" height="2" />
        <g id="XMLID_44_">
          <g>
            <rect x="180.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="180.5" y="296.5" class="st8" width="12" height="2" />
        <g id="XMLID_43_">
          <g>
            <rect x="144.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="144.5" y="296.5" class="st8" width="12" height="2" />
        <g id="XMLID_42_">
          <g>
            <rect x="108.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="108.5" y="296.5" class="st8" width="12" height="2" />
        <g id="XMLID_41_">
          <g>
            <rect x="72.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="72.5" y="296.5" class="st8" width="12" height="2" />
        <g id="XMLID_40_">
          <g>
            <rect x="36.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="36.5" y="296.5" class="st8" width="12" height="2" />
        <g id="XMLID_39_">
          <g>
            <rect x="0.5" y="266.2" class="st8" width="12" height="2" />
          </g>
        </g>
        <rect x="0.5" y="296.5" class="st8" width="12" height="2" />
      </g>
      <g>
        <g>
          <rect y="326.1" class="st7" width="299.4" height="2" />
        </g>
        <rect x="109.9" y="354.5" class="st8" width="189.2" height="2" />
        <rect x="109.9" y="383" class="st8" width="189.2" height="2" />
        <rect y="411.4" class="st8" width="299.8" height="2" />
        <polygon
          class="st8"
          points="298.5,400.6 298.5,398.3 298.5,364.6 298.5,362.1 298.5,326.1 300.5,326.1 300.5,431 298.5,431"
        />
      </g>
    </g>
    <g>
      <rect x="520.5" class="st8" width="2" height="191.4" />
      <g>
        <g id="XMLID_18_">
          <g>
            <rect x="490.3" y="179.4" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="460" y="179.4" class="st8" width="2" height="12" />
        <g id="XMLID_17_">
          <g>
            <rect x="490.3" y="143.4" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="460" y="143.4" class="st8" width="2" height="12" />
        <g id="XMLID_16_">
          <g>
            <rect x="490.3" y="107.4" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="460" y="107.4" class="st8" width="2" height="12" />
        <g id="XMLID_14_">
          <g>
            <rect x="490.3" y="71.4" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="460" y="71.4" class="st8" width="2" height="12" />
        <g id="XMLID_13_">
          <g>
            <rect x="490.3" y="35.4" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="460" y="35.4" class="st8" width="2" height="12" />
        <g id="XMLID_12_">
          <g>
            <rect x="490.3" class="st8" width="2" height="11.4" />
          </g>
        </g>
        <rect x="460" class="st8" width="2" height="11.4" />
      </g>
      <g>
        <g>
          <rect x="430.4" class="st7" width="2" height="190.4" />
        </g>
        <rect x="402" class="st8" width="2" height="190" />
        <rect x="373.6" class="st8" width="2" height="190" />
        <rect x="345.2" class="st8" width="2" height="190.8" />
        <polygon
          class="st8"
          points="357.9,189.4 360.3,189.4 393.9,189.4 396.4,189.4 432.4,189.4 432.4,191.4 327.6,191.4 327.6,189.4
"
        />
      </g>
    </g>
    <g>
      <rect x="347.1" y="458.6" class="st8" width="2" height="191.4" />
      <g>
        <g id="XMLID_20_">
          <g>
            <rect x="377.3" y="458.6" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="407.5" y="458.6" class="st8" width="2" height="12" />
        <g id="XMLID_19_">
          <g>
            <rect x="377.3" y="494.6" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="407.5" y="494.6" class="st8" width="2" height="12" />
        <g id="XMLID_11_">
          <g>
            <rect x="377.3" y="530.6" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="407.5" y="530.6" class="st8" width="2" height="12" />
        <g id="XMLID_6_">
          <g>
            <rect x="377.3" y="566.6" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="407.5" y="566.6" class="st8" width="2" height="12" />
        <g id="XMLID_5_">
          <g>
            <rect x="377.3" y="602.6" class="st8" width="2" height="12" />
          </g>
        </g>
        <rect x="407.5" y="602.6" class="st8" width="2" height="12" />
        <g id="XMLID_2_">
          <g>
            <rect x="377.3" y="638.6" class="st8" width="2" height="11.4" />
          </g>
        </g>
        <rect x="407.5" y="638.6" class="st8" width="2" height="11.4" />
      </g>
      <g>
        <g>
          <rect x="437.2" y="459.6" class="st7" width="2" height="190.4" />
        </g>
        <rect x="465.6" y="460" class="st8" width="2" height="190" />
        <rect x="494" y="460" class="st8" width="2" height="190" />
        <rect x="522.4" y="459.2" class="st8" width="2" height="190.8" />
        <polygon
          class="st8"
          points="511.7,460.6 509.3,460.6 475.7,460.6 473.2,460.6 437.2,460.6 437.2,458.6 542,458.6 542,460.6"
        />
      </g>
    </g>
    <g id="西路段" class="st9" data-road="west">
      <rect x="0.8" y="326.7" class="st10" width="299.4" height="103.8" />
      <path
        class="st10"
        d="M299.7,327.1V430H1.3V327.1H299.7 M300.7,326.1H0.3V431h300.4V326.1L300.7,326.1z"
      />
    </g>
    <g id="南路段" class="st9" data-road="south">
      <rect x="437.6" y="459" class="st10" width="104" height="190.6" />
      <path
        class="st10"
        d="M541.2,459.4v189.8H438V459.4H541.2 M542,458.6H437.2V650H542V458.6L542,458.6z"
      />
    </g>
    <g id="北路段" class="st9" data-road="north">
      <rect x="328.1" y="0.5" class="st10" width="103.8" height="190.4" />
      <path
        class="st10"
        d="M431.4,1v189.4H328.6V1H431.4 M432.4,0H327.6v191.4h104.8V0L432.4,0z"
      />
    </g>
    <text
      transform="matrix(6.114484e-17 0.9993 -1 6.127608e-17 289.2305 79.4004)"
      class="st11 st12 st13 road-name-text"
    >
      {{ roadNames.north }}
    </text>
    <text transform="matrix(1 0 0 1 177.9377 470.1436)" class="st11 st12 st14 road-name-text">
      {{ roadNames.west }}
    </text>
    <text
      transform="matrix(6.123234e-17 1 -1 6.123234e-17 571.5 474.2931)"
      class="st11 st12 st15 road-name-text"
    >
      {{ roadNames.south }}
    </text>
  </svg>
</template>
<script>
/* eslint-disable */
export default {
  name: "tWestroad",
  data() {
    return {};
  },
  props: {
    Width: {
      type: String,
      default: "870px",
    },
    Height: {
      type: String,
      default: "650px",
    },
    showPed: {
      type: Boolean,
      default: false,
    },
    roadNames: {
      type: Object,
      default: () => ({ east: '', west: '', south: '', north: '' })
    }
  },
  methods: {},
  mounted() {},
};
</script>
<style scoped>
.st0 {
  display: none;
  fill: #77fb65;
}
.st1 {
  display: none;
  fill: #ff2828;
}
.st2 {
  fill: #3d3939;
}
.st3 {
  opacity: 0.9;
}
.st4 {
  fill: #f2f2f2;
}
.st5 {
  fill: #1eaa39;
}
.st6 {
  fill: #e5e5d8;
}
.st7 {
  fill: #ccb63a;
}
.st8 {
  fill: #dddddd;
}
.st9 {
  opacity: 0.24;
}
.st10 {
  /* fill: #61f700; */
  fill: transparent;
  cursor: pointer;
}
.st11 {
  fill: #303133;
}
.st12 {
  font-family: "SourceHanSansCN-Regular-GBpc-EUC-H";
}
.st13 {
  font-size: 12.0086px;
}
.st14 {
  font-size: 12.4357px;
}
.st15 {
  font-size: 12px;
}
.invisible {
  visibility: hidden;
}
</style>
