<template>
  <!-- 预警闭环处置 -->
  <el-dialog
    class="hqyjcz-dialog"
    :visible="hqyjczShow"
    :before-close="hqyjczClose"
    :append-to-body="false"
    :modal-append-to-body="false"
  >
    <template #title>
      <div class="title">
        <div class="icon1"></div>
        <span>{{ dialogTitle }}预警闭环处置</span>
        <div class="icon2"></div>
      </div>
    </template>

    <div class="bottom">
      <div class="alert-list">
        <div class="title">
          <button
            @click="buttonBtn(1)"
            :class="{ buttonActive: buttonIndex === 1 }"
          >
            待处理预警
          </button>
          <button
            @click="buttonBtn(2)"
            :class="{ buttonActive: buttonIndex === 2 }"
          >
            已处理预警
          </button>
        </div>
        <div class="content">
          <div class="table-title">
            <p>时间</p>
            <p>预警等级</p>
            <p>预警项目</p>
            <p>预警点位</p>
          </div>
          <div class="table" v-if="buttonIndex === 1">
            <!-- <div
              class="row"
              v-for="(item, index) in 2"
              :key="item"
              @click="rowBtn(index)"
              :class="{ rowActive: rowIndex === index }"
            >
              <p>2021-08-13</p>
              <p>一级预警</p>
              <p>表面变形</p>
              <p>LD4</p>
            </div> -->
          </div>
          <div class="table" v-if="buttonIndex === 2">
            <div
              class="row"
              v-for="(item, index) in 1"
              :key="item"
              @click="rowBtn(index)"
              :class="{ rowActive: rowIndex === index }"
            >
              <p>2022-07-22</p>
              <p>黄色预警</p>
              <p>{{ dialogTitle }}预警</p>
              <p>库水位</p>
            </div>
          </div>
        </div>
      </div>
      <div class="alert-line">
        <div class="title">
          <button>处置进度</button>
        </div>
        <div class="content">
          <img src="@/assets/images/alert/bg2.png" v-if="imgShow" />
          <h4 v-if="!imgShow">黄色预警</h4>
          <div class="process-bigbox" v-if="!imgShow">
            <div class="process">
              <div class="process-top">
                <div class="process-box box1">
                  <p>数字孪生<br />水库智管</p>
                </div>
                <div class="arrow-right">
                  <p class="p xqyj">{{ dialogTitle }}预警</p>
                  <p class="p dxfa">推荐兴利<br />调度方案</p>
                </div>
                <div class="process-box box2">
                  <p>横锦水库<br />管理局</p>
                </div>
                <div class="arrow-right"></div>
                <div class="process-box box3">
                  <p>预警信息<br />核验上报</p>
                </div>
                <div class="arrow-right">
                  <p class="p p-middle">上报</p>
                </div>
                <div class="process-box box4">
                  <p>水务局</p>
                </div>
              </div>
              <div class="process-middle">
                <div class="process-box box10">
                  <p>生态环境局</p>
                </div>
                <div class="process-box box5">
                  <p>防汛防旱<br />指挥部</p>
                </div>
              </div>
              <div class="process-bottom">
                <div class="process-box box9">
                  <p>归档复盘</p>
                </div>
                <div class="arrow-left"></div>
                <div class="process-box box8">
                  <p>横锦水库<br />管理局</p>
                </div>
                <div class="arrow-left">
                  <p class="p p-middle">兴利调度</p>
                </div>
                <div class="process-box box7">
                  <p>水务局</p>
                </div>
                <div class="arrow-left">
                  <p class="p p-middle">下发</p>
                </div>
                <div class="process-box box6">
                  <p>社会治理中心、<br />镇街综合信息指挥室</p>
                </div>
              </div>
              <div class="process-bigBox">
                <p>义乌自来水公司</p>
                <p>东阳水投集团</p>
                <p>农业农村局</p>
                <p>相关乡镇、网格员</p>
              </div>
              <div class="arrow-top">
                <p class="p">优化算法&nbsp;\&nbsp;模型</p>
              </div>
              <div class="arrow-two-top">
                <p class="p p1">下发</p>
                <p class="p p2">下发</p>
              </div>
              <div class="arrow-bottom b1">
                <p class="p">上报</p>
              </div>
              <div class="arrow-bottom b2"></div>
              <div class="arrow-bottom b3">
                <p class="p">上报</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-dialog
        :visible.sync="conShow"
        :before-close="conClose"
        width="1200px"
        class="flagDialog2"
        :append-to-body="false"
        :modal-append-to-body="false"
      >
        <template #title>
          <div class="title">
            <div class="icon1"></div>
            <span>隐患处置进度</span>
            <div class="icon2"></div>
          </div>
        </template>
        <p class="p">Ⅱ级-黄色预警</p>
        <div class="content">
          <div class="img">
            <div class="process">
              <div class="process-top">
                <div class="process1"></div>
                <div class="process2"></div>
                <div class="process3"></div>
              </div>
              <div class="process-bottom">
                <div class="process7"></div>
                <div class="process6"></div>
                <div class="process5"></div>
                <div class="process4"></div>
              </div>
              <div class="jian1"></div>
              <div class="jian2"></div>
            </div>
          </div>
          <div class="dialog-mess" v-for="item in 1" :key="item">
            <div class="title">
              <h4>预警信息</h4>
              <div class="time">2021-06-22<span>15:23</span></div>
            </div>
            <div class="myp">
              <span>推送对象：</span>
              <div class="txt">安全责任人（张永泰）、安全巡查员（陈方军）</div>
            </div>
            <div class="myp">
              <span>预警内容：</span>
              <div class="txt">
                大坝水平位移监测点SJ1为5cm，超临界值大坝水平位移监测点SJ1为
                5cm，超临界值大坝水平位移监测点SJ1为5cm。
              </div>
            </div>
            <div class="img-box">
              <img src="" />
            </div>
          </div>
        </div>
      </el-dialog> -->
  </el-dialog>
</template>

<script>
export default {
  name: 'HqyjczDialog',
  props: {
    hqyjczShow: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: '旱情'
    }
  },
  data () {
    return {
      // 弹窗
      conShow: false,
      rowIndex: -1,
      buttonIndex: 1,
      buttonIndex2: 1,
      proIndex: 4,
      // 汛情预警处置流程弹窗中的图片
      imgShow: true,
      topChart: null
    }
  },
  methods: {
    hqyjczClose () {
      this.imgShow = true
      this.buttonIndex = 1
      this.rowIndex = -1
      this.$emit('hqyjcz-close', false)
    },
    conClose () {
      this.conShow = false
    },
    // 左侧列表按钮
    rowBtn (i) {
      this.rowIndex = i
      this.imgShow = false
    },
    // 右侧处理流程按钮
    progressBtn () {
      this.conShow = true
    },
    // 左侧俩按钮
    buttonBtn (num) {
      if (this.buttonIndex === num) return
      this.buttonIndex = num
      this.rowIndex = -1
      this.imgShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.box6 {
  width: 180px !important;
}
.hqyjcz-dialog ::v-deep {
  .el-dialog {
    width: 1680px;
    height: 900px;
    margin-top: 90px !important;
    // margin-bottom: 0 !important;
    .el-dialog__header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      padding: 0;
      background-color: #12407f;
      .title {
        display: flex;
        align-items: center;
        .icon1 {
          width: 23px;
          height: 15px;
          background: url("~@/assets/images/engineering/title_left.png") center /
            100% 100%;
        }
        .icon2 {
          width: 23px;
          height: 15px;
          background: url("~@/assets/images/engineering/title_right.png") center /
            100% 100%;
        }
        span {
          color: #fff;
          font-size: 20px;
          margin: 0 20px;
        }
      }
      .el-dialog__headerbtn {
        .el-dialog__close {
          &::before {
            color: #fff;
          }
        }
      }
    }
    .el-dialog__body {
      display: flex;
      justify-content: center;
      height: 850px;
      padding: 0;
      background-color: #0c3061;
      overflow: hidden;
      .bottom {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 10px;
        .alert-list {
          display: flex;
          flex-direction: column;
          width: 586px;
          height: 100%;
          margin-right: 10px;
          background-color: #0c3061;
          .title {
            height: 40px;
            background-color: #12407f;
            button {
              width: 180px;
              height: 100%;
              text-align: center;
              line-height: 40px;
              background-color: transparent;
              color: #fff;
              font-size: 18px;
            }
            .buttonActive {
              background: #005fa9;
            }
          }
          .content {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 10px;
            background-color: #0c3061;
            .table-title {
              display: flex;
              align-items: center;
              height: 40px;
              background-color: rgba(96, 255, 246, 0.2);
              p {
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
                color: #fff;
                font-size: 16px;
              }
            }
            .table {
              height: 740px;
              background-color: rgba(96, 255, 246, 0.05);
              overflow: auto;
              &::-webkit-scrollbar {
                // 滚动条整体样式
                width: 6px; // 竖向滚动条宽度
                height: 0; // 横向滚动条高度
              }
              &::-webkit-scrollbar-thumb {
                // 滚动条内滑块样式
                background-color: rgba(109, 157, 188, 1);
                border-radius: 3px;
              }
              &::-webkit-scrollbar-track {
                // 滚动条轨道样式
                background-color: rgba(42, 92, 138, 1);
              }
              .row {
                display: flex;
                align-items: center;
                height: 50px;
                margin: 1px;
                background-color: rgba(96, 255, 246, 0.05);
                cursor: pointer;
                &:hover {
                  background-color: rgba(96, 255, 246, 0.35);
                }
                &.rowActive {
                  background-color: rgba(96, 255, 246, 0.35) !important;
                }
                p {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex: 1;
                  color: #fff;
                  font-size: 16px;
                }
              }
            }
          }
        }
        .alert-line {
          position: relative;
          flex: 1;
          background-color: #0c3061;
          .title {
            height: 40px;
            background-color: #12407f;
            button {
              width: 180px;
              height: 100%;
              text-align: center;
              line-height: 40px;
              background-color: transparent;
              color: #fff;
              font-size: 18px;
              background-color: #005fa9;
              cursor: default;
            }
          }
          .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 790px;
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 380px;
              height: 248px;
            }
            h4 {
              width: 100%;
              height: 40px;
              line-height: 40px;
              color: #ff4d4d;
              text-align: center;
              font-size: 16px;
              font-weight: 400;
            }
            .process-bigbox {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 100%;
              height: 424px;
              padding: 10px;
              background-color: rgba(96, 255, 246, 0.05);
              .process {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                width: 974px;
                height: 100%;
                color: #fff;
                font-size: 16px;
                text-align: center;
                .process-box {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 130px;
                  height: 81px;
                  background: url("~@/assets/images/flood/process1/process_box_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/process_box_green.png")
                      no-repeat center / 100% 100%;
                  }
                  p {
                    line-height: 20px;
                  }
                }

                .process-top {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                }
                .process-middle {
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  padding-left: 128px;
                  .process-box:nth-child(1) {
                    margin-right: 149px;
                  }
                }
                .process-bottom {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                }
                // 最后一个
                .process-bigBox {
                  display: flex;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  position: absolute;
                  top: 167px;
                  left: 181px;
                  width: 320px;
                  height: 72px;
                  p {
                    width: 160px;
                    height: 36px;
                    line-height: 36px;
                    background: url("~@/assets/images/flood/process1/process_bigBox_orange.png")
                      no-repeat center / 100% 100%;
                  }
                }
                // 以下都是箭头
                .arrow-demo {
                  width: 60px;
                  height: 12px;
                  background-color: transparent;
                }
                .arrow-right {
                  position: relative;
                  width: 139px;
                  height: 12px;
                  background: url("~@/assets/images/flood/process1/arrow_right_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_right_green.png")
                      no-repeat center / 100% 100%;
                  }
                }
                .arrow-left {
                  position: relative;
                  width: 139px;
                  height: 12px;
                  background: url("~@/assets/images/flood/process1/arrow_left_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_left_green.png")
                      no-repeat center / 100% 100%;
                  }
                  p {
                    margin-left: 5px;
                  }
                }
                .arrow-top {
                  position: absolute;
                  width: 13px;
                  height: 240px;
                  top: 82px;
                  left: 59px;
                  background: url("~@/assets/images/flood/process1/arrow_top_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_top_green.png")
                      no-repeat center / 100% 100%;
                  }
                  p {
                    width: 120px;
                    padding: 0;
                    line-height: 26px;
                    top: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
                .arrow-two-top {
                  position: absolute;
                  width: 553px;
                  height: 79px;
                  right: 85px;
                  bottom: 82px;
                  background: url("~@/assets/images/flood/process1/arrow_two_top_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_two_top_green.png")
                      no-repeat center / 100% 100%;
                  }
                  .p {
                    left: 0;
                    transform: translate(0, 0);
                    top: 23px;

                    &.p1 {
                      left: -22px;
                    }
                    &.p2 {
                      left: 265px;
                    }
                  }
                }
                .arrow-bottom {
                  position: absolute;
                  width: 13px;
                  height: 81px;
                  background: url("~@/assets/images/flood/process1/arrow_bottom_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_bottom_green.png")
                      no-repeat center / 100% 100%;
                  }
                  &.b1 {
                    top: 80px;
                    right: 60px;
                    p {
                      top: 45%;
                      transform: translate(-50%, -50%);
                    }
                  }
                  &.b2 {
                    top: 243px;
                    right: 40px;
                  }
                  &.b3 {
                    top: 80px;
                    right: 339px;
                    p {
                      top: 45%;
                      transform: translate(-50%, -50%);
                    }
                  }
                }
                .arrow-lb {
                  position: absolute;
                  width: 187px;
                  height: 79px;
                  top: 83px;
                  right: 90px;
                  background: url("~@/assets/images/flood/process1/arrow_lb_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_lb_green.png")
                      no-repeat center / 100% 100%;
                  }
                }
                .arrow-lt {
                  position: absolute;
                  width: 187px;
                  height: 79px;
                  top: 243px;
                  right: 90px;
                  background: url("~@/assets/images/flood/process1/arrow_lt_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_lt_green.png")
                      no-repeat center / 100% 100%;
                  }
                  p {
                    top: 57%;
                    transform: translate(-50%, -50%);
                  }
                }
                .p {
                  position: absolute;
                  left: 50%;
                  transform: translateX(-50%);
                  height: 26px;
                  padding: 6px 14px;
                  background-color: rgba(0, 0, 0, 0.6);
                  border-radius: 4px;
                  font-size: 14px;
                  text-align: center;
                  color: #998959;
                  white-space: nowrap;
                  // 上面
                  &.xqyj {
                    width: 120px;
                    top: -26px;
                    color: #1691a2;
                  }
                  &.dxfa {
                    width: 120px;
                    top: 12px;
                    height: auto;
                    line-height: 18px;
                    color: #1691a2;
                  }
                  &.p-middle {
                    top: -7px;
                  }
                  // 下面
                }
                .arrow-small-left {
                  width: 60px;
                  height: 12px;
                  background: url("~@/assets/images/flood/process1/arrow_small_left_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_small_left_green.png")
                      no-repeat center / 100% 100%;
                  }
                }
                .arrow-three-left-orange {
                  width: 60px;
                  height: 84px;
                  background: url("~@/assets/images/flood/process1/arrow_three_left_orange.png")
                    no-repeat center / 100% 100%;
                  &.green {
                    background: url("~@/assets/images/flood/process1/arrow_three_left_green.png")
                      no-repeat center / 100% 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.flagDialog2 ::v-deep {
  .el-dialog {
    display: flex;
    flex-direction: column;
    height: 900px;
    margin-top: 90px !important;
    margin-bottom: 0 !important;
    .el-dialog__header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      padding: 0;
      background-color: #12407f;
      .title {
        display: flex;
        align-items: center;
        .icon1 {
          width: 23px;
          height: 15px;
          background: url("~@/assets/images/engineering/title_left.png") center /
            100% 100%;
        }
        .icon2 {
          width: 23px;
          height: 15px;
          background: url("~@/assets/images/engineering/title_right.png") center /
            100% 100%;
        }
        span {
          color: #fff;
          font-size: 20px;
          margin: 0 20px;
        }
      }
      .el-dialog__headerbtn {
        .el-dialog__close {
          &::before {
            color: #fff;
          }
        }
      }
    }
    .el-dialog__body {
      flex: 1;
      background-color: #0c3061;
      padding: 0 20px 25px;
      overflow: hidden;
      .p {
        width: 100%;
        height: 56px;
        line-height: 56px;
        // color: #ff4d4d;
        color: orange;
        text-align: center;
        font-size: 16px;
      }
      .content {
        width: 100%;
        height: 770px;
        background-color: transparent;
        overflow: auto;
        &::-webkit-scrollbar {
          // 滚动条整体样式
          width: 10px; // 竖向滚动条宽度
          height: 0; // 横向滚动条高度
        }
        &::-webkit-scrollbar-thumb {
          // 滚动条内滑块样式
          background-color: #5b9ebf;
          border-radius: 2px;
        }
        &::-webkit-scrollbar-track {
          // 滚动条轨道样式
          background-color: #2a5c8a;
        }
        .img {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 264px;
          background-color: rgba(96, 255, 246, 0.05);
          margin-bottom: 10px;
          .process {
            margin: 0;
            margin-left: 5px;
            .process1,
            .process2,
            .process3,
            .process4,
            .process5,
            .process6,
            .process7 {
              cursor: default;
            }
          }
        }
        .dialog-mess {
          position: relative;
          width: 100%;
          padding: 20px 30px;
          background-color: rgba(96, 255, 246, 0.05);
          margin-bottom: 10px;
          .title {
            display: flex;
            height: 16px;
            color: #60fff6;
            border-left: 2px solid #60fff6;
            padding-left: 12px;
            white-space: nowrap;
            margin-bottom: 30px;
            h4 {
              font-size: 16px;
              margin-right: 20px;
            }
            .time {
              margin-top: 2px;
              font-size: 14px;
              span {
                margin-left: 10px;
              }
            }
          }
          .myp {
            display: flex;
            color: #e0e4e9;
            margin-bottom: 30px;
            font-size: 14px;
            span {
              height: 100%;
            }
            .txt {
              width: 440px;
            }
          }
          .myp:last-child {
            margin-bottom: 0;
          }
          .img-box {
            position: absolute;
            top: 50%;
            left: 620px;
            transform: translateY(-50%);
            height: 114px;
            img {
              width: 114px;
              height: 114px;
              margin-right: 6px;
            }
            img:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
