<template>
  <div>
    <div
      :key="index"
      v-for="(item,index) in content"
    >
      <p class="slave-relation-title">{{ item.graphTypeName }}
        <span>（主要连接对象按照标准字典显示）</span>
      </p>
      <section
        :key="child.graphTypeId"
        class="container"
        v-for="(child,childIndex) in item.childGraphicTypeList"
      >
        <p class="relation-text">
          <span class="iconfont icon-juxing"></span>
          <span @click="toDetail(child)" style="cursor:pointer;">
            {{ child.graphTypeName }}
            <i class="icon-zuzhiguanxi iconfont"/></span>
          <span class="pic-code">图类型编码：{{ child.graphTypeCode }}</span>
          <el-tooltip
            v-if="child.Note"
            :content="child.Note"
            placement="top">
            <i
              @click="explain"
              class="icon-shuoming iconfont"
            />
          </el-tooltip>
        </p>

        <el-row :gutter="24">
          <el-col
            :key="relation.Id"
            :span="8"
            v-for="(relation,relIndex) in child.relationTypeProjectList"
          >
            <el-card
              class="card "
              shadow="hover"
              style="position: relative;"

            >
              <!-- border:none-->
              <!--              <div v-show="relation.cardDisabled || relation.ComputationalState === 3 " class="mask"></div>-->
              <div v-show="relation.computationalState === 3 " class="mask"></div>
              <div style="overflow: hidden;">
                <el-tooltip
                  :content="relation.relationTypeName"
                  placement="top"
                >
                  <p class="relation-title reset-test reset-title">{{ relation.relationTypeName }}</p>
                </el-tooltip>
                <el-tooltip
                  :content="relation.relationTypeCode"
                  placement="top"
                >
                  <p class="asc reset-title reset-test">边类型编码：{{ relation.relationTypeCode }}</p>
                </el-tooltip>
                <p class="relation-title-icon reset-test fr">
                  <el-tooltip
                    v-if="relation.note"
                    :content="relation.note"
                    placement="top"
                    style="z-index: 3;position:relative;"
                  >
                    <i class="iconfont icon-warn icon"/>
                  </el-tooltip>
                </p>
              </div>
              <article>
                <el-row>
                  <el-col :span="13">
                    <div class="grid-content">
                      <p class="object">主要连接对象</p>
                      <el-tooltip
                        :content="relation.conneObject"
                        placement="top"
                      >
                        <p class="group reset-title">{{ relation.conneObject }}</p>
                      </el-tooltip>
                    </div>
                  </el-col>
                  <el-col :span="2">
                    <div class="grid-content">
                      <p class="thread"></p>
                    </div>
                  </el-col>
                  <el-col :span="9">
                    <div class="grid-content ">
                      <p class="line-number">连接数量</p>
                      <p :class="relation.count > 0? 'line-number-show' :'line-number-hide'">{{ relation.count }}</p>

                    </div>
                  </el-col>
                </el-row>
                <p class="last-computed">
                  <!--  <span v-show="relation.ComputationalState === 3 || relation.ComputationalState === 4">关系计算中...</span>-->
                  <!--                  <span v-show="relation.cardDisabled || relation.ComputationalState === 3">关系计算中...</span>-->
                  <span v-show="relation.computationalState === 3">关系计算中...</span>
                  <span v-show="relation.computationalState === 5">计算失败</span>
                  <span
                    v-show="relation.computationalState !== 3  && relation.computingTime">最后一次计算时间 {{ relation.computingTime }}</span>
                  <el-tooltip
                    :content="relation.computationalState === 2 ? '关系变更，请重新计算':'启动计算'"
                    placement="top"
                  >
                    <el-badge
                      class="item float-right"
                      :is-dot="relation.computationalState === 2 || relation.computationalState === 5"
                    >
                      <el-button
                        @click="computed(relation)"
                        :disabled="!relation.source && !relation.automatic "
                        circle
                        type="primary"
                        plain
                        icon="iconfont icon-changyongtubiao-mianxing-"
                        class="sm-button"
                      >
                        <!--style="background: #000;color: #fff"-->
                      </el-button>
                    </el-badge>
                  </el-tooltip>
                  <el-tooltip
                    content="手动编辑"
                    placement="top"
                  >
                    <el-button
                      :disabled="relation.manual === 1"
                      :style="{'border':(relation.manual=== 1? '1px solid #DCDFE6' :'')}"
                      @click="manual(relation)"
                      circle
                      class="float-right sm-button"
                      type="primary"
                      plain
                      icon="iconfont icon-bianji"

                    >
                    </el-button>

                  </el-tooltip>
                  <el-tooltip
                    content="设定设备对象源/末端"
                    placement="top"
                    v-if="relation.source"
                  >
                    <el-button
                      @click="equipment(relation)"
                      type="primary"
                      plain
                      circle
                      class="float-right sm-button"
                      icon="iconfont icon-23 "
                      style="transform: rotate(90deg);"
                    >
                    </el-button>
                  </el-tooltip>
                </p>
              </article>
            </el-card>
          </el-col>
        </el-row>
      </section>
    </div>
    <RelationMaintain
      :values="values"
      :source="source"
      ref="maintain"
      :isComputed="isComputed"
      :ManualMaintenance="ManualMaintenance"
      :TableVisibleMoreLoading="TableVisibleMoreLoading"
      @openComputed="openComputed"
      @RelationType="RelationType"
      @calcSpecialUpdate="calcSpecialUpdate"
    />
  </div>

</template>

<script>
import RelationMaintain from './Modal/RelationMaintain'

export default {
  name: "cardList",
  props: {
    content: Array,
    source: Array,
    TableVisibleMoreLoading: Boolean,
		computingNum: Number,
    // cardDisabled: Boolean
  },
  data() {
    return {
      values: {
        title: '关系维护',
        cancel: '取消',
        confirm: '确定',
        back: '返回',
        preservation: '保存',
        promptly: '立即计算',
        placeholder: '请选择',
        download: '下载模板（含数据）',
        done: '完成',
        underDesign: '高级配置页面正在设计中。。。',
        autoComputed: '根据现有数据自动计算',
        existComputed: '根据现有数据自动计算',
        existTitle: '计算方向使用的源端和末端如下：',
        originEquipment: '源端设备类：',
        endEquipment: '末端设备类：',
        device: '', //提示引导内容
        tips: '', //请前往以下功能页面维护
        optionTips: '', //请下载最新最新 xxxx 数据进行手动维护
        currentNum: '当前关系数量：',
        lastTime: '', //最后更新时间为
        uploadTxt: '将Excel文件拖到此处，或<em>单击上传Excel文件<em>',
        uploadTips: '上传的Excel数据将完全覆盖当前关系表（关系表先前数据不会保留）',
        inHand: '数据文件处理中...',
        dataFailed: '数据文件验证失败',
        allUpdateSuccess: 'xxxx全部更新成功',
        portionUpdateSuccess: ' xxxx关系部分更新成功',
        downloadFile: ' 下载报告文件',
        equipmentSetting: ''
      },
      isComputed: {}, // 当前要计算的对象
      ManualMaintenance: {},//手动编辑对象
    }
  },
  created() {
  },
  computed: {},

  methods: {
    explain() {
      // alert('explain click')
    },
    RelationType() {
      // this.cardDisabled = true
      this.$emit('RelationType', this.isComputed.relationType, this.isComputed.zoneType, this.isComputed)
    },
    calcSpecialUpdate(params) {
        this.$emit("calcSpecialUpdate", params, this.isComputed);
    },
    computed(relation) {
			if (this.computingNum >= 5) {
				this.$message.info("当前计算过多，稍等一下");
				return false;
			}
      this.isComputed = relation // 当前要计算的对象
      if (relation.relationType) {
        this.$emit('calcSpecial', relation)
        if (relation.source) {
          this.values.existComputed = `根据现有数据自动计算 <${ relation.relationTypeName }>`
          this.$refs.maintain.dialogTableVisibleMore = true
          this.$refs.maintain.showCascader(relation)
          this.$refs.maintain.handleSourceQuery()

        } else {
          this.values.autoComputed = `根据现有数据自动计算 <${ relation.relationTypeName }>`
          this.$refs.maintain.dialogTableVisible = true
        }
      } else {
        this.$message.warning("设计中")
        return false
      }
    },
    equipment(relation) { //配置源端末端
      this.values.equipmentSetting = `${ relation.relationTypeName } 源末端关系设置`
      this.$refs.maintain.dialogEquipmentOpen(relation)
      this.$refs.maintain.handleSourceQuery()
    },
    manual(relation) {
      let { manual, prompting, relationTypeName, computingTime } = relation;
      let device = prompting && prompting.split(','),
        tips = `请前往以下功能页面维护 <${ relationTypeName }>`,
        optionTips = `请下载当前最新 <${ relationTypeName }> 数据进行手动维护`,
        lastTime = `最后更新时间为 ${ computingTime ? computingTime : '' }`

      if (manual === 2) {
        this.values = { ...this.values, device, tips }
        this.$refs.maintain.dialogManualTip = true
      }
      if (manual === 3) {
        // if (relation.RelManualType) {
        if (relation.relationType) {
          this.values = { ...this.values, optionTips, lastTime }
          // this.$refs.maintain.dialogManualOption = true //导出excel 弹窗
          this.$router.push({
            path: "relationShip"
          })
          console.log(relation, 'relation')
          localStorage.setItem('RelManualType', relation.relManualType)
          localStorage.setItem('RelationTypeName', relation.relationTypeName)
          localStorage.setItem('RelationType', relation.relationType)
          localStorage.setItem('ZoneType', relation.zoneType ? relation.zoneType : '')
          localStorage.setItem('MainObject', relation.mainObject)
          localStorage.setItem('FromObject', relation.fromObject)
          localStorage.setItem('count', relation.count)
          localStorage.setItem('ComputingTime', relation.computingTime ? relation.computingTime : '')
        } else {
          this.$message.warning("设计中")
          return false
        }
      }
      this.ManualMaintenance = relation
    },

    openComputed(result) {
      this.$emit('openComputed', result)
    },

    //空间连接关系详情
    toDetail(detail) {
      return
      this.$router.push({
        name: 'relationDetail',
        query: {
          type: detail.graphTypeCode,
          RelationTypeProjectList: detail.relationTypeProjectList
        }
      })
    }
  },
  components: { RelationMaintain }
}
</script>

<style lang="less" scoped>
@color-text: #333;
@font-big: 600;
@font-small: 12px;
@font-code: #AAAAAA;
@pos-relative: relative;
@pos-absolute: absolute;
@pos-zero: 0;
@5px: 5px;

.slave-relation-title {
  color: @font-code;
  font-weight: 600;
  border-bottom: 1px dashed @font-code;
  padding-bottom: @5px;
}

.container {
  @media (max-width: 1500px) {
    .relation-title {
      max-width: 160px;
    }

    .group {
      white-space: normal !important;
    }

    .asc {
      max-width: 108px;
    }

    .thread {
      margin-left: 5px !important;
    }

    /deep/ .el-card__body {
      padding: 18px !important;
    }

    .sm-button {
      height: 30px;
      width: 30px;
      text-align: center;
      padding: 0;
    }

  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;

    .thread {
      border-left: 1px solid @font-code;
      margin-left: 10px;
      min-height: 36px;
      margin-top: 6px;
    }
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .reset-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .reset-test {
    float: left;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }

  .fr {
    float: right;
  }

  .el-card {
    margin: 10px 0;
  }

  .relation-text {
    overflow: hidden;
    margin-top: 10px;
    /*text-indent: 10px;*/
    margin-left: -3px;
    font-weight: @font-big;

    .pic-code {
      font-size: @font-small;
      color: @font-code;
      margin-left: @5px;
      font-weight: 400;
    }
  }

  .card {
    position: @pos-relative;

  }

  .mask {
    background: rgba(255, 255, 255, .6);
    position: @pos-absolute;
    top: @pos-zero;
    left: @pos-zero;
    right: @pos-zero;
    bottom: @pos-zero;
    user-select: none;
    z-index: 2
  }

  .relation-title {
    font-size: 20px;
    font-weight: @font-big;
    margin-right: 10px;

    .icon {
      display: block;
      float: right;
      color: #555;
      font-size: 18px;
    }
  }

  .relation-title-icon {
    font-size: 20px;
    font-weight: @font-big;
    overflow: hidden;

    .icon {
      display: block;
      float: right;
      color: #555;
      font-size: 18px;
    }
  }

  .asc {
    font-size: @font-small;
    color: @font-code;
  }

  .object {
    font-size: @font-small;
    color: @font-code;
    font-weight: @font-big;
  }

  .group {
    color: @color-text;
    font-weight: @font-big;
  }

  .line-number {
    font-size: @font-small;
    color: @font-code;
    font-weight: @font-big;
  }

  .line-number-show {
    color: @color-text;
    font-weight: @font-big;
  }

  .line-number-hide {
    color: @font-code;
    font-weight: @font-big;
  }


  article {
    overflow: hidden;
  }

  .last-computed {
    overflow: hidden;
    color: @font-code;

    .float-right {
      float: right;
      margin-left: @5px;
    }

    /deep/ .is-dot {
      margin-top: 7px;
      margin-right: @5px;
    }

  }
}
</style>
