<template>
  <div class="level">
    <!-- 风险等级 -->
    <div class="row">
      <div
        style="font-size: 18px; cursor: pointer"
        class="label"
        @click="openModal('whFxModal')"
      >
        主要风险点
      </div>
      <div class="level-btn">
        <span v-for="(item, i) in fxd" :key="i">{{ item }}</span>
      </div>
    </div>
    <div class="row">
      <div
        style="font-size: 18px; cursor: pointer"
        class="label"
        @click="openModal('whYhModal')"
      >
        存在隐患数:
      </div>
      <div class="level-btn2" @click="openModal('yhModal')" style="cursor: pointer">{{ yhList.length }} <span>个</span></div>
    </div>
    <div class="level_bottom">
      <div class="code">
        <img :src="'data:image/png;base64,' + qrcode" alt="" v-if="qrcode" />
      </div>
      <div class="info" v-if="detail">
        <div class="title">督查督办</div>
        <ul>
          <li>
            <div class="no">1</div>
            <div class="cnt">
              {{ detail.glzthztjzd }}、{{ detail.wbdwzl
              }}<span class="blue">（管理单位、维保单位）</span>
            </div>
            <div class="oper">
              <template v-if="detail.sfts === '未提示'">
                <span class="error">未提示</span><span class="act">提示</span>
              </template>
              <span v-else class="success">已提示</span>
            </div>
          </li>
          <li>
            <div class="no">3</div>
            <div class="cnt">
              {{ detail.szsq }}<span class="blue">（所属社区）</span>
            </div>
            <div class="oper">
              <template v-if="detail.sftssq === '未推送'">
                <span class="error">未提示</span><span class="act">提示</span>
              </template>
              <span v-else class="success">已提示</span>
            </div>
          </li>
          <li>
            <div class="no">3</div>
            <div class="cnt">
              {{ detail.xzjd
              }}<span class="blue">（属地乡镇街道和相关区县行业部门）</span>
            </div>
            <div class="oper">
              <template v-if="detail.sftsxzjd === '未推送'">
                <span class="error">未督办</span><span class="act">督办</span>
              </template>
              <span v-else class="success">已督办</span>
            </div>
          </li>
          <li>
            <div class="no">4</div>
            <div class="cnt">
              {{ detail.qx }}政府<span class="blue"
                >（属地区县政府和相关市级行业部门）</span
              >
            </div>
            <div class="oper">
              <template v-if="detail.sftsqxzf === '未推送'">
                <span class="error">未督办</span><span class="act">督办</span>
              </template>
              <span v-else class="success">已督办</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="hzs" @click="openModal('qhyyModal')">
      历史火灾数: <span class="hzs-cnt">{{ hzs.length }}</span> 起
    </div>
  </div>
</template>

<script>
import { getFxdj, getYh, getLshz, getQrcode } from "@/api/detail.js";
export default {
  name: "Risklevel",
  data() {
    return {
      fxd: [],
      yhList: [],
      hzs: [],
      qrcode: null
    };
  },
  props: ["detail"],
  components: {},
  methods: {
    openModal(name) {
      if (name === "qhyyModal" || name === "yhModal") {
        this.$emit("openModal", {
          name,
          params: { gcjzmc: this.detail.gcjzmc },
        });
      } else {
        this.$emit("openModal", { name });
      }
    },
    rowClickHandler() {
      this.$router.push(`/h5?id=${"72042"}`);
    },
    getList() {
      const param = {
        pageNum: 1,
        pageSize: 1000,
        jzid: this.detail.id,
      };
      getFxdj(param).then((res) => {
        // console.log(res);
        if (res.data.rows) {
          this.fxd = res.data.rows.map((p) => p.yhxmmc);
        }
      });
      getYh({
        jzid: this.detail.id,
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        const list = [];
        if (res.data.rows) {
          res.data.rows.forEach((p) => {
            // list.push([])
          });
        }
        this.yhList = list;
      });
      getLshz({
        pageNum: 1,
        pageSize: 100,
        jzid: this.detail.id,
      }).then((res) => {
        const list = [];
        if (res.data.rows) {
          res.data.rows.forEach((p) => {
            list.push([p.zqsj, p.rysws, p.zjccss + "万元"]);
          });
        }
        this.hzs = list;
      });

      console.log(this.detail.fxdj);
      let color = '';
      if (this.detail.fxdj.indexOf('低风险') >= 0) {
        color = '#35c2ff';
      } else if (this.detail.fxjd.indexOf('一般风险') >= 0) {
        color = '#fbff3d';
      } else if (this.detail.fxjd.indexOf('较大风险') >= 0 || this.detail.fxjd.indexOf('较高风险') >= 0) {
        color = '#ff833d';
      } else if (this.detail.fxjd.indexOf('重大风险') >= 0) {
        color = '#ff0b0b';
      } else {
        color = '#35c2ff';
      }
      getQrcode({
        url: window.location.origin + "/h5?id=" + this.detail.id,
        color
      }).then((res) => {
        const data = JSON.parse(res.data.data);
        this.qrcode = data.qr_code;
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.level {
  padding: 12px 10px;
  .level-btn {
    // width: 100%;
    height: 25px;
    overflow: hidden;
    span {
      display: inline-block;
      width: 90px;
      height: 25px;
      background: #f18787;
      font-size: 14px;
      color: #fff;
      line-height: 25px;
      text-align: center;
      margin-right: 10px;
      border-radius: 2px;
    }
  }
  img {
    display: inline-block;
    width: 161px;
    height: 161px;
    margin-top: 10px;
  }
  .level_bottom {
    display: flex;
    align-items: start;

    .code {
      width: 161px;
      margin-right: 14px;
    }
    .info {
      flex: 1;
      padding-top: 10px;
      .title {
        height: 34px;
        font-size: 14px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        background-color: rgba(0, 163, 255, 0.3) !important;
      }

      ul {
        border: 1px dotted #1d525f;
        box-sizing: border-box;
        li {
          // border-bottom: 1px dotted #1d525f;
          box-sizing: border-box;
          padding: 2px 4px;
          height: 30px;
          line-height: 26px;
          display: flex;
          background: rgba(0, 213, 255, 0.1);
          border: 1px dashed rgba(0, 213, 255, 0.2);
          &:nth-last-child(1) {
            border-bottom: 0px;
          }
          span {
            text-align: center;
            font-size: 12px;
            &:nth-child(1) {
              flex: 0.1;
            }
            &:nth-child(2) {
              text-align: left;
              flex: 0.5;
            }
            &:nth-child(3) {
              flex: 0.4;
            }
          }

          .error {
            display: inline-block;
            color: #e84c4c;
            .action {
              display: inline-block;
              padding-left: 20px;
              text-decoration: underline;
              color: #44f1ff;
              cursor: pointer;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

.row {
  display: flex;
  margin-top: 12px;
  .label {
    width: 120px;
    line-height: 24px;
    background: url("../../../assets/images/dd_wh.png") 0 center no-repeat;
    background-size: 16px 16px;
    padding-left: 24px;
  }
  .level-btn2 {
    width: 50%;
    flex-grow: 1;
    display: flex;
    align-items: start;
    color: #ff4f4f;
    font-family: "Abel";
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 24px;
    span {
      color: #ffffff;
      font-size: 18px;
      margin-left: 5px;
    }
  }
}
.blue {
  color: #44f1ff;
}
.act {
  color: #44f1ff;
  text-decoration: underline;
  margin-left: 20px;
  cursor: pointer;
}
.no {
  width: 50px;
  text-align: center;
}
.oper {
  width: 100px;
  text-align: left;
}
.cnt {
  flex-grow: 1;
  width: 50%;
  text-align: center;
}
.success {
  background: url(../../../assets/images/dd-gou.png) 0 center no-repeat;
  background-size: 16px 16px;
  padding-left: 44px;
}
.hzs {
  cursor: pointer;
  height: 30px;
  line-height: 24px;
  position: absolute;
  right: 16px;
  top: 70px;
  font-family: "Abel";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  padding: 0 10px;
  /* identical to box height, or 200% */

  display: flex;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(9, 135, 225, 0.5) 0%,
    rgba(0, 148, 255, 0.185) 100%
  );
  border-radius: 3px;
  color: #ffffff;
  .hzs-cnt {
    font-size: 18px;
    padding: 0 5px;
  }
}
</style>
