<template>
  <div>
    <div class="header">
      <span class="text-large font-600 mr-3"> 社区信息 </span>
    </div>


    <div class="content">
      <el-form ref="communityFormRef" :model="form" :rules="formRules" label-width="10vw">
        <el-form-item label="社区名称" prop="communityName">
          <el-input v-model="form.communityName" placeholder="请输入社区名称" />
        </el-form-item>

        <el-form-item label="社区介绍" prop="communityIntroduce">
          <el-input type="textarea" :rows="6" v-model="form.communityIntroduce" placeholder="请输入社区介绍" />
        </el-form-item>


        <div class="btn">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">修改</el-button>
          <!-- <el-button type="danger" @click="cancel">取消</el-button> -->
        </div>
      </el-form>
    </div>


  </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import { getCommunity, updateCom } from '@/api/study/community';

const buttonLoading = ref(false)

const initForm = {
  communityName: undefined,
  communityIntroduce: undefined
}

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const communityFormRef = ref<ElFormInstance>();
const form = ref({ ...initForm });

//重置表单
const reset = () => {
  form.value = { ...initForm };
  communityFormRef.value?.resetFields();
}
//取消
const cancel = () => {
  router.back();
  reset();
}
//提交
const submitForm = async () => {

  ElMessageBox.confirm('确认提交以上信息吗', {
    title: '系统确认',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(() => {
    communityFormRef.value?.validate(async (valid: boolean) => {

      if (valid) {
        buttonLoading.value = true;
        // if (type.value == 'add') {
        //   const res = await addLearningActivity(form.value).finally(() => { buttonLoading.value = false })
        //   if (res.code == 200) {
        //     proxy?.$modal.msgSuccess("提交成功");
        //     router.back();
        //   }

        // }
        // else if (type.value == 'edit') {

        const res = await updateCom(form.value).finally(() => { buttonLoading.value = false })
        if (res.code == 200) {
          proxy?.$modal.msgSuccess("修改成功");
          getData();
        }

        // }
        // const res = await addExpertRecommend(form.value).finally(() => { buttonLoading.value = false });
        // if (res.code == 200) {
        //   proxy?.$modal.msgSuccess("提交成功");
        //   router.back();
        // }
        // reset();

      }

    });
  }).catch(() => {

  })
}
const getData = async () => {
  const res = await getCommunity().finally(() => { });
  console.log(`re   getCommunity`,res);
  Object.assign(form.value,res.data)

}
onActivated(() => {

})

onMounted(() => {
  getData();
})

const formRules = {
  activityName: [
    { required: true, message: "活动名称不能为空", trigger: "blur" }
  ],
  activityClassify: [
    { required: true, message: "活动分类不能为空", trigger: "change" }
  ],
  activityTime: [
    { required: true, message: "活动时间不能为空", trigger: "blur" }
  ],
  activityStartTime: [
    { required: true, message: "活动时间不能为空", trigger: "blur" }
  ],
  activityEndTime: [
    { required: true, message: "活动时间不能为空", trigger: "blur" }
  ],
  activityAddress: [
    { required: true, message: "活动地点不能为空", trigger: "blur" }
  ],
  activityNum: [
    { required: true, message: "活动数量不能为空", trigger: "blur" }
  ],
  activityPic: [
    { required: true, message: "封面图不能为空", trigger: "blur" }
  ],
  activityContent: [
    { required: true, message: "活动内容不能为空", trigger: "blur" }
  ],
  isPublic: [
    { required: true, message: "是否发布不能为空", trigger: "blur" }
  ],
  status: [
    { required: true, message: "状态不能为空", trigger: "change" }
  ],
  remark: [
    { required: true, message: "备注不能为空", trigger: "blur" }
  ],
}
</script>

<style lang="scss" scoped>
.header {
  margin: 1vh 0 0 2vw;
}

.el-form {
  margin-top: 2vh;
  margin-left: 2vw;
  width: 40%;
}
.btn {
  margin-top: 1vh;
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;

  .el-button {
    width: 30%;
  }
}
</style>
