<template>
  <div class="enterprise-container">
    <div class="tab-main">
      <div
        class="tab-item"
        :class="active == index ? 'activeTab' : ''"
        v-for="(item, index) in tabList"
        :key="item.value"
        @click="changeTab(item.name, index)"
      >
        {{ item.name }}
        <div class="tab-line" v-show="active == index"></div>
      </div>
    </div>
    <div class="container-box" ref="targetElement">
      <div class="timer-shaft" v-if="active == 0">
        <div class="timer-item">
          <div class="circle" style="top: 0.08rem">
            <img src="@/assets/image/vxEwm/big-circle2.png" alt="" />
          </div>
          <div class="circle-line" style="top: 0.08rem; height: 135%"></div>
          <div class="data-mian">
            <div class="timer-line-title enterprise-name">
              {{ enterpriseName }}
            </div>
          </div>
        </div>
        <div class="timer-item">
          <div class="circle">
            <img src="@/assets/image/vxEwm/circle.png" alt="" />
          </div>
          <div class="circle-line"></div>
          <div class="row-cell">
            <div class="cell-box">
              <div class="left-icon-name">
                <div class="left-icon">
                  <img src="@/assets/image/vxEwm/row-cell-1.png" alt="" />
                </div>
                <div class="left-name">日常巡查</div>
              </div>
              <div class="right-data-unit">
                <div class="right-data">
                  {{ zhengchang.countValue ? zhengchang.countValue : 0 }}
                </div>
                <div class="right-unit">次</div>
              </div>
            </div>
          </div>
        </div>
        <div class="timer-item">
          <div class="circle">
            <img src="@/assets/image/vxEwm/circle.png" alt="" />
          </div>
          <div class="circle-line"></div>
          <div class="row-cell">
            <div class="two-rows">
              <div class="top-row">
                <div class="left-icon-name">
                  <div class="left-icon">
                    <img src="@/assets/image/vxEwm/row-cell-3.png" alt="" />
                  </div>
                  <div class="left-name">风险隐患</div>
                </div>
                <div class="right-data-unit">
                  <div class="right-data">{{ yinhuanSum }}</div>
                  <div class="right-unit">条</div>
                </div>
              </div>
              <div class="line"></div>
              <div class="bottom-row">
                <div>
                  <span class="unit">未派单</span>
                  <span class="unit-num" style="color: #f563cd">
                    {{ weipandan.countValue || 0 }}
                  </span>
                  <span class="unit"> 条</span>
                </div>
                <div>
                  <span class="unit">已派单</span>
                  <span class="unit-num" style="color: #ff9600">
                    {{ yipaidan.countValue || 0 }}
                  </span>
                  <span class="unit"> 条</span>
                </div>
                <div>
                  <span class="unit">已整改</span>
                  <span class="unit-num" style="color: #4cbaf3">
                    {{ yizhenggai.countValue || 0 }}
                  </span>
                  <span class="unit"> 条</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="timer-item">
          <div class="circle">
            <img src="@/assets/image/vxEwm/circle.png" alt="" />
          </div>
          <div class="circle-line"></div>
          <div class="row-cell">
            <div class="two-rows">
              <div class="top-row">
                <div class="left-icon-name">
                  <div class="left-icon">
                    <img src="@/assets/image/vxEwm/row-cell-3.png" alt="" />
                  </div>
                  <div class="left-name">整改工单</div>
                </div>
                <div class="right-data-unit">
                  <div class="right-data">
                    {{ gongdanSum ? gongdanSum : 0 }}
                  </div>
                  <div class="right-unit">个</div>
                </div>
              </div>
              <div class="line"></div>
              <div class="bottom-row">
                <div></div>
                <div>
                  <span class="unit">未处理</span>
                  <span class="unit-num" style="color: #f563cd">
                    {{ weigongdan ? weigongdan : 0 }}
                  </span>
                  <span class="unit"> 条</span>
                </div>

                <div>
                  <span class="unit">已处理</span>
                  <span class="unit-num" style="color: #4cbaf3">
                    {{ yigongdan ? yigongdan : 0 }}</span
                  >
                  <span class="unit"> 条</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="timer-item">
          <div class="circle">
            <img src="@/assets/image/vxEwm/circle.png" alt="" />
          </div>
          <!-- <div class="circle-line"></div> -->
          <div class="row-cell">
            <div class="cell-box">
              <div class="left-icon-name">
                <div class="left-icon">
                  <img src="@/assets/image/vxEwm/row-cell-3.png" alt="" />
                </div>
                <div class="left-name">企业提交整改</div>
              </div>
              <div class="right-data-unit">
                <div class="right-data">
                  {{ zhenggaiInfo ? zhenggaiInfo : 0 }}
                </div>
                <div class="right-unit">次</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import xApi from '../../../api/xApi'
export default {
  data() {
    return {
      enterpriseName: '',
      active: 0,
      tabList: [
        { name: '企业动态', value: 0 },
        { name: '企业详情', value: 1 },
        { name: '检查记录', value: 2 },
      ],
      zhengchang: {}, //正常
      weipandan: {},
      yipaidan: {}, //已派单
      yizhenggai: {}, //已整改
      zhenggaiInfo: null, //整改情况
      yinhuanSum: 0,
      gongdanSum: null, //工单总数
      weigongdan: 0,
      yigongdan: 0,
    }
  },
  mounted() {
    let enterpriseId = this.$route.query.id
    this.enterpriseName = this.$route.query.name
    let isShow = this.$route.query.isShow
    if (isShow) {
      this.$store.commit('SET_IS_SHOW', isShow)
    } else {
      this.$store.commit('SET_IS_SHOW', false)
    }
    this.getYinHuan(enterpriseId)
    this.getJianChaNum(enterpriseId)
    this.getGongDan(enterpriseId)
    this.getZhengGaiInfo(enterpriseId)
  },
  methods: {
    changeTab(name, index) {
      if (this.active == index) return
      this.active = index
      // 滚动页面至顶部
      this.$refs.targetElement.scrollTo({
        top: 0,
        behavior: 'smooth', // 使用平滑滚动效果
      })
    },
    //风险隐患
    getYinHuan(id) {
      let params = {
        EnterpriseID: id,
      }
      xApi.getenterprisetroublecount(params).then((res) => {
        res.data.forEach((item) => {
          if (item.status == 0) {
            this.weipandan = item
          } else if (item.status == 1) {
            this.yipaidan = item
          } else if (item.status == 2) {
            this.yizhenggai = item
          }
        })
        if (JSON.stringify(this.weipandan) == '{}') {
          //判断存在不存在的state
          this.weipandan.countValue = 0
        }
        if (JSON.stringify(this.yipaidan) == '{}') {
          this.yipaidan.countValue = 0
        }
        if (JSON.stringify(this.yizhenggai) == '{}') {
          this.yizhenggai.countValue = 0
        }
        this.yinhuanSum =
          this.weipandan.countValue +
          this.yipaidan.countValue +
          this.yizhenggai.countValue
        // console.log('风险隐患',JSON.stringify(this.weipandan) == '{}')
        // console.log('未派单',this.weipandan,'已派单',this.yipaidan,'已整改',this.yizhenggai,'总数',this.yinhuanSum)
      })
    },
    // 获取领导检查次数
    getJianChaNum(id) {
      let params = {
        EnterpriseID: id,
      }
      xApi.getenterprisecheckscount(params).then((res) => {
        res.data.forEach((it) => {
          if (it.leaderJoin == 0) {
            //领导检查
            this.zhengchang = it
          }
          if (it.leaderJoin == 1) {
            //日常巡查
            this.linDao = it
          }
        })
      })
    },
    //整改工单
    getGongDan(id) {
      let params = {
        EnterpriseID: id,
      }
      xApi.getenterpriseimprovingcount(params).then((res) => {
        // console.log(res.data)
        for (var i = 0; i < res.data.length; i++) {
          this.gongdanSum += res.data[i].countValue
          if (res.data[i].isFinal == 0) {
            this.weigongdan += res.data[i].countValue
          } else if (res.data[i].isFinal == 1) {
            this.yigongdan += res.data[i].countValue
          }
        }
      })
    },
    //获取整改情况
    getZhengGaiInfo(id) {
      let params = {
        EnterpriseID: id,
      }
      xApi.getimprovingreviewcount(params).then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          this.zhenggaiInfo += res.data[i].countValue
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
div {
  text-align: left;
  box-sizing: border-box;
}
img {
  height: 100%;
  width: 100%;
  display: block;
}
.enterprise-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tab-main {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  & > div {
    flex: 1;
    font-size: 0.25rem;
    color: #666666;
    text-align: center;
    font-weight: bold;
    position: relative;
    .tab-line {
      position: absolute;
      bottom: -0.35rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0.65rem;
      height: 0.26rem;
      background: url('~@/assets/image/vxEwm/tab-line.png');
      background-size: 100% 100%;
    }
  }
  .activeTab {
    color: #177fd4;
  }
}
.container-box {
  height: calc(100% - 0.7rem);
  overflow-y: auto;
}
.timer-shaft {
  margin-top: 0.4rem;
  .timer-item {
    position: relative;
    .circle {
      position: absolute;
      left: 0;
      top: 0.4rem;
      z-index: 2;
      width: 0.33rem;
      height: 0.34rem;
    }
    .circle-line {
      position: absolute;
      left: calc(0.33rem / 2.3);
      top: 0.4rem;
      z-index: 1;
      width: 0.03rem;
      height: 100%;
      background: url('~@/assets/image/vxEwm/circle-line.png');
      background-size: 100% 100%;
    }
    .data-mian {
      box-sizing: border-box;
      padding-left: 0.43rem;
      padding-bottom: 0.6rem;
      width: 100%;
      .enterprise-name {
        font-weight: 800;
        font-size: 0.29rem;
        color: #333333;
      }
    }
    .row-cell {
      padding-left: 0.43rem;
      padding-bottom: 0.5rem;

      .cell-box {
        padding: 0 0.42rem;
        min-height: 1rem;
        background: #fff;
        border-radius: 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .two-rows {
        padding: 0.2rem 0.42rem;
        min-height: 1rem;
        background: #fff;
        border-radius: 28px;
      }
    }
  }
  .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .line {
    margin: 0.18rem 0;
    height: 0.01rem;
    background: #eeeeee;
  }
  .bottom-row {
    display: flex;
    align-items: center;
    & > div {
      flex: 1;
      display: flex;
      align-items: center;
      .unit {
        font-size: 0.2rem;
        color: #666666;
        font-weight: 500;
      }
      .unit-num {
        font-size: 0.29rem;
        font-weight: bold;
        font-family: 'PingFang-SC-Bold';
        margin: 0 0.1rem;
      }
    }
  }
  .left-icon-name {
    display: flex;
    align-items: center;
    .left-icon {
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.1rem;
    }
    .left-name {
      font-weight: 500;
      font-size: 0.24rem;
      color: #333333;
    }
  }
  .right-data-unit {
    display: flex;
    align-items: center;
    .right-data {
      font-size: 0.38rem;
      color: #333333;
      font-weight: bold;
      font-family: 'PingFang-SC-Bold';
      margin-right: 0.1rem;
    }
    .right-unit {
      font-size: 0.19rem;
      color: #666666;
      font-weight: bold;
    }
  }
}
</style>
