<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
            :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
                    :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="启动计算"
                    placement="top"
                  >
                    <el-badge
                      class="item float-right"
                      :is-dot="relation.computationalState === 2 || relation.computationalState === 5"
                    >
                      <el-button
                        @click="computed(relation)"
                        :disabled="!relation.isSource && !relation.isAutomatic"
                        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.isSource"
                  >
                    <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"
    />
  </div>

</template>

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

  export default {
    name: "cardList",
    props: {
      content: Array,
      source: Array,
      TableVisibleMoreLoading: Boolean,
      // 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)

      },
      computed(relation) {
        this.isComputed = relation // 当前要计算的对象
        if (relation.relationType) {
          this.$emit('calcSpecial', relation)
          if (relation.isSource) {
            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>
