<template>
  <div>
    <div class="widget-jcz" @click="openJczList()">
      <span>{{ data_jcz.length }}</span><span>家</span>
    </div>
    <div class="panel-jcz panel-default" v-if="listShow_jcz">
      <header>
        <span>详细信息</span>
        <i @click="closeJczList"></i>
      </header>
      <main>
        <ul>
          <li v-for="(item,index) in data_jcz" :key="index" @click="openCheckList()">
            <i></i><span>{{ index+1 + '、' }}</span><span>{{ item.name }}</span>
          </li>
        </ul>
      </main>
    </div>
    <div class="panel-check panel-default" v-if="listShow_check">
      <main>
        <div class="pc-sort">
          <el-input v-model="check_sort.beCheckedUnit" style="width: 45%;" class="select-default" placeholder="请输入被检测主体名称"></el-input>
          <el-select v-model="check_sort.period" style="width: 20%;" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in ['近七天','近一个月','近一年']" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="check_sort.verdictID" style="width: 20%;" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in ['合格','不合格']" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <span class="button-default" @click="toQuery()">查询</span>
        </div>
        <el-table :data="check_tableData" class="table-default" height="86%">
          <el-table-column label="序号" type="index" />
          <el-table-column label="检测时间" prop="checkDate" min-width="80" show-overflow-tooltip/>
          <el-table-column label="被检测主体" prop="beCheckedUnit" min-width="110" show-overflow-tooltip/>
          <el-table-column label="检测项目" prop="checkProject" min-width="100" show-overflow-tooltip/>
          <el-table-column label="检测品种" prop="sampleName" min-width="70" show-overflow-tooltip/>
          <el-table-column label="检测结果" min-width="70" show-overflow-tooltip>
            <template #default="scope">
              <span :class="{'table-row-alert':scope.row.resultText==='阳性'}">{{ scope.row.resultText === '阴性' ? '合格' : '不合格' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </main>
    </div>
    <div class="c-left">
      <div>
        <span class="box-title1">农兽药残留快速检测</span>
        <ul class="cl-b1">
          <li v-for="item in data_clb1" :key="item.type">
            <div>
              <div>
                <span class="clb1-num">{{ item.heGeLV }}</span><span class="clb1-unit">%</span>
              </div>
              <span>{{ item.type }}</span>
            </div>
            <div>
              <span>总数(次)</span><span class="clb1-num">{{ item.zongShu }}</span>
            </div>
          </li>
        </ul>
      </div>
      <span class="box-title2">实时检测情况</span>
      <div class="cl-b2">
        <el-table :data="data_clb2" class="table-default" height="20vh">
          <el-table-column label="品种" prop="sampleName" min-width="50" show-overflow-tooltip/>
          <el-table-column label="检测项目" prop="checkProject" min-width="100" show-overflow-tooltip/>
          <el-table-column label="检测结果" min-width="70" show-overflow-tooltip>
            <template #default="scope">
              <div class="table-row-jcjg" :class="{'is-danger':scope.row.resultText.indexOf('阳性')!==-1}">
                <span>{{ scope.row.resultText }}</span>
                <span>{{ scope.row.resultValue }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="时间" prop="checkDate" min-width="80" show-overflow-tooltip/>
        </el-table>
      </div>
      <span class="box-title2">检测项目占比(今年)</span>
      <ul class="cl-b3">
        <li v-for="(item, index) in data_clb3" :key="item.checkProject">
          <span>{{ (index+1).toString().padStart(2,0) }}</span>
          <span>{{ item.checkProject }}</span>
          <span>{{ item.zongShu.toLocaleString() }}</span>
          <span>次</span>
        </li>
      </ul>
      <span class="box-title2">检测结果待复检清单</span>
      <div class="cl-b4">
        <el-table :data="data_clb4" class="table-default" height="20vh">
          <el-table-column label="主体名称" prop="ztmc" min-width="110" show-overflow-tooltip/>
          <el-table-column label="样品名称" prop="sample" min-width="90" show-overflow-tooltip/>
          <el-table-column label="检测结果" prop="result" min-width="80" show-overflow-tooltip/>
        </el-table>
      </div>
    </div>
    <div class="c-right">
      <div>
        <span class="box-title1">农兽药残留监测</span>
        <span class="box-title2">日常巡查</span>
      </div>
      <div class="cr-b1">
        <div class="tab-default">
          <div :class="{'highlight': tab_crb1===1}" @click="changeRcxcTab(1)"><span>有机、绿色认证</span></div>
          <div :class="{'highlight': tab_crb1===2}" @click="changeRcxcTab(2)"><span>其他主体</span></div>
        </div>
        <div class="c-sort">
          <el-select v-model="sort_rcxc.year" @change="getMonthArr" placeholder="请选择年" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in yearArr" :key="item" :label="item+'年'" :value="item"></el-option>
          </el-select>
          <el-select v-model="sort_rcxc.month" placeholder="请选择月" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in monthArr" :key="item" :label="item+'月份'" :value="item"></el-option>
          </el-select>
        </div>
        <el-table :data="data_crb1" class="table-default" height="26vh">
          <el-table-column label="乡镇" prop="xz" min-width="120" show-overflow-tooltip/>
          <el-table-column label="月份" prop="month" min-width="70" show-overflow-tooltip/>
          <el-table-column label="覆盖率" min-width="70" show-overflow-tooltip>
            <template #default="scope">
              <div class="table-row-fgl">
                <span>{{ scope.row.coverage }}</span>
                <span>%</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span class="box-title2">日常监测</span>
      <div class="cr-b2">
        <div class="c-cata">
          <img src="../../../../assets/imgs/deck/page_znfx/icon-monitor.png" alt="">
          <div>
            <ul>
              <li v-for="item in data_crb2.catas" :key="item.type">
                <span>{{ item.type }}</span>
                <div><span>{{ item.count }}</span><span>次</span></div>
              </li>
            </ul>
            <span></span>
          </div>
        </div>
        <div class="c-sort">
          <el-select v-model="sort_rcjc" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in data_crb2.catas" :key="item.type" :label="item.type" :value="item.type"></el-option>
          </el-select>
        </div>
        <el-table :data="data_crb2.table" class="table-default" height="30vh">
          <el-table-column label="任务类型" prop="rwlx" min-width="70" show-overflow-tooltip/>
          <el-table-column label="主体名称" prop="ztmc" min-width="70" show-overflow-tooltip/>
          <el-table-column label="抽检单位" prop="cjdw" min-width="70" show-overflow-tooltip/>
          <el-table-column label="产品名称" prop="cpmc" min-width="70" show-overflow-tooltip/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { GetPassRateAndCount,GetProjectStatictics,GetActualData } from '@/services/znfx'

export default {
  name: 'ZnfxNcpzl',
  data() {
    return {
      data_clb1: [
        { type: '近7天', heGeLV: 98, zongShu: 91233, key: 'sevenDay' },
        { type: '今年', heGeLV: 96, zongShu: 91233, key: 'year' },
      ],
      sort_rcxc: {
        year: '',
        month: ''
      },
      yearArr: [],
      monthArr: [],
      data_clb2: [],
      data_clb3: [
        // { checkProject: '农药残留(有机磷和氨基甲酸酯类)', zongShu: 3212 },
        // { checkProject: '烯酰吗啉', zongShu: 3212 },
        // { checkProject: '噻虫嗪', zongShu: 3212 },
        // { checkProject: '啶虫脒', zongShu: 3212 },
        // { checkProject: '腐霉利', zongShu: 3212 },
        // { checkProject: '毒死婢', zongShu: 3212 },
      ],
      data_clb4: [
        { ztmc: 'XXXX经营社', sample:'绿叶菜', result: '待复检' },
        { ztmc: 'XXXX经营社', sample:'绿叶菜', result: '待复检' },
        { ztmc: 'XXXX经营社', sample:'绿叶菜', result: '待复检' },
        { ztmc: 'XXXX经营社', sample:'绿叶菜', result: '待复检' },
        { ztmc: 'XXXX经营社', sample:'绿叶菜', result: '待复检' },
        { ztmc: 'XXXX经营社', sample:'绿叶菜', result: '待复检' },
      ],
      tab_crb1: 1,
      data_crb1: [
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
        { xz: 'XXX镇', month: '7月', coverage: '100' },
      ],
      sort_rcjc: '例行监测',
      data_crb2: {
        catas: [
          { type: '例行监测', count: 11 },
          { type: '专项监测', count: 16 },
          { type: '监督抽查', count: 19 },
        ],
        table: [
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
          { rwlx: '例行监测', ztmc:'XXXXX', cjdw: 'XXXXX', cpmc: 'XXXXX' },
        ]
      },
      listShow_jcz: false,
      data_jcz: [
        { name: '监管站01' },
        { name: '监管站02' },
        { name: '监管站03' },
        { name: '监管站04' },
        { name: '监管站05' },
        { name: '监管站06' },
        { name: '监管站07' },
        { name: '监管站08' },
        { name: '监管站09' },
        { name: '监管站10' },
        { name: '监管站11' },
        { name: '监管站12' },
        { name: '监管站13' },
        { name: '监管站14' },
        { name: '监管站15' },
        { name: '监管站16' },
        { name: '监管站17' },
        { name: '监管站18' },
        { name: '监管站19' },
      ],
      listShow_check: false,
      check_sort: {
          pageIndex: 1,
          pageSize: 10
      },
      check_tableData: []
    }
  },
  mounted() {
    this.getRecentYears()
    this.sort_rcxc.year = new Date().getFullYear()
    this.getMonthArr()
    this.sort_rcxc.month = new Date().getMonth()+1

    GetPassRateAndCount().then(res => {
        this.data_clb1.forEach(i => {
            i.heGeLV = res.data[i.key].heGeLV
            i.zongShu = res.data[i.key].zongShu
        })
    })
    GetProjectStatictics().then(res => {
      this.data_clb3 = res.data
    })
    this.toQuery()
  },
  methods: {
    getRecentYears() {
      let thisYear = new Date().getFullYear()
      for(let i=0; i>-5; i--) {
        this.yearArr.push(thisYear+i)
      }
    },
    getMonthArr() {
      this.sort_rcxc.month = ''
      this.monthArr = []
      const d = new Date()
      const maxMonth = d.getFullYear()===this.sort_rcxc.year? d.getMonth()+1: 12
      for(let i=1; i<=maxMonth; i++) {
        this.monthArr.push(i)
      }
    },
    changeRcxcTab(tab) {
      this.tab_crb1 = tab
    },
    openJczList() {
      this.listShow_jcz = true
    },
    closeJczList() {
      this.listShow_jcz = false
      this.listShow_check = false
    },
    openCheckList() {
      this.listShow_check = true
    },
    toQuery(){
        GetActualData(this.check_sort).then(res => {
          this.data_clb2 = res.data
          this.check_tableData = res.data
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-left {
  left: 260px;
}

.widget-jcz {
  position: absolute;
  left: 1100px;
  top: 185px;
  width: 342px;
  height: 125px;
  background: url('../../../../assets/imgs/deck/page_znfx/bg-jcz.png');
  background-size: 100% 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  span:nth-child(1) {
    margin: 0 15px 0 65px;
    font-size: 42px;
    font-family: YSBTH;
    color: #FFE359;
  }
  span:nth-child(2) {
    font-size: 28px;
    color: #FFFFFF;
  }
}

.panel-jcz {
  left: 1100px;
  top: 340px;
  width: 610px;
  height: 740px;
  ul {
    height: 100%;
    overflow-y: auto;
    padding-right: 10px;
    li {
      height: 72px;
      background: rgba($color: #fff, $alpha: 0.1);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      span {
        font-size: 28px;
        color: #fff;
      }
      &>i {
        width: 40px;
        height: 40px;
        background: url('../../../../assets/imgs/deck/page_znfx/icon-position.png');
        background-size: contain;
        margin: 5px 30px 0 20px;
      }
    }
  }
}

.panel-check {
  left: 1100px;
  top: 1110px;
  width: 1280px;
  height: 680px;
  .pc-sort {
    display: flex;
    justify-content: space-between;
    margin-bottom: 39px;
  }
}

.cl-b1 {
  display: flex;
  justify-content: space-between;
  li {
    display: flex;
    align-items: center;
    span {
      font-size: 28px;
      color: #FFFFFF;
      line-height: 28px;
    }
    .clb1-num, .clb1-unit {
      font-size: 36px;
      font-family: YSBTH;
      color: #FFE359;
      line-height: 36px;
    }
    .clb1-unit {
      font-size: 28px;
      line-height: 28px;
    }
    &>div:nth-child(1) {
      box-sizing: border-box;
      padding-top: 15px;
      width: 206px;
      height: 156px;
      background: url('../../../../assets/imgs/deck/page_znfx/bg-percent.png');
      background-size: 100% 100%;
      text-align: center;
    }
    &>div:nth-child(2) {
      margin-left: 10px;
      span {
        display: block;
        margin: 12px 0;
      }
    }
  }
}

.cl-b2 {
  .table-row-jcjg {
    &.is-danger>span {
      color: red !important;
    }
    span:last-child {
      color: #FFE359;
    }
  }
}

.cl-b3 {
    max-height: 20vh;
    overflow-y: auto;
    margin-left: 10px;
padding-top: 20px;
  li {
    height: 38px;
    background: linear-gradient(90deg, rgba(192,196,204,0.08), rgba(192,196,204,0.01));
    border-radius: 0px 10px 10px 0px;
    position: relative;
    box-sizing: border-box;
    padding-left: 85px;
    margin-bottom: 33px;
    display: flex;
    align-items: center;
    span:nth-child(1) {
      position: absolute;
      bottom: 10px;
      left: -10px;
      width: 78px;
      height: 38px;
      background: #00747F;
      border-radius: 10px;
      line-height: 38px;
      text-align: center;
      font-size: 28px;
      color: #FFFFFF;
    }
    span:nth-child(2) {
      flex: 1;
      font-size: 28px;
      color: #FFFFFF;
    }
    span:nth-child(3) {
      font-size: 36px;
      font-family: YSBTH;
      color: #FFE359;
    }
    span:nth-child(4) {
      margin-left: 9px;
      font-size: 28px;
      color: #FFFFFF;
    }
  }
}

.table-row-alert {
  color: #FFE359;
}

.cl-b4 {
}

.cr-b1 {
  .c-sort {
    display: flex;
    justify-content: space-between;
    margin: 29px 0 40px;
    .el-select {
      width: 48%;
    }
  }
  .table-row-fgl {
    span {
      font-size: 36px;
      font-family: YSBTH;
      color: #FFE359;
    }
    span:last-child {
      font-size: 26px;
    }
  }

}

.cr-b2 {
  .c-sort {
    margin: 12px 0 28px;
    text-align: right;
  }
  .c-cata {
    display: flex;
    align-items: center;
    &>img {
      width: 174px;
      height: 163px;
      margin-right: 15px;
    }
    &>div {
      flex: 1;
      display: flex;
      flex-direction: column;
      &>ul {
        display: flex;
        justify-content: space-between;
        height: 103px;
        background: linear-gradient(to bottom, #158C6C 0%, #158C6C 30%, transparent 30.1%);
        border-bottom: 2px solid rgba(94,171,149,0.16);
        margin-bottom: 17px;
        li {
          width: 30%;
          position: relative;
          &>span {
            width: 100%;
            text-align: center;
            position: absolute;
            top: -18px;
          }
          &>div {
            text-align: center;
            margin-top: 43px;
            &>span:first-child {
              margin-right: 5px;
              font-size: 36px;
              font-family: YSBTH;
              color: #FFE359;
            }
          }
          span {
            font-size: 28px;
            color: #FFFFFF;
          }
        }
      }
      &>span {
        width: 100%;
        height: 12px;
        background: url('../../../../assets/imgs/deck/page_znfx/bg-dashline.png');
        background-size: 100% 100%;
      }
    }
  }
}
</style>
