<template>
  <el-container>
    <el-header>
      <div class="explain">
        <span>说明：四色图尺寸为1530 x 840px</span>
      </div>
    </el-header>
    <el-main>
      <div class="img-swiper">
        <el-carousel
          arrow="always"
          height="520px"
          :autoplay="false"
          @change="changeIndex"
        >
          <el-carousel-item v-for="(item, index) in fileList" :key="index">
            <img :src="item" />
          </el-carousel-item>
        </el-carousel>
        <div class="bts-swiper">
          <el-upload
            :action="uploadImgUrl"
            :on-success="handleUploadSuccess"
            :before-upload="handleBeforeUpload"
            :on-error="handleUploadError"
            :headers="headers"
            :show-file-list="false"
          >
            <span class="el-icon-sort" @click="type = 'edit'"></span>
          </el-upload>
          <el-upload
            :action="uploadImgUrl"
            :on-success="handleUploadSuccess"
            :before-upload="handleBeforeUpload"
            :on-error="handleUploadError"
            :headers="headers"
            :show-file-list="false"
          >
            <span class="el-icon-circle-plus-outline" @click="type = 'add'"></span>
          </el-upload>
          <span class="el-icon-remove-outline" @click="dleSignTemolate"></span>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {
  queryDiagramList,
  delDiagram,
  editDiagram,
  addDiagram,
} from "@/api/risk/colorImgManagement.js";
import { getToken } from "@/utils/auth";
export default {
  name: "ColorImgManagement",

  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      fileList: [],
      list: [],
      activeIndex: 0,
      fileType: ["png", "jpg", "jpeg"],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      type: '',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.handleSave(res.fileName)
        this.$modal.closeLoading();
      } else {
        this.$modal.closeLoading();
        this.$modal.msgError(res.msg);
      }
    },
    // 上传前loading加载
    handleBeforeUpload(file) {
      let isImg = false;
      if (this.fileType.length) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        isImg = this.fileType.some((type) => {
          if (file.type.indexOf(type) > -1) return true;
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
      } else {
        isImg = file.type.indexOf("image") > -1;
      }

      if (!isImg) {
        this.$modal.msgError(
          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
        );
        return false;
      }
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.$modal.loading("正在上传图片，请稍候...");
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传图片失败，请重试");
      this.$modal.closeLoading();
    },
    changeIndex(index) {
      this.activeIndex = index
    },
    getList() {
      const params = {
        pageNum: 1,
        pageSize: 100,
      };
      queryDiagramList(params).then((data) => {
        if (data.code === 200) {
          this.list = data.rows;
          this.handleCheckImg(data.rows);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    dleSignTemolate() {
      let ids = this.list[this.activeIndex]?.id;
      this.$confirm("是否删除？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delDiagram(ids).then((data) => {
            if (data.code === 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {
          // 取消后退出
        });
    },
    handleSave(colorImg) {
      const params = {
        colorImg,
        colorName: '-',
        remarkInfo: '-'
      }
      if (this.type === "add") {
        addDiagram(params)
          .then((data) => {
            if (data.code === 200) {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(data.msg);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        editDiagram({ ...params, id: this.list[this.activeIndex]?.id})
          .then((data) => {
            if (data.code === 200) {
              this.$message({
                message: "替换成功",
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(data.msg);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    handleCheckImg(imgList) {
      if (imgList) {
        this.fileList = imgList.map((item) => {
          return this.baseUrl + item.colorImg;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.explain {
  height: 50px;
  display: flex;
  align-items: flex-end;
  font-size: 0.083333rem;
  color: #fff;
  margin-bottom: 16px;
}
.img-swiper {
  display: flex;
  justify-content: flex-start;
  position: relative;
  width: 65vw;
  ::v-deep .el-carousel__arrow {
    background-color: rgba(31, 45, 61, 0.5);
  }
  .el-carousel {
    width: 60vw;
    border: solid 1px;
    img {
      box-sizing: border-box;
      width: 60vw;
      height: 100%;
      // object-fit: cover;
    }
  }
  .bts-swiper {
    position: absolute;
    right: -20px;
    top: 100px;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100px;
    span {
      font-size: 42px;
      width: 100%;
      display: flex;
      height: 70px;
      cursor: pointer;
    }
    ::v-deep .el-upload--text {
      border: none;
    }
    .el-icon-sort {
      color: #409eff;
    }
    .el-icon-circle-plus-outline {
      color: #67c23a;
    }
    .el-icon-remove-outline {
      color: #f56c6c;
    }
  }
}
</style>
