<template>
  <div class="app-container" v-loading="loading" >
    <div v-if="deviceData">
      <el-row :gutter="16">
        <el-col :lg="18" :xs="24">
          <el-card class="box-card" >
              <el-descriptions title="设备信息" :column="4">
                <template slot="extra">
                  <el-button size="small" plain icon="el-icon-plus" @click="handleAddTime">增加时长</el-button>
                  <el-button size="small" plain icon="el-icon-plus" @click="handleAddEle" v-if="deviceData.modelTags.includes(ModelTag.ELE)">增加电量</el-button>
                  <el-button size="small" plain icon="el-icon-refresh" @click="handleReset">时长归零</el-button>
                  <el-button size="small" plain icon="el-icon-refresh" @click="handleResetEle" v-if="deviceData.modelTags.includes(ModelTag.ELE)">电量归零</el-button>
                  <el-button size="small" plain type="warning" icon="el-icon-switch-button" v-if="!isOpen" @click="handleSwitch(true)">强制开启</el-button>
                  <el-button size="small" plain type="warning" icon="el-icon-switch-button" v-if="isOpen" @click="handleSwitch(false)">强制关闭</el-button>
                  <el-button size="small" plain icon="el-icon-refresh" @click="refreshIot(deviceId, true)" style="margin-right: 1em">刷新设备信息</el-button>
                  <el-popover
                    placement="left"
                    width="180"
                    trigger="click">
                    <div class="qr-code-box">
                      <qr-code :text="qrCodeText(deviceData)" :width="150" :height="150" />
                      <p>扫描二维码进行设备绑定</p>
                    </div>
                    <el-button size="small" slot="reference" type="primary" icon="el-icon-picture">设备二维码</el-button>
                  </el-popover>
                </template>
                <el-descriptions-item label="MAC-1">
                  {{deviceData.mac | defaultValue}}
                  <dict-tag :options="dict.type.sm_device_online_status" :value="deviceData.onlineStatus1" size="mini"/>
                </el-descriptions-item>
                <el-descriptions-item label="MAC-2">
                  {{deviceData.mac2 | defaultValue}}
                  <template v-if="!isEmpty(deviceData.mac2)">
                    <dict-tag :options="dict.type.sm_device_online_status" :value="deviceData.onlineStatus2" size="mini"/>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="SN">
                  {{deviceData.deviceNo | defaultValue}}
                </el-descriptions-item>
                <el-descriptions-item label="设备状态">
                  <dict-tag :options="dict.type.sm_device_status" :value="deviceData.status" size="mini"/>
                </el-descriptions-item>
                <el-descriptions-item label="型号">{{deviceData.model | defaultValue}}</el-descriptions-item>
                <el-descriptions-item label="产品ID">{{deviceData.productId | defaultValue}}</el-descriptions-item>
                <el-descriptions-item label="型号功能" :span="2">
                  <dict-tag :options="dict.type.sm_model_tag" :value="deviceData.modelTags" size="mini"/>
                </el-descriptions-item>
                <el-descriptions-item label="限制充值时间">
                  {{deviceData.limitRechargeTime | defaultValue}}
                  <boolean-tag v-if="deviceData.limitRechargeTime != null" :value="!isLimitRecharge" size="small" true-text="限制充值中" false-text="已解封"/>
                </el-descriptions-item>
                <el-descriptions-item label="限制充值原因">
                  {{deviceData.limitRechargeReason | defaultValue}}
                </el-descriptions-item>
              </el-descriptions>
          </el-card>

          <el-card class="box-card">
            <el-descriptions :column="4" title="物联网信息">
              <el-descriptions-item label="在线状态">
                <dict-tag :options="dict.type.sm_device_online_status" :value="deviceData.onlineStatus" size="mini"/>
              </el-descriptions-item>
              <el-descriptions-item label="最后在线时间">
                {{deviceData.lastOnlineStatus | defaultValue}}
              </el-descriptions-item>
              <el-descriptions-item label="WIFI">{{deviceData.wifi | defaultValue}}</el-descriptions-item>
              <el-descriptions-item label="开关状态">
                <el-tag :type="isOpen ? 'success' : 'danger'" size="mini">{{isOpen ? '已开启' : '已关闭'}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="电压">{{deviceData.voltage | money | defaultValue }} V</el-descriptions-item>
              <el-descriptions-item label="电流">{{deviceData.electricity | money | defaultValue }} A</el-descriptions-item>
              <el-descriptions-item label="功率">{{deviceData.realTimePower | money | defaultValue }} W</el-descriptions-item>
              <el-descriptions-item label="总用电量">
                {{deviceData.totalElectriQuantity | money | defaultValue}} 度
              </el-descriptions-item>
              <el-descriptions-item label="剩余时长">{{surplusTimeDesc(surplusTime).text}}</el-descriptions-item>
              <el-descriptions-item label="剩余时长/电量" :span="2">
                {{surplusTimeDesc(deviceData.remainTime).text}} / {{deviceData.surplusEle | defaultValue}} 度
                <span class="remark-text">最近更新时间：{{deviceData.lastPullTime}}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
        <el-col :lg="6" :xs="24">
          <el-card class="box-card">
            <el-descriptions title="归属信息" :column="1">
              <el-descriptions-item label="设备名称">{{deviceData.deviceName | defaultValue}}</el-descriptions-item>
              <el-descriptions-item label="服务模式">
                <dict-tag :options="dict.type.device_service_mode" :value="deviceData.serviceMode" size="small"/>
              </el-descriptions-item>
              <el-descriptions-item label="所属代理" v-if="deviceData.serviceMode === DeviceServiceMode.AGENT">
                <user-link :name="deviceData.agentName" :id="deviceData.agentId"/>
              </el-descriptions-item>
              <el-descriptions-item label="所属商户">
                <user-link :name="deviceData.userName" :id="deviceData.userId"/>
              </el-descriptions-item>
              <el-descriptions-item label="店铺名称">
                <store-link :name="deviceData.storeName" :id="deviceData.storeId"/>
              </el-descriptions-item>
              <el-descriptions-item label="月费">
                {{deviceData.monthFee | money | defaultValue}} 元 / 月
                （到期时间：{{deviceData.rentTime | defaultValue}}）
              </el-descriptions-item>
              <el-descriptions-item label="平台服务费" v-if="deviceData.serviceMode === DeviceServiceMode.DIRECT">
                {{deviceData.realServiceRate | money | defaultValue}} %
              </el-descriptions-item>
              <el-descriptions-item label="代理服务费"  v-if="deviceData.serviceMode === DeviceServiceMode.AGENT">
                {{deviceData.realServiceRate | money | defaultValue}} %
              </el-descriptions-item>
              <el-descriptions-item label="备注">{{deviceData.remark | defaultValue}}</el-descriptions-item>
            </el-descriptions>
            <el-button size="small" style="width: 100%" plain icon="el-icon-link" type="danger" @click="handleUnbind" :disabled="deviceData.userId == null">解绑商户</el-button>
          </el-card>

        </el-col>
      </el-row>

      <el-card class="box-card">
        <el-tabs>
          <el-tab-pane label="套餐列表" :lazy="true">
            <suit
              v-if="deviceData.deviceId != null"
              :view="views.device"
              :query="{
                deviceId: deviceData.deviceId,
                userId: deviceData.userId
              }"
            />
          </el-tab-pane>
          <el-tab-pane label="订单列表" :lazy="true">
            <recharge :query="{deviceId: deviceData.deviceId}" :view="views.device"/>
          </el-tab-pane>
          <el-tab-pane label="时长/电量变化" :lazy="true">
            <record-time :query="{deviceId: deviceData.deviceId}" view="device"/>
          </el-tab-pane>
          <el-tab-pane label="抄表记录" :lazy="true">
            <reading-record :device-id="deviceData.deviceId"/>
          </el-tab-pane>
          <el-tab-pane label="绑定记录" :lazy="true">
            <bind-record :device-id="deviceData.deviceId"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <el-empty v-else description="设备已被删除或不存在"/>

    <!--添加时长-->
    <el-dialog title="增加时长" :visible.sync="showAddElectricity" center width="400px">
      <el-form :model="addElectricityForm" :rules="addRules">
        <el-form-item label="时长" prop="amount">
          <el-input v-model="addElectricityForm.amount" :min="0" type="number">
            <template #append>
              <el-select v-model="addElectricityForm.timeUnit" style="width: 6em">
                <el-option v-for="item in dict.type.time_unit" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" plain @click="submitAddElectricity">确认</el-button>
        <el-button plain @click="showAddElectricity = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>

import {
  addEle,
  addTime,
  getDevice,
  refreshIot,
  resetDevice,
  resetEleDevice,
  switchDevice,
  unbind
} from '@/api/system/device'
import LineChart from "@/views/dashboard/LineChart.vue";
import RechargeRecord from "@/views/system/device/components/rechargeRecord.vue";
import QrCode from "@/components/QrCode/index.vue";
import MeterRecordReport from "@/views/system/device/components/meterRecordReport.vue";
import ReadingRecord from "@/views/system/device/components/readingRecord.vue";
import {getWxIndexUrl} from "@/utils/wx";
import BindRecord from "@/views/system/device/components/bindRecord.vue";
import ResetRecord from "@/views/system/device/components/resetRecord.vue";
import TenantList from "@/views/system/device/components/tenantList.vue";
import SuitList from '@/views/system/device/components/suitList.vue'
import Suit from '@/views/ss/suit/index.vue'
import RecordTime from '@/views/ss/time/index.vue'
import { toDescriptionFromSecond } from '@/utils/date'
import StoreLink from '@/components/Business/Store/StoreLink.vue'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import { $serviceType, $view } from '@/utils/mixins'
import Recharge from '@/views/system/recharge/index.vue'
import BooleanTag from '@/components/BooleanTag/index.vue'
import { DeviceServiceMode, ModelTag } from '@/utils/constants'
import { isEmpty } from '@/utils'

export default {
  name: 'Device/:deviceId',
  mixins: [$serviceType, $view],
  dicts: ['sm_device_status', 'sm_device_outage_way', 'sm_device_notice_way', 'sm_model_tag', 'sm_device_online_status', 'service_type', 'device_service_mode', 'time_unit'],
  components: {
    BooleanTag,
    Recharge,
    UserLink,
    StoreLink,
    RecordTime,
    Suit,
    SuitList,
    TenantList, ResetRecord, BindRecord, ReadingRecord, MeterRecordReport, QrCode, RechargeRecord, LineChart},
  data() {
    return {
      loading: false,
      deviceData: {
        modelTags: [],
      },
      timer: null,
      surplusTime: 0, // 剩余时长
      addElectricityForm: {
        amount: 0,
        timeUnit: '3'
      },
      showAddElectricity: false,
      addRules: {
        amount: [
          { required: true, message: '请输入电量', trigger: 'blur' }
        ]
      },
      // 设备ID
      deviceId: null,
    }
  },
  computed: {
    ModelTag() {
      return ModelTag
    },
    DeviceServiceMode() {
      return DeviceServiceMode
    },
    qrCodeText() {
      return (device) => {
        return getWxIndexUrl({ s: device.deviceNo});
      }
    },
    surplusTimeDesc() {
      return (second) => {
        return toDescriptionFromSecond(second);
      }
    },
    isOpen() {
      return this.deviceData != null && this.deviceData.powerStatus === '1';
    },
    // 是否限制充值
    isLimitRecharge() {
      if (this.deviceData == null || this.deviceData.limitRechargeTime == null) {
        return false;
      }
      return new Date(this.deviceData.limitRechargeTime).getTime() < new Date();
    }
  },
  created() {
    this.deviceId = this.$route.params.deviceId;
    this.refreshIot(this.deviceId);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    isEmpty,
    handleUnbind() {
      this.$confirm('是否强制解绑该商户？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        unbind(this.deviceData.deviceId).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
          }
        }).finally(() => {
          this.getDevice();
        })
      })
    },
    handleSwitch(open) {
      this.$confirm(`是否确认强制${open ? '开启' : '关闭'}设备？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        switchDevice(this.deviceData.deviceId, open).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.deviceData.powerStatus = open ? '1' : '0';
          }
        }).finally(() => {
          this.loading = false;
        })
      })
    },
    // 计算剩余时长
    computeSurplusTime() {
      if (this.deviceData.expireTime == null) {
        return 0;
      }
      let expireTime = new Date(this.deviceData.expireTime).getTime();
      let now = new Date().getTime();
      if (expireTime < now) {
        return 0;
      }
      return ((expireTime - now) / 1000).toFixed(2);
    },
    handleReset() {
      this.$confirm('是否确认归零设备时长？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetDevice(this.deviceData.deviceId).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.getDevice();
          }
        })
      })
    },
    handleResetEle() {
      this.$confirm('是否确认归零设备电量？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetEleDevice(this.deviceData.deviceId).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.getDevice();
          }
        })
      })
    },
    handleAddTime() {
      this.resetAddElectricityForm();
      this.showAddElectricity = true;
    },
    handleAddEle() {
      this.$prompt('请输入增加的电量（度）', '增加电量', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: (val) => {
          if (val < 0) {
            return "输入的电量不允许小于0";
          }
          return true;
        }
      }).then(({ value }) => {
        addEle(this.deviceData.deviceId, value).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功');
            this.getDevice();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    submitAddElectricity() {
      addTime(this.deviceData.deviceId, this.addElectricityForm.amount, this.addElectricityForm.timeUnit).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功');
          this.showAddElectricity = false;
          this.getDevice();
        }
      })
    },
    resetAddElectricityForm() {
      this.addElectricityForm = {
        amount: 0,
        timeUnit: '3'
      }
    },
    // 刷新设备信息
    refreshIot(deviceId, notice = false) {
      this.loading = true;
      refreshIot(deviceId).then(res => {
        if (res.code !== 200) {
          return this.$message.error(res.msg);
        }
        if (notice) {
          this.$message.success('操作成功');
        }
      }).finally(() => {
        this.getDevice();
      })
    },
    getDevice() {
      this.loading = true;
      getDevice(this.deviceId).then(response => {
        this.deviceData = response.data;
        this.surplusTime = this.computeSurplusTime();
        if (this.timer == null) {
          this.timer = setInterval(() => {
            this.surplusTime = this.computeSurplusTime();
          }, 1000)
        }
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped>
.remark-text {
  color: #ccc;
  margin-left: 1em;
}
</style>
