<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 :gutter="20" style="margin-bottom: 20px">
          <el-col :span="12">
            <p>源端设备类：</p>
            <el-select
              v-model="setValue"
              placeholder="请选择"
              :props="props"
              multiple
              disabled
            >
              <el-option
                v-for="(item,index) in setOriginOption"
                :key="index"
                :label="item.label"
                :value="item.value"
                disabled
              />
            </el-select>
          </el-col>
          <el-col :span="12">
            <p>末端设备类：</p>
            <el-select
              v-model="setEndValue"
              placeholder="请选择"
              :props="props"
            >
              <el-option
                v-for="(item,index) in setEndOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                disabled
              />
            </el-select>
          </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"
    >
      <h4>{{ values.equipmentSetting }}</h4>
      <el-row :gutter="20">
        <el-col :span="12">
          <p>源端设备类：</p>
          <el-tooltip placement="top" :disabled="!sourceSideList.length">
						<div slot="content">
							<ul>
								<li  v-for="item in sourceSideList" :key="item.sourceType">
									{{`${oraginOption.find(e => e.value === item.sourceType)? oraginOption.find(e => e.value === item.sourceType).label : ""}：${item.sourceCount}个`}}
								</li>
							</ul>
						</div>
            <el-select
                v-model="value"
                placeholder="请选择"
                multiple
                @change="changeVal"
            >
                <el-option
                v-for="item in oraginOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
        	</el-tooltip>
        </el-col>
        <el-col :span="12">
          <p>末端设备类：</p>
          <el-select
            v-model="endValue"
            placeholder="请选择"
          >
            <el-option
              v-for="item in endOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              disabled
            />
          </el-select>
        </el-col>
      </el-row>
      <footer
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogEquipment = false">{{ values.cancel }}</el-button>

        <el-button
          type="primary"
          @click="handleAddSource"
          :disabled="disabled"
        >{{ values.preservation }}
        </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="`${baseUrl}${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 '@/utils/storageUtil'
// import {addSource, sourceQuery} from "@/api/relation/api";
import deviceList from "@/data/old-adm/deviceList"
import { baseUrl, dataCenter } from '@/utils/scanUtil'
import Relation from '@/controller/old-adm/relationController'

const { addSource, sourceQuery } = Relation

export default {
  name: "RelationMaintain",
  props: ['values', 'isComputed', 'source', 'TableVisibleMoreLoading', 'ManualMaintenance'],
  created() {
  },
  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,
      RelationTypeName: '',//卡片名称
      value: [],
      oraginOption: [],
      endValue: [],
      endOption: [],
      setValue: [],
      setOriginOption: [],
      setEndValue: [],
      setEndOptions: [],
	    sourceSideList: [],
      disabled: false,
			baseUrl: baseUrl,
      dataCenter: dataCenter
    }
  },

  computed: {
    ...mapGetters('layout', ['projectId']),
    headers() {
      return {
        //头信息中的 ProjectId 改为 projectId    nh-2021.11.25
        '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))
    },
    //查询原末端回显数据
    handleSourceQuery() {
      let param = {
        // filters: `projectId='${this.projectId}';calcName='${this.RelationTypeName}'`
        calcName: this.RelationTypeName
      }
      sourceQuery(param, res => {
        this.value = []
        this.setValue = []
				this.sourceSideList = res.content ? res.content : [];
        res.content && res.content.forEach(({sourceType}) => sourceType && this.value.push(sourceType))
        //启动计算
        res.content && res.content.forEach(({sourceType}) => sourceType && this.setValue.push(sourceType))
        // this.setOriginOption = this.oraginOption.forEach(i => this.setValue.includes(i.value))
        this.changeVal(this.value)
        this.setValue && this.handleSetValue()
      })
    },
    dialogEquipmentOpen(relation) { //设定源末端
      this.RelationTypeName = relation.relationTypeName
      this.oraginOption = deviceList[relation.relationTypeName] && deviceList[relation.relationTypeName].filter(i => i.select)
      this.data = deviceList[relation.relationTypeName]
      this.disabled = this.data != undefined ? false : true
      // console.log(this.data, relation.RelationTypeName)
      this.dialogEquipment = true

    },
    changeVal(val) {
      //  末端展示数据
      this.endOption = this.data && this.data.filter(i => !val.includes(i.value))
      //  启动计算末端展示数据
      // this.setEndOptions = this.data && this.data.filter(i => !val.includes(i.value))

      this.sourceList = []
      val.forEach(i => this.sourceList.push({
        sourceType: i,
        projectId: this.projectId,
        calcName: this.RelationTypeName
      }))
    },

    handleAddSource() { //保存设备类
      let params = {}
      if (this.sourceList.length) {
        params = {
          content: this.sourceList
        }

      } else {
        params = {
          content: [{
            projectId: this.projectId,
            calcName: this.RelationTypeName
          }]
        }
      }
      addSource(params, res => {
        this.$message.success('保存成功')
      })
      this.dialogEquipment = false
    },
    // 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])
    //       })
    //     })
    //   })
    // },
    showCascader(relation) {
      this.RelationTypeName = relation.relationTypeName


    },
    handleSetValue() {
      let device = deviceList[this.RelationTypeName]
      this.setOriginOption = device && device.filter(i => this.setValue.includes(i.value))
      this.setEndOptions = device && device.filter(i => !this.setValue.includes(i.value))
    },
    downloadProject(str) {
      let relType = this.ManualMaintenance.RelationType ? `&relType=${this.ManualMaintenance.RelationType}` : ''
      let zoneType = this.ManualMaintenance.ZoneType ? `&zoneType=${this.ManualMaintenance.ZoneType}` : null
      let url;
      if (str === 'excel') {
        relType = this.ManualMaintenance.RelationType ? `&relType=${this.ManualMaintenance.RelationType}` : ''
        // url = `${baseUrl}${dataCenter}/graphic/export?code=对象ID${relType}${zoneType}`
        if (zoneType) {
          url = `${baseUrl}${dataCenter}/graphic/export?projectId=${this.projectId}${relType}${zoneType}&code=对象ID`

        } else {
          url = `${baseUrl}${dataCenter}/graphic/export?projectId=${this.projectId}${relType}&code=对象ID`
        }
      } else {
        url = `${baseUrl}${dataCenter}/graphic/report-downloads?projectId=${this.projectId}${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.automatic && !this.isComputed.source) { //需要自动计算并且不需要配置云末端
        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() {
      this.dialogTableVisibleMore = false
      let params = {
        projectId: this.projectId,
        relationType: this.isComputed.relationType
      }
      this.$emit("calcSpecialUpdate", params);
    },
  }
}
</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>










