<template>
  <div class="e-object-info">
    <div class="group-list-info">
      <div class="top">
        <div class="top-label">
          <svg-icon
            icon-class="A_product1"
            style="margin-right: 2px; height: 20px; width: 20px"
          />项目信息
          <span
            v-if="updateState === false"
            style="margin: 0px 15px 0 10px; font-weight: 200; font-size: 14px"
            >项目名称：{{ infoData.projectName }}</span
          >
        </div>
      </div>
    </div>
    <div class="group-list-table">
      <div class="table-row">
        <div class="table-row-col">
          <div class="title">项目ID</div>
          <div class="content">
            <span class="name">{{ infoData.projectId }}</span>
            <el-button
              type="text"
              size="small"
              @click.stop="copyText(infoData.projectId)"
              >复制</el-button
            >
          </div>
        </div>
        <div class="table-row-col">
          <div class="title">项目编号</div>
          <div class="content">
            <span class="group-id" :title="infoData.projectCode">{{
              infoData.projectCode
            }}</span>
          </div>
        </div>
        <div class="table-row-col">
          <div class="title">项目类型</div>
          <div class="content">
            <span class="group-id">{{ statusFormat(infoData) }}</span>
          </div>
        </div>
      </div>
      <div class="table-row">
        <div class="table-row-col">
          <div class="title">项目纬度</div>
          <div class="content">{{ infoData.projectLat }}</div>
        </div>

        <div class="table-row-col">
          <div class="title">项目经度</div>
          <div class="content">{{ infoData.projectLng }}</div>
        </div>

        <div class="table-row-col">
          <div class="title">项目状态</div>
          <div class="content">
            {{ infoData.projectStatus === "0" ? "启用" : "禁用" }}
          </div>
        </div>
      </div>
      <div class="table-row">
        <div class="table-row-col">
          <div class="title">总路设备</div>
          <div class="content">{{ infoData.projectDeviceName || "--" }}</div>
        </div>

        <div class="table-row-col" style="flex: 2 0 0%">
          <div class="title">项目地址</div>
          <div class="content">
            <span class="centent">{{ infoData.projectAddress }}</span>
          </div>
        </div>
      </div>

      <div class="table-row">
        <div class="table-row-col">
          <div class="title">创建时间</div>
          <div class="content">{{ infoData.createTime || "--" }}</div>
        </div>
        <div class="table-row-col" style="flex: 2 0 0%">
          <div class="title">行政区划</div>
          <div class="content">{{ infoData.regionalismFullName }}</div>
        </div>
      </div>
    </div>

    <!-- ---- -->

    <div class="group-list-info" style="margin-top: 20px">
      <div class="top">
        <div class="top-label">
          <svg-icon
            icon-class="A_product1"
            style="margin-right: 2px; height: 20px; width: 20px"
          />电价合同
          <span
            v-if="updateState === false"
            style="margin: 0px 15px 0 10px; font-weight: 200; font-size: 14px"
            >{{ contrctInfo.contractName }}</span
          >
        </div>
      </div>
    </div>

    <div class="group-list-table">
      <div class="table-row">
        <div class="table-row-col">
          <div class="title">合同ID</div>
          <div class="content">
            <span class="name">{{ contrctInfo.contractId }}</span>
            <el-button
              type="text"
              size="small"
              @click.stop="copyText(contrctInfo.contractId)"
              >复制</el-button
            >
          </div>
        </div>
        <div class="table-row-col">
          <div class="title">合同类型</div>
          <div class="content">
            <span class="group-id">{{ contrctInfo.contractTypeName }}</span>
          </div>
        </div>
        <div class="table-row-col">
          <div class="title">合同状态</div>
          <div class="content">
            <span class="group-id">{{
              contrctInfo.status === "0" ? "启用" : "禁用"
            }}</span>
          </div>
        </div>
      </div>

      <div class="table-row">
        <div class="table-row-col">
          <div class="title" style="height: 160px">合同规则</div>
          <div class="content" style="overflow: auto">
            <div
              class="crat-warp"
              v-for="item in contrctInfo.priceContractRuleList"
              :key="item.ruleNum"
            >
              <div class="title-span">{{ item.ruleName }}</div>
              <div
                class="time-wrap"
                v-if="contrctInfo.contractType === 'PEAK_VALLEY'"
              >
                <span class="time-title">时间:</span>
                <div class="time-val">
                  <span style="color: #3300ff">{{ item.minTime }}</span>
                  <span>~</span>
                  <span style="color: #3300ff">{{ item.maxTime }}</span>
                </div>
              </div>
              <div class="time-wrap" v-else>
                <div class="vlue-warp">
                  <span>最小值:</span>
                  <span>{{ item.minVal }}</span>
                </div>
                <div class="vlue-warp" >
                  <span>最大值:</span>
                  <span :title="item.maxVal">{{ item.maxVal }}</span>
                </div>
              </div>
              <div class="dj-wrap">
                <span class="dj-title">单价:</span>
                <span class="dj-value">{{ item.unitPrice }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script >
import { getContract } from "@/api/iot/contract";
import ElDescriptions from "@/components/Edescriptions";
import ElDescriptionsItem from "@/components/Edescriptions/src/descriptions-item";

export default {
  name: "EObjectInfo",
  components: {
    ElDescriptions,
    ElDescriptionsItem,
  },
  props: {
    infoData: {
      type: Object,
      require: true,
    },
    projectTypeOptions: {
      type: Array,
    },
  },
  watch: {
    infoData: {
      handler: function(val, oldVal) {
        if (val) {
          this.getContractById()
        }
      },
      deep: true
    }
  },
  data() {
    return {
      updateState: false,
      contrctInfo: {},
    };
  },
  created() {
    this.getContractById()
  },
  methods: {
    // 菜单状态字典翻译
    statusFormat(row) {
      return this.selectDictLabel(this.projectTypeOptions, row.industry);
    },
    copyText(val) {
      this.copeFu(val, this);
    },
    getContractById() {
      if (!this.infoData.contractId && this.infoData.contractId !== 0) {
        this.contrctInfo = {};
        return;
      }
      getContract(this.infoData.contractId).then((response) => {
        this.contrctInfo = response.data;
        this.$forceUpdate();
      });
    },
  },
};
</script>

<style lang="scss">
.e-object-info {
  .group-list-info {
    .top {
      text-align: left;
      width: 100%;
      float: left;
      height: 40px;
      .top-label {
        float: left;
        width: calc(100% - 200px);
        font-size: 16px;
        font-weight: 700;
        color: #373d41;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .el-input--medium {
          width: 150px;
        }
        .el-button--text {
          padding: 8px 12px;
          color: #333;
        }
        .el-button--text:hover {
          background-color: #d1dbe6;
          border-radius: 0;
          color: #1890ff;
        }
      }
      .top-button {
        float: left;
        text-align: right;
        width: 200px;
      }
    }
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    flex: 1;
    .title {
      line-height: 30px;
      font-size: 16px;
      font-weight: 700;
      color: #373d41;
      display: flex;
      align-items: center;
      flex: 1;
    }
  }
  .group-list-table {
    border-top: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    .table-row {
      display: flex;
      width: 100%;
      .table-row-col {
        display: flex;
        flex: 1 1 0%;
        overflow: hidden;
        font-size: 14px;
        .title {
          width: 180px;
          height: 48px;
          color: rgb(116, 119, 122);
          display: flex;
          align-items: center;
          background: rgb(250, 250, 252);
          border-bottom: 1px solid #d4d4d4;
          border-right: 1px solid #d4d4d4;
          padding: 0px 12px;
          margin-bottom: 0px;
          font-size: 15px;
          font-weight: 100;
        }
        .content {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex: 1 1 0%;
          overflow: hidden;
          color: #666;
          border-bottom: 1px solid #d4d4d4;
          border-right: 1px solid #d4d4d4;
          padding: 0px 12px;
          .name {
            display: inline-block;
            max-width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            overflow: hidden;
          }
          .group-id {
            margin-right: 8px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .notice-item {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #d3d5d5;
            margin-right: 3px;
          }
          .n {
            background: #0fc18a;
          }
          .secret {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .crat-warp {
    height: 100px;
    width: 200px;
    border: 1px solid #333;
    padding: 5px;
    border: 1px dotted #898989;
    height: 120px;
    width: 250px;
    margin: 5px;
    .title-span {
      height: 30px;
      font-size: 18px;
      border-bottom: 1px dotted #333;
      padding-left: 5px;
    }
    .time-wrap {
      height: 50px;
      display: flex;
      width: 100%;
      align-items: center;
      font-size: 16px;
      .time-title {
        display: block;
        width: 40px;
        text-align: end;
        margin-right: 5px;
      }
      .time-val {
        display: flex;
        font-size: 16px;
        width: calc(100% - 45px);
        justify-content: space-around;
      }
      .vlue-warp {
        width: 50%;
        display: flex;
        justify-content: center;
        > span:nth-child(1) {
          display: block;
          text-align: left;
          margin-right: 5px;
          width: 55px;
        }
        > span:nth-child(2) {
          display: block;
          width: calc(100% - 55px);
          text-align: center;
          color: #3300ff;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .dj-wrap {
      height: 35px;
      display: flex;
      align-items: center;
      font-size: 16px;
      .dj-title {
        display: block;
        width: 40px;
        text-align: end;
      }
      .dj-value {
        display: block;
        width: calc(100% - 45px);
        text-align: center;
        color: red;
      }
    }
  }
}
</style>
