<template>
  <div class="liquid_contaienr">
    <div class="left_container">
      <p class="status">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="155"
          height="38"
          viewBox="0 0 155 38"
        >
          <g>
            <g>
              <path
                d="M60.872,11.72L60.872,32.0337L62.744,32.0337L62.744,30.102L67.788,30.102L67.788,31.8249L69.738,31.8249L69.738,11.72L60.872,11.72ZM62.744,28.23L62.744,13.618L67.788,13.618L67.788,28.23L62.744,28.23ZM51.07,8.82425L51.044,13.436L47.378,13.436L47.378,15.334L50.992,15.334C50.81,21.886,50.004,27.658,46.728,31.09C47.222,31.402,47.924,32,48.236,32.4461C51.746,28.62,52.656,22.38,52.89,15.334L56.842,15.334C56.634,25.344,56.4,28.906,55.854,29.66C55.62,29.998,55.36,30.102,54.97,30.076C54.502,30.076,53.384,30.076,52.162,29.972C52.5,30.518,52.682,31.35,52.734,31.922C53.903999999999996,32,55.1,32.0264,55.828,31.922C56.582,31.818,57.076,31.584,57.544,30.908C58.35,29.79,58.532,25.994,58.74,14.424C58.74,14.138,58.74,13.436,58.74,13.436L52.942,13.436L52.994,8.82425L51.07,8.82425ZM90.25200000000001,19.9636C91.162,20.8224,92.202,22.0452,92.644,22.8781L93.71000000000001,21.9412C93.268,21.1348,92.22800000000001,19.9636,91.292,19.1828L90.25200000000001,19.9636ZM75.926,10.3912C77.226,11.434,78.838,12.9684,79.566,13.9832L80.918,12.734C80.112,11.746,78.52600000000001,10.2607,77.2,9.26909L75.926,10.3912ZM74.652,17.3913C76.004,18.3277,77.668,19.7325,78.47399999999999,20.6693L79.72200000000001,19.3685C78.89,18.4317,77.226,17.1308,75.874,16.2204L74.652,17.3913ZM75.19800000000001,30.6074L76.888,31.6742C77.95400000000001,29.3326,79.176,26.1845,80.086,23.5569L78.55199999999999,22.4905C77.564,25.3261,76.186,28.6302,75.19800000000001,30.6074ZM88.146,8.93028C88.536,9.66072,88.926,10.5476,89.238,11.356L81.256,11.356L81.256,13.228L98.44200000000001,13.228L98.44200000000001,11.356L91.292,11.356C90.97999999999999,10.4432,90.434,9.2955,89.914,8.40825L88.146,8.93028ZM89.99199999999999,18.35L95.50399999999999,18.35C94.80199999999999,21.2128,93.606,23.6329,92.098,25.6105C90.824,23.9449,89.81,22.0192,89.108,19.9636C89.42,19.4172,89.706,18.8968,89.99199999999999,18.35ZM89.99199999999999,13.618C89.108,16.634,87.262,20.302,84.94800000000001,22.6181C85.312,22.8781,85.91,23.4765,86.22200000000001,23.8409C86.846,23.1905,87.47,22.4357,88.042,21.6292C88.822,23.5809,89.81,25.3761,90.97999999999999,26.9637C89.316,28.7593,87.366,30.0862,85.286,30.971C85.676,31.3094,86.17,31.9858,86.43,32.4282C88.536,31.4654,90.46000000000001,30.1382,92.124,28.3689C93.632,30.0602,95.374,31.4134,97.35,32.3762C97.662,31.9078,98.23400000000001,31.1794,98.65,30.841C96.622,29.9822,94.828,28.6809,93.294,27.0417C95.29599999999999,24.4917,96.804,21.2388,97.61,17.102L96.414,16.66L96.102,16.764L90.74600000000001,16.764C91.162,15.854,91.5,14.944,91.812,14.06L89.99199999999999,13.618ZM84.714,13.566C83.804,16.4,81.932,19.8856,79.826,22.1237C80.21600000000001,22.4097,80.84,22.9821,81.126,23.3465C81.77600000000001,22.6441,82.426,21.8112,83.024,20.9264L83.024,32.4022L84.76599999999999,32.4022L84.76599999999999,18.038C85.468,16.712,86.066,15.36,86.56,14.086L84.714,13.566ZM107.02199999999999,16.14L107.02199999999999,17.934L121.166,17.934L121.166,16.14L107.02199999999999,16.14ZM102.576,20.976L102.576,22.796L109.57,22.796C109.25800000000001,27.424,108.19200000000001,29.686,102.26400000000001,30.83C102.628,31.22,103.148,31.948,103.304,32.4461C109.804,31.064,111.182,28.23,111.572,22.796L116.148,22.796L116.148,29.322C116.148,31.402,116.746,32,119.164,32C119.658,32,122.622,32,123.142,32C125.222,32,125.768,31.09,126.002,27.528C125.482,27.372,124.65,27.06,124.208,26.748C124.13,29.738,123.974,30.206,122.986,30.206C122.31,30.206,119.866,30.206,119.346,30.206C118.28,30.206,118.098,30.076,118.098,29.322L118.098,22.796L125.638,22.796L125.638,20.976L102.576,20.976ZM112.066,8.82547C112.534,9.63431,113.028,10.6256,113.366,11.486L103.25200000000001,11.486L103.25200000000001,17.258L105.202,17.258L105.202,13.358L122.908,13.358L122.908,17.258L124.936,17.258L124.936,11.486L115.68,11.486C115.316,10.5212,114.64,9.21709,114.016,8.25184L112.066,8.82547ZM142.824,8.51184C142.824,9.99709,142.876,11.4827,142.954,12.916L132.00799999999998,12.916L132.00799999999998,20.222C132.00799999999998,23.602,131.774,28.1,129.61599999999999,31.298C130.084,31.532,130.916,32.208,131.25400000000002,32.6021C133.64600000000002,29.166,134.036,23.914,134.036,20.248L134.036,20.066L138.79399999999998,20.066C138.69,24.538,138.56,26.202,138.22199999999998,26.592C138.014,26.826,137.78,26.878,137.39,26.878C136.94799999999998,26.878,135.82999999999998,26.878,134.63400000000001,26.748C134.946,27.242,135.154,28.022,135.18,28.568C136.454,28.646,137.65,28.646,138.326,28.594C139.02800000000002,28.516,139.47,28.334,139.886,27.84C140.43200000000002,27.138,140.562,24.928,140.692,19.078C140.692,18.818,140.71800000000002,18.246,140.71800000000002,18.246L134.036,18.246L134.036,14.814L143.084,14.814C143.39600000000002,19.026,144.01999999999998,22.874,145.00799999999998,25.864C143.292,27.84,141.29000000000002,29.452,138.976,30.674C139.392,31.064,140.094,31.87,140.406,32.2868C142.40800000000002,31.09,144.202,29.66,145.788,27.944C146.98399999999998,30.622,148.54399999999998,32.234,150.546,32.234C152.548,32.234,153.276,30.934,153.614,26.488C153.094,26.306,152.36599999999999,25.864,151.924,25.422C151.768,28.88,151.45600000000002,30.232,150.702,30.232C149.376,30.232,148.20600000000002,28.75,147.244,26.202C149.168,23.706,150.702,20.742,151.82,17.336L149.87,16.842C149.038,19.468,147.92000000000002,21.834,146.51600000000002,23.914C145.84,21.392,145.346,18.298,145.06,14.814L153.406,14.814L153.406,12.916L144.95600000000002,12.916C144.878,11.4827,144.852,10.0235,144.852,8.51184L142.824,8.51184ZM146.126,9.78869C147.79000000000002,10.6487,149.792,11.978,150.78,12.916L152.002,11.5612C150.988,10.6747,148.934,9.39787,147.296,8.58984L146.126,9.78869Z"
                fill="#81FC50"
                fill-opacity="1"
              />
            </g>
            <g>
              <path
                d="M15.0171,4Q18.13,4,20.8495,5.1748Q23.569,6.349600000000001,25.6043,8.39274Q27.6397,10.435870000000001,28.8198,13.16005Q30,15.8842,30,18.983Q30,22.0817,28.8198,24.8229Q27.6397,27.5641,25.6043,29.6073Q23.569,31.6504,20.8495,32.825199999999995Q18.13,34,15.0171,34Q11.9042,34,9.16762,32.825199999999995Q6.43101,31.6504,4.39567,29.6073Q2.36032,27.5641,1.18016,24.8229Q-0.00000305839,22.0817,0,18.983Q0.00000305839,15.8842,1.18016,13.16004Q2.36032,10.435870000000001,4.39567,8.39274Q6.43102,6.349600000000001,9.16762,5.1748Q11.9042,3.999999492583,15.0171,4ZM24.4242,16.1226Q25.0399,15.5096,25.0741,14.6073Q25.1083,13.70488,24.4926,13.09194Q23.8769,12.479,22.9875,12.49603Q22.0981,12.51305,21.4823,13.12599L11.8358,22.7287L8.51767,19.459699999999998Q7.90194,18.8468,7.01254,18.829700000000003Q6.12315,18.8127,5.50741,19.4257Q4.89168,20.0386,4.87457,20.8729Q4.85747,21.7072,5.4732,22.3201L10.2281,27.0874Q10.8438,27.7003,11.8358,27.6833Q12.8278,27.6663,13.4436,27.0533L13.3067,27.1896L24.4242,16.1226Z"
                fill="#81FC50"
                fill-opacity="1"
              />
            </g>
          </g>
        </svg>
      </p>
      <div class="vessel">
        <div
          class="liquid_column"
          :style="{
            '--height': `${
              ((disinfectantCapacity <= 0 ? 0 : disinfectantCapacity) / 5000) *
              472
            }px`,
          }"
        >
          <div class="indicator">
            当前剩余
            <p>{{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}g</p>
          </div>
        </div>
      </div>
    </div>
    <div class="right_container">
      <div class="add_liquid_wrap"></div>
      <img class="btn mb" :src="StartLiquid" alt="" />
      <img class="btn" :src="StartLiquidPause" alt="" />
    </div>
    <LiquidModal
      v-if="tabType == 2 && tipModalVisible"
      :hideTabLiquid="hideTabLiquid"
    />
    <van-number-keyboard
      v-model="addLiquidVal"
      :show="numberKeyboardShow"
      :maxlength="4"
      @blur="numberKeyboardShow = false"
    />
  </div>
</template>

<script setup>
import StartLiquid from '@/assets/img/liquid/1.png'
import StartLiquidPause from '@/assets/img/liquid/2.png'
import StopLiquid from '@/assets/img/liquid/3.png'
import StopLiquidPause from '@/assets/img/liquid/4.png'

import LiquidModal from './dialogs/LiquidModal.vue'
import { useDeviceStore, useWebSocketStore, useOperatorStore } from '@/store'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import {
  startReplenishingFluidsJSON,
  stopReplenishingFluidsJSON,
  stopDrainingJSON,
} from '@/mock/command'

const numberKeyboardShow = ref(false)
const operatorStore = useOperatorStore()

const props = defineProps({
  tabType: {
    type: Number,
  },
})

const addLiquidVal = ref(2000)
const tipModalVisible = ref(false)
const webSocketStore = useWebSocketStore()

const isPopLiquidStatus = ref(false)

const startAdd = () => {
  if (!(operatorStore.replenishingFluidsWorkState == 1)) {
    console.log(startReplenishingFluidsJSON(parseInt(addLiquidVal.value)))
    webSocketStore.sendCommandMsg(
      startReplenishingFluidsJSON(parseInt(addLiquidVal.value)),
    )
  }
}

const stopAdd = () => {
  if (operatorStore.replenishingFluidsWorkState == 1) {
    webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
  }
}

const stopPop = () => {
  if (operatorStore.drainingWorkState == 1) {
    webSocketStore.sendCommandMsg(stopDrainingJSON)
  }
}

const startTabLiquid = () => {
  if (!(operatorStore.drainingWorkState == 1)) {
    tipModalVisible.value = true
  }
}

const hideTabLiquid = () => {
  tipModalVisible.value = false
}

const deviceStore = useDeviceStore()

const { disinfectantCapacity } = storeToRefs(deviceStore)
</script>

<style lang="scss" scoped>
.liquid_contaienr {
  margin-bottom: 19px;
  height: 580px;
  box-sizing: border-box;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left_container {
    width: 766px;
    height: 580px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .status {
      position: absolute;
      left: 116px;
      top: 36px;
    }
    .vessel {
      position: absolute;
      width: 446px;
      height: 472px;
      left: 34px;
      bottom: 23px;
      background: url(../assets/img/liquid/chart.png) no-repeat;
      background-size: 100% 100%;
      .liquid_column {
        position: absolute;
        background: linear-gradient(270deg, #91cefb, #3fafff, #91cefb);
        height: var(--height);
        box-sizing: border-box;
        border-radius: 3px 3px 20px 20px;
        width: 300px;
        right: 9px;
        bottom: 9px;
        .indicator {
          position: absolute;
          top: -16px;
          right: -260px;
          width: 220px;
          font-family: Source Han Sans CN;
          font-size: 24px;
          font-weight: bold;
          line-height: normal;
          letter-spacing: 0.04em;
          color: #06518b;
          display: flex;
          align-items: center;
          p {
            font-family: Source Han Sans CN;
            font-size: 26px;
            font-weight: 900;
            line-height: normal;
            letter-spacing: 0em;
            color: #06518b;
            margin-left: 9px;
          }
        }
      }
    }
  }
  .right_container {
    width: 424px;
    height: 580px;
    border-radius: 16px;
    box-sizing: border-box;
    overflow: hidden;
    background: #ffffff;
    padding: 32px 42px 45px 42px;
    .btn {
      width: 340px;
      height: 108px;
    }
    .mb {
      margin-bottom: 18px;
    }
    .add_liquid_wrap {
      position: relative;
      width: 340px;
      height: 221px;
      background-size: 100% 100%;
      margin-bottom: 41px;
      background: url(../assets/img/liquid/form.png);
    }
  }
}
</style>
