<template>
  <div class="siteManage-main groupInfo">
    <el-form :model="form" :rules="rules" ref="formInfo" label-width="100px">
      <div class="grid-content bg-purple">
        <div class="el-form-item blockTitle">分组信息</div>
        <div></div>
        <el-form-item label="分组名称" prop="groupingName" label-width="130px">
          <el-input v-model="form.groupingName" v-if="label=='所有站点'" disabled></el-input>
          <el-input v-model="form.groupingName" v-else></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('formInfo')" v-if="label!='所有站点'">
            保存
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, watch } from 'vue'
import * as api from '@/api/siteManage/index'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'GroupInfoCom',
  props: {
    groupingId: Number,
    label: String,
  },
  setup(props, context) {
    context

    const formInfo = ref(null)

    const form = ref([])

    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }

    // 保存-修改操作
    const submitForm = () => {
      formInfo.value.validate((valid) => {
        if (valid) {
          form.value.groupingId = props.groupingId
          console.log(form.value)

          api
            .siteGroupingUpdate({
              id: props.groupingId,
              groupingName: form.value.groupingName,
            })
            .then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改成功',
                  type: 'success',
                })

                context.emit('func')
              } else {
                ElMessage.error(requset.msg)
              }
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }


    //监听变化
    watch(
      () => props.label,
      (newVal) => {
         form.value.groupingName = newVal
      }
    )
    onMounted(() => {
      // console.log(props.label)
      form.value.groupingName = props.label
    })
    return {
      roleValid,
      formInfo,
      form,
      submitForm,
      rules: {
        groupingName: [
          { required: true, message: '请输入分组名称', trigger: 'blur' },
        ],
      },
    }
  },
})
</script>
<style scoped lang="scss">
</style>
