<template>
  <div style="padding: 6px">
    <el-form ref="formRef" :model="form">
      <el-row :gutter="100">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <el-form-item :label="t('sip.sipConfig998537-1')" prop="ip">
            <el-input v-model="form.ip" disabled />
          </el-form-item>
          <el-form-item :label="t('sip.sipConfig998537-2')" prop="domain">
            <el-input v-model="form.domain" />
          </el-form-item>
          <el-form-item :label="t('sip.sipConfig998537-3')" prop="password">
            <el-input v-model="form.password" :placeholder="t('sip.sipConfig998537-4')" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
          <el-form-item :label="t('sip.sipConfig998537-5')">
            <el-input v-model="accessWay" disabled />
          </el-form-item>
          <el-form-item :label="t('sip.sipConfig998537-6')" prop="port">
            <el-input v-model="form.port" type="number" disabled />
          </el-form-item>
          <el-form-item :label="t('sip.sipConfig998537-7')" prop="serverSipid">
            <el-input v-model="form.serverSipid" />
          </el-form-item>
        </el-col>
        <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="15">
          <el-form-item style="text-align: center; margin-top: 20px">
            <el-button
              v-show="form.id && productInfo.status != 2"
              type="primary"
              @click="submitForm"
            >
              更新
            </el-button>
            <el-button
              v-show="!form.id && productInfo.status != 2"
              type="primary"
              @click="submitForm"
            >
              添加
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { addSipconfig, getSipconfig, updateSipconfig } from '@/api/pms/video/sipConfig'

// 使用 i18n
const { t } = useI18n()

// 定义组件名称
defineOptions({
  name: 'ConfigSip'
})

// 定义 props
const props = defineProps({
  product: {
    type: Object,
    default: null
  }
})

// 定义 emits（如果需要）
const emit = defineEmits([])

// Refs
const formRef = ref(null)

// 数据状态
const accessWay = ref('国标GB28181')
const loading = ref(true)
const ids = ref([])
const total = ref(0)
const sipconfigList = ref([])
const title = ref('')
const open = ref(false)
const productInfo = ref({})

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  productId: null
})

// 表单参数
const form = reactive({
  id: null,
  ip: '',
  domain: '',
  password: '',
  port: '',
  serverSipid: '',
  productId: null
})

// 表单校验规则
const rules = {
  domain: [
    {
      required: true,
      message: t('sip.sipConfig998537-8'),
      trigger: 'blur'
    }
  ],
  serverSipid: [
    {
      required: true,
      message: t('sip.sipConfig998537-9'),
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: t('sip.sipConfig998537-10'),
      trigger: 'blur'
    }
  ]
}

// 监听 product 变化
watch(
  () => props.product,
  (newVal, oldVal) => {
    productInfo.value = newVal
    if (productInfo.value && productInfo.value.productId != 0) {
      // 表单没有数据则获取默认配置
      if (!form.id) {
        getSipconfigData()
      }
    }
  },
  { immediate: true }
)

// 获取产品下第一条SIP配置
function getSipconfigData() {
  getSipconfig(productInfo.value.productId).then((response) => {
    Object.assign(form, response)
  })

  console.log('form>>>>>>>>>>>>>>>>>>', form)
}

// 提交按钮
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      form.productId = productInfo.value.productId

      if (form.id != null) {
        updateSipconfig(form).then((response) => {
          ElMessage.success(t('sip.sipConfig998537-13'))
        })
      } else {
        addSipconfig(form).then((response) => {
          ElMessage.success(t('sip.sipConfig998537-14'))
          getSipconfigData()
        })
      }
    }
  })
}

// 组件挂载时执行
onMounted(() => {
  productInfo.value = props.product
  if (productInfo.value && productInfo.value.productId != 0) {
    getSipconfigData()
  }
})
</script>

<style>
.specsColor {
  background-color: #fcfcfc;
}
</style>
