<template>
  <el-dialog
    title="编辑"
    :visible.sync="dialogVisible"
    width="870px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :limit="5"
    class="homeEditBannerDiolog"
  >
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      class="avatar-uploader"
      :on-success="handleUploadSuccess"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <!-- <img class="el-upload-list__item-thumbnail" v-for="item,index in fileList" :key="index" :src="item.url"  alt="" /> -->
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "homeEditBannerDiolog",
  props: {
    bannerList: {
      type: Array,
    },
  },
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    handleConfirm() {
      if (valid) {
        this.$emit("handleBannerSuccess");
        this.handleClose();
      }
    },
    handleUploadSuccess(response, file, fileList) {
      console.log(file);
    },
  },
  watch: {
    bannerList: {
      handler(newVal) {
        this.fileList = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang='scss' scoped>
::v-deep.homeEditBannerDiolog {
  .avatar-uploader {
    .el-upload-list__item {
      width: 260px;
      height: 102px;
    }

    .el-upload {
      width: 260px;
      height: 102px;
      line-height: 110px;
    }
  }
}
</style>