<template>
  <div class="skin-set">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>皮肤管理</span>
      </div>
      <!-- 皮肤列表 -->
      <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.skin_id"
            >
              <span>{{ v.skin_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.check === '1' }"
                @click="changeSkin('pdj', v)"
                >{{
                  v.check === "1" ? "使用中(点击取消)" : "点击使用"
                }}</el-button
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 图片预览 -->
      <el-image-viewer
        v-if="previewImg"
        :on-close="
          () => {
            (previewImg = false), (previewUrl = '');
          }
        "
        :url-list="previewUrl"
      />
    </el-card>
  </div>
</template>

<script>
import local from "@/utils/local";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: {
    ElImageViewer,
  },
  data() {
    return {
      siteId: local.getLocal("sampleSiteId")
        ? local.getLocal("sampleSiteId")
        : "",
      skinList: [
        {
          id: 1,
          skin_name: "样表普通皮肤",
          previewImagePath: require("../../../assets/img/tiandan.png"),
          check: "1",
        },
      ],
      previewImg: false,
      previewUrl: "",
    };
  },
  created() {},
  methods: {
    // 选择使用皮肤
    async changeSkin(device, row) {
      // if (row.check === "1") {
      //   // let obj = {
      //   //   skin_id: "",
      //   //   css_path: "",
      //   //   skin_name: "",
      //   //   previewImagePath: "",
      //   //   skinFieldList: "",
      //   //   device,
      //   // };
      //   row.check = "0";
      //   console.log(check, device);
      //   // if (code === 1) {
      //   //   this.$message.success("设置" + msg);
      //   // }
      // } else {
      //   row.check = "1";
      // }
      console.log(device, row);
    },
    // 预览皮肤
    handlePreview(url) {
      this.previewUrl = [url];
      this.previewImg = true;
    },
  },
};
</script>

<style lang="less" scoped>
.skin-set {
  display: flex;
  width: 100%;
  min-height: 100%;
}
:deep(.el-card) {
  height: auto;
}
.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;
      .skin-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        cursor: pointer;
      }
    }
  }
}
.active {
  border: 1px solid #1a73e8;
  color: #1a73e8;
}
</style>
