<template>
  <div class="relation-maintain">
    <!--计算无需配置源末端的关系时提示-->
    <el-dialog
        :title="values.title"
        :visible.sync="dialogTableVisible"
    >
      <span class="font-big">{{values.autoComputed}}</span>
      <footer
          slot="footer"
          class="dialog-footer "
      >
        <el-button @click="dialogTableVisible = false">{{values.cancel}}</el-button>
        <el-button
            type="primary"
            @click="promptly"
        >{{values.promptly}}
        </el-button>
      </footer>
    </el-dialog>
    <!-- 计算需配置源末端的关系且已配置时提示-->
    <el-dialog
        :title="values.title"
        :visible.sync="dialogTableVisibleMore"
    >
      <div
          v-loading="TableVisibleMoreLoading"
          style="overflow:hidden"
      >
        <p class="font-big">{{values.existComputed}}</p>
        <p class="exist-title">{{values.existTitle}}</p>
        <el-row :span="24">
          <el-col :span="8">
            <span class="demonstration">{{values.originEquipment}}</span>
            <el-cascader
                :key="isResouceShow"
                :options="list"
                v-model="ops"
                :props="props"
                @change="sourceOptions"
                collapse-tags
                clearable
            />
          </el-col>
          <el-col :span="8">
            <span class="demonstration">{{values.endEquipment}}</span>

            <el-cascader
                :options="list"
                v-model="filterOps"
                :key="isResouceShow"
                :props="props"
                @change="endOptions"
                collapse-tags
                clearable
            />
          </el-col>
        </el-row>
        <footer
            slot="footer"
            class="dialog-footer "
            style="float: right"
        >
          <el-button @click="dialogTableVisibleMore = false">{{values.cancel}}</el-button>
          <el-button
              type="primary"
              @click="computedUpdate"
          >{{values.promptly}}
          </el-button>
        </footer>
      </div>
    </el-dialog>
    <!--设定设备对象源/末端-->
    <el-dialog
        :title="values.title"
        :visible.sync="dialogEquipment"
    >
      <span class="font-big">{{values.underDesign}}</span>
      <footer
          slot="footer"
          class="dialog-footer"
      >
        <el-button
            type="primary"
            @click="dialogEquipment = false"
        >{{values.confirm}}
        </el-button>
      </footer>
    </el-dialog>
    <!--手动编辑：提示引导-->
    <el-dialog
        :title="values.title"
        :visible.sync="dialogManualTip"
    >
      <p class="font-big">{{values.tips}}</p>
      <p
          class="font-big"
          v-for="item in values.device"
      >{{item}}</p>
      <footer
          slot="footer"
          class="dialog-footer "
      >
        <el-button @click="dialogManualTip = false">{{values.confirm}}
        </el-button>
      </footer>
    </el-dialog>
    <!--手动编辑：手动维护-->
    <el-dialog
        :title="values.title"
        :visible.sync="dialogManualOption"
    >
      <p class="option-tip">{{values.optionTips}}</p>
      <el-row :span="24">
        <el-col :span="8">
          <p>
            <i class="iconfont icon-doc-line"/>
            {{values.currentNum}} 0
          </p>

          <a :href="downloadProject('excel')">
            <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
          class="upload-demo"
          drag
          action="/api/datacenter/graphic/import"
          multiple
          :show-file-list='false'
          name="file"
          :headers="headers"
          :data="dataId"
          :on-progress="progress"
          :on-success="success"
          :on-error="error"
          accept="xlsx,xls"
      >
        <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.title"
        :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>
      <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'

  export default {
    name: "RelationMaintain",
    props: ['values', 'isComputed', 'source', 'TableVisibleMoreLoading', 'ManualMaintenance'],
    created() {
      this.showCascader()
    },
    mounted() {
    },
    data() {
      return {
        dialogTableVisible: false,
        dialogTableVisibleMore: false,
        dialogEquipment: false,
        dialogManualTip: false,
        dialogManualOption: false,
        dialogProcess: false,
        originEquipment: [],
        endEquipment: [],
        props: {
          multiple: true,
          label: 'FamilyName',
          value: 'lId',
          children: 'Items',

        },
        activities: [{
          content: '数据文件处理中..',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-check',
          color: '#0bbd87'
        }, {
          content: '数据处理成功',
          color: '#0bbd87',
          icon: 'el-icon-check',
          size: 'large',
          type: 'primary',
        }],
        vals: [],
        val: [],
        idArr: [],//存储所有选择的id
        secondary: [],//单独存储二级数据
        list: [],//获取后台数据，重新组合，添加唯一标识和源端标识
        resultOrigin: [],//最终传给后台的源端数据
        resultEnd: [],//最终传给后台的末端数据
        ops: [],
        filterOps: [],//为清空第二个选择器
        isResouceShow: 0,
      }
    },
    computed: {
      ...mapGetters('layout', ['projectId']),
      headers() {
        return {
          'ProjectId': this.projectId,
          'Comming': 'adm',
          'Account': storage.get("user_name")
        }
      },
      dataId() {
        return {
          relType: this.ManualMaintenance.RelationType || '',
          zoneType: this.ManualMaintenance.ZoneType || '',
          projectId: this.projectId
        }
      },
      disOptions() {
        let arr = this.list.length && this.deepCopy(this.list).map(item => {
          item.Items.length && item.Items.map(i => {
            if (this.idArr.includes(i.lId)) {
              i.disabled = true
            }
            return i
          })
          return item
        })
        this.filterOps = arr
        return arr
      },
    },
    methods: {
      deepCopy(obj) {
        return JSON.parse(JSON.stringify(obj))
      },

      showCascader() {
        ++this.isResouceShow
        let copy = this.deepCopy(this.source)
        copy.forEach(item => {
          item.Items.forEach(child => {
            child.lId = this.list.length
            this.list.push(child)
            child.Items.forEach(i => {
              i.lId = i.Id + i.BlockId
              i.IsSource == true && this.ops.push([child.lId, i.lId])
              i.IsSource == false && this.filterOps.push([child.lId, i.lId])
            })
          })
        })
      },
      downloadProject(str) {
        let relType = this.ManualMaintenance.RelationType ? `?relType=${this.ManualMaintenance.RelationType}` : ''
        let zoneType = this.ManualMaintenance.ZoneType ? `&zoneType=${this.ManualMaintenance.ZoneType}` : ''
        let url;
        if (str === 'excel') {
          relType = this.ManualMaintenance.RelationType ? `&relType=${this.ManualMaintenance.RelationType}` : ''
          url = `/api/datacenter/graphic/export?code=对象ID${relType}${zoneType}`
        } else {
          url = `/api/datacenter/graphic/report-downloads${relType}${zoneType}`
        }
        return url
      },
      progress(event, file, fileList) {
        // console.log(event.file, fileList)
      },
      success(event, file, fileList) {
        this.dialogManualOption = true
        this.dialogProcess = true

      },
      error(event, file, fileList) {
        this.dialogManualOption = true
        this.dialogProcess = true

      },
      errBack() {
        this.dialogProcess = false
      },
      finish() {
        this.dialogProcess = false
        this.dialogManualOption = false
      },

      promptly() {
        if (this.isComputed.IsAutomatic && !this.isComputed.IsSource) { //需要自动计算并且不需要配置云末端
          this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
        }
        this.dialogTableVisible = false
      },
      sourceOptions(val) {
        // this.ops = val
        this.idArr = val.map(item => item[1])
        this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
        let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
        //接口需要的数据格式
        filterList.forEach(item => {
          let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Type, Statistics} = item
          this.resultOrigin.push({
            BlockId,
            BuildingId,
            Domain,
            // Id,
            MepSystemType,
            ProjectId,
            Source: true,
            SourceId: Id,
            SourceType: Type,
            Statistics
          })
        })
      },
      endOptions(val) {
        this.idArr = val.map(item => item[1])
        this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
        let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
        //接口需要的数据格式
        filterList.forEach(item => {
          let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Type, Statistics} = item
          this.resultEnd.push({
            BlockId,
            BuildingId,
            Domain,
            // Id,
            MepSystemType,
            ProjectId,
            Source: false,
            SourceId: Id,
            SourceType: Type,
            Statistics
          })
        })
      },
      computedUpdate() {
        if (!this.resultOrigin.length && !this.ops.length) {
          this.$message({
            showClose: true,
            message: '请选择源端设备类',
            type: 'warning'
          });
          return false
        } else {

          if (this.resultOrigin.length || this.resultEnd.length) {
            this.resultOrigin.push(...this.resultEnd)
            this.$emit('openComputed', this.resultOrigin)
          }
          this.dialogTableVisibleMore = false

        }
      },
    }
  }
</script>

<style scoped lang="less">
  .relation-maintain {
    .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>
