<template>
  <div class="pagemain">
    <div class="pageTitle">
      {{ $t('route.factorySetting') }}
    </div>
    <div class="pageCon">

      <div class="formbox">
        <div class="formbox-l">{{ $t('table.routerRestart') }}</div>
        <el-button type="primary" @click="routerRestarts">
          {{ $t('table.routerRestart') }}
        </el-button>
      </div>
      <div class="formbox">
        <div class="formbox-l">{{ $t('table.factorySettings') }}</div>
        <el-button type="primary" @click="factorySetting">
          {{ $t('table.factorySettings') }}
        </el-button>
      </div>
      <div class="toptipbox">
        <div class="ltip">{{ $t('table.tips') }}: {{ $t('table.factoryTip') }} {{ $t('table.factorySettingsTips') }}</div>
      </div>
      <!-- <el-button type="primary" style="margin-top: 48px;" @click="factorySetting">
        {{ $t('table.factorySettings') }}
      </el-button> -->
      <!--      <div class="formbox">-->
      <!--        <div class="formbox-l">{{ $t('table.NetworkPacketCapture') }}</div>-->
      <!--        <el-button type="primary" v-if="DataDB.status === 0 || DataDB.status === 2" @click.stop="StartPacketCapture(1)">-->
      <!--          {{ $t('table.StartPacketCapture') }}-->
      <!--        </el-button>-->
      <!--        <el-button type="danger" v-else @click.stop="StartPacketCapture(0)">-->
      <!--          {{ $t('table.StopPacketCapture') }}-->
      <!--        </el-button>-->
      <!--        <el-button type="primary" @click.stop="DownloadFile" :disabled="DataDB.status !== 2">-->
      <!--          {{ $t('table.Download') }}-->
      <!--        </el-button>-->
      <!--        <el-button type="primary" @click.stop="DeletePacketCaptureRecords" :disabled="DataDB.status !== 2">-->
      <!--          {{ $t('table.Delete') }}-->
      <!--        </el-button>-->
      <!--        <span v-if="DataDB.status === 1" class="SpanBox1">-->
      <!--          {{ $t('table.CapturingPacket') }}-->
      <!--        </span>-->
      <!--        <span v-else-if="DataDB.status === 2" class="SpanBox1">-->
      <!--          {{ $t('table.PacketCaptureHasBeenStopped') }}-->
      <!--        </span>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import {
  deviceReset,
  deviceReboot,
  getPacketCaptureInfo,
  deletePacketCapture,
  startPacketCapture,
  stopPacketCapture
} from '@/api/index.js'
export default {
  name: 'FactorySetting',
  data() {
    return {
      DataDB: {
        status: 0,
        file: ''
      }
    }
  },
  mounted() {
    this.getPacketInfo()
  },
  methods: {
    factorySetting() {
      this.$confirm(this.$i18n.t('table.factoryTip') + this.$i18n.t('table.factorySettingsTips'), this.$i18n.t('table.tips'), {
        confirmButtonText: this.$i18n.t('table.continue'),
        cancelButtonText: this.$i18n.t('table.cancel'),
        center: true
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: this.$i18n.t('table.factorySettingsTips'),
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        setTimeout(res => {
          loading.close()
          this.$store.dispatch('user/updateLogOut')
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        }, 10000)
        deviceReset().then(res => {
          if (res.code === 200) {
            loading.close()
            this.$message({
              type: 'success',
              message: this.$i18n.t('table.factorySettings') + this.$i18n.t('table.success')
            })
          } else {
            loading.close()
            this.$message({
              type: 'error',
              message: this.$i18n.t('table.factorySettings') + this.$i18n.t('table.failed')
            })
          }
        })
      }).catch(() => {

      })
    },
    routerRestarts() {
      this.$confirm(this.$i18n.t('table.routerRestartTips'), this.$i18n.t('table.tips'), {
        confirmButtonText: this.$i18n.t('table.continue'),
        cancelButtonText: this.$i18n.t('table.cancel'),
        center: true
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: this.$i18n.t('table.routerRestartIng'),
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deviceReboot().then(res => {
          if (res.code === 200) {
            loading.close()
            this.$message({
              type: 'success',
              message: this.$i18n.t('table.routerRestart') + this.$i18n.t('table.success')
            })
          } else {
            loading.close()
            this.$message({
              type: 'error',
              message: this.$i18n.t('table.routerRestart') + this.$i18n.t('table.failed')
            })
          }
        })
      }).catch(() => {

      })
    },
    StartPacketCapture(Flag) {
      if (Flag === 1) {
        startPacketCapture({}).then(res => {
          setTimeout(() => {
            this.getPacketInfo()
          }, 300)
        })
      } else if (Flag === 0) {
        stopPacketCapture({}).then(res => {
          setTimeout(() => {
            this.getPacketInfo()
          }, 300)
        })
      }
    },
    getPacketInfo() {
      getPacketCaptureInfo({}).then(res => {
        const data = res.data
        this.DataDB.status = data.status
        this.DataDB.file = data.file
      }).catch(() => {

      })
    },
    DeletePacketCaptureRecords() {
      const data = {
        name: this.DataDB.file
      }
      // console.log(data);
      deletePacketCapture(data).then(res => {
        this.DataDB.status = 0
        this.$message.success(this.$i18n.t('table.Delete') + this.$i18n.t('table.success'))
      }).catch(() => {

      })
    },
    DownloadFile() {
      if (this.DataDB.file === '') {
        return
      }
      const URL = '/prod-api/pcap/' + this.DataDB.file
      window.open(URL)
    }
  }
}
</script>
<style lang="scss" scoped>
  .formbox{
    display: flex;
    align-items: center;
    margin-top: 48px;

    .formbox-l{
      width: 144px;
    }
  }

  .toptipbox{
    margin-top: 12px;
  }
  .SpanBox1{
    margin-left: 10px;
  }
</style>
