<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-sort">
          <el-select v-model="sort_clqk" 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>
        </div>
        <ul class="l1-main">
          <li v-for="item in data_clqk" :key="item.name">
            <img :src="item.pic" alt="">
            <div>
              <span class="text-28">{{ item.name }}</span>
              <span class="text-emp-36">{{ item.value.toLocaleString() }}</span>
            </div>
          </li> 
        </ul>
      </div>
      <span class="box-title2">产量趋势</span>
      <div class="cl-b2">
        <div class="l2-sort">
          <el-select v-model="sort_clqs" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in cataArr" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div id="chat-clqs"></div>
      </div>
      <span class="box-title2">水稻产量分析</span>
      <div class="cl-b3">
        <div class="l3-left">
          <div v-for="item in data_sdcl.slice(0,2)" :key="item.name">
            <span class="text-28">{{ item.name }}</span>
            <span class="text-emp-36">{{ item.value }}</span>
          </div>
        </div>
        <div class="l3-center">
          <img src="@/assets/imgs/deck/page_znfx/icon-rice-large.png" alt="">
          <span class="text-28">水稻</span>
        </div>
        <div class="l3-right">
          <div v-for="(item, index) in data_sdcl.slice(2)" :key="item.name">
            <span class="text-28">{{ item.name }}</span>
            <span class="text-emp-36">{{ item.value }}<span v-if="index===1" class="value-percent">%</span></span>
          </div>
        </div>
      </div>
      <span class="box-title2">各镇产量情况</span>
      <div class="cl-b4">
        <el-table :data="tableData_outputByTown" class="table-default" height="20vh">
          <el-table-column label="镇名" prop="town" min-width="40" show-overflow-tooltip/>
          <el-table-column label="水稻(吨)" prop="rice" min-width="60" show-overflow-tooltip/>
          <el-table-column label="蔬菜(吨)" prop="vege" min-width="60" show-overflow-tooltip/>
          <el-table-column label="水产(吨)" prop="water" min-width="60" show-overflow-tooltip/>
          <el-table-column label="畜牧(吨)" prop="meat" min-width="45" 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="r1-sort">
          <el-select v-model="sort_scbz.year" 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_scbz.month" 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>
          <el-select v-model="sort_scbz.type" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in vegeCataArr" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-input class="select-default" v-model="sort_scbz.breed" placeholder="请输入品种名称">
            <template #suffix><i class="input-suffix-search"></i></template>
          </el-input>
        </div>
        <el-table :data="tableData_vegeInOut" class="table-default" height="24vh" ref="table_vegeInOut" @row-click="vegeInOutPick" highlight-current-row>
          <el-table-column label="序号" type="index" min-width="60"/>
          <el-table-column label="品种" prop="type" min-width="70" show-overflow-tooltip/>
          <el-table-column label="播种面积(亩次)" min-width="100" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.plant }}</span>
            </template>
          </el-table-column>
          <el-table-column label="采收量(公斤)" min-width="90" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.harvest }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span class="box-title2">蔬菜产量预测</span>
      <div class="cr-b2">
        <el-table :data="tableData_vegeExpect" class="table-default" height="20vh">
          <el-table-column label="品种" prop="type" min-width="50" show-overflow-tooltip/>
          <el-table-column label="未来一周">
            <el-table-column label="预计采收面积(亩)" min-width="100" show-overflow-tooltip>
              <template #default="scope">
                <span class="td-emphasis">{{ scope.row.area }}</span>
              </template>
            </el-table-column>
            <el-table-column label="预计采收量(公斤)" min-width="100" show-overflow-tooltip>
              <template #default="scope">
                <span class="td-emphasis">{{ scope.row.weight }}</span>
              </template>
            </el-table-column>
            <el-table-column label="预计采收主体(家)" min-width="100" show-overflow-tooltip>
              <template #default="scope">
                <span class="td-emphasis">{{ scope.row.subject }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <span class="box-title2">蔬菜产销分析</span>
      <div class="cr-b3">
        <div class="tab-default">
          <div :class="{'highlight': tab_crb3===1}" @click="tab_crb3=1"><span>经营主体</span></div>
          <div :class="{'highlight': tab_crb3===2}" @click="tab_crb3=2"><span>作物</span></div>
        </div>
        <el-table v-show="tab_crb3===1" :data="tableData_vegeOutSale.jyzt" class="table-default" height="20vh">
          <el-table-column label="经营主体" prop="jyzt" min-width="80" show-overflow-tooltip/>
          <el-table-column label="所属镇" prop="sszc" min-width="80" show-overflow-tooltip/>
          <el-table-column label="产量(吨)" min-width="90" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.output }}</span>
            </template>
          </el-table-column>
          <el-table-column label="销售量(吨)" min-width="100" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.sale }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-show="tab_crb3===2" :data="tableData_vegeOutSale.crop" class="table-default" height="20vh">
          <el-table-column label="品种" prop="type" min-width="60" show-overflow-tooltip/>
          <el-table-column label="涉及经营主体(家)" prop="relate" min-width="130" show-overflow-tooltip/>
          <el-table-column label="产量(吨)" min-width="80" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.output }}</span>
            </template>
          </el-table-column>
          <el-table-column label="销售量(吨)" min-width="90" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.sale }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="sub-sta" v-if="Boolean(scbz_current)">
      <el-select v-model="scbz_current" @change="subStaChange" class="select-default" popper-class="select-default-popper">
        <el-option v-for="item in scbzBreedArr" :key="item" :value="item" :label="item"></el-option>
      </el-select>
      <span>{{ scbz_current }}</span>
      <div><span>在田主体数</span><span>1231</span><span>个</span></div>
      <div><span>在田面积</span><span>1231</span><span>万亩</span></div>
    </div>

    <div class="subject-search">
      <el-input v-model="searchCtxJyzt" placeholder="请输入经营主体">
        <template #suffix><i class="input-suffix-search" @click="handleSearch"></i></template>
      </el-input>
      <ul class="search-res" v-if="searchResShow">
        <li v-for="item in searchRes" :key="item.id" @click="searchResPick(item)">
          <img src="../../../../assets/imgs/deck/page_nyxz/position.png" alt="">
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>

    <div v-if="detailShow" class="jyzt-detail panel-default">
      <header>
        <span>{{ detailData.name }}</span>
      </header>
      <main>
        <ul class="des-default">
          <li v-for="item in detailData.basic" :key="item.name">
            <span>{{ item.name }}</span>
            <span>{{ item.value }}</span>
          </li>
        </ul>
        <span class="box-title2">经营品种</span>
        <div class="row-sort">
          <el-date-picker v-model="sort_detail.start" type="date" placeholder="开始日期" popper-class="date-default-popper"
            class="select-default" @change="handlePickTime"
          />
          <el-date-picker v-model="sort_detail.end" type="date" placeholder="截止日期" popper-class="date-default-popper"
            class="select-default" @change="handlePickTime"
          />
        </div>
        <el-table :data="detailData.table" class="table-default" height="20vh">
          <el-table-column label="品种" prop="type" min-width="60" show-overflow-tooltip/>
          <el-table-column label="在田面积(亩)" min-width="80" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.area }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产量(公斤)" min-width="80" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.output }}</span>
            </template>
          </el-table-column>
          <el-table-column label="销售量(公斤)" min-width="90" show-overflow-tooltip>
            <template #default="scope">
              <span class="td-emphasis">{{ scope.row.sale }}</span>
            </template>
          </el-table-column>
        </el-table>
      </main>
    </div>

  </div>
</template>

<script>
import { setClqs } from '@/echarts/options'

export default {
  name: 'ZnfxNcpcl',
  data() {
    return {
      sort_clqk: '',
      yearArr: [],
      monthArr: [],
      vegeCataArr: ['全部蔬菜','绿叶菜','非绿叶菜'],
      data_clqk: [
        { name: '水稻（吨）', value: 3432, pic: require('@/assets/imgs/deck/page_znfx/icon-rice.png') },
        { name: '蔬菜（吨）', value: 3432, pic: require('@/assets/imgs/deck/page_znfx/icon-vegetable.png') },
        { name: '水产（吨）', value: 3432, pic: require('@/assets/imgs/deck/page_znfx/icon-shrimp.png') },
        { name: '畜牧（吨）', value: 3432, pic: require('@/assets/imgs/deck/page_znfx/icon-meat.png') }
      ],
      sort_clqs: '畜牧',
      chartData_clqs: {
        xm: [], sd: [], shuichan: [], shucai: []
      },
      cataArr: ['畜牧','水稻','水产','蔬菜'],
      data_sdcl: [
        { name: '单产(公斤/亩)', value: 516 },
        { name: '面积(亩)', value: 3190 },
        { name: '总产(吨)', value: 950 },
        { name: '比上年', value: -4.5 },
      ],
      tableData_outputByTown: [],
      tableData_vegeInOut: [],
      tab_crb3: 1,
      tableData_vegeOutSale: {
        jyzt: [], crop: []
      },
      tableData_vegeExpect: [],
      sort_scbz: {
        year: '',
        month: '',
        type: '全部蔬菜',
        breed: ''
      },
      scbz_current: '',
      searchCtxJyzt: '',
      searchRes: [],
      searchResShow: false,
      detailShow: false,
      detailData: {
        name: '',
        basic: [],
        table: []
      },
      sort_detail: {
        start: '',
        end: ''
      }
    }
  },
  mounted() {
    this.initDate()
    this.getOutputByTown()
    this.getVegeInOut()
    this.getVegeExpect()
  },
  watch: {
    tab_crb3: {
      handler(val) {
        let temp = []
        let example
        if(val===1) {
          example = { jyzt: 'XXXX', sszc: 'XXX镇', output: 328, sale: 328 }
          for(let i=0; i<10; i++) {
            temp.push(example)
          }
          this.tableData_vegeOutSale.jyzt = temp
        } else if(val===2) {
          example = { type: '花生', relate: 45, output: 328, sale: 328 }
          for(let i=0; i<10; i++) {
            temp.push(example)
          }
          this.tableData_vegeOutSale.crop = temp
        }
      },
      immediate: true
    },
    sort_clqs: {
      handler(val) {
        switch(val) {
          case('畜牧'):
            this.getClqsData('xm')
            break
          case('水稻'):
            this.getClqsData('sd')
            break
          case('水产'):
            this.getClqsData('shuichan')
            break
          case('蔬菜'):
            this.getClqsData('shucai')
        }
      },
      immediate: true
    }
  },
  computed: {
    scbzBreedArr() {
      let result = []
      this.tableData_vegeInOut.forEach(row => {
        result.push(row.type)
      })
      return result
    }
  },
  methods: {
    initDate() {
      this.getRecentYears()
      const currentYear = new Date().getFullYear()
      this.sort_clqk = this.sort_scbz.year = currentYear
      this.sort_scbz.month = new Date().getMonth()+1
      this.getMonthArr(currentYear)
    },
    getRecentYears() {
      let thisYear = new Date().getFullYear()
      for(let i=0; i>-5; i--) {
        this.yearArr.push(thisYear+i)
      }
    },
    getMonthArr(year) {
      this.monthArr = []
      const d = new Date()
      const maxMonth = d.getFullYear()===year? d.getMonth()+1: 12
      for(let i=1; i<=maxMonth; i++) {
        this.monthArr.push(i)
      }
    },
    getOutputByTown() {
      let temp = []
      let example = { rice: 2023, vege: 2023, water: 2023, meat: 2023 }
      for(let i=0; i<20; i++) {
        temp.push({...example, town: '镇'+(i+1)})
      }
      this.tableData_outputByTown = temp
    },
    getVegeInOut() {
      let temp = []
      const typeArr = ['青菜','白菜','韭菜','菠菜','香菜','苋菜','荠菜','芹菜','生菜','甜菜']
      for(let i=0; i<10; i++) {
        temp.push({ type: typeArr[i], plant: 328, harvest: 328 })
      }
      this.tableData_vegeInOut = temp
    },
    getVegeExpect() {
      let temp = []
      let example = { type: 'XXXX', area: 2099.38, weight: 130, subject: 130 }
      for(let i=0; i<20; i++) {
        temp.push({...example})
      }
      this.tableData_vegeExpect = temp
    },
    getClqsData(type) {
      switch(type) {
        case 'xm':
          this.chartData_clqs.xm = [
            { time: '22-12', 畜牧: 1000 },
            { time: '23-01', 畜牧: 1000 },
            { time: '23-02', 畜牧: 1000 },
            { time: '23-03', 畜牧: 1000 },
            { time: '23-04', 畜牧: 1000 },
            { time: '23-05', 畜牧: 1000 }
          ]
          break
        case 'sd':
          this.chartData_clqs.sd = [
            { time: '2020', 水稻: 1000 },
            { time: '2021', 水稻: 1000 },
            { time: '2022', 水稻: 1000 },
            { time: '2023', 水稻: 1000 }
          ]
          break
        case 'shuichan':
          this.chartData_clqs.shuichan = [
            { time: '22-12', 近洋产量: 1000, 淡水养殖: 2000 },
            { time: '23-01', 近洋产量: 1000, 淡水养殖: 2000 },
            { time: '23-02', 近洋产量: 1000, 淡水养殖: 2000 },
            { time: '23-03', 近洋产量: 1000, 淡水养殖: 2000 },
            { time: '23-04', 近洋产量: 1000, 淡水养殖: 2000 },
            { time: '23-05', 近洋产量: 1000, 淡水养殖: 2000 }
          ]
          break
        case 'shucai':
          this.chartData_clqs.shucai = [
            { time: '22-12', 蔬菜: 1000 },
            { time: '23-01', 蔬菜: 1000 },
            { time: '23-02', 蔬菜: 1000 },
            { time: '23-03', 蔬菜: 1000 },
            { time: '23-04', 蔬菜: 1000 },
            { time: '23-05', 蔬菜: 1000 }
          ]
          break
      }
      this.$nextTick(() => {
        setClqs(document.getElementById('chat-clqs'), this.chartData_clqs[type])
      })
    },
    vegeInOutPick(row) {
      if(this.scbz_current === row.type) {
        this.scbz_current = null
        this.$refs['table_vegeInOut'].setCurrentRow()
      } else {
        this.scbz_current = row.type
      }
    },
    subStaChange(breed) {
      this.$refs['table_vegeInOut'].setCurrentRow(this.tableData_vegeInOut.find(row => row.type===breed))
    },
    handleSearch() {
      let temp = []
      for(let i=0; i<10; i++) {
        temp.push({ id: i, name: '上海银龙蔬菜专业合作社'+(i+1) })
      }
      this.searchRes = temp
      this.searchResShow = true
    },
    searchResPick(item) {
      this.detailData.name = item.name
      this.detailData.basic = [
        { name: '法定代表人', value: 'XXXXXXXXXXXXXXXXX' },
        { name: '联系方式', value: 'XXXXXXXXXXXXXXXXX' },
        { name: '主体唯一标识', value: 'XXXXXXXXXXXXXXXXX' },
        { name: '经营地址', value: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX' },
      ]
      this.detailData.table = [
        { type: '鸡毛菜', area: 80.8, output: 80.8, sale: 80.8 },
        { type: '菠菜', area: 80.8, output: 80.8, sale: 80.8 },
        { type: '土豆', area: 80.8, output: 80.8, sale: 80.8 },
        { type: '胡萝卜', area: 80.8, output: 80.8, sale: 80.8 },
      ]
      this.detailShow = true
    },
    handlePickTime() {

    }
  }
}
</script>

<style lang="scss" scoped>
.c-left {
  left: 260px;
}
.cl-b1 {
  .l1-sort {
    text-align: right;
    margin-bottom: 24px;
  }
  .l1-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      display: flex;
      align-items: center;
      width: calc(50% - 9px);
      height: 128px;
      margin-bottom: 18px;
      background: rgba($color: #158C6C, $alpha: 0.2);
      border-radius: 2px;
      &>img {
        width: 117px;
        height: 113px;
        margin-bottom: 15px;
      }
      &>div {
        span {
          display: block;
        }
        .text-28 {
          margin-bottom: 18px;
        }
      }
    }
  }
}

.cl-b2 {
  margin-bottom: 10px;
  .l2-sort {
    text-align: right;
    margin-bottom: 10px;
  }
  #chat-clqs {
    width: 100%;
    height: 17vh;
  }
}

.cl-b3 {
  height: 319px;
  width: calc(100% + 80px);
  margin-left: -40px;
  // margin: 20px 0;
  background: url('../../../../assets/imgs/deck/page_znfx/bg-sdcl.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 55px 0;

  .value-percent {
    font-size: 20px;
    font-family: YSBTH;
    line-height: 18px;
  }

  .l3-left, .l3-right {
    width: 26%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    .text-28 {
      margin-bottom: 10px;
    }
    &>div>span {
      display: block;
      text-align: right;
    }
  }
  .l3-right {
    align-items: flex-start;
    &>div>span {
      text-align: left;
    }
  }
  .l3-center {
    margin-bottom: 25px;
    img {
      display: block;
      width: 156px;
      height: 163px;
    }
    span {
      display: block;
      width: 156px;
      text-align: center;
      margin-top: -25px;
    }
  }
}

.cl-b4 {
  :deep(.table-default) {
    th>div, td>div {
      padding: 0 0 0 10px !important;
    }
  }
}

.cr-b1 {
  .r1-sort {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .select-default {
      width: calc(50% - 10px);
      margin-bottom: 18px;
    }
  }
}

.cr-b2 {
  :deep(.table-default) {
    th>div, td>div {
      padding: 0 0 0 10px !important;
    }
  }
}

.cr-b3 {
  
}

.sub-sta {
  position: absolute;
  top: 185px;
  right: 1000px;
  width: 440px;
  height: 280px;
  box-sizing: border-box;
  padding: 30px;
  border: 1px solid #7FFFEA;
  background: rgba(0, 58, 64, 0.8);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &>span {
    margin: 10px 0;
    font-size: 32px;
    font-family: YSBTH;
  }

  &>div {
    display: flex;
    align-items: center;

    span:nth-child(1) {
      font-size: 28px;
    }

    span:nth-child(2) {
      margin: 0 20px;
      font-size: 42px;
      line-height: 42px;
      font-family: YSBTH;
      color: #FFE258;
    }

    span:nth-child(3) {
      font-size: 20px;
    }
  }
}

.subject-search {
  position: absolute;
  top: 185px;
  left: 1100px;
  width: 690px;
  :deep(.el-input) {
    .is-focus>.el-input__inner {
      border: 1px solid #17D2E3 !important;
    }
    .el-input__inner {
      height: 80px;
      border: 1px solid #7FFFEA;
      border-radius: 0;
      background: rgba(0,58,64,0.8);
      font-size: 28px;
      color: #ddd;
      padding: 0 80px 0 35px;
    }
    .input-suffix-search {
      display: inline-block;
      width: 32px;
      height: 32px;
      margin: 24px 20px 0 0;
      background: url('@/assets/imgs/deck/page_znfx/btn-search.png') no-repeat;
      background-size: contain;
      cursor: pointer;
    }
  }
  .search-res {
    position: absolute;
    top: 100px;
    box-sizing: border-box;
    width: 100%;
    min-height: 100px;
    max-height: 470px;
    overflow-y: auto;
    border: 1px solid #7FFFEA;
    background: rgba(0,58,64,0.8);
    li {
      height: 60px;
      padding: 0 30px;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: rgba($color: #fff, $alpha: 0.2);
      }
      img {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
      span {
        font-size: 28px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }

}

.jyzt-detail {
  top: 775px;
  left: 1100px;
  width: 950px;
  height: 1070px;
  .box-title2 {
    margin: 27px 0;
    &::after {
      display: none;
    }
  }
  .row-sort {
    margin-bottom: 25px;
    .el-date-editor {
      margin-right: 20px;
    }
  }
}
</style>