<template>
  <div class="pagemain">
    <div class="pageTitle">
      {{ $t("route.agreement") }}
    </div>
    <div class="pageCon pageCon2">
      <el-tabs v-model="selectIndex" style="margin-top: 15px">
        <el-tab-pane
          v-for="(item, index) in tabOptions"
          :key="index"
          :label="item.label"
        />
      </el-tabs>
      <el-form
        v-show="selectIndex === '2'"
        class="detail-form agree-form"
        label-width="180px"
        label-position="right"
        :model="formUDPData"
      >
        <el-form-item label=" ">
          <el-radio v-model="formUDPData.udp" label="on">{{
            $t("table.open")
          }}</el-radio>
          <el-radio v-model="formUDPData.udp" label="off">{{
            $t("table.close")
          }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('table.deviceID')">
          <el-input v-model="formUDPData.id" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.deviceIP')">
          <el-input v-model="formUDPData.ip" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.serverIP')">
          <el-input v-model="formUDPData.serverIp" />
        </el-form-item>
        <el-form-item :label="$t('table.corverCommandDort')">
          <el-input v-model="formUDPData.serverPort" />
        </el-form-item>
        <el-form-item :label="$t('table.deviceCommandPort')">
          <el-input v-model="formUDPData.instructPort" />
        </el-form-item>
        <el-form-item :label="$t('table.deviceStreamPort')">
          <el-input v-model="formUDPData.corestreamPort" />
        </el-form-item>

        <el-form-item :label="$t('table.httpAuth')">
          <el-radio v-model="formUDPData.httpApiAuth" label="on">{{
            $t("table.open")
          }}</el-radio>
          <el-radio v-model="formUDPData.httpApiAuth" label="off">{{
            $t("table.close")
          }}</el-radio>
        </el-form-item>

        <el-form-item label="SSH">
          <el-radio v-model="formUDPData.ssh" label="on">{{
            $t("table.open")
          }}</el-radio>
          <el-radio v-model="formUDPData.ssh" label="off">{{
            $t("table.close")
          }}</el-radio>
        </el-form-item>

      </el-form>
      <el-form
        v-show="selectIndex === '1'"
        class="detail-form agree-form"
        label-width="180px"
        label-position="right"
        :model="formSIPData"
      >
        <el-form-item label=" ">
          <el-radio v-model="formSIPData.sip" label="on">{{
            $t("table.open")
          }}
          </el-radio>
          <el-radio v-model="formSIPData.sip" label="off">{{
            $t("table.close")
          }}
          </el-radio>
        </el-form-item>
        <el-form-item :label="$t('table.deviceID')">
          <el-input v-model="formSIPData.id" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.deviceIP')">
          <el-input v-model="formSIPData.ip" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.SIPserver')">
          <el-input v-model="formSIPData.sipAddress" />
        </el-form-item>
        <el-form-item :label="$t('table.SIPUserName')">
          <el-input v-model="formSIPData.sipUsername" />
        </el-form-item>
        <el-form-item class="passwordForm" :label="$t('table.SIPPassword')">
          <el-input v-model="formSIPData.sipPassword" :type="sipPasswordType" />
          <span class="show-pwd" @click="showPwd('sip')">
            <svg-icon :icon-class="sipPasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item class="passwordForm" :label="$t('profile.confirmPassword')">
          <el-input v-model="formSIPData.sipPassword2" :type="sip2PasswordType" />
          <span class="show-pwd" @click="showPwd('sip2')">
            <svg-icon :icon-class="sip2PasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item v-if="formSIPData.sipCallFunc === 'on'" :label="$t('table.CallButton0')">
          <el-input v-model="formSIPData.sipCallUsername0" />
        </el-form-item>
        <el-form-item v-if="formSIPData.sipCallFunc === 'on'" :label="$t('table.CallButton1')">
          <el-input v-model="formSIPData.sipCallUsername1" />
        </el-form-item>
      </el-form>
      <el-form
        v-show="selectIndex === '0'"
        class="detail-form agree-form"
        label-width="180px"
        label-position="right"
        :model="formONVIFData"
      >
        <el-form-item label=" ">
          <el-radio v-model="formONVIFData.onvif" label="on">{{
            $t("table.open")
          }}</el-radio>
          <el-radio v-model="formONVIFData.onvif" label="off">{{
            $t("table.close")
          }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('table.deviceID')">
          <el-input v-model="formONVIFData.id" disabled />
        </el-form-item>
        <el-form-item :label="$t('table.deviceIP')">
          <el-input v-model="formONVIFData.ip" disabled />
        </el-form-item>
        <el-form-item :label="$t('login.username')">
          <el-input v-model="formONVIFData.onvifUsername" />
        </el-form-item>
        <el-form-item class="passwordForm" :label="$t('login.password')">
          <el-input v-model="formONVIFData.onvifPassword" :type="onvifPasswordType" />
          <span class="show-pwd" @click="showPwd('onvif')">
            <svg-icon :icon-class="onvifPasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item class="passwordForm" :label="$t('profile.confirmPassword')">
          <el-input v-model="formONVIFData.onvifPassword2" :type="onvif2PasswordType" />
          <span class="show-pwd" @click="showPwd('onvif2')">
            <svg-icon :icon-class="onvif2PasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item :label="$t('table.port')">
          <el-input v-model="formONVIFData.onvifPort" type="number" />
        </el-form-item>
        <el-form-item :label="$t('table.audio')">
          <el-select
            v-model="formONVIFData.rtspAudioType"
            style="width:350px;"
            placeholder="请选择"
            @change="selectChange"
          >
            <el-option
              v-for="item in formONVIFData.rtspAudioTypeArr"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('table.auth')">
          <el-radio v-model="formONVIFData.onvifAuth" label="on">{{
            $t("table.open")
          }}</el-radio>
          <el-radio v-model="formONVIFData.onvifAuth" label="off">{{
            $t("table.close")
          }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('table.WAN_IP_Type')">
          <el-select
            v-model="formONVIFData.wanType"
            style="width:350px;"
            @change="selectChangeNet"
          >
            <el-option
              v-for="item in NetType"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formONVIFData.wanType === '1'" :label="$t('table.WAN_IP_DomainName')">
          <el-input v-model="formONVIFData.wanDomainName" />
        </el-form-item>
        <el-form-item v-if="formONVIFData.wanType === '0'" :label="$t('table.WAN_IP_Address')">
          <el-input v-model="formONVIFData.wanIP" />
        </el-form-item>
        <el-form-item :label="$t('table.WAN_Port')">
          <el-input v-model="formONVIFData.wanOnvifPort" type="number" :min="0" :max="65535" />
        </el-form-item>
        <el-form-item :label="$t('table.WAN_RTSP_Port')">
          <el-input v-model="formONVIFData.wanRTSPPort" type="number" :min="0" :max="65535" />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        style="width: 10%; margin-left: 40%;margin-top: 20px;"
        @click="submitForm"
      >
        {{ $t("table.save") }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { deviceInfo, deviceEdit } from '@/api/index.js'
import { encryptData, decryptData } from '@/utils/encryption/entrypt'

export default {
  name: 'Agreement',
  data() {
    return {
      deviceInfo: {},
      tabOptions: [
        {
          label: 'ONVIF',
          key: '2'
        },
        {
          label: 'SIP',
          key: '1'
        },
        {
          label: 'UDP',
          key: '0'
        }
      ],
      NetType: [
        {
          label: this.$t('table.WAN_IP_Address'),
          key: '0'
        },
        {
          label: this.$t('table.WAN_IP_DomainName'),
          key: '1'
        }
      ],
      selectIndex: '0',
      formUDPData: {
        udp: '',
        id: '',
        ip: '',
        serverIp: '',
        serverPort: '',
        instructPort: '',
        corestreamPort: '',
        httpApiAuth: '',
        ssh: ''
      },
      formSIPData: {
        sip: '',
        id: '',
        ip: '',
        sipAddress: '',
        sipUsername: '',
        sipPassword: '',
        sipPassword2: '',
        sipCallFunc: 'off',
        sipCallUsername0: '',
        sipCallUsername1: ''
      },
      formONVIFData: {
        onvif: '',
        id: '',
        ip: '',
        onvifUsername: '',
        onvifPassword: '',
        onvifPassword2: '',
        onvifPort: '',
        rtspAudioTypeArr: [],
        rtspAudioType: '',
        onvifAuth: '',
        wanIP: '',
        wanOnvifPort: '',
        wanRTSPPort: '',
        wanDomainName: '',
        wanType: '0'
      },

      sipPasswordType: 'password',
      sip2PasswordType: 'password',
      onvifPasswordType: 'password',
      onvif2PasswordType: 'password',
      capsTooltip: false
    }
  },
  mounted() {
    this.getDeviceInfo()
  },
  methods: {
    selectChange(e) {
      this.rtspAudioType = e
    },
    selectChangeNet(e) {
      this.formONVIFData.wanType = e
    },
    showPwd(type) {
      if (type === 'sip') {
        if (this.sipPasswordType === 'password') {
          this.sipPasswordType = ''
        } else {
          this.sipPasswordType = 'password'
        }
      }
      if (type === 'sip2') {
        if (this.sip2PasswordType === 'password') {
          this.sip2PasswordType = ''
        } else {
          this.sip2PasswordType = 'password'
        }
      }
      if (type === 'onvif') {
        if (this.onvifPasswordType === 'password') {
          this.onvifPasswordType = ''
        } else {
          this.onvifPasswordType = 'password'
        }
      }
      if (type === 'onvif2') {
        if (this.onvif2PasswordType === 'password') {
          this.onvif2PasswordType = ''
        } else {
          this.onvif2PasswordType = 'password'
        }
      }
      // this.$nextTick(() => {
      //   this.$refs.password.focus()
      // })
    },
    getDeviceInfo() {
      deviceInfo({}).then((res) => {
        if (res.code === 200) {
          console.log(res.data)
          this.deviceInfo = res.data
          this.formUDPData.udp = res.data.udp
          this.formUDPData.id = res.data.id
          this.formUDPData.ip = res.data.ip
          this.formUDPData.serverIp = res.data.serverIp
          this.formUDPData.serverPort = res.data.serverPort
          this.formUDPData.instructPort = res.data.instructPort
          this.formUDPData.corestreamPort = res.data.corestreamPort
          this.formUDPData.httpApiAuth = res.data.httpApiAuth
          this.formUDPData.ssh = res.data.ssh

          this.formSIPData.sip = res.data.sip
          this.formSIPData.id = res.data.id
          this.formSIPData.ip = res.data.ip
          this.formSIPData.sipAddress = res.data.sipAddress
          this.formSIPData.sipUsername = res.data.sipUsername
          res.data.sipPassword = decryptData(res.data.sipPassword)
          this.formSIPData.sipPassword = res.data.sipPassword
          this.formSIPData.sipPassword2 = res.data.sipPassword
          this.formSIPData.sipCallFunc = res.data.sipCallFunc
          // this.formSIPData.sipCallFunc = 'on'
          this.formSIPData.sipCallUsername0 = res.data.sipCallUsername0
          this.formSIPData.sipCallUsername1 = res.data.sipCallUsername1

          this.formONVIFData.onvif = res.data.onvif
          this.formONVIFData.id = res.data.id
          this.formONVIFData.ip = res.data.ip
          this.formONVIFData.onvifUsername = res.data.onvifUsername
          res.data.onvifPassword = decryptData(res.data.onvifPassword)
          this.formONVIFData.onvifPassword = res.data.onvifPassword
          this.formONVIFData.onvifPassword2 = res.data.onvifPassword
          this.formONVIFData.onvifPort = res.data.onvifPort
          this.formONVIFData.rtspAudioTypeArr = res.data.rtspAudioTypeArr
          this.formONVIFData.rtspAudioType = res.data.rtspAudioType
          this.formONVIFData.onvifAuth = res.data.onvifAuth

          this.formONVIFData.wanIP = res.data.wanIP
          this.formONVIFData.wanOnvifPort = res.data.wanOnvifPort
          this.formONVIFData.wanRTSPPort = res.data.wanRTSPPort
          this.formONVIFData.wanDomainName = res.data.wanDomainName
          this.formONVIFData.wanType = res.data.wanType

          this.$forceUpdate()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    submitForm() {
      let param = {}
      const portRegex = /^(1\d{4}|[2-4]\d{4}|49999)$/
      const portRegex2 = /^(?:[2-9]\d{0,3}|1\d{0,3}|9999)$/
      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 wanDName = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
      // const wanDIP = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      if (this.selectIndex === '2') {
        param = {
          ...this.formUDPData
        }
        if (!param.serverIp) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.serverIP') + this.$i18n.t('table.isEmpty')
          })
          return
        }
        if (!ipv4Regex.test(param.serverIp)) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.serverIP') + this.$i18n.t('table.isRight')
          })
          return
        }
        if (!param.serverPort) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.corverCommandDort') + this.$i18n.t('table.isEmpty')
          })
          return
        }
        if (!portRegex.test(param.serverPort)) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.corverCommandDort') + this.$i18n.t('table.isRight1')
          })
          return
        }
        if (!param.instructPort) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.deviceCommandPort') + this.$i18n.t('table.isEmpty')
          })
          return
        }
        if (!portRegex.test(param.instructPort)) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.deviceCommandPort') + this.$i18n.t('table.isRight1')
          })
          return
        }
        if (!param.corestreamPort) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.deviceStreamPort') + this.$i18n.t('table.isEmpty')
          })
          return
        }
        if (!portRegex.test(param.corestreamPort)) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.deviceStreamPort') + this.$i18n.t('table.isRight1')
          })
          return
        }
      } else if (this.selectIndex === '1') {
        param = {
          ...this.formSIPData
        }
        if (param.sipPassword || param.sipPassword2) {
          if (!param.sipPassword) {
            this.$message({
              type: 'warning',
              message: this.$i18n.t('table.SIPPassword') + this.$i18n.t('table.isEmpty')
            })
            return
          }
          if (!param.sipPassword2) {
            this.$message({
              type: 'warning',
              message: this.$i18n.t('profile.confirmPassword') + this.$i18n.t('table.isEmpty')
            })
            return
          }
          if (param.sipPassword !== param.sipPassword2) {
            this.$message({
              type: 'warning',
              message: this.$i18n.t('profile.passwordDifferent')
            })
            return
          }
        }
        param.sipPassword = encryptData(param.sipPassword)
        param.sipPassword2 = encryptData(param.sipPassword2)
      } else if (this.selectIndex === '0') {
        param = {
          ...this.formONVIFData
        }
        if (this.formONVIFData.wanDomainName !== '') {
          if (!wanDName.test(param.wanDomainName)) {
            this.$message({
              type: 'warning',
              message: this.$i18n.t('table.isRight7')
            })
            return
          }
        }
        if (this.formONVIFData.wanIP !== '') {
          if (!ipv4Regex.test(param.wanIP)) {
            this.$message({
              type: 'warning',
              message: this.$i18n.t('table.isRight4')
            })
            return
          }
        }
        if (this.formONVIFData.wanOnvifPort !== '') {
          const l = Number(this.formONVIFData.wanOnvifPort)
          if (l > 0 && l < 65536) {

          } else {
            this.$message({
              type: 'warning',
              message: this.$i18n.t('table.isRight5')
            })
            return
          }
        }
        if (this.formONVIFData.wanRTSPPort !== '') {
          const l = Number(this.formONVIFData.wanRTSPPort)
          if (l > 0 && l < 65536) {

          } else {
            this.$message({
              type: 'warning',
              message: this.$i18n.t('table.isRight6')
            })
            return
          }
        }
        if (!param.onvifUsername) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('login.username') + this.$i18n.t('table.isEmpty')
          })
          return
        }
        if (!param.onvifPassword) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('login.password') + this.$i18n.t('table.isEmpty')
          })
          return
        }
        if (!param.onvifPassword2) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('profile.confirmPassword') + this.$i18n.t('table.isEmpty')
          })
          return
        }
        if (param.onvifPassword !== param.onvifPassword2) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('profile.passwordDifferent')
          })
          return
        }
        param.onvifPassword = encryptData(param.onvifPassword)
        param.onvifPassword2 = encryptData(param.onvifPassword2)
        if (!param.onvifPort) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.port') + this.$i18n.t('table.isEmpty')
          })
          return
        }
        if (!portRegex2.test(param.onvifPort)) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.port') + this.$i18n.t('table.isRight2')
          })
          return
        }
        if (!param.rtspAudioType) {
          this.$message({
            type: 'warning',
            message: this.$i18n.t('table.audio') + this.$i18n.t('table.isEmpty')
          })
          return
        }
      }
      console.log(param)
      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')
          })
        }
      })
    },
    IPV4Single(ip) {
      // 判断地址是否有效
      const IPV4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
      // 输出  校验通过：true   校验出错：false
      return IPV4.test(ip)
    }
  }
}
</script>
<style lang="scss">
.agree-form .el-form-item {
  width: 50%;
}
.passwordForm{
  position: relative;

  .show-pwd {
    position: absolute;
    right: 5%;
    top: 4px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
    z-index: 99;
  }
}
.pageCon2{
  padding-bottom: 120px;
}
</style>
