<template>
  <div class="pagemain">
    <div class="pageTitle">{{ $t("route.systemSetting") }}</div>
    <div class="pageCon">
      <el-form
        class="detail-form agree-form"
        label-width="180px"
        label-position="right"
        :model="formData"
      >
        <el-form-item :label="$t('table.productName')">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item :label="$t('table.productMode')">
          <el-input v-model="formData.model" />
        </el-form-item>
        <el-form-item :label="$t('table.macAddress')">
          <el-input v-model="formData.mac" disabled />
        </el-form-item>
        <!-- <el-form-item :label="$t('table.serialNumber')">
          <el-input v-model="formData.serialNum" disabled />
        </el-form-item> -->
        <el-form-item :label="$t('table.firmwareVercion')">
          <el-input v-model="formData.version" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.deviceID')">
          <el-input v-model="formData.id" />
        </el-form-item>
        <el-form-item :label="$t('table.deviceIP')">
          <el-input v-model="formData.ip" />
        </el-form-item>
        <el-form-item :label="$t('table.gatewal')">
          <el-input v-model="formData.gateway" />
        </el-form-item>
        <el-form-item :label="$t('table.suonetMask')">
          <el-input v-model="formData.subnet" />
        </el-form-item>
        <el-form-item :label="$t('table.dhcp')">
          <el-radio v-model="formData.dhcp" label="on">{{
            $t("table.open")
          }}</el-radio>
          <el-radio v-model="formData.dhcp" label="off">{{
            $t("table.close")
          }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('table.microphoneSwitch')">
          <el-radio v-model="formData.microphone" label="on">{{
            $t("table.open")
          }}</el-radio>
          <el-radio v-model="formData.microphone" label="off">{{
            $t("table.close")
          }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('table.aiVol')">
          <el-slider
            v-model="formData.aiVol"
            :step="1"
            :max="10"
            @change="aiVolChange"
          />
        </el-form-item>
        <el-form-item :label="$t('table.aoVol')">
          <el-slider
            v-model="formData.aoVol"
            :step="1"
            :max="10"
            @change="aoVolChange"
          />
        </el-form-item>
        <el-form-item :label="$t('table.DNS1')">
          <el-input v-model="formData.dns0" />
        </el-form-item>
        <el-form-item :label="$t('table.DNS2')">
          <el-input v-model="formData.dns1" />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        style="width: 10%; margin-left: 40%; margin-bottom: 100px"
        @click="submitForm"
      >
        {{ $t("table.save") }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { deviceInfo, deviceEdit } from '@/api/index.js'
export default {
  name: 'SystemSetting',
  data() {
    return {
      formData: {
        dns0:'',
        dns1:'',
        name: '',
        model: '',
        mac: '',
        serialNum: '',
        version: '',
        id: '',
        ip: '',
        gateway: '',
        subnet: '',
        dhcp: 'off',
        microphone: 'off',
        aiVol: 0,
        aoVol: 0
      }
    }
  },
  mounted() {
    this.getDeviceInfo()
  },
  methods: {
    getDeviceInfo() {
      deviceInfo({}).then((res) => {
        if (res.code === 200) {
          this.deviceInfo = res.data
          this.formData.name = res.data.name || ''
          this.formData.model = res.data.model || ''
          this.formData.mac = res.data.mac || ''
          this.formData.serialNum = res.data.serialNum || ''
          this.formData.version = res.data.version || ''
          this.formData.id = res.data.id || ''
          this.formData.ip = res.data.ip || ''
          this.formData.gateway = res.data.gateway || ''
          this.formData.subnet = res.data.subnet || ''
          this.formData.dhcp = res.data.dhcp || ''
          this.formData.microphone = res.data.microphone || ''
          this.formData.aiVol = parseInt(res.data.aiVol) || 0
          this.formData.aoVol = parseInt(res.data.aoVol) || 0
          this.formData.dns0 = res.data.dns0 || ''
          this.formData.dns1 = res.data.dns1 || ''
        } else {
          this.$message.error(res.message)
        }
      })
    },
    submitForm() {
      const param = {
        ...this.formData
      }
      const ipv4Regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
      const idRegex = /^(?:[2-9]\d{0,3}|1\d{0,3}|9999)$/
      const subnetRegex = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/
      const dnsRegex = /^(?!-)[A-Za-z0-9-]{1,63}(?<!-)(\.(?!-)[A-Za-z0-9-]{1,63}(?<!-))*$/;
      // 终端Id
      if (!param.id) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.deviceID') + this.$i18n.t('table.isEmpty')
        })
        return
      }
      if (!idRegex.test(param.id)) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.deviceID') + this.$i18n.t('table.isRight3')
        })
        return
      }
      // 终端Ip
      if (!param.ip) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.deviceIP') + this.$i18n.t('table.isEmpty')
        })
        return
      }
      if (!ipv4Regex.test(param.ip)) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.deviceIP') + this.$i18n.t('table.isRight')
        })
        return
      }
      // 默认网关
      if (!param.gateway) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.gatewal') + this.$i18n.t('table.isEmpty')
        })
        return
      }
      if (!ipv4Regex.test(param.gateway)) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.gatewal') + this.$i18n.t('table.isRight')
        })
        return
      }
      // 子网掩码
      if (!param.subnet) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.suonetMask') + this.$i18n.t('table.isEmpty')
        })
        return
      }
      if (!subnetRegex.test(param.subnet)) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.suonetMask') + this.$i18n.t('table.isRight4')
        })
        return
      }
      if (!param.dns0) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.DNS1') + this.$i18n.t('table.isEmpty')
        })
        return
      }
      if (!ipv4Regex.test(param.dns0)) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.DNS1') + this.$i18n.t('table.isRight')
        })
        return
      }
      if (!param.dns1) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.DNS2') + this.$i18n.t('table.isEmpty')
        })
        return
      }
      if (!ipv4Regex.test(param.dns1)) {
        this.$message({
          type: 'warning',
          message: this.$i18n.t('table.DNS2') + this.$i18n.t('table.isRight')
        })
        return
      }
      deviceEdit(param).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: this.$i18n.t('table.save') + this.$i18n.t('table.success')
          })
        } else {
          this.$message({
            type: 'error',
            message: this.$i18n.t('table.save') + this.$i18n.t('table.failed')
          })
        }
      })
    },
    aiVolChange(e) {
      this.formData.aiVol = e
      console.log(e)
    },
    aoVolChange(e) {
      this.formData.aoVol = e
      console.log(e)
    }
  }
}
</script>
<style lang="scss">
.agree-form .el-form-item {
  width: 50%;
}
</style>
<style lang="scss" scoped>
::v-deep .agree-form .el-slider {
  width: 50%;
  margin-left: 16px;
}
</style>
