
<template>
  <!-- 设备常见操作弹窗 -->
  <van-dialog
    class-name="operDialog"
    v-model:show="show"
    :showConfirmButton="false"
    :showCancelButton="false"
  >
    <slot name="title">
      <div class="van-dialog__header">{{$t('device.commonOperations')}}</div>
      <div style="padding: 0.2em 1em;">{{$t('device.equipmentName')}}: {{device.name}}</div>
      <div style="padding: 0.2em 1em;">{{$t('device.equipmentNo')}}: {{device.clientId}}</div>
    </slot>
    <van-icon name="cross" class="close" @click="show = false" />
    <div class="group4 flex-col"></div>
    <div class="operBox">
      <div class="operItem" @click="restartFurnace()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/ic_restart.png"
          />
        </div>
        <div class="operText">{{$t('device.restartFurnaceHead')}}</div>
      </div>
      <div class="operItem" @click="sleepEquipmentFun()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/ic_sleep.png"
          />
        </div>
        <div class="operText">{{$t('device.sleep')}}</div>
      </div>
      <div class="operItem" @click="openOffFurnace()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/ic_onOff.png"
          />
        </div>
        <div class="operText">{{ device.eqeStatus === 1 ? '关闭炉头' : '开启炉头'}}</div>
      </div>
      <div class="operItem" @click="openDoorFun()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/ic_openDoor.png"
          />
        </div>
        <div class="operText">{{$t('device.remoteDoorOpening')}}</div>
      </div>
      <div class="operItem" @click="doSugar()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/doSugar.png"
          />
        </div>
        <div class="operText">{{$t('device.remoteSugarMaking')}}</div>
      </div>
      <div class="operItem" @click="alarmClock()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/alarmClock.png"
          />
        </div>
        <div class="operText">{{$t('device.timeSwitch')}}</div>
      </div>
      <div class="operItem" @click="modulation()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/modulation.png"
          />
        </div>
        <div class="operText">{{$t('device.modulation')}}</div>
      </div>
      <div class="operItem" @click="recharge()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/recharge.png"
          />
        </div>
        <div class="operText">{{$t('device.equipmentRecharge')}}</div>
      </div>
      <div class="operItem" @click="paramSetPush()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/paramsSet.png"
          />
        </div>
        <div class="operText">{{$t('device.parameterSetting')}}</div>
      </div>
      <div class="operItem" @click="saveProportionPush()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/saveProportion.png"
          />
        </div>
        <div class="operText">{{$t('device.addDistributor')}}</div>
      </div>
      <div v-if="isRole('M17')" class="operItem" @click="tuojiEquipmentFun()">
        <div class="operIcon">
          <img
            class="operImg"
            src="../../assets/device/operIcon/ic_sleep.png"
          />
        </div>
        <div class="operText">系统脱机</div>
      </div>
    </div>
  </van-dialog>
  <van-dialog
    v-model:show="operCheckShow"
    :title="$t('device.operationConfirmation')"
    :showConfirmButton="false"
    :showCancelButton="false"
  >
    <div class="operCheckBox">
      <div class="block5 flex-col"></div>
      <span class="word10">{{$t('device.pleaseConfirmAgainWhetherToOperate')}}</span>
      <div class="block6 flex-row justify-between">
        <div class="mod7 flex-col" @click="operCheckClear()">
          <span class="info5">{{$t('device.IllThinkAboutItAgain')}}</span>
        </div>
        <div class="mod8 flex-col" @click="operCheck()">
          <span class="info6">{{$t('device.confirm')}}</span>
        </div>
      </div>
    </div>
  </van-dialog>
</template>
<script>
import { onMounted, ref } from "vue";
import { setFurnace, sleepEquipment, openDoor, deviceTuoji } from '../../service/device';
import { Toast } from 'vant';
import { useRouter } from "vue-router";
import { useI18n } from 'vue-i18n';
import { getLoginUser } from "@/common/js/utils";

export default {
  setup() {
    const { t } = useI18n();
    const user = getLoginUser();
    const router = useRouter();
    const show = ref(false);
    const operCheckShow = ref(false);
    const device = ref({});
    const operType = ref('');
    // 初始化页面获取列表
    onMounted(async () => {});
    // 当前弹窗父组件触发
    const showOper = (e) => {
      device.value = e;
      show.value = true;
    };
    // 重启炉头
    const restartFurnace = () => {
      operType.value = 1;
      operCheckShow.value = true;
    };
    // 睡眠
    const sleepEquipmentFun = () => {
      operType.value = 2;
      operCheckShow.value = true;
    }
    // 开启关闭炉头
    const openOffFurnace = () => {
      operType.value = 3;
      operCheckShow.value = true;
    }
    // 远程开门
    const openDoorFun = () => {
      operType.value = 4;
      operCheckShow.value = true;
    }
    // 音量调节
    const modulation = () => {
      router.push({ path: 'modulation', query: { deviceId: device.value.id }})
    }
    // 远程做糖
    const doSugar = () => {
      router.push({ path: 'doSugar', query: { deviceId: device.value.id }})
    }
    // 定时开关
    const alarmClock = () => {
      router.push({ path: 'alarmClock', query: { deviceId: device.value.id }})
    }
    // 跳转 - 设备充值
    const recharge = () => {
      router.push({ path: 'recharge', query: { deviceId: device.value.id }}); 
    }
    // 跳转 - 参数设置
    const paramSetPush = () => {
      router.push({ path: 'paramsSet', query: { deviceId: device.value.id }});
    }
    // 跳转 - 添加分销人
    const saveProportionPush = () => {
      router.push({ path: 'saveProportion', query: { deviceId: device.value.id }});
    }
    // 系统脱机
    const tuojiEquipmentFun = () => {
      operType.value = 5;
      operCheckShow.value = true;
    }
    // 取消操作
    const operCheckClear = () => {
      operCheckShow.value = false;
    }
    // 功能操作 - 确认操作
    const operCheck = async () => {
      // 重启
      if (operType.value === 1) {
        const { data } = await setFurnace({equipmentId: device.value.id, eqeStatus: 1});
        if (data.code) {
          Toast.success(t('device.restartSucceeded'));
          operCheckShow.value = false;
        } else { Toast.fail(data.message); }
      }
      // 睡眠
      if (operType.value === 2) {
        const { data } = await sleepEquipment({equipmentId: device.value.id, eqeStatus: device.value.isSleep === 0 ? 1 : 0});
        if (data.code) {
          Toast.success(t('device.sleepSuccessfully'));
          operCheckShow.value = false;
        } else { Toast.fail(data.message); }
      }
      // 开机|关机
      if (operType.value === 3) {
        const { data } = await setFurnace({equipmentId: device.value.id, eqeStatus: device.value.eqeStatus === 0 ? 1 : 0});
        if (data.code) {
          Toast.success(`${device.value.eqeStatus === 0 ? t('device.open') : t('device.close')}${t('device.success')}`);
          device.value.eqeStatus = device.value.eqeStatus === 0 ? 1 : 0;
          operCheckShow.value = false;
        } else { Toast.fail(data.message); }
      }
      // 远程开门
      if (operType.value === 4) {
        const { data } = await openDoor({equipmentId: device.value.id});
        if (data.code) {
          Toast.success(t('device.remoteDoorOpeningSucceeded'));
          operCheckShow.value = false;
        } else { Toast.fail(data.message); }
      }
      // 系统脱机
      if (operType.value === 5) {
        const { data } = await deviceTuoji({id: device.value.id});
        if (data.code) {
          Toast.success('系统脱机成功');
          operCheckShow.value = false;
        } else { Toast.fail(data.message); }
      }
    }
    const isRole = (key) => {
      return user.menuCodeList.filter(type => key === type).length > 0;
    }

    return {
      device,
      show,
      operCheckShow,
      showOper,
      restartFurnace,
      operCheckClear,
      operCheck,
      sleepEquipmentFun,
      openOffFurnace,
      openDoorFun,
      modulation,
      doSugar,
      alarmClock,
      recharge,
      paramSetPush,
      saveProportionPush,
      tuojiEquipmentFun,
      isRole
    };
  },
  components: {},
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
.operDialog {
  width: 90%;
  .close { position: absolute; top: 0.5em; right: 0.5em; font-size: 1.5em;}
  .group4 {
    background-color: rgba(215, 215, 226, 1);
    border-radius: 2px;
    width: 310px;
    height: 1px;
    margin: 0 auto;
    margin-top: 10px;
  }
  .operBox {
    display: flex;
    width: 95%;
    margin: 0 auto;
    flex-wrap: wrap;
    .operItem {
      width: 25%;
      margin: 6% 0;
      .operIcon {
        text-align: center;
        .operImg {
          width: 25px;
        }
      }
      .operText {
        color: rgba(64, 77, 116, 1);
        font-size: 11px;
        text-align: center;
      }
    }
  }
}
.operCheckBox {
  .block5 {
    background-color: rgba(215, 215, 226, 1);
    border-radius: 2px;
    width: 310px;
    height: 1px;
    margin: 0 auto;
    margin-top: 25px;
  }
  .word10 {
    width: 143px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(64, 77, 116, 1);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
    display: block;
    margin: 33px auto;
  }
  .block6 {
    width: 265px;
    height: 34px;
    margin: 20px auto;
    .mod7 {
      border-radius: 17px;
      height: 34px;
      border: 1px solid rgba(77, 106, 221, 1);
      width: 120px;
      justify-content: center;
      align-items: center;
      .info5 {
        width: 60px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(77, 106, 221, 1);
        font-size: 15px;
        font-family: PingFangSC-Medium;
        text-align: center;
        white-space: nowrap;
        line-height: 15px;
        display: block;
      }
    }
    .mod8 {
      background-color: rgba(77, 106, 221, 1);
      border-radius: 17px;
      height: 34px;
      width: 120px;
      justify-content: center;
      align-items: center;
      .info6 {
        width: 30px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 15px;
        font-family: PingFangSC-Medium;
        text-align: center;
        white-space: nowrap;
        line-height: 15px;
        display: block;
      }
    }
  }
}
</style>
