<template>
  <el-dialog title="图库"
             width="80%"
             :visible.sync="imgVisible">
    <div style="margin:0 auto;">
      <el-upload class="upload-demo"
                 :headers="headers"
                 :on-success="onSuccess"
                 :show-file-list="false"
                 :action="url+'bigScreen/bladeVisual/v1/uploadPhoto'"
                 name="positiveFile"
                 multiple
                 list-type="picture">
        <el-button size="small"
                   icon="el-icon-upload"
                   type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <el-scrollbar class="imgList">
      <img :src="item.value"
           :style="styleName"
           @click="handleSetimg(item.value)"
           v-for="(item,index) in imgOption[imgActive]"
           :key="index" />
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import { imgOption } from '@/tripartite/buildBigScreen/src/option/config'
export default {
  data () {
    return {
      imgVisible: false,
      imgObj: '',
      type: '',
      imgActive: 0,
      imgOption: imgOption,
      imgTabs: [],
      token:''
    }
  },
  created() {
    this.getToken()
  },
  computed: {
    styleName () {
      if (this.type === 'background') {
        return {
          width: '200px'
        }
      }
      return {}
    },
    //获取token值
    headers() {
        return {
          "Authorization": this.token 
        }
    }
  },
  watch: {
    type: {
      handler () {
        if (this.type === 'background') {
          this.imgActive = 0;
        } else if (this.type == 'border') {
          this.imgActive = 1;
        } else {
          this.imgActive = 2;
        }
      },
      immediate: true
    }
  },
  methods: {
    onSuccess (res) {
      const url = res.data.link;
      this.imgOption[this.imgActive].unshift({
        label: url,
        value: url
      });
    },
    openImg (item, type) {
      this.type = type;
      this.imgObj = item
      this.imgVisible = true;
    },
    handleSetimg (item) {
      this.imgVisible = false;
      this.$emit('change', item, this.imgObj);
    },
    //获取tokren
     getToken: function () {
        if (window.sessionStorage['currentUser']) {
            var currentUserInfo = eval('(' + window.sessionStorage['currentUser'] + ')');
            // console.log(currentUserInfo.token);
            this.token = 'Bearer ' + currentUserInfo.token
            // console.log(queryData.token)
            return currentUserInfo.token;
        } else {
            return 'Bearer ';
        }
    }
  }
}
</script>

<style>
</style>