<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
            title="banner名称"
            placeholder="请输入唯一编号"
            width="300px"
            class="inputWidth"
            style="justify-content: space-between"
            v-model="bannerInfo.bannerName"
          ></input-vue>
        </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"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="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-option>
            </el-select>
          </input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue
            title="排序"
            placeholder=""
            class="inputWidth"
            style="justify-content: space-between"
          >
            <input-number
              style="width: 300px"
              v-model="bannerInfo.bannerSort"
            ></input-number>
          </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 } from "../../../../api/move/bannerConfig";
export default {
  components: {
    DialogHeader,
    RedStar,
    InputVue,
    InputNumber,
  },
  props: {
    isShowInfo: {
      type: Boolean,
      default: true,
    },
    title: "",
  },
  data() {
    return {
      bannerInfo: {
        bannerName: "",
        bannerPicture: "",
        skipUrl: "11",
        bannerModule: "",
        bannerSort: 0,
      },
      fileList: [],
      modelList: [],
    };
  },
  mounted() {
    list().then((res) => {
      const Ary = [];
      const str = res[26].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],
        });
      }
      console.log(Ary);
      this.modelList = Ary;
    });
  },
  methods: {
    getToken: getToken,
    close() {
      this.$emit("close");
    },
    save() {
      if (this.title == "banner新增") {
        add(this.bannerInfo).then((res) => {
          if (res != "") {
            this.close();
            this.bannerInfo = {
              bannerName: "",
              bannerPicture: "",
              skipUrl: "",
              bannerModule: "",
              bannerSort: 0,
            };
          }
        });
      }
    },
    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) {
      console.log(fileList, file);
      this.fileList = fileList.slice(-1);
    },
  },
};
</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>