<template>
  <div class="home">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="180px"
      class="demo-ruleForm"
    >
      <el-form-item label="项目名称配置：" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="登陆背景配置：" prop="loginImage">
        <el-upload
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="ruleForm.loginImage"
            :src="ruleForm.loginImage"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="主页背景配置：" prop="bgImage">
        <el-upload
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="ruleForm.bgImage"
            :src="ruleForm.bgImage"
            class="avatar"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()"> 提交 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { localSet,localGet } from '@/utils'
export default {
  name: "home",
  setup() {
    const ruleFormRef = ref(null);
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      ruleForm: {
        name: '',
        loginImage: "",
        bgImage: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "change",
          },
        ],
      },
    });
    onMounted(() => {
      state.ruleForm.name = localGet('projectName') || '世博浦西区活水公园';
    })
    const submitForm = async () => {
      ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          localSet('projectName', state.ruleForm.name);
          router.go(0);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    return {
      ...toRefs(state),
      submitForm,
      ruleFormRef,
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  // background: url(../assets/bg2.png) left top no-repeat;
  // background-size: 100% 100%;
  // border: 1px solid rgb(180, 20, 180);
  display: flex;
  justify-content: space-between;
  .avatar-uploader {
    ::v-deep .el-upload {
      border: 1px dashed #99acb0;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    ::v-deep .el-upload:hover {
      border-color: #99acb0;
    }
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>