<template>
  <div class="content-main">
    <el-radio-group v-model="themeRadio" class="theme-radio">
      <el-radio
        v-for="(item, index) in themeData"
        :label="item.value"
        :key="index"
      >
        <img class="themeImg" :src="item.imgsrc" />{{ item.text }}
      </el-radio>
    </el-radio-group>
    <div style="text-align: center">
      <el-button type="primary" @click="saveStyle('save')">
        <i class="iconfont">&#xe683;</i> 保存风格设置
      </el-button>
      <el-button type="primary" @click="saveStyle('return')">
        <i class="iconfont">&#xe695;</i> 恢复默认风格
      </el-button>
    </div>
  </div>
</template>
<script>
import theme1 from "../../img/theme-initial.png";
import theme2 from "../../img/theme-blue.png";
import theme3 from "../../img/theme-red.png";
import theme4 from "../../img/theme-green.png";
import theme5 from "../../img/theme-purple.png";
import { saveTheme } from "@/api/publicfunction/theme";
export default {
  data() {
    return {
      themeRadio: sessionStorage.getItem("theme")
        ? sessionStorage.getItem("theme")
        : "initial",
      themeData: [
        { imgsrc: theme1, text: "默认风格", value: "initial" },
        { imgsrc: theme2, text: "淡蓝优雅风格", value: "blue" },
        { imgsrc: theme3, text: "深红炙热风格", value: "red" },
        { imgsrc: theme4, text: "绿色清新风格", value: "green" },
        { imgsrc: theme5, text: "紫色贵族风格", value: "purple" },
      ],
    };
  },
  methods: {
    saveStyle(style) {
      let data = {
        account: sessionStorage.getItem("userLoginName"),
        theme: style !== "save" ? "initial" : this.themeRadio,
      };
      this.themeRadio = data.theme;
      saveTheme(data).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "主题更改成功",
            type: "success",
            duration: 2000,
          });
          sessionStorage.setItem("theme", data.theme);
          location.reload();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.theme-radio .el-radio {
  width: 450px;
  margin-bottom: 40px;
  line-height: 140px;
}
.themeImg {
  float: left;
  margin-right: 10px;
  width: 276px;
  height: 143px;
}
</style>
