<template>
  <div class="date-left">
    <div>
      <img src="../../../assets/img/command/head-date.png"/>
    </div>

    <div>
      <div class="box-header-title">
        <div>巡检问题处理情况统计</div>
      </div>
      <div>
        <img src="../../../assets/img/main/line.png"/>
        <div>
          <el-progress
            :width="1.38,fontSize | filterPx"
            :stroke-width="0.14,fontSize | filterPx"
            type="circle"
            color="#15CCD0"
            :percentage="inspectQuestionInfo.percentage?parseInt(inspectQuestionInfo.percentage):0"
          ></el-progress>
        </div>
        <div>
          <div>
            <div>
              <div>
                <div></div>
                <div>未完成</div>
              </div>
              <div>
                {{inspectQuestionInfo.waitNum}}
                <span>/件</span>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div>
                <div></div>
                <div>已完成</div>
              </div>
              <div>
                {{inspectQuestionInfo.finishedNum}}
                <span>/件</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="box-header-title">
        <div>月度巡检问题</div>
      </div>
      <div>
        <div>数量（件）</div>
        <overBar
          :dataList="monthQuestionList"
          id="overBar"
          :width="4.19,fontSize | filterPx"
          :height="2.02,fontSize | filterPx">
        </overBar>
      </div>
    </div>
    <div>
      <div class="box-header-title">
        <div>巡检问题河湖统计</div>
        <div class="header-right">
          <div @click="activeClick('1')" :class="active==1?'header-right-div-active':void(0)" class="header-right-div">
            <span>当月</span></div>
          <div @click="activeClick('2')" :class="active==2?'header-right-div-active':void(0)" class="header-right-div">
            <span>三个月</span></div>
          <div @click="activeClick('3')" :class="active==3?'header-right-div-active':void(0)" class="header-right-div">
            <span>半年</span></div>
        </div>
      </div>
      <div>
        <transverseBar
          :dataList="driverList"
          id="dateLeftBar"
          :width="4.19,fontSize | filterPx"
          :height="1.915,fontSize | filterPx"
        ></transverseBar>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import overBar from './overBar'
  import transverseBar from './transverseBar'
  import api from '@/api/command/index'

  export default {
    name: "date-left",
    data() {
      return {
        driverList:[],
        active: '1',
        inspectQuestionInfo: {},
        monthQuestionList: []
      }
    },
    watch: {
      dataChild: {
        deep: true,
        handler: function (newVal, oldVal) {
          const {inspectQuestionInfo,monthQuestionList}=newVal
          this.inspectQuestionInfo=inspectQuestionInfo?inspectQuestionInfo:{}
          this.monthQuestionList=monthQuestionList?monthQuestionList:[]
        }
      }
    },
    props: {
      dataChild: {
        type: Object,
        default() {
          return
        }
      }
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    components: {overBar, transverseBar},
    mounted(){
      this.getInspectQuestionDriverList()
    },
    methods: {
      activeClick(active) {
        this.active = active
        this.driverList=[]
        this.getInspectQuestionDriverList()
      },
      getInspectQuestionDriverList(){
        api.getInspectQuestionDriverList(this.active).then(res => {
          this.driverList=res.data?res.data:[]
        }).catch(e => {
          this.driverList=[]
        });
      }
    },
  }
</script>

<style lang="less">
  .date-left {
    position: absolute;
    top: 1.25rem;
    width: 4.19rem;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    padding-left: 0.435rem;
    padding-right: 0.364rem;

    .header-right {
      display: flex;
      align-items: center;
      padding-right: 0.1rem;

      .header-right-div {
        width: 0.65rem;
        height: 0.24rem;
        line-height: 0.24rem;
        cursor: pointer;
        font-size: 0.12rem;
        color: #ffffff;
        margin-left: 0.05rem;
        background-color: #3A4040;
        border: 0.01rem solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.2rem;
      }

      .header-right-div-active {
        background-color: #2c6b6d;
        border-color: #0CD1D6;
      }
    }

    > div:first-child {
      margin-top: 0.1rem;
      width: 100%;
      height: 0.47rem;
      display: flex;

      > img {
        width: 1.33rem;
        height: 100%;
      }
    }

    > div:nth-child(2) {
      margin-top: 0.1rem;

      > div:last-child {
        padding: 0.15rem 0.1rem 0.16rem 0.1rem;
        display: flex;
        position: relative;

        > img {
          position: absolute;
          width: 0.962rem;
          height: 0.228rem;
          left: 1.517rem;
          bottom: 0.58rem;
        }

        > div:nth-child(2) {
          width: 1.59rem;
          height: 1.59rem;
          margin-left: 0.12rem;
          background-position: center center;
          background-size: cover;
          background-image: url(../../../assets/img/main/table.png);
          display: flex;
          align-items: center;
          justify-content: center;

          .el-progress__text {
            font-family: Oswald-Demi-BoldItalic;
            font-size: 0.33rem !important;
            color: #ffffff;
          }
        }

        > div:last-child {
          margin-left: 0.65rem;

          > div {
            width: 1.693rem;
            height: 0.8rem;
            background-position: center center;
            background-size: cover;
            background-image: url(../../../assets/img/command/bg.png);

            > div {
              position: relative;

              > div:first-child {
                position: absolute;
                top: 0.12rem;
                left: 0.14rem;
                display: flex;
                align-items: center;

                > div:first-child {
                  background: #fedf12;
                  border: 0.02rem solid #657533;
                  border-radius: 50%;
                  height: 0.06rem;
                  width: 0.06rem;
                }

                > div:last-child {
                  font-family: PingFangSC-Regular;
                  font-size: 0.14rem;
                  color: #ffffff;
                  margin-left: 0.05rem;
                }
              }

              > div:last-child {
                position: absolute;
                right: 0.2rem;
                top: 0.25rem;
                font-family: Impact;
                font-size: 0.39rem;
                color: #ffffff;
                text-align: right;

                > span {
                  font-family: PingFangSC-Regular;
                  font-size: 0.12rem;
                  color: #ffffff;
                  margin-left: 0.02rem;
                }
              }
            }
          }

          > div:last-child {
            margin-top: 0.15rem;

            > div > div:first-child > div:first-child {
              background: #18d27c;
              border: 0.02rem solid #0c8757;
            }
          }
        }
      }
    }

    > div:nth-child(3) {
      margin-top: 0.1rem;

      > div:last-child {
        padding-top: 0.103rem;
        padding-bottom: 0.086rem;
        position: relative;

        > div:first-child {
          position: absolute;
          top: 0.15rem;
          line-height: 0.17rem;
          left: 0.281rem;
          font-family: PingFangSC-Regular;
          font-size: 0.12rem;
          opacity: 0.7;
          color: #FFFFFF;
        }
      }
    }

    > div:last-child {
      margin-top: 0.1rem;

      > div:last-child {
        position: relative;
        display: flex;
        justify-content: center;
        padding: 0.1rem 0;
      }
    }
  }

</style>
