<template>
  <div class="export-excel">
    <el-dialog
      :title="values.relation_maintenance"
      :visible.sync="dialogExport"
    >
      <p class="option-tip">{{values.optionTips}}</p>
      <el-row :span="24">
        <el-col :span="8">
          <p>
            <i class="iconfont icon-doc-line"/>
            {{values.currentNum}}{{graphicTypeNum}}
          </p>

          <a :href="downloadProject('excel')" target="_self">

            <!--          <a :href=`${baseUrl}${dataCenter}/graphic/export?code=对象ID${localStorage.getItem('RelationType')?relType=${localStorage.getItem('RelationType')} : null}${ localStorage.getItem('ZoneType') ? `&zoneType=${localStorage.getItem('ZoneType')}` : null}` >-->
            <el-button
              type="primary"
              class="mt-10"
            >
              {{ values.download }}
            </el-button>
          </a>
        </el-col>
        <el-col :span="10">
          {{values.lastTime}}
        </el-col>
      </el-row>
      <el-upload
        v-loading="loading"
        class="upload-demo"
        :drag="true"
        :action="`${baseUrl}${dataCenter}/graphic/import`"
        multiple
        :show-file-list='false'
        name="file"
        :headers="headers"
        :data="dataId"
        :before-upload="beforeUpload"
        :on-progress="progress"
        :on-success="success"
        :on-error="error"
      >
        <i class="el-icon-upload"/>
        <div
          class="el-upload__text"
          v-html="values.uploadTxt"
        />
        <div class="upload__tip danger" slot="tip">{{ values.uploadTips}}</div>
      </el-upload>
    </el-dialog>
    <!--手动编辑：手动维护.process结束-->
    <el-dialog
      :title="values.relation_maintenance"
      :visible.sync="dialogProcess"
    >
      <div class="block">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
          >
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
      </div>
      <!--            下载报告-->
      <!-- <a :href="downloadProject('report')">
        <el-button>{{values.downloadFile}}</el-button>
      </a> -->
      <a :href="downloadProject('report')">
        <el-button>{{values.downloadFile}}</el-button>
      </a>
      <footer
        slot="footer"
        class="dialog-footer "
      >
        <el-button @click="errBack">{{values.back}}</el-button>
        <el-button
          type="primary"
          @click="finish"
        >{{values.done}}
        </el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import storage from '@/framework/utils/storage'
import { graphicTypeNumber } from "@/api/relation/api";
import { baseUrl, dataCenter } from '@/api/scan/config.js'

export default {
  name: "exportExcel",
  props: ['values', 'length'],
  data() {
    return {
      // relationCount:localStorage.getItem('count'),
      loading: false,
      dialogExport: false,
      dialogProcess: false,
      graphicTypeNum: 0,
      activities: [],
      baseUrl: baseUrl,
      dataCenter: dataCenter
    }
  },
  computed: {
    ...mapGetters('layout', ['projectId']),
    headers() {
      return {
        'ProjectId': this.projectId,
        'Comming': 'adm',
        'Account': storage.get("user_name")
      }
    },
    dataId() {
      return {
        relType: localStorage.getItem('RelationType') || '',
        zoneType: localStorage.getItem('ZoneType') || '',
        projectId: this.projectId
      }
    },
  },
  methods: {
      getGraphicTypeNum() {
        const params = {
            type: this.dataId.relType
        }
        graphicTypeNumber(params, res => {
            if (res.content && res.content.length) {
                this.graphicTypeNum = res.content[0] && res.content[0].count || 0;
            }
        })
      },
      downloadProject(str) {
        let relType = localStorage.getItem('RelationType') != '' ? `&relType=${localStorage.getItem('RelationType')}` : '';
        let zoneType = localStorage.getItem('ZoneType') != '' ? `&zoneType=${localStorage.getItem('ZoneType')}` : '';
        let url;
        if (str === 'excel') {
          relType = localStorage.getItem('RelationType') ? `&relType=${localStorage.getItem('RelationType')}` : '';
          url = `${baseUrl}${dataCenter}/graphic/export?projectId=${this.projectId}${relType}${zoneType}&code=对象ID`;
        } else {
          url = `${baseUrl}${dataCenter}/graphic/report-downloads?projectId=${this.projectId}${relType}${zoneType}`;
        }
        return url
      },
      beforeUpload() {
        this.loading = true;
      },
      progress(event, file, fileList) {
        // console.log(event.file, fileList)
      },
      success(event, file, fileList) {
        this.loading = false;
        if (event.content && event.content[0] && event.content[0].state === "0") {
            this.activities = [{
                content: '数据文件处理中..',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-check',
                color: '#0bbd87'
            }, {
                content: `关系全部导入成功（导入关系：${event.content[0].successCount} 条）`,
                color: '#0bbd87',
                icon: 'el-icon-check',
                size: 'large',
                type: 'success',
            }]
        } else if (event.content && event.content[0] && event.content[0].state === "1") {
            this.activities = [{
                content: '数据文件处理中..',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-check',
                color: '#0bbd87'
            }, {
                content: `关系部分导入成功（导入成功：${event.content[0].successCount} 条；导入失败：${event.content[0].failCount} 条）`,
                color: '#0bbd87',
                icon: 'el-icon-check',
                size: 'large',
                type: 'success',
            }]
        } else if (event.content && event.content[0] && event.content[0].state === "2") {
            this.activities = [{
                content: '数据文件处理中..',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-check',
                color: '#0bbd87'
            }, {
                content: '关系导入失败！',
                color: '#f56c6c',
                icon: 'el-icon-close',
                size: 'large',
                type: 'primary',
            }]
        } else {
            this.activities = [{
                content: '数据文件处理中..',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-check',
                color: '#0bbd87'
            }, {
                content: '关系导入失败！',
                color: '#f56c6c',
                icon: 'el-icon-close',
                size: 'large',
                type: 'primary',
            }]
        }
        this.dialogExport = false;
        this.dialogProcess = true;
        this.$emit('upDataTable')
      },
      error(event, file, fileList) {
        this.loading = false;
        this.activities = [{
            content: '数据文件处理中..',
            size: 'large',
            type: 'primary',
            icon: 'el-icon-check',
            color: '#0bbd87'
        }, {
            content: '文件上传失败！',
            color: '#f56c6c',
            icon: 'el-icon-close',
            size: 'large',
            type: 'primary',
        }]
        this.dialogExport = false;
        this.dialogProcess = true;
        this.$emit('upDataTable')
      },
      errBack() {
        this.dialogProcess = false
      },
      finish() {
        this.dialogProcess = false
        this.dialogExport = false
        this.$emit('upDataTable')
      },

    },
    watch: {
        dialogExport(val) {
            if(val) {
                this.getGraphicTypeNum();
            }
        }
    }
  }
</script>

<style scoped lang="less">
  .export-excel {
    .mt-10 {
      margin-top: 10px;
    }

    .danger {
      color: #d9001b;
    }

    .font-big {
      font-weight: 600;
    }


    .exist-title {
      font-size: 12px;
      color: #AAAAAA;
    }

    .option-tip {
      font-size: 18px;
      font-weight: 600;
    }

    .upload-demo {
      margin: 20px 0;

    }

    /deep/ .el-upload-dragger {
      width: 600px;
      margin: 0 auto;
    }
  }
</style>
