<!--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="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) {
        // 得到base64网络
        if (!vls.id) return
        this.bannerInfo = {
          id: vls.id,
          bannerName: vls.bannerName,
          bannerPicture: this.getBase64('http://111.198.10.15:21403/static/' + vls.bannerPicture),
          skipUrl: vls.skipUrl,
          bannerModule: vls.bannerModule,
          bannerSort: vls.bannerSort
        }
        console.log(
          this.getBase64('http://111.198.10.15:21403/static/' + vls.bannerPicture)
        )
      },
      deep: true,
      immediate: true
    }
  },
  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
            }
          }
        })
      } else {
        updata(this.bannerInfo).then(res => {
          if (res != '') {
            this.$message.success('更新成功')
            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)
    },
    //  网络图片转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()
    }
  }
}
</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>