<template>
  <div class="skin-set bgw flex flexc">
    <TabHeader icon="el-icon-notebook-2" label="皮肤管理"></TabHeader>
    <div class="pd15 flex1 auto-scroll">
      <!-- 皮肤列表 -->
      <div class="skin-box">
        <div class="skin-category">
          <!-- <div class="color_title">分类一</div> -->
          <div class="skin-list">
            <div
              class="skin-item flex flexc aic"
              v-for="v in skinList"
              :key="v.id"
            >
              <span>{{ v.name }}</span>
              <div class="skin-img-box">
                <img
                  class="skin-img"
                  :src="v.previewImagePath"
                  @click="handlePreview(v.previewImagePath)"
                />
              </div>
              <el-button
                size="small"
                :class="{ active: v.used == 1 }"
                @click="changeSkin(v)"
                >{{ v.used == 1 ? "使用中(点击取消)" : "点击使用" }}</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="previewImg"
      :on-close="
        () => {
          (previewImg = false), (previewUrl = '');
        }
      "
      :url-list="previewUrl"
    />
  </div>
</template>

<script>
import local from "@/utils/local";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import TabHeader from "@/components/TabHeader.vue";
import { getSkinList, useSkin } from "@/api/skin";
export default {
  components: {
    ElImageViewer,
    TabHeader,
  },
  data() {
    return {
      siteId: local.getLocal("sampleSiteId")
        ? local.getLocal("sampleSiteId")
        : "",
      skinList: [],
      previewImg: false,
      previewUrl: "",
    };
  },
  created() {
    this.getSkinList();
  },
  methods: {
    // 获取皮肤列表
    async getSkinList() {
      let res = await getSkinList({
        page: 1,
        size: -1,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.skinList = data;
      }
    },
    // 选择使用皮肤
    async changeSkin(row) {
      console.log(row);
      let _this = this;
      let obj = {
        id: row.id,
        siteId: this.siteId,
      };
      if (row.used == 1) {
        obj.used = 0;
        this.$confirm("此操作将会取消正在使用的皮肤，是否继续？", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        })
          .then(async () => {
            let res = await useSkin(obj);
            let { code, msg } = res.data;
            if (code == 1) {
              _this.$message.success(msg);
              _this.getSkinList();
            }
          })
          .catch(() => {
            console.log("取消成功！");
          });
      } else {
        obj.used = 1;
        this.$confirm("确定要使用所选皮肤吗？", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "success",
          iconClass: "el-icon-question",
        })
          .then(async () => {
            let res = await useSkin(obj);
            let { code, msg } = res.data;
            if (code == 1) {
              _this.$message.success(msg);
              _this.getSkinList();
            }
          })
          .catch(() => {
            console.log("取消成功！");
          });
      }
    },
    // 预览皮肤
    handlePreview(url) {
      this.previewUrl = [url];
      this.previewImg = true;
    },
  },
};
</script>

<style lang="less" scoped>
.skin-set {
  width: 100%;
  height: 100%;
}

.skin-category {
  margin-bottom: 30px;
}
.skin-list {
  display: flex;
  flex-wrap: wrap;
  .skin-item {
    text-align: center;
    margin-top: 30px;
    margin-right: 30px;
    width: 200px;
    .skin-img-box {
      width: 100%;
      height: 130px;
      margin: 10px 0px;
      background-color: #ccc;
      border-radius: 4px;
      .skin-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
}
.active {
  border: 1px solid #1a73e8;
  color: #1a73e8;
}
</style>
