<template>
  <div>
    <div class="c-left">
      <div>
        <span class="box-title1">项目统计</span>
        <span class="box-title2">项目概况</span>
      </div>
      <ul class="cl-b1">
        <li v-for="item in data_xmgk" :key="item.title">
          <img src="@/assets/imgs/deck/page_zhcj/icon-project.png" alt="">
          <div>
            <div>
              <span class="text-emp-36">{{ item.count }}</span>
              <span class="text-28">个</span>
            </div>
            <span class="text-28">{{ item.title }}</span>
          </div>
        </li>
      </ul>
      <span class="box-title2">历年项目</span>
      <div id="chart-lnxm"></div>
      <span class="box-title2">项目清单</span>
      <div class="cl-b3">
        <div class="l3-sort">
          <el-select v-model="sort_xmqd.type" placeholder="项目类型" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in xmTypeArr" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="sort_xmqd.year" 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_xmqd.xz" placeholder="乡镇" class="select-default" popper-class="select-default-popper">
            <el-option label="全部" value="全部"></el-option>
            <el-option v-for="item in XZArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="sort_xmqd.hyly" placeholder="行业领域" class="select-default" popper-class="select-default-popper">
            <el-option label="全部" value="全部"></el-option>
            <el-option v-for="item in HylyArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <ul>
          <li v-for="item in listData_xmqd" :key='item.name' @click="handlePick(item)">
            <img :src="item.img" alt="">
            <div>
              <span class="text-28">{{ item.name }}</span>
              <div class="li-row2">
                <div>
                  <img src="@/assets/imgs/deck/page_zhcj/icon-year.png" alt="" class="small-icon">
                  <span class="text-28">{{ item.year }}</span>
                </div>
                <div>
                  <img src="@/assets/imgs/deck/page_zhcj/icon-cny.png" alt="" class="small-icon">
                  <span class="text-emp-36">{{ item.cost }}</span>
                  <span class="text-28">万</span>
                </div>
              </div>
              <div class="li-row3">
                <img src="@/assets/imgs/deck/page_zhcj/icon-location.png" alt="" class="small-icon">
                <span class="text-28">{{item.location}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="c-right">
      <div class="cr-b1">
        <span class="box-title1">项目简介</span>
        <span class="r1-title">{{ data_xmjj.name }}</span>
        <div class="r1-info">
          <el-row>
            <el-col :span="8">
              <img src="@/assets/imgs/deck/page_zhcj/icon-year.png" alt="">
              <span class="text-28">{{ data_xmjj.year }}</span>
            </el-col>
            <el-col :span="16">
              <img src="@/assets/imgs/deck/page_zhcj/icon-cny.png" alt="">
              <span class="text-emp-36">{{ data_xmjj.cost }}</span>
              <span class="text-28">万</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <img src="@/assets/imgs/deck/page_zhcj/icon-house.png" alt="">
              <span class="text-28">{{ data_xmjj.town }}</span>
            </el-col>
            <el-col :span="16">
              <img src="@/assets/imgs/deck/page_zhcj/icon-building.png" alt="">
              <span class="text-28">{{ data_xmjj.corp }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <img src="@/assets/imgs/deck/page_zhcj/icon-location.png" alt="">
              <span class="text-28">{{ data_xmjj.location }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <span class="box-title2">实景图</span>
      <div class="cr-b2">
        <el-carousel arrow="always">
          <el-carousel-item v-for="item in data_pics" :key="item">
            <img :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <span class="box-title2">建设内容</span>
      <div class="cr-b3">
        <p class="text-28">{{ data_jsnr }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { setLnxm } from '@/echarts/options'
import { HylyArr, XZArr } from '@/utils/data/select-data'

export default {
  name: 'ZhcjZdxm',
  data() {
    return {
      data_xmgk: [
        { title: '都市项目数量', count: 568 },
        { title: '重点项目数量', count: 568 }
      ],
      sort_xmqd: {
        type: '',
        year: '',
        xz: '',
        hyly: ''
      },
      HylyArr,
      XZArr,
      yearArr: [],
      xmTypeArr: ['全部','都市项目','重点项目'],
      listData_xmqd: [],
      data_pics: [],
      data_jsnr: '',
      data_xmjj: {}
    }
  },
  mounted() {
    this.initDate()
    this.getChartHistory()
    this.getXmqd()
    this.getProjectDetail()
  },
  methods: {
    initDate() {
      let lastYear = new Date().getFullYear()-1
      for(let i=0; i>-5; i--) {
        this.yearArr.push(lastYear+i)
      }
      this.sort_xmqd.year = lastYear
    },
    getChartHistory() {
      let chartData = [
        { year: '2018', zd: 31, ds: 16 },
        { year: '2019', zd: 34, ds: 22 },
        { year: '2020', zd: 27, ds: 29 },
        { year: '2021', zd: 23, ds: 33 },
        { year: '2022', zd: 29, ds: 27 }
      ]
      setLnxm(document.getElementById('chart-lnxm'), chartData)
    },
    getXmqd() {
      let tempArr = []
      let temp = { img: require('@/assets/imgs/deck/page_zhcj/pic-project.png'), year: '2022', cost: '84112', location: '上海市崇明区向化镇花仓村' }
      for(let i=0; i<10; i++) {
        tempArr.push({...temp, name: '崇明区向化镇花仓村高标准设施菜田建设项目'+(i+1)})
      }
      this.listData_xmqd = tempArr
    },
    handlePick(item) {
      console.log(item)
    },
    getProjectDetail() {
      let picList = []
      let pic = require('@/assets/imgs/deck/page_zhcj/pic-xmsj.png')
      for(let i=0; i<5; i++) {
        picList.push(pic)
      }
      this.data_pics = picList
      this.data_jsnr = '项目区总面积300亩，可耕地面积230亩，其中温室规划面积164.78亩，温室占比面积71.65%，绿叶蔬菜播种面积不低于70%。本项目旨在建设112.94亩的绿叶菜周年流水线工厂化生产保供基地、打造向化镇绿色产品标准规范、生产技术、产品质量、品牌效应，进而提升向化镇绿色食品品牌的社会知名度和市场影响力、31.68亩“茄果类”栽培保供区，将新品种、新技术转化成“生产力”、保供科技于一体的生产保供基地，促进崇明区茄果订单生产、产品回收之功能、20.16亩现代化潮汐育苗、栽培工厂，稳定供应优质基质穴盘苗、“无土栽培”奶油生菜、鸡毛菜等。'
      this.data_xmjj = {
        name: '崇明区向化镇花仓村高标准设施菜田建设项目',
        year: '2022',
        cost: 84112,
        town: '港沿镇',
        corp: '正大蛋业(上海)有限公司',
        location: '上海市崇明区向化镇花仓村'
      }
    }
  },
  watch: {
  }
}
</script>

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

.cl-b1 {
  display: flex;
  justify-content: space-between;
  li {
    img {
      width: 139px;
      height: 155px;
      margin-right: 20px;
    }
    display: flex;
    align-items: center;
    &>div>div {
      .text-28 {
        margin-left: 10px;
      }
    }
  }
}

#chart-lnxm {
  width: 100%;
  height: 21vh;
}

.cl-b3 {
  .l3-sort {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .select-default {
      width: calc(50% - 10px);
      margin-bottom: 18px;
    }
  }
  ul {
    height: 39vh;
    width: calc(100% + 15px);
    overflow-y: auto;
    li {
      display: flex;
      padding: 27px;
      background: rgba(0,255,213,0.18);
      margin: 0 10px 24px 0;
      cursor: pointer;
      &:hover {
        background: rgba(0,255,213,0.3);
      }
      .small-icon {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
      &>img {
        width: 140px;
        height: 140px;
        margin-right: 24px;
      }
      &>div {
        width: calc(100% - 164px);
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &>span {
          display: block;
          width: 100%;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .li-row2 {
        width: 70%;
        display: flex;
        justify-content: space-between;
        &>div {
          display: flex;
          align-items: center;
        }
        .text-emp-36 {
          margin-right: 8px;
        }
      }
      .li-row3 {
        display: flex;
        align-items: center;
        span {
          display: block;
          width: calc(100% - 42px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.cr-b1 {
  .box-title1 {
    margin-bottom: 0;
  }
  .r1-title {
    display: block;
    height: 182px;
    background: url('@/assets/imgs/deck/page_zhcj/bg-xmtitle.png');
    background-size: 100% 100%;
    font-size: 36px;
    font-family: YSBTH;
    color: #FFFFFF;
    text-shadow: 0px 4px 1px rgba(19,143,101,0.5);
    text-align: center;
    line-height: 110px;
  }
  .r1-info {
    margin-top: -40px;
    height: 238px;
    background: url('@/assets/imgs/deck/page_zhcj/bg-platform-xm.png');
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0 100px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .el-row {
      display: flex;
      align-items: center;
      .el-col {
        display: flex;
        align-items: center;
        img {
          width: 32px;
          height: 32px;
          margin-right: 10px;
        }
        .text-emp-36 {
          margin-right: 10px;
        }
      }
    }
  }
}

.cr-b2 {
  height: 400px;
  :deep(.el-carousel) {
    height: 100%;
    .el-carousel__container {
      height: 100%;
      width: calc(100% - 80px);
      margin: 0 auto;
      .el-carousel__item {
        img {
          width: 100%;
          height: 100%;
        }
      }
      .el-carousel__arrow {
        &>i {
          font-size: 35px;
        }
        &.el-carousel__arrow--left {
          left: -40px;
        }
        &.el-carousel__arrow--right {
          right: -40px;
        }
      }
    }
    .el-carousel__indicators {
      &>li {
        margin: 0 4px;
        .el-carousel__button {
          width: 16px;
          height: 4px;
          border-radius: 2px;
        }
      }
    }
  }
}

.cr-b3 {
  height: 37vh;
  background: rgba(0,255,213,0.14);
  p {
    height: calc(100% - 60px);
    overflow-y: auto;
    margin: 30px 10px 30px 40px;
    padding-right: 20px;
    text-indent: 2em;
    line-height: 60px;
  }
}
</style>