<template>
  <div class="project-details-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">{{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">
            <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 >{{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";

export default {
  name: "ProjectInfo",
  props: ["infoData"],
  data() {
    const validatorNull = (rule, value, callback) => {
      callback();
    };
    return {
      updateState: false,
      prodtreeOptions: [],
      modelList: [],
      showProdSecret: false,
      temp: {
        deviceName: "",
        deviceId: undefined
      },
      rules: {},
      projectTypeOptions: {},
      contrctInfo: {}
    };
  },
  created() {
    this.getDicts("project_industry").then(response => {
      this.projectTypeOptions = response.data;
    });
    this.getContractById();
  },
  watch: {
    infoData(val) {
      if (val) {
        this.getContractById();
      }
    }
  },
  methods: {
    getContractById() {
      if (!this.infoData.contractId && this.infoData.contractId !== 0) {
        return;
      }
      getContract(this.infoData.contractId).then(response => {
        this.contrctInfo = response.data;
        // this.contrctInfo.priceContractRuleList = arr || [];
      });
    },
    // 菜单状态字典翻译
    statusFormat(row) {
      return this.selectDictLabel(this.projectTypeOptions, row.industry);
    },
    copyText(val) {
      this.copeFu(val, this);
    },
    // 设备修改只能修改名称
    handleUpdate(row) {
      this.newTemp();
      this.temp = Object.assign({}, row);
      this.updateState = true;
    },
    newTemp() {
      this.temp = {
        deviceName: "",
        deviceId: undefined
      };
    }
  }
};
</script>

<style lang="scss">
.project-details-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;
          }
          .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;
          }
        }
      }
    }
  }
  .eldaialog-wrap {
    .el-dialog__header {
      border-bottom: 1px solid #747373;
    }
    .el-radio {
      width: 90px;
    }
    .el-dialog__body {
      padding: 0px;
    }
    .cus-itme.el-form-item--mini .el-form-item__content {
      margin-left: 0px !important;
    }
    .select {
      // width: 92%;
      display: inline-block;
      width: calc(92% - 50px);
      display: inline-block;
      float: left;
      margin-right: 4px;
      .el-input {
        width: 100%;
      }
    }
    .el-textarea {
      width: 92%;
      width: calc(92% - 50px);
      width: 100%;
    }
    .el-input {
      width: 92%;
      width: calc(92% - 50px);
      width: 100%;
    }
    .info {
      width: 100%;
      float: left;
      margin-bottom: 15px;
      /* margin-top: 13px; */
      margin-left: -10px;
      font-size: 16px;
      font-weight: 600;
    }
    .span {
      width: calc(100% - 91px);
      display: block;
      content: "";
      height: 1px;
      /* width: 100%; */
      border-top: 1px dashed #ecedee;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      margin-left: 80px;
      margin-top: -10px;
    }
    .form-buttons-div {
      height: 45px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 10px;
      border-top: 1px solid #747373;
    }
  }

  .group-dialog {
    .el-dialog__header {
      border-bottom: 1px solid #ccc;
    }
    .el-dialog__body {
      padding: 28px;
      .el-form-item {
        margin-bottom: 0;
        .el-form-item__label {
          line-height: 30px;
        }
      }
    }
  }
  .crat-warp {
    height: 100px;
    width: 200px;
    border: 1px solid #333;
    padding: 5px;
    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;
        }
      }
    }
    .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>
