<!--banner新增弹窗-->
<template>
  <el-dialog
    :title="title"
    width="520px"
    :visible.sync="isShowInfo"
    append-to-body
    @close="close"
  >
    <div class="brandDialog">
      <!-- <dialog-header title="新增banner" @close="close"></dialog-header> -->
      <div class="inputContent">
        <div class="inputBox">
          <red-star />
          <input-vue
            v-model.trim="bannerInfo.bannerName"
            title="banner名称"
            placeholder="请输入唯一编号"
            width="300px"
            class="inputWidth"
            style="justify-content: space-between"
          />
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue
            title="图片"
            class="inputWidth"
            style="justify-content: space-between"
          >
            <el-upload
              style="width: 300px"
              class="upload-demo"
              drag
              action="#"
              multiple
              :on-success="upSuccess"
              :on-change="handleChange"
              :file-list="fileList"
              :http-request="httpRequest"
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue
            title="所属功能模块"
            placeholder=""
            width="300px"
            class="inputWidth"
            style="justify-content: space-between"
          >
            <el-select
              v-model="bannerInfo.bannerModule"
              filterable
              placeholder=""
              style="width: 300px"
            >
              <el-option
                v-for="item in modelList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue
            title="排序"
            placeholder=""
            class="inputWidth"
            style="justify-content: space-between"
          >
            <input-number
              v-model="bannerInfo.bannerSort"
              style="width: 300px"
            />
          </input-vue>
        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" class="save" @click="save"> 保存 </el-button>
        <el-button type="info" class="close" @click="close"> 取消 </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import InputVue from "../../input/inputVue.vue";
import DialogHeader from "../dialogHeader.vue";
import RedStar from "../../redStar.vue";
import InputNumber from "../../input/inputNumber.vue";
import { getToken } from "@/utils/auth";
import { Base64 } from "js-base64";
import { list, add, updata } from "../../../../api/move/bannerConfig";

export default {
  components: {
    DialogHeader,
    RedStar,
    InputVue,
    InputNumber,
  },
  props: {
    isShowInfo: {
      type: Boolean,
      default: true,
    },
    title: "",
    dataInfo: "",
  },
  data() {
    return {
      bannerInfo: {
        bannerName: "",
        bannerPicture: "",
        skipUrl: "11",
        bannerModule: "",
        bannerSort: 0,
      },
      fileList: [],
      modelList: [],
    };
  },
  watch: {
    dataInfo: {
      handler(vls) {
        console.log(vls, "编辑");
        // 得到base64网络
        if (!vls.id) return;
        this.bannerInfo = {
          id: vls.id,
          bannerName: vls.bannerName,
          bannerPicture: vls.bannerPicture,
          skipUrl: vls.skipUrl,
          bannerModule: vls.bannerModule,
          bannerSort: vls.bannerSort,
        };
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    list().then((res) => {
      const Ary = [];
      const str = res[25].detail;
      const strAry = str.split(";");
      for (let i = 0; i < strAry.length; i++) {
        const temp = strAry[i].split(":");
        Ary.push({
          key: temp[2],
          value: temp[1],
        });
      }
      this.modelList = Ary;
    });
  },
  methods: {
    getToken: getToken,
    close() {
      this.$emit("close");
    },
    save() {
      const {
        bannerInfo: { bannerName, bannerPicture, bannerModule },
      } = this;
      if (bannerName && bannerPicture && bannerModule) {
        if (this.title == "banner新增") {
          add(this.bannerInfo).then((res) => {
            this.$message.success("添加成功");
            this.close();
            this.bannerInfo = {
              bannerName: "",
              bannerPicture: "",
              skipUrl: "",
              bannerModule: "",
              bannerSort: 0,
            };
          });
        } else {
          updata(this.bannerInfo).then((res) => {
            this.$message.success("更新成功");
            this.close();
            this.bannerInfo = {
              bannerName: "",
              bannerPicture: "",
              skipUrl: "",
              bannerModule: "",
              bannerSort: 0,
            };
          });
        }
      } else {
        this.$message.error("请先完整填写信息");
      }
    },

    upSuccess(response, file, fileList) {
      // console.log(response, file, fileList);
    },
    httpRequest(file) {
      console.log(file.file, "========================");

      // this.bannerInfo.bannerPicture =  Base64.encode(file.file)
      var reader = new FileReader();

      reader.readAsDataURL(file.file);
      // console.log(reader.readyState,"===========result====",reader,reader.FileReader);
      const timer = setInterval(() => {
        if (reader.result) {
          clearInterval(timer);
          this.bannerInfo.bannerPicture = reader.result;
          console.log(this.bannerInfo.bannerPicture);
        }
      }, 300);
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
    },
    //  网络图片转base64编码
    getBase64(imgUrl) {
      window.URL = window.URL || window.webkitURL;
      var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      // 至关重要
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          // 得到一个blob对象
          var blob = this.response;
          console.log("blob", blob);
          // 至关重要
          const oFileReader = new FileReader();
          oFileReader.onloadend = function (e) {
            // 此处拿到的已经是 base64的图片了
            const base64 = e.target.result;
            // console.log("方式一》》》》》》》》》", base64);
          };
          oFileReader.readAsDataURL(blob);
          // ====为了在页面显示图片，可以删除====
          var img = document.createElement("img");
          img.onload = function (e) {
            window.URL.revokeObjectURL(img.src); // 清除释放
          };
          const src = window.URL.createObjectURL(blob);
          img.src = src;
          // document.getElementById("container1").appendChild(img);
          // ====为了在页面显示图片，可以删除====
        }
      };
      xhr.send();
    },
    // 网络图片转base64 canvans方式
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
      return dataURL;
    },

    main(src) {
      let _this = this
      var image = new Image();
      image.src = src + "?v=" + Math.random(); // 处理缓存
      image.crossOrigin = "*"; // 支持跨域图片
      image.onload = function () {
        var base64 = _this.getBase64Image(image);
        this.bannerInfo.bannerPicture = base64
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.brandDialog {
  width: 500px;
  .inputContent {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .inputBox {
      width: 100%;
      display: flex;
      align-items: center;
    }
  }
  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }
  }
}
</style>