disinfection_high_front_end/src/pages/Home.vue

<template>
  <div class="home_container">
    <div class="header_menu">
      <div
        :class="activeTab == 1 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(1)"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="22"
          height="20.533334732055664"
          viewBox="0 0 22 20.533334732055664"
        >
          <g>
            <path
              d="M18.4054,13.9071L19.2136,14.3737L19.5229,13.8378C19.5736,13.7502,19.6857,13.7201,19.7734,13.7707L20.4085,14.1374C20.4961,14.188,20.5262,14.3002,20.4756,14.3878L19.3068,16.4122C19.2562,16.4998,19.1441,16.5299,19.0564,16.4793L18.4213,16.1126C18.3336,16.062,18.3036,15.9498,18.3542,15.8622L18.6636,15.3263L17.8545,14.8593C17.2544,15.7529,16.4862,16.5211,15.5926,17.1212L16.4263,18.5653L16.9622,18.2559C17.0479,18.2064,17.1575,18.234,17.2097,18.3181L17.2126,18.323L17.5793,18.9581C17.6288,19.0439,17.6012,19.1535,17.5171,19.2056L17.5122,19.2086L15.4878,20.3773C15.4021,20.4268,15.2925,20.3993,15.2403,20.3151L15.2374,20.3102L14.8707,19.6751C14.8212,19.5894,14.8488,19.4798,14.9329,19.4276L14.9378,19.4247L15.4737,19.1153L14.6404,17.6721C13.6978,18.1364,12.6535,18.426,11.55,18.4986L11.55,19.4333L12.1688,19.4333C12.2678,19.4333,12.3489,19.512,12.352,19.6109L12.3521,19.6167L12.3521,20.35C12.3521,20.449,12.2735,20.5301,12.1745,20.5332L12.1688,20.5333L9.83125,20.5333C9.73223,20.5333,9.6511,20.4547,9.64801,20.3557L9.64792,20.35L9.64792,19.6167C9.64792,19.5176,9.72655,19.4365,9.82552,19.4334L9.83125,19.4333L10.45,19.4333L10.45,18.4986C9.34649,18.426,8.30225,18.1364,7.35957,17.6721L6.52632,19.1153L7.06216,19.4247C7.14984,19.4753,7.17989,19.5874,7.12926,19.6751L6.7626,20.3102C6.71197,20.3979,6.59985,20.4279,6.51216,20.3773L4.48784,19.2086C4.40016,19.1579,4.37012,19.0458,4.42074,18.9581L4.78741,18.323C4.83803,18.2354,4.95016,18.2053,5.03784,18.2559L5.57368,18.5653L6.40739,17.1212C5.5138,16.5211,4.74555,15.7529,4.14547,14.8593L3.33644,15.3263L3.64581,15.8622C3.69527,15.9478,3.66787,16.0573,3.58389,16.1095L3.57871,16.1126L2.94362,16.4793C2.85798,16.5287,2.74854,16.5013,2.69628,16.4174L2.69319,16.4122L1.52444,14.3878C1.47498,14.3022,1.50237,14.1928,1.58634,14.1405L1.59154,14.1374L2.22663,13.7707C2.31227,13.7213,2.42169,13.7487,2.47395,13.8326L2.47706,13.8378L2.78644,14.3737L3.5946,13.9071C3.13028,12.9644,2.84068,11.9202,2.76804,10.8167L1.1,10.8167L1.1,11.4354C1.1,11.5367,1.01792,11.6188,0.916667,11.6188L0.183333,11.6188C0.0820812,11.6188,0,11.5367,0,11.4354L0,9.09792C0,8.99667,0.0820812,8.91458,0.183333,8.91458L0.916667,8.91458C1.01792,8.91458,1.1,8.99667,1.1,9.09792L1.1,9.71667L2.76804,9.71667C2.84068,8.61316,3.13028,7.56892,3.59459,6.62624L2.78644,6.15966L2.47706,6.6955C2.42762,6.78116,2.31914,6.81215,2.2319,6.76555L2.22663,6.7626L1.59154,6.39593C1.50589,6.34649,1.4749,6.23802,1.52148,6.15079L1.52444,6.14552L2.69319,4.12117C2.74263,4.03553,2.8511,4.00453,2.93833,4.05112L2.9436,4.05407L3.57871,4.42074C3.66435,4.47019,3.69534,4.57865,3.64875,4.66588L3.64581,4.67115L3.33644,5.20701L4.14547,5.67405C4.74556,4.78047,5.51382,4.01221,6.40741,3.41213L5.5737,1.96802L5.03784,2.27739C4.95016,2.32801,4.83804,2.29797,4.78741,2.21029L4.42074,1.5752C4.37012,1.48752,4.40016,1.3754,4.48784,1.32477L6.51216,0.156018C6.59985,0.105394,6.71197,0.135435,6.7626,0.223118L7.12926,0.858208C7.17989,0.945892,7.14985,1.05801,7.06216,1.10864L6.52633,1.41802L7.35958,2.86126C8.30228,2.39695,9.3465,2.10735,10.45,2.0347L10.45,1.1L9.83125,1.1C9.73,1.1,9.64792,1.01792,9.64792,0.916667L9.64792,0.183333C9.64792,0.0820811,9.73,0,9.83125,0L12.1688,0C12.27,0,12.3521,0.0820811,12.3521,0.183333L12.3521,0.916667C12.3521,1.01792,12.27,1.1,12.1688,1.1L11.55,1.1L11.55,2.0347C12.6535,2.10735,13.6977,2.39695,14.6404,2.86126L15.4737,1.41802L14.9378,1.10864C14.8521,1.05913,14.8211,0.950466,14.8679,0.863203L14.8707,0.858207L15.2374,0.223117C15.2869,0.137357,15.3956,0.106411,15.4828,0.153221L15.4878,0.156017L17.5122,1.32477C17.5979,1.37428,17.6289,1.48294,17.5821,1.5702L17.5793,1.5752L17.2126,2.21029C17.1631,2.29605,17.0544,2.327,16.9672,2.28019L16.9622,2.27739L16.4263,1.96802L15.5926,3.41213C16.4862,4.01222,17.2545,4.78049,17.8545,5.67408L18.6636,5.20704L18.3542,4.67117C18.3036,4.58349,18.3336,4.47137,18.4213,4.42074L19.0564,4.05407C19.1441,4.00345,19.2562,4.03349,19.3068,4.12117L20.4756,6.14549C20.5262,6.23318,20.4961,6.3453,20.4085,6.39593L19.7734,6.7626C19.6857,6.81322,19.5736,6.78318,19.5229,6.6955L19.2136,6.15966L18.4054,6.62624C18.8697,7.56894,19.1593,8.61318,19.232,9.71667L
              :fill="activeTab == 1 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">消毒</p>
      </div>
      <div
        :class="activeTab == 2 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(2)"
        v-if="operatorStore.disinfectStatus != 1"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="20"
          height="20"
          viewBox="0 0 20 20"
        >
          <g>
            <path
              d="M10.0113,0Q12.0725,0,13.8958,0.782313Q15.7191,1.56463,17.0781,2.92517Q18.4371,4.28571,19.2186,6.11111Q20,7.93651,20,10Q20,12.0862,19.2186,13.9002Q18.4371,15.7143,17.0781,17.0748Q15.7191,18.4354,13.8958,19.2177Q12.0725,20,10.0113,20Q7.92752,20,6.10419,19.2177Q4.28086,18.4354,2.92186,17.0748Q1.56285,15.7143,0.781427,13.9002Q-2.53134e-7,12.0862,0,10Q0,7.93651,0.781427,6.11111Q1.56285,4.28571,2.92186,2.92517Q4.28086,1.56463,6.10419,0.782313Q7.92752,-5.91316e-7,10.0113,0ZM15.7191,11.3832Q16.308,11.3832,16.7157,10.9637Q17.1234,10.5442,17.1234,9.95465Q17.1234,9.36508,16.7157,8.95692Q16.308,8.54875,15.7191,8.54875L11.4609,8.54875L11.4609,4.28571Q11.4609,3.69615,11.0419,3.27664Q10.6229,2.85714,10.034,2.85714Q9.44507,2.85714,9.03737,3.27664Q8.62967,3.69615,8.62967,4.28571L8.62967,8.54875L4.37146,8.54875Q3.78256,8.54875,3.37486,8.95692Q2.96716,9.36508,2.96716,9.95465Q2.96716,10.5442,3.37486,10.9637Q3.78256,11.3832,4.37146,11.3832L8.62967,11.3832L8.62967,15.6236Q8.62967,16.2132,9.03737,16.6327Q9.44507,17.0522,10.034,17.0522Q10.6229,17.0522,11.0419,16.6327Q11.4609,16.2132,11.4609,15.6236L11.4609,11.3832L15.7191,11.3832Z"
              :fill="activeTab == 2 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">加液</p>
      </div>
      <div
        :class="activeTab == 3 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(3)"
        v-if="operatorStore.disinfectStatus != 1"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="20"
          height="20"
          viewBox="0 0 20 20"
        >
          <g>
            <path
              d="M9.98885,0Q12.0624,0,13.8907,0.791527Q15.7191,1.58305,17.068,2.932Q18.4169,4.28094,19.2085,6.0981Q20,7.91527,20,9.98885Q20,12.0624,19.2085,13.8907Q18.4169,15.7191,17.068,17.068Q15.7191,18.4169,13.8907,19.2085Q12.0624,20,9.98885,20Q7.91527,20,6.0981,19.2085Q4.28094,18.4169,2.932,17.068Q1.58305,15.7191,0.791527,13.8907Q0.00000290714,12.0624,0,9.98885Q-0.00000290714,7.91527,0.791527,6.0981Q1.58306,4.28094,2.932,2.932Q4.28093,1.58305,6.0981,0.791528Q7.91528,0.00000332244,9.98885,0ZM14.961,11.3489Q15.6299,11.3489,16.165,11.0033Q16.7001,10.6577,16.7001,9.96655Q16.7001,9.29766,16.165,8.97436Q15.6299,8.65106,14.961,8.65106L5.10591,8.65106Q4.43701,8.65106,3.8796,8.97436Q3.32218,9.29766,3.32218,9.96655Q3.32218,10.6577,3.8796,11.0033Q4.43701,11.3489,5.10591,11.3489L14.961,11.3489Z"
              :fill="activeTab == 3 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">排液</p>
      </div>
      <div
        :class="activeTab == 4 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(4)"
        v-if="
          userStore.loginUserPermission != 3 &&
          operatorStore.disinfectStatus != 1
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="20.125"
          height="20.125"
          viewBox="0 0 20.125 20.125"
        >
          <g>
            <path
              d="M12.1038,9.50762C12.2878,10.2034,12.1081,10.9753,11.5618,11.5201C10.7467,12.3352,9.42425,12.3352,8.60919,11.5201C7.79413,10.7051,7.79413,9.38256,8.60919,8.5675C9.19856,7.97813,10.0539,7.81569,10.7913,8.07875L18.3669,1.19888C18.768,0.79925,19.274,0.656938,19.4307,0.812188C19.6233,1.00481,19.4436,1.47488,19.044,1.8745L12.1038,9.50762ZM10.0625,2.51562C5.89519,2.51562,2.51562,5.89519,2.51562,10.0625C2.51562,14.2298,5.89519,17.6094,10.0625,17.6094C14.2298,17.6094,17.6094,14.2298,17.6094,10.0625C17.6094,9.07206,17.4067,8.13194,17.0603,7.26513L18.8888,5.22819C19.6751,6.66425,20.125,8.31019,20.125,10.0625C20.125,15.6199,15.6199,20.125,10.0625,20.125C4.50513,20.125,0,15.6199,0,10.0625C0,4.50513,4.50513,0,10.0625,0C11.8623,0,13.5484,0.478687,15.0089,1.30669L13.0309,3.12656C12.1196,2.73556,11.1176,2.51562,10.0625,2.51562Z"
              :fill="activeTab == 4 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">测试</p>
      </div>
      <div
        :class="activeTab == 5 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(5)"
        v-if="
          userStore.loginUserPermission != 3 &&
          operatorStore.disinfectStatus != 1
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="20"
          height="19.999309539794922"
          viewBox="0 0 20 19.999309539794922"
        >
          <g>
            <path
              d="M8.23213,0L7.81352,2.1951C7.2095,2.36438,6.62789,2.60276,6.07979,2.90611L4.29364,1.56408L1.67856,4.17917L2.93507,6.02807C2.62819,6.57288,2.38543,7.15217,2.21165,7.7549L0,8.07007L0,11.7679L2.19579,12.1865C2.36437,12.7898,2.60276,13.3714,2.90611,13.9195L1.56408,15.7057L4.17917,18.3207L6.02876,17.0642C6.57431,17.3717,7.15383,17.6144,7.75559,17.7877L8.07076,19.9993L11.7686,19.9993L12.1872,17.8035C12.792,17.6353,13.3726,17.3966,13.9202,17.0932L15.7064,18.4352L18.3214,15.8201L17.0649,13.9712C17.3723,13.4257,17.6151,12.8462,17.7884,12.2444L20,11.9292L20,8.23144L17.8042,7.81283C17.6359,7.20803,17.3973,6.62736,17.0939,6.07979L18.4359,4.29364L15.8208,1.67856L13.9719,2.93507C13.4271,2.62819,12.8485,2.38543,12.2451,2.21165L11.9299,0L8.23213,0ZM8.99969,3.33368L9.37209,1.37926L10.7327,1.37857L11.0107,3.33368L11.4762,3.43712C12.2384,3.60803,12.9648,3.91123,13.6223,4.33295L14.005,4.57846L15.6519,3.45988L16.6139,4.42192L15.4277,6.00117L15.6829,6.40392C16.1015,7.06339,16.4012,7.79117,16.5684,8.55419L16.6656,8.999L18.62,9.37209L18.62,10.7327L16.6649,11.0107L16.5615,11.4762C16.3906,12.2384,16.0874,12.9648,15.6657,13.6223L15.4202,14.005L16.5387,15.6519L15.5767,16.6139L13.9974,15.4277L13.5947,15.6829C12.9352,16.1015,12.2074,16.4012,11.4444,16.5684L10.9996,16.6656L10.6265,18.62L9.26658,18.62L8.98866,16.6649L8.52315,16.5615C7.76091,16.3906,7.03453,16.0874,6.37702,15.6657L5.99428,15.4202L4.34744,16.5387L3.3854,15.5767L4.57157,13.9974L4.3164,13.5947C3.8978,12.9352,3.5981,12.2074,3.43092,11.4444L3.33368,10.9996L1.37926,10.6265L1.37926,9.26658L3.33437,8.98865L3.43781,8.52315C3.60866,7.76091,3.91187,7.03453,4.33364,6.37702L4.57915,5.99428L3.46057,4.34744L4.42261,3.3854L6.00186,4.57157L6.40461,4.3164C7.06402,3.89769,7.79183,3.59797,8.55488,3.43092L8.99969,3.33368ZM5.86187,9.99965C5.86187,12.2849,7.71442,14.1374,9.99965,14.1374C12.2849,14.1374,14.1374,12.2849,14.1374,9.99965C14.1374,7.71442,12.2849,5.86187,9.99965,5.86187C7.71442,5.86187,5.86187,7.71442,5.86187,9.99965ZM12.7582,9.99965C12.7582,11.5231,11.5231,12.7582,9.99965,12.7582C8.47616,12.7582,7.24113,11.5231,7.24113,9.99965C7.24113,8.47616,8.47616,7.24113,9.99965,7.24113C11.5231,7.24113,12.7582,8.47616,12.7582,9.99965Z"
              fill-rule="evenodd"
              :fill="activeTab == 5 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">设置</p>
      </div>
    </div>
    <Operator
      v-if="activeTab == 1 && showOpertor"
      :changeShowOperator="changeShowOperator"
      :handleShowKeyBoard="handleShowKeyBoard"
      :hideKeyBoard="hideKeyBoard"
      :input="input"
    />
    <Progress
      v-if="activeTab == 1 && !showOpertor"
      :changeShowOperator="changeShowOperator"
    />
    <LiquidHandle v-if="activeTab == 2" :tabType="1" />
    <LiquidHandle v-if="activeTab == 3" :tabType="2" />
    <Test v-if="activeTab == 4" />
    <Setting v-if="activeTab == 5" />
    <div class="other_info">
      <p>IP {{ settingStore.deviceIp }}</p>
      <p class="time">{{ nowTime }}</p>
      <div class="log_out_btn" @click="handleLogout">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="76"
          height="29"
          viewBox="0 0 76 29"
        >
          <g>
            <g>
              <path
                d="M34.9,7.65437C36.22,8.27594,37.86,9.23781,38.7,9.89937L39.480000000000004,8.77687C38.62,8.15563,36.92,7.25375,35.66,6.6725L34.9,7.65437ZM33.86,13.18C35.12,13.78,36.74,14.72,37.54,15.36L38.3,14.24C37.46,13.62,35.84,12.74,34.6,12.18L33.86,13.18ZM34.46,23.64L35.58,24.5628C36.76,22.7,38.18,20.16,39.24,18.04L38.28,17.16C37.12,19.44,35.54,22.1,34.46,23.64ZM43.96,6.81281C44.66,7.875,45.38,9.27812,45.68,10.18L46.96,9.63875C46.66,8.75687,45.88,7.39406,45.18,6.37187L43.96,6.81281ZM39.62,10.28L39.62,11.56L44.96,11.56L44.96,16.24L40.38,16.24L40.38,17.52L44.96,17.52L44.96,22.88L38.980000000000004,22.88L38.980000000000004,24.16L52.2,24.16L52.2,22.88L46.34,22.88L46.34,17.52L51,17.52L51,16.24L46.34,16.24L46.34,11.56L51.72,11.56L51.72,10.28L39.62,10.28ZM64.2,7.65625C65,8.84,65.82,10.4,66.16,11.38L67.28,10.8C66.94,9.8,66.06,8.29844,65.25999999999999,7.155L64.2,7.65625ZM73.24000000000001,7.03437C72.72,8.19812,71.78,9.84,71.08,10.84L72.1,11.32C72.82,10.36,73.72,8.86,74.42,7.57625L73.24000000000001,7.03437ZM59,6.51281C58.42,8.35844,57.4,10.14,56.22,11.34C56.44,11.62,56.8,12.26,56.9,12.54C57.519999999999996,11.88,58.120000000000005,11.06,58.66,10.16L63.58,10.16L63.58,8.9L59.34,8.9C59.66,8.23812,59.94,7.53594,60.18,6.85406L59,6.51281ZM56.68,16.4L56.68,17.64L59.6,17.64L59.6,21.7653C59.6,22.6262,59,23.1672,58.66,23.3672C58.879999999999995,23.6478,59.22,24.1884,59.32,24.5087C59.620000000000005,24.1884,60.120000000000005,23.8678,63.44,21.9856C63.34,21.7053,63.22,21.2047,63.18,20.8441L60.84,22.0856L60.84,17.64L63.7,17.64L63.7,16.4L60.84,16.4L60.84,13.56L63.239999999999995,13.56L63.239999999999995,12.34L57.519999999999996,12.34L57.519999999999996,13.56L59.6,13.56L59.6,16.4L56.68,16.4ZM65.7,16.88L72.62,16.88L72.62,19.18L65.7,19.18L65.7,16.88ZM65.7,15.7L65.7,13.44L72.62,13.44L72.62,15.7L65.7,15.7ZM68.6,6.43125L68.6,12.2L64.48,12.2L64.48,24.7819L65.7,24.7819L65.7,20.34L72.62,20.34L72.62,23.02C72.62,23.3,72.5,23.38,72.22,23.38C71.92,23.4,70.9,23.4,69.72,23.38C69.92,23.72,70.1,24.26,70.16,24.6C71.7,24.6,72.62,24.6,73.14,24.36C73.68,24.16,73.84,23.76,73.84,23.04L73.84,12.18L72.62,12.2L69.86,12.2L69.86,6.43125L68.6,6.43125Z"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
            <g>
              <path
                d="M12.8863,21.99L12.8863,24.6672C12.8863,24.6954,12.888,24.7,12.911,24.7L2.21645,24.7C2.23942,24.6994,2.2411,24.696,2.2411,24.6672L2.2411,6.33278C2.2411,6.304600000000001,2.23942,6.3,2.21645,6.3L12.911,6.3C12.888,6.30058,12.8863,6.30403,12.8863,6.33278L12.8863,11.778030000000001C12.8857,12.41359,13.3876,12.92915,14.0069,12.92915C14.6262,12.92915,15.128,12.41359,15.1274,11.778030000000001L15.1274,6.33278C15.1274,5.06203,14.1637,4,12.9328,4L2.1946,4C0.963674,4,0,5.06203,0,6.33278L0,24.6672C0,25.938,0.963674,27,2.1946,27L12.9328,27C14.1637,27,15.1274,25.938,15.1274,24.6672L15.1274,21.99C15.1274,21.3549,14.6257,20.84,14.0069,20.84C13.388,20.84,12.8863,21.3549,12.8863,21.99ZM21.6038,15.8428L18.8306,12.99639Q18.4344,12.5898,18.0383,12.5898Q17.6421,12.58981,17.2459,12.99639Q16.4536,13.80956,17.2459,14.6227L18.1007,15.5L9.52474,15.5Q8.40419,15.5,8.40419,16.65Q8.40419,17.8,9.52474,17.8L18.112,17.8L17.2459,18.6889Q16.4536,19.5021,17.2459,20.3152Q17.6421,20.7218,18.0383,20.7218Q18.4344,20.7218,18.8306,20.3152L21.6038,17.469099999999997Q22,17.0625,22,16.655900000000003Q22,16.249299999999998,21.6038,15.8428Z"
                fill-rule="evenodd"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </g>
        </svg>
      </div>
    </div>

    <!-- <van-overlay :show="settingStore.initLoading">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-loading />
          <p class="shutdown_text">初始化系统参数...</p>
        </div>
      </div>
    </van-overlay> -->
    <div class="key_wrap" v-if="showkeyboard">
      <SimpleKeyboard
        :hideKeyBoard="hideKeyBoard"
        @onChange="onChange"
        :input="input"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import SimpleKeyboard from 'cpns/SimpleKeyboard'
import moment from 'moment'
import Operator from 'cpns/Operator'
import Progress from 'cpns/Progress'
import LiquidHandle from 'cpns/LiquidHandle'
import Setting from 'cpns/Setting'
import Test from 'cpns/Test'
import { storeToRefs } from 'pinia'
import {
  useOperatorStore,
  useWebSocketStore,
  useSettingStore,
  useUserStore,
} from '@/store'
import { logoutJSON, getStateJSON, getAllSettingJSON } from '@/mock/command'

import { useRouter } from 'vue-router'

const router = useRouter()
const webSocketStore = useWebSocketStore()
const settingStore = useSettingStore()
const userStore = useUserStore()
const { socketCommandInstance } = storeToRefs(webSocketStore)
webSocketStore.initCommandSocket()
webSocketStore.initEventSocket()

const showkeyboard = ref(false)

const handleShowKeyBoard = () => {
  showkeyboard.value = true
}

const hideKeyBoard = () => {
  showkeyboard.value = false
}

const showOpertor = ref(true)

const operatorStore = useOperatorStore()
const activeTab = ref(1)
const nowTime = ref('')
const timer = ref(null)

const changeShowOperator = flag => {
  showOpertor.value = flag
}

const input = ref('0')
const onChange = a => {
  input.value = a
}

const changeTab = index => {
  activeTab.value = index
  if ([4, 5].includes(index)) {
    // getAllSetting
    webSocketStore.sendCommandMsg(getAllSettingJSON)
  }
}

const getdateTime = () => {
  nowTime.value = moment().utcOffset(8).format('YYYY-MM-DD HH:mm:ss')
}

onMounted(() => {
  getdateTime()
  timer.value = setInterval(() => {
    getdateTime()
  }, 1000)
  setTimeout(() => {
    webSocketStore.sendCommandMsg(getStateJSON)
    webSocketStore.sendCommandMsg(getAllSettingJSON)
  }, 1000)
  document.addEventListener('click', e => {
    let box = document.getElementById('keyboard')
    let room = document.getElementById('room_size')
    if (!box?.contains(e.target) && e.target != room) {
      hideKeyBoard()
    }
  })
})

onBeforeUnmount(() => {
  timer.value = null
})

const handleLogout = () => {
  webSocketStore?.sendCommandMsg(logoutJSON)
  window.location.href = 'http://127.0.0.1/#/login'
}
</script>

<style lang="scss" scoped>
.home_container {
  background: $theme-color;
  width: 1280px;
  height: 800px;
  box-sizing: border-box;
  padding: 30px;
  .key_wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 230px;
  }
  .header_menu {
    width: 100%;
    height: 80px;
    background: #fff;
    box-sizing: border-box;
    padding: 11px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .tab_btn {
      width: 239.5px;
      height: 58px;
      border-radius: 29px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 80px;
      font-family: Source Han Sans CN;
      font-size: 20px;
      font-weight: 350;
      letter-spacing: 0.12em;
      color: #3d3d3d;
      .text {
        margin-left: 9px;
        white-space: nowrap;
      }
    }
    .active_btn {
      background: linear-gradient(
        90deg,
        #06518b 0%,
        rgba(6, 81, 139, 0.7) 100%
      );
      color: #ffffff;
    }
  }
  .other_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.06em;
    color: #ffffff;
    padding: 0 30px;
    position: relative;
    .log_out_btn {
      width: 123px;
      height: 45px;
      border-radius: 23px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #064b81;
      right: 276px;
      top: -17px;
      position: absolute;
      z-index: 1;
    }
    .time {
      width: 156px;
      white-space: nowrap;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 220px;
  height: 220px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  align-items: center;
  justify-content: center;
  .shutdown_text {
    margin-top: 24px;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.06em;
    color: #fff;
  }
}
</style>