<template>
  <div class="app-container">
    <div class="main">
      <div class="main_title">编辑信息</div>
      <div class="main_set">
        <el-form :model="form" :rules="rules" ref="form" label-width="130px">
          <el-form-item label="昵称" prop="name">
            <el-input
              v-model="form.name"
              autocomplete="off"
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="店铺头像"
            prop="Img"
            :rules="[
              { required: true, message: '请上传头像', trigger: 'blur' },
            ]"
          >
            <div class="id_img">
              <el-upload
                class="avatar-uploader"
                action="https://yyq.tt.demo.cq1080.com/store/v1/uploadGoods"
                :show-file-list="false"
                :headers="token"
                :on-success="addavatar"
                :on-change="beforeAvatarUpload"
              >
                <img v-if="form.avatar" :src="form.avatar" class="avatar1" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn_box">
        <el-button type="primary" @click="submitForm('form')">保存</el-button>
        <el-button
          type="info"
          @click="
            $router.push({
              path: '/set/index',
            })
          "
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      token: { Authorization: "" },
      avatar: "",
      form: {
        // 姓名
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    document.title = "编辑";
    this.token.Authorization = Cookies.get("vue_admin_template_token");
  },
  methods: {
    addavatar(res, file) {
      console.log(res);
      if (res.data.url) {
        this.form.avatar = res.data.url;
      }
    },
    beforeAvatarUpload(file) {
      if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
        return;
      } else {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // pceEditStoreInfo(this.form)
          //   .then((res) => {
          //     this.$message({
          //       message: "保存成功",
          //       type: "success",
          //     });
          //   })
          //   .catch(() => {
          //     // this.shareLoading = false;
          //   });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 61px);
  padding: 20px;
  width: 100%;
  // background-color: white;
}
.main {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  overflow-y: auto;
}
.main_title {
  font-size: 20px;
  font-weight: bold;
}
.main_set {
  margin-top: 40px;
  width: 30%;
}
.avatar-uploader {
  margin-right: 20px;
}
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.id_img {
  display: flex;
}
.avatar1 {
  width: 120px;
  height: 120px;
  display: block;
}
// .btn_box {
//   width: 30%;
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }
</style>
