<template>
  <div
    v-show="showDialog"
    :class="{
      'custom-class': !upOrDowm,
    }"
  >
    <!-- showZindex: !dialogVisible -->

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :modal="false"
      width="500px"
    >
      <template slot="title">
        <div class="title">
          <div class="title-left">
            <el-progress
              class="elProgress"
              type="circle"
              color="#409EFF"
              :percentage="percentage"
              :show-text="false"
              :width="28"
              :stroke-width="3"
              v-if="showProgress"
            ></el-progress>
            <i class="el-icon-success" v-else></i>
            <span class="title-name">{{ title }}</span>
            <span class="title-sum"
              >{{ fileList.filter((item) => item.success).length }}/{{
                fileList.length
              }}</span
            >
          </div>
          <div class="title-right">
            <i
              :class="upOrDowm ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
              @click="showContent"
            ></i>
            <i class="el-icon-close" @click="close()"></i>
          </div>
        </div>
      </template>
      <div class="content" v-show="upOrDowm">
        <ul style="list-style: none">
          <li v-for="(item, i) in fileList" :key="i">
            <div class="content-item">
              <div class="content-item-left">
                <div class="icon-item">
                  <div
                    class="app-icon__wrap"
                    v-if="item.file.name.includes('应用批量')"
                    style="background: #f6b85a"
                  >
                    <img
                      :src="defaultImgUrl"
                      alt=""
                      srcset=""
                      class="app-icon"
                      style="width: 24px; height: 24px"
                    />
                  </div>

                  <div
                    class="app-icon__wrap"
                    v-else
                    style="background: #0080fe"
                  >
                    <i class="app-icon icon-yingyong"></i>
                  </div>
                </div>
                <div class="content-item-left-tit">
                  <div class="content-item-left-tit-name">
                    {{ item.file.name }}
                  </div>
                  <div class="content-item-left-tit-dx">
                    {{ item.file.sizeChange }}
                  </div>
                </div>
              </div>

              <div class="content-item-right">
                <span v-if="item.success && !item.uploading">
                  <i class="icon-wancheng"></i
                ></span>
                <span class="content-item-right-loding" v-if="item.uploading">
                  正在导入</span
                >
                <template>
                  <span
                    style="cursor: pointer"
                    class="content-item-right-failure"
                    v-if="!item.success && !item.uploading"
                    :title="item.errorMessage"
                  >
                    <i class="icon-jingshi"></i> 导入失败
                  </span>

                  <span
                    class="content-item-right-reset"
                    @click="reimport(item)"
                    v-if="!item.success && !item.uploading"
                    >重新导入</span
                  ></template
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import req from '@/request.js'
import {mapMutations, mapState} from 'vuex'
const DEFAULT_IMAGE = require('@/assets/app_images/zip.svg')
export default {
  components: {},
  data() {
    return {
      upOrDowm: true,
      title: '已导入',
      showProgress: false,
      defaultImgUrl: DEFAULT_IMAGE,
    }
  },
  computed: {
    ...mapState({
      dialogVisible: (state) => state.user.dialogVisible,
      showDialog: (state) => state.user.showDialog,
      fileList: (state) => state.user.fileList,
    }),
    percentage() {
      return Number(((this.fileList.length / 10) * 100).toFixed(0))
    },
    uploadUrl: function () {
      return window.context.portal + '/portal/sysApp/v1/import'
    },
  },
  watch: {
    fileList: {
      handler(val) {
        if (val) {
          if (val.length > 0) {
            this.setDialogVisible(true)
          }
          val.forEach((item, index) => {
            if (!item.isUpload) {
              this.importSave(item, index)
            }
          })
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    ...mapMutations({
      setDialogVisible: 'user/setDialogVisible',
      setFile: 'user/setFile',
      setFileList: 'user/setFileList',
    }),
    showContent() {
      this.upOrDowm = !this.upOrDowm
    },
    importSave(val, index) {
      let formData = new FormData()
      formData.append('file', val.file.raw)
      formData.append('menu', JSON.stringify(val.menu))
      this.setFile({index, column: 'isUpload', value: true})
      this.setFile({index, column: 'uploading', value: true})
      this.showProgress =
        this.fileList.length !==
        this.fileList.filter((file) => !file.uploading).length
      req
        .post(
          `${this.uploadUrl}?cover=${val.isCover ? 'true' : 'false'}`,
          formData
        )
        .then((response) => {
          if (response.data.state) {
            this.setFile({index, column: 'success', value: true})
            this.setFile({index, column: 'errorMessage', value: null})
            this.$root.$emit('refresh')
          } else {
            this.setFile({index, column: 'success', value: false})
            this.setFile({
              index,
              column: 'errorMessage',
              value: '错误原因：' + response.data.message,
            })
          }
        })
        .catch((error) => {
          this.setFile({index, column: 'success', value: false})
          this.setFile({
            index,
            column: 'errorMessage',
            value: '错误原因：' + error.response.data.message,
          })
        })
        .finally(() => {
          this.setFile({index, column: 'uploading', value: false})
          this.showProgress =
            this.fileList.length !==
            this.fileList.filter((file) => !file.uploading).length
          this.$forceUpdate()
        })
    },
    reimport(item) {
      this.importSave(item)
    },
    close() {
      this.setFileList([])
      this.setDialogVisible(false)
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-name {
    font-size: 20px;
    font-weight: 500;
    margin: 0 8px;
      
  }
  &-sum {
    font-size: 20px;
    font-weight: 500;    
  }

  .title-left {
    line-height: 28px;
        display: flex;
    justify-content: center;
    height: 28px;
    span {
      display: inline-block;
    }
    i {
      font-size: 24px;
    }
    .el-icon-success {
      color: #07c160;
    }
    .elProgress {
 
      transform: rotateY(180deg);
    }
  }
  .title-right {
    ::v-deep {
      .el-icon-close {
        margin-left: 16px;
      }
    }
    i {
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
::v-deep {
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__header {
    padding: 13px 24px 13px 16px;
  }
}
/deep/ .el-dialog__wrapper {
  position: fixed;
  right: 16px;
  bottom: 16px;
  top: auto;
  left: auto;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.15);
}
/deep/ .el-dialog {
  margin: 0px !important;
}
.custom-class {
  /deep/ .el-dialog__wrapper {
    bottom: 80px;
  }
}
.showZindex {
  /deep/ .el-dialog__wrapper {
    z-index: -99 !important;
  }
}
.content {
  height: 352px;
  overflow-y: auto; /*滚动条样式*/
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }

  .content-item {
    display: flex;
    padding: 10px 16px;
    height: 32px;
    justify-content: space-between;
    align-items: center;
    &:hover {
      background: #f9f9f9;
      border-radius: 4px 4px 4px 4px;
    }
  }
  .content-item-left {
    display: flex;
    align-items: center;

    .icon-item {
      img {
        width: 32px;
        height: 32px;
      }
      .app-icon__wrap {
        width: 32px;
        height: 32px;
        position: relative;
        border-radius: 5px;

        .app-icon {
          font-size: 24px;
          color: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    &-tit {
      margin: 0 8px;
      &-name {
        height: 20px;
        line-height: 20px;
        color: #262626;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 250px;
      }
      &-dx {
        font-size: 12px;
        color: #8c8c8c;
        height: 18px;
        line-height: 18px;
      }
    }
    i {
      font-size: 32px;
      line-height: 38px;
    }
  }
  .content-item-right {
    span {
      font-size: 12px;
    }
    i {
      font-size: 16px;
    }
    &-loding {
      color: #8c8c8c;
    }
    &-reset {
      color: #409eff;
      margin-left: 10px;
      cursor: pointer;
    }
    &-failure {
      color: #e55555;
    }
    .icon-wancheng {
      color: #07c160;
    }
  }
}
</style>
