<template>
  <div>
    <div class="c-left">
      <div>
        <span class="box-title1">动物出入栏情况</span>
        <span class="box-title2">经营主体数量统计</span>
      </div>
      <div class="cl-b1">
        <div class="l1-row1">
          <span>{{ data_clb1.total }}</span>
          <span class="text-28">家</span>
        </div>
        <ul class="l1-row2">
          <li v-for="item in data_clb1.list" :key="item.name">
            <img :src="item.pic" alt="">
            <div>
              <span class="text-28">{{ item.name }}</span>
              <div><span class="text-emp-36">{{ item.count }}</span><span class="text-28">家</span></div>
            </div>
          </li>
        </ul>
      </div>
      <span class="box-title2">经营主体分析</span>
      <div class="cl-b2">
        <div class="l2-sort">
          <el-select v-model="sort_clb2" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in animalArr1" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <ul>
          <li v-for="item in data_clb2" :key="item.name" @click="openDetail(item)">
            <div class="l2-row1">
              <span>{{ item.name }}</span>
              <div><span>畜种：</span><span>{{ item.type }}</span></div>
            </div>
            <div>
              <span>统一社会信用代码：</span><span>{{ item.code }}</span>
            </div>
          </li>
        </ul>
      </div>
      <span class="box-title2">屠宰量</span>
      <div id="chart-clb3"></div>
      <span class="box-title2">经营主体分析</span>
      <div class="cl-b4">
        <ul>
          <li v-for="item in listData_clb4.top2" :key="item.name" class="top2">
            <div class="t2-row1">
              <span class="text-28">{{ item.name + item.append + ')' }}</span>
              <div>
                <span class="text-emp-36">{{ item.current }}</span><span class="text-emp-36">/{{ item.total }}</span><span class="text-28">万头</span>
              </div>
            </div>
            <div class="t2-row2">
              <img src="@/assets/imgs/deck/page_znfx/bell-green.png" alt="">
              <div class="percent-bar">
                <div class="pb-bg">
                  <div class="pb-value" :style="'width:'+ Math.round(item.current/item.total*100)+'%;'"></div>
                </div>
              </div>
              <div><span class="text-emp-36">{{ Math.round(item.current/item.total*100) }}</span><span class="text-emp-18">%</span></div>
            </div>
          </li>
          <li class="others" v-for="(item,index) in listData_clb4.others" :key="index">
            <div class="o-row1">
              <span class="text-28">{{ item.name }}</span><span class="text-28">{{ item.date }}</span>
            </div>
            <div class="o-row2">
              <img src="@/assets/imgs/deck/page_znfx/bell-red.png" alt="">
              <span class="text-28">{{ item.msg }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="detailShow" class="jyzt-detail panel-default">
      <header><span>{{ detailData.name }}</span></header>
      <main>
        <el-row>
          <el-col :span="15">
            <ul class="des-default">
              <li v-for="item in detailData.baseInfo" :key="item.title">
                <span>{{ item.title }}</span>
                <span>{{ item.value }}</span>
              </li>
            </ul>
          </el-col>
          <el-col :span="9" class="jd-dqcl">
            <span class="text-28">当前存栏</span>
            <div class="l1-row1">
              <span class="text-emp-36">{{ detailData.dqcl.reduce((pre,i)=>i.value+pre,0) }}</span>
              <span class="text-28">只</span>
            </div>
            <div class="dqcl-scroll cr-b2">
              <span class="prev" @click="handleScroll('scroll-dqcl','left',3)"></span>
              <span class="next" @click="handleScroll('scroll-dqcl','right',3)"></span>
              <ul class="s-wrapper" id="scroll-dqcl">
                <li v-for="item in detailData.dqcl" :key="item.name">
                  <img :src="item.img" alt=""><div class="text-28">{{ item.name }}</div><div class="text-emp-36">{{ item.value }}</div>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <div class="tab-default">
          <div :class="{'highlight': tab_detail===1}" @click="tab_detail=1"><span>养殖记录</span></div>
          <div :class="{'highlight': tab_detail===2}" @click="tab_detail=2"><span>报检记录</span></div>
          <div :class="{'highlight': tab_detail===3}" @click="tab_detail=3"><span>免疫记录</span></div>
        </div>
        <div class="tab-content">
          <ul v-if="tab_detail===1">
            <li v-for="(item,index) in detailData.log_yz" :key="index">
              <div class="li-row">
                <div>
                  <span class="lr-date">{{ item.date }}</span>
                  <span style="color: #FFE359;">{{ item.operate }}</span>
                </div>
              </div>
              <div class="li-row">
                <span>{{ item.location }}</span>
                <span>{{ item.operator }}</span>
              </div>
            </li>
          </ul>
          <ul v-if="tab_detail===2">
            <li v-for="(item,index) in detailData.log_bj" :key="index">
              <div class="li-row">
                <div>
                  <span class="lr-date">{{ item.date }}</span>
                  <span>{{ item.target }}</span>
                </div>
                <span class="lr-state" :class="{'warning': item.state==='未受理'}">{{ item.state }}</span>
              </div>
              <div class="li-row">
                <span>批号：{{ item.code }}</span>
                <span>日龄：{{ item.age }}</span>
                <span>报检数量：{{ item.count }}</span>
              </div>
            </li>
          </ul>
          <ul v-if="tab_detail===3">
            <li v-for="(item,index) in detailData.log_my" :key="index">
              <div class="li-row">
                <div>
                  <span class="lr-date">{{ item.date }}</span>
                  <span>{{ item.target }}</span>
                </div>
                <span class="lr-state">{{ item.type }}</span>
              </div>
              <div class="li-row">
                <span>免疫数量：{{ item.count }}</span>
                <div class="lr-ym">
                  <span>{{ item.medicine }}</span>
                  <span>{{ item.specs }}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </main>
    </div>
    <div class="c-right">
      <div>
        <span class="box-title1">动物防疫检测</span>
        <span class="box-title2">无害化处理</span>
        <div class="cr-b1">
          <div style="text-align: right;">
            <el-select v-model="sort_crb1" class="select-default" popper-class="select-default-popper">
              <el-option v-for="item in animalArr2" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div id="chart-crb1"></div>
        </div>
      </div>
      <span class="box-title2">动物检疫(当月)</span>
      <div class="cr-b2">
        <span class="prev" @click="handleScroll('scroll-dwjy','left',4)"></span>
        <span class="next" @click="handleScroll('scroll-dwjy','right',4)"></span>
        <ul class="s-wrapper" id="scroll-dwjy">
          <li v-for="item in listData_crb2" :key="item.name">
            <img :src="item.img" alt=""><div class="text-28">{{ item.name }}</div><div class="text-emp-36">{{ item.value }}</div>
          </li>
        </ul>
      </div>
      <span class="box-title2">主体免疫记录</span>
      <ul class="cr-b3">
        <li v-for="(item, index) in listData_crb3" :key="index" class="text-28">
          <div><span>{{ item.name }}</span><span>{{ item.date }}</span></div>
          <div>
            <span>畜种：{{ item.cz }}</span>
            <span>疫苗类型：{{ item.ymlx }}</span>
            <div><span>免疫数量：</span><span class="text-emp-36">{{ item.mysl }}</span></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { setTzl, setWhhcl } from '@/echarts/options'

export default {
  name: 'ZnfxDwfy',
  data() {
    return {
      data_clb1: {
        total: 220,
        list: [
          { name: '猪', count: 119, pic: require('@/assets/imgs/deck/page_znfx/animal-r1-zhu.png') },
          { name: '牛', count: 23, pic: require('@/assets/imgs/deck/page_znfx/animal-r1-niu.png') },
          { name: '羊', count: 19, pic: require('@/assets/imgs/deck/page_znfx/animal-r1-yang.png') },
          { name: '禽', count: 32, pic: require('@/assets/imgs/deck/page_znfx/animal-r1-qin.png') },
          { name: '鸽', count: 20, pic: require('@/assets/imgs/deck/page_znfx/animal-r1-ge.png') },
          { name: '特种', count: 7, pic: require('@/assets/imgs/deck/page_znfx/animal-r1-tz.png') },
        ]
      },
      sort_clb2: '全部畜种',
      animalArr1: ['全部畜种','猪','牛','羊','禽','鸽','特种'],
      data_clb2: [],
      chartData_clb3: [],
      listData_clb4: {
        top2: [],
        others: []
      },
      sort_crb1: '猪',
      animalArr2: ['猪','珍禽','实验动物','牛','其他','斥品','羊','兔','宠物','马'],
      chartData_crb1: [],
      listData_crb2: [
        { name: '牛(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-niu.png')},
        { name: '羊(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-yang.png')},
        { name: '猪(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-zhu.png')},
        { name: '鸡(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-ji.png')},
        { name: '鸭(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-ya.png')},
        { name: '鹅(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-e.png')},
        { name: '鸽(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-ge.png')},
        { name: '马(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-ma.png')},
        { name: '兔(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-tu.png')},
        { name: '犬(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-quan.png')},
        { name: '猫(头)', value: 1231, img: require('@/assets/imgs/deck/page_znfx/animal-jy-mao.png')},
      ],
      listData_crb3: [],
      detailShow: false,
      detailData: {},
      tab_detail: 1
    }
  },
  mounted() {
    this.getChartTzl()
    this.getListClb4()
    this.getListZtmy()
  },
  methods: {
    getChartTzl() {
      this.chartData_clb3 = [
        { time: '22-12', '猪': 1000, '牛': 2000, '羊': 3000, '禽': 4000 },
        { time: '23-01', '猪': 1000, '牛': 2000, '羊': 3000, '禽': 4000 },
        { time: '23-02', '猪': 1000, '牛': 2000, '羊': 3000, '禽': 4000 },
        { time: '23-03', '猪': 1000, '牛': 2000, '羊': 3000, '禽': 4000 },
        { time: '23-04', '猪': 1000, '牛': 2000, '羊': 3000, '禽': 4000 },
        { time: '23-05', '猪': 1000, '牛': 2000, '羊': 3000, '禽': 4000 },
      ]
      setTzl(document.getElementById('chart-clb3'), this.chartData_clb3)
    },
    getListClb4() {
      this.listData_clb4.top2 = [
        { name: `能繁母猪存栏量(保供要求`, append: '95%', total: 1.7, current: 1.58 },
        { name: `当月生猪存栏量(较上月浮动`, append: '10%', total: 10.8, current: 8.9 },
      ]
      let othersArr = []
      for(let i=1; i<8; i++) {
        othersArr.push({name: '上海嘉定维高蔬果专业合作社', date: '2023.5.5', msg: '猪死亡量目前占存栏量10%'})
      }
      this.listData_clb4.others = othersArr
    },
    handleScroll(id, direction, step) {
      let ele = document.getElementById(id)
      const stepw = (ele.scrollWidth / ele.children.length) * step
      const sl = ele.scrollLeft
      if(direction==='right') {
        ele.scrollTo({left: sl+stepw, behavior: 'smooth'})
      } else {
        ele.scrollTo({left: sl-stepw, behavior: 'smooth'})
      }
    },
    getListZtmy() {
      let temp = []
      const example = { name: '上海嘉定维高蔬果专业合作社', date: '2023.5.5', cz: '猪', ymlx: '猪瘟', mysl: 256 }
      let i=1
      while(i<20) {
        temp.push(example)
        i++
      }
      this.listData_crb3 = temp
    },
    openDetail(item) {
      this.detailData = {
        name: item.name,
        baseInfo: [
          {title: '畜禽养殖代码', value: 'XXXXXXXXXXXXXXXXXXXXXXXXXX'},
          {title: '负责人', value: 'XXXXXXXXXXXXXXXXX'},
          {title: '联系方式', value: 'XXXXXXXXXXXXXXXXX'},
          {title: '经营地址', value: 'XXXXXXXXXXXXXXXXX'},
          {title: '防疫合格证号', value: 'XXXXXXXXXXXXXXXXX'},
        ],
        dqcl: [
          { name: '鸡(只)', value: 32, img: require('@/assets/imgs/deck/page_znfx/animal-r2-ji.png')},
          { name: '鸭(只)', value: 25, img: require('@/assets/imgs/deck/page_znfx/animal-r2-ya.png')},
          { name: '鹅(只)', value: 16, img: require('@/assets/imgs/deck/page_znfx/animal-r2-e.png')},
          { name: '猪(只)', value: 5, img: require('@/assets/imgs/deck/page_znfx/animal-r2-zhu.png')},
          { name: '牛(只)', value: 2, img: require('@/assets/imgs/deck/page_znfx/animal-r2-niu.png')},
          { name: '羊(只)', value: 1, img: require('@/assets/imgs/deck/page_znfx/animal-r2-yang.png')},
          { name: '鸽(只)', value: 18, img: require('@/assets/imgs/deck/page_znfx/animal-r2-ge.png')},
          { name: '特种(只)', value: 1, img: require('@/assets/imgs/deck/page_znfx/animal-r2-tz.png')},
        ],
        log_yz: [
          { date: '2023.06.07', operate: '更新了存量栏', location: '1号棚', operator: '邓丽君' },
          { date: '2023.06.06', operate: '更新了存量栏', location: '1号棚', operator: '邓丽君' },
        ],
        log_bj: [
          { date: '2021.11.05', target: '鸡(4号棚)', state: '已检疫', code: '20200727', age: '575', count: '4120羽' },
          { date: '2021.08.30', target: '鸡(4号棚)', state: '未受理', code: '20210222', age: '190', count: '535羽' },
        ],
        log_my: [
          { date: '2021.08.11', target: '鸡(1号棚)', type: '七免', count: '4850羽', medicine: '高致病性禽流感(H5+H7)三生三世十里桃花', specs: '0.5ml/瓶' },
          { date: '2021.08.10', target: '鸡(1号棚)', type: '七免', count: '465羽', medicine: '高致病性禽流感(H5+H7)三生三世十里桃花', specs: '0.5ml/瓶' },
        ],
      }
      this.detailShow = true
    }
  },
  watch: {
    sort_clb2: {
      handler(val) {
        console.log(val)
        let temp = []
        for(let i=0; i<10; i++) {
          temp.push({ name:'上海嘉定维高蔬果专业合作社'+(i+1), code: '9331**********2456', type: '鸡' })
        }
        this.data_clb2 = temp
      },
      immediate: true
    },
    sort_crb1: {
      handler(val) {
        console.log(val)
        this.chartData_crb1 = [
          { month: '2022.12', value: Math.round(20*(Math.random()+1)) },
          { month: '2023.01', value: Math.round(20*(Math.random()+1)) },
          { month: '2023.02', value: Math.round(20*(Math.random()+1)) },
          { month: '2023.03', value: Math.round(20*(Math.random()+1)) },
          { month: '2023.04', value: Math.round(20*(Math.random()+1)) },
        ]
        this.$nextTick(()=> {
          setWhhcl(document.getElementById('chart-crb1'), this.chartData_crb1)
        })
      },
      immediate: true
    }
  }
}
</script>

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

.l1-row1 {
  width: 408px;
  height: 77px;
  background:url('@/assets/imgs/deck/page_znfx/bg-jyzt-total.png');
  background-size: 100% 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  span:first-child {
    font-size: 44px;
    line-height: 28px;
    font-family: YSBTH;
    color: #FFE359;
    margin-right: 7px;
  }
}
.cl-b1 {
  .l1-row2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      display: flex;
      align-items: center;
      img {
        width: 120px;
        height: 120;
      }
      &>div {
        margin-left: -40px;
        &>span {
          display: block;
          margin-left: 35px;
        }
        &>div {
          display: flex;
          align-items: center;
          width: 160px;
          height: 36px;
          box-sizing: border-box;
          padding: 0 25px 15px 35px;
          margin-top: 14px;
          background: url('@/assets/imgs/deck/page_znfx/bg-count.png');
          background-size: 100% 100%;
          .text-emp-36 {
            flex: 1;
          }
        }
      }
    }
  }
}

.cl-b2 {
  .l2-sort {
    text-align: right;
    margin-bottom: 20px;
  }
  ul {
    height: 17vh;
    width: calc(100% + 20px);
    overflow-y: auto;
    li {
      height: 120px;
      margin-right: 13px;
      box-sizing: border-box;
      padding: 22px 28px;
      margin-bottom: 5px;
      background: rgba(0,255,213,0.18);
      color: #fff;
      font-size: 28px;
      line-height: 28px;
      cursor: pointer;
      &:hover {
        background: rgba(0,255,213,0.3);
      }
      .l2-row1 {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        &>span {
          font-weight: bold;
        }
      }
    }
  }
}

#chart-clb3 {
  height: 17vh;
  width: 100%;
}

.cl-b4 {
  height: 18vh;
  width: calc(100% + 20px);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 0 15px 0 9px;
  ul {
    border-left: 1px solid #03A187;
    padding-left: 21px;
  }
  li {
    position: relative;
    box-sizing: border-box;
    background: rgba(0,255,213,0.18);
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 18px 18px 27px;
    .t2-row1, .t2-row2, .o-row1, .o-row2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    img {
      width: 30px;
      height: 30px;
      margin-right: 13px;
    }
    &::before {
      content: '';
      position: absolute;
      left: -30px;
      top: calc(50% - 9px);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #03A187;
    }
  }
  .top2 {
    height: 120px;
    .t2-row1 {
      &>span {
        font-weight: bold;
      }
      &>div {
        span:nth-child(2) {
          color: #8CFF8C;
          margin-right: 5px;
        }
      }
    }
    .t2-row2 {
      .percent-bar {
        flex: 1;
        box-sizing: border-box;
        padding: 8px;
        height: 28px;
        border: 1px solid rgba($color: #fff, $alpha: 0.3);
        .pb-bg {
          width: 100%;
          height: 100%;
          background: rgba(105,191,170,0.4);
          .pb-value {
            position: relative;
            height: 100%;
            background: linear-gradient(90deg, rgba(31,255,244,0.9), #A8FF7A);
            &::after {
              content: '';
              position: absolute;
              right: 0;
              top: -2px;
              display: block;
              width: 4px;
              height: 16px;
              background: #D0FFF9;
            }
          }
        }
      }
      &>div:last-child {
        width: 93px;
        text-align: right;
      }
    }
  }
  .others {
    height: 110px;
    .o-row1 {
      &>span:first-child {
        font-weight: bold;
      }
    }
    .o-row2 {
      justify-content: flex-start;
    }
  }
}

.jyzt-detail {
  left: 1100px;
  top: 185px;
  width: 1310px;
  height: 1000px;

  .jd-dqcl {
    padding: 40px 0 0 20px;
    text-align: center;
    .l1-row1 {
      margin: 20px auto;
    }
    .dqcl-scroll {
      .s-wrapper {
        width: calc(100% - 64px);
        li {
          width: 33.3%;
          img {
            width: 85px;
            height: 85px;
            margin-bottom: 0;
          }
        }
      }
      .prev, .next {
        padding: 0;
        top: calc(50% - 16px);
      }
    }
  }

  .tab-content {
    height: 15vh;
    li {
      height: 160px;
      box-sizing: border-box;
      padding: 25px 0 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-bottom: 1px dashed rgba($color: #00FFD5, $alpha: 0.3);
      .li-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        color: #fff;
      }
      .lr-date {
        display: inline-block;
        width: 206px;
        height: 54px;
        background: rgba($color: #00FFD5, $alpha: 0.2);
        text-align: center;
        line-height: 54px;
        margin-right: 20px;
      }
      .lr-state {
        width: 180px;
        height: 54px;
        background: rgba($color: #00FFD5, $alpha: 0.2);
        border-radius: 14px;
        line-height: 54px;
        color: #00FFD5;
        text-align: center;
        &.warning {
          background: rgba($color: #FFBF00, $alpha: 0.2);
          color: #FFBF00;
        }
      }
      .lr-ym {
        width: 630px;
        height: 54px;
        box-sizing: border-box;
        padding: 0 20px;
        background: rgba($color: #000000, $alpha: 0.2);
        line-height: 54px;
        display: flex;
        justify-content: space-between;
        span:first-child {
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.cr-b1 {
  #chart-crb1 {
    height: 18vh;
    width: 100%;
  }
}

.cr-b2 {
  margin-bottom: 20px;
  position: relative;
  .s-wrapper {
    width: calc(100% - 104px);
    margin: 0 auto;
    overflow-x: auto;
    display: flex;
    &::-webkit-scrollbar {
      display: none;
    }
    li {
      flex-shrink: 0;
      width: 25%;
      text-align: center;
      img {
        width: 125px;
        height: 125px;
        margin-bottom: -22px;
      }
      .text-28 {
        margin-bottom: 7px;
      }
    }
  }
  .prev {
    left: 0;
    background: url('@/assets/imgs/deck/page_znfx/arrow-left.png') no-repeat;
  }
  .next {
    right: 0;
    background: url('@/assets/imgs/deck/page_znfx/arrow-right.png') no-repeat;
  }
  .prev, .next {
    position: absolute;
    top: calc(50% - 26px);
    width: 32px;
    height: 32px;
    padding: 10px;
    cursor: pointer;
    background-size: 32px;
    background-position: center;
  }
}

.cr-b3 {
  height: 43vh;
  width: calc(100% + 20px);
  box-sizing: border-box;
  overflow-y: auto;
  padding-right: 15px;

  li {
    height: 140px;
    box-sizing: border-box;
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(0,255,213,0.18);
    margin-bottom: 20px;
    &>div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:first-child {
        span:first-child {
          font-weight: bold;
        }
      }
      &:last-child {
        div {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>