<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>

        <!--        <getCascader :RelationTypeName="RelationTypeName" :number="number"/>-->
        <!--        <el-row :span="24" style="margin-top: 10px">-->
        <!--          <el-col :span="8">-->
        <!--            <p class="demonstration">{{values.originEquipment}}</p>-->
        <!--            <el-select v-model="deviceValue" multiple placeholder="请选择">-->
        <!--              <el-option-->
        <!--                v-for="item in deviceGroup"-->
        <!--                :key="item.value"-->
        <!--                :label="item.label"-->
        <!--                :value="item.value">-->
        <!--              </el-option>-->
        <!--            </el-select>-->
        <!--            <el-cascader-->
        <!--                :key="isResouceShow"-->
        <!--                :options="list"-->
        <!--                v-model="ops"-->
        <!--                :props="props"-->
        <!--                @change="sourceOptions"-->
        <!--                collapse-tags-->
        <!--                clearable-->
        <!--            />-->
        <!--          </el-col>-->
        <!--          <el-col :span="8">-->
        <!--            <p class="demonstration">{{values.endEquipment}}</p>-->

        <!--            <el-cascader-->
        <!--                :options="list"-->
        <!--                v-model="filterOps"-->
        <!--                :key="isResouceShow"-->
        <!--                :props="props"-->
        <!--                @change="endOptions"-->
        <!--                collapse-tags-->
        <!--                clearable-->
        <!--            />-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <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 in setOriginOption"
                :key="item.value"
                :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 in setEndOptions"
                :key="item.value"
                :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"-->
    <!--    >-->
    <!--      <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="dialogEquipment"
    >
      <h4>{{values.equipmentSetting}}</h4>
      <el-row :gutter="20">
        <el-col :span="12">
          <p>源端设备类：</p>
          <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-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>
      <!--      <setCascader @change="changeCader" :RelationTypeName="RelationTypeName"/>-->
      <!--      <el-row :span="24" style="margin-top: 15px">-->
      <!--        <el-col :span="8">-->
      <!--          <p class="">{{values.originEquipment}}</p>-->
      <!--          <el-select v-model="assetValue" placeholder="请选择" clearable filterable size="small" @change="changeVal">-->
      <!--            <el-option v-for="item in assetOptions" :key="item.Code" :label="item.Name" :value="item.Code"></el-option>-->
      <!--          </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="/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'
  import {addSource, calcSpecial, sourceQuery} from "@/api/relation/api";
  import deviceList from "@/data/deviceList.js"

  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: [],
        disabled: false
      }
    },

    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))
      },
      //查询原末端回显数据
      handleSourceQuery() {
        let param = {
          Filters: `ProjectId='${this.projectId}';CalcName='${this.RelationTypeName}'`
        }
        sourceQuery(param, res => {
          this.value = []
          this.setValue = []
          res.Content && res.Content.forEach(({SourceType}) => this.value.push(SourceType))
          //启动计算
          res.Content && res.Content.forEach(({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() { //保存设备类
        if (this.sourceList.length) {
          let params = {
            Content: this.sourceList
          }
          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 = `/api/datacenter/graphic/export?code=对象ID${relType}${zoneType}`
          if (zoneType) {
            url = '/api/datacenter/graphic/export?code=对象ID' + relType + zoneType

          } else {
            url = '/api/datacenter/graphic/export?code=对象ID' + relType
          }
        } 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
        //
        // }
        // this.resultOrigin.push(...this.resultEnd)
        // this.$emit('openComputed', this.resultOrigin)
        this.dialogTableVisibleMore = false
        let params = {
          ProjectId: this.projectId,
          RelationType: this.isComputed.RelationType
        }
        calcSpecial(params, res => {
          this.$message.success('计算成功')
        })

      },
    }
  }
</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>










