<template>
  <div v-loading="loading">
    <div class="titles">整体统计</div>
    <div class="item-wapper">
      <div class="one item-box" @click="$emit('handleClick', 'project')">
        <div class="data-left">
          <div class="data-title">{{ thisYear }}年项目总数</div>
          <div class="number">{{ projectNum.toLocaleString('en-US') }}</div>
          <div>
            <span class="text-1">较去年</span>
            <span class="text-2" :class="{ upColor: isProjectUp, dowColor: !isProjectUp }">{{ subYear }}</span>
            <img :src="isProjectUp ? upImg : downImg" alt="">
          </div>
        </div>
        <div class="chart-box">
          <div id="thisYear"></div>
        </div>
      </div>
      <div class="two item-box" @click="$emit('handleClick', 'contract')">
        <div class="data-left">
          <div class="data-title">{{ thisYear }}年承接合同数</div>
          <div class="number">{{ contractNum.toLocaleString('en-US') }}</div>
          <div>
            <span class="text-1">较去年</span>
            <span class="text-2" :class="{ upColor: isContractUp, dowColor: !isContractUp }">{{ contractSubYear
              }}</span>
            <img :src="isContractUp ? upImg : downImg" alt="">
          </div>
        </div>
        <div class="chart-box">
          <div id="thisContract"></div>
        </div>
      </div>
      <div class="four item-box" @click="$emit('handleClick', 'borrow')">
        <div class="data-left">
          <div class="data-title">{{ thisYear }}借款次数</div>
          <div class="number">{{ borrowNum.toLocaleString('en-US') }}</div>
          <div>
            <span class="text-1">较去年</span>
            <span class="text-2" :class="{ upColor: isBorrowUp, dowColor: !isBorrowUp }">{{ borrowSubYear }}</span>
            <img :src="isBorrowUp ? upImg : downImg" alt="">
          </div>
        </div>
        <div class="chart-box">
          <div id="thisBorrow"></div>
        </div>
      </div>

      <div class="five item-box" @click="$emit('handleClick', 'settle')">
        <div class="data-left">
          <div class="data-title">{{ thisYear }}结算次数</div>
          <div class="number">{{ settleNum.toLocaleString('en-US') }}</div>
          <div>
            <span class="text-1">较去年</span>
            <span class="text-2" :class="{ upColor: isSettleUp, dowColor: !isSettleUp }">{{ settleSubYear }}</span>
            <img :src="isSettleUp ? upImg : downImg" alt="">
          </div>
        </div>
        <div class="chart-box">
          <div id="thisSettle"></div>
        </div>
      </div>
      <div class="three item-box" @click="$emit('handleClick', 'device')">
        <div class="data-left">
          <div class="data-title">{{ thisYear }}年设备申领</div>
          <div class="number">{{ deviceNum.toLocaleString('en-US') }}</div>
          <div>
            <span class="text-1">较去年</span>
            <span class="text-2" :class="{ upColor: isDeviceUp, dowColor: !isDeviceUp }">{{ deviceSubYear }}</span>
            <img :src="isDeviceUp ? upImg : downImg" alt="">
          </div>
        </div>
        <div class="chart-box">
          <div id="thisDevice"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import upSrc from '@/assets/icons/up.png'
import downSrc from '@/assets/icons/down.png'
import * as echarts from 'echarts'
import { ehcartsInit } from '@/utils/echarts'
let thisYearChart, contractYearChart, deviceYearChart, borrowYearChart, settleYearChart
export default {
  props: {
    pDatas: {
      type: Object,
      require: true,
    },
    cDatas: {
      type: Object,
      require: true,
    },
    dDatas: {
      type: Object,
      require: true,
    },
    bDatas: {
      type: Object,
      require: true,
    },
    sDatas: {
      type: Object,
      require: true,
    }
  },
  data() {
    return {
      projectNum: 0,
      contractNum: 0,
      deviceNum: 0,
      borrowNum: 0,
      settleNum: 0,
      upImg: upSrc,
      downImg: downSrc,
      isProjectUp: false,
      isContractUp: false,
      isDeviceUp: false,
      isBorrowUp: false,
      isSettleUp: false,
      thisYear: new Date().getFullYear(),
      year: {},
      type: {},
      source: {},
      dept: {},
      contractAmount: {},
      contractCwAmount: {},
      contractSource: {},
      contractYear: {},
      deviceApproval: {},
      deviceStatus: {},
      deviceYear: {},
      borrowAmount: {},
      borrowUsage: {},
      borrowUsageAmount: {},
      borrowYear: {},
      settleAmount: {},
      settleType: {},
      settleTypeAmount: {},
      settleYear: {},
      subYear: 0,
      contractSubYear: 0,
      deviceSubYear: 0,
      borrowSubYear: 0,
      settleSubYear: 0,
      loading: true
    }
  },
  watch: {
    year() {
      this.initChartOne();
    },
    contractYear() {
      this.initChartTwo();
    },
    deviceYear() {
      this.initChartThree();
    },
    borrowYear() {
      this.initChartFour();
    },
    settleYear(){
      this.initChartFive();
    },
    pDatas: {
      handler(newVal) {
        if (newVal) {
          this.initDatas();
        }
      },
      immediate: true,  // 在绑定时立即执行一次  
      deep: true       // 深度监听对象的变化  
    },
    cDatas: {
      handler(newVal) {
        if (newVal) {
          this.initDatas();
        }
      },
      immediate: true,  // 在绑定时立即执行一次  
      deep: true       // 深度监听对象的变化  
    },
    dDatas: {
      handler(newVal) {
        if (newVal) {
          this.initDatas();
        }
      },
      immediate: true,  // 在绑定时立即执行一次  
      deep: true       // 深度监听对象的变化  
    },
    bDatas: {
      handler(newVal) {
        if (newVal) {
          this.initDatas();
        }
      },
      immediate: true,  // 在绑定时立即执行一次  
      deep: true       // 深度监听对象的变化  
    },
    sDatas: {
      handler(newVal) {
        if (newVal) {
          this.initDatas();
        }
      },
      immediate: true,  // 在绑定时立即执行一次  
      deep: true       // 深度监听对象的变化  
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async initDatas() {
      this.loading = true
      if (Object.keys(this.pDatas).length !== 0) {
        this.year = this.pDatas.year[0];
        this.type = this.pDatas.type[0];
        this.source = this.pDatas.source[0];
        this.dept = this.pDatas.dept[0];
        this.getProjectYearSub(this.year);
      }
      if (Object.keys(this.cDatas).length !== 0) {
        this.contractAmount = this.cDatas.yearAmount[0];
        this.contractCwAmount = this.cDatas.sourceAmount[0];
        this.contractSource = this.cDatas.sourceCount[0];
        this.contractYear = this.cDatas.yearCount[0];
        this.getContractYearSub(this.contractYear);
      }
      if (Object.keys(this.dDatas).length !== 0) {
        this.deviceApproval = this.dDatas.approval[0];
        this.deviceStatus = this.dDatas.status[0];
        this.deviceYear = this.dDatas.year[0];
        this.getDeviceYearSub(this.deviceYear);
      }
      if (Object.keys(this.bDatas).length !== 0) {
        this.borrowAmount = this.bDatas.amount[0];
        this.borrowUsage = this.bDatas.usage[0];
        this.borrowUsageAmount = this.bDatas.usageAmount[0];
        this.borrowYear = this.bDatas.year[0];
        this.getBorrowYearSub(this.borrowYear);
      }
      if (Object.keys(this.sDatas).length !== 0) {
        this.settleAmount = this.sDatas.amount[0];
        this.settleType = this.sDatas.type[0];
        this.settleTypeAmount = this.sDatas.typeAmount[0];
        this.settleYear = this.sDatas.year[0];
        this.getSettleYearSub(this.settleYear);
      }

      this.loading = false
    },
    initChartOne() {
      let option = {
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: Object.keys(this.year).slice(-6),
          show: false
        },
        yAxis: {
          type: 'value',
          axisLabel: { show: false },
          splitLine: { show: false }
        },
        series: [
          {
            min: 0,
            data: Object.values(this.year).slice(-6),
            type: 'line',
            smooth: true,
          }
        ]
      };
      ehcartsInit(thisYearChart, 'thisYear', option);
    },
    initChartTwo() {
      let option = {
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: Object.keys(this.contractYear).slice(-6),
          show: false
        },
        yAxis: {
          type: 'value',
          axisLabel: { show: false },
          splitLine: { show: false }
        },
        series: [
          {
            min: 0,
            data: Object.values(this.contractYear).slice(-6),
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#00B42A'
            }
          }
        ]
      };
      ehcartsInit(contractYearChart, 'thisContract', option);
    },
    initChartThree() {
      let option = {
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: Object.keys(this.deviceYear).slice(-6),
          show: false
        },
        yAxis: {
          type: 'value',
          axisLabel: { show: false },
          splitLine: { show: false }
        },
        series: [
          {
            min: 0,
            data: Object.values(this.deviceYear).slice(-6),
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#3498DB'
            }
          }
        ]
      };
      ehcartsInit(deviceYearChart, 'thisDevice', option);
    },
    initChartFour() {
      let option = {
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: Object.keys(this.borrowYear).slice(-6),
          show: false
        },
        yAxis: {
          type: 'value',
          axisLabel: { show: false },
          splitLine: { show: false }
        },
        series: [
          {
            min: 0,
            data: Object.values(this.borrowYear).slice(-6),
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#7B68EE'
            }
          }
        ]
      };
      ehcartsInit(borrowYearChart, 'thisBorrow', option);
    },
    initChartFive() {
      let option = {
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: Object.keys(this.settleYear).slice(-6),
          show: false
        },
        yAxis: {
          type: 'value',
          axisLabel: { show: false },
          splitLine: { show: false }
        },
        series: [
          {
            min: 0,
            data: Object.values(this.settleYear).slice(-6),
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#E74C3C'
            }
          }
        ]
      };
      ehcartsInit(settleYearChart, 'thisSettle', option);
    },
    getProjectYearSub(year) {
      let arr = Object.values(year).slice(-2);
      this.subYear = Number(arr[1]) - Number(arr[0]);
      this.projectNum = Number(arr[1])
      if (this.subYear < 0) {
        this.subYear = - this.subYear;
        this.isProjectUp = false
      } else {
        this.isProjectUp = true
      }
    },
    getContractYearSub(year) {
      let arr = Object.values(year).slice(-2);
      this.contractSubYear = Number(arr[1]) - Number(arr[0]);
      this.contractNum = Number(arr[1])
      if (this.contractSubYear < 0) {
        this.contractSubYear = - this.contractSubYear;
        this.isContractUp = false
      } else {
        this.isContractUp = true
      }
    },
    getDeviceYearSub(year) {
      let arr = Object.values(year).slice(-2);
      this.deviceSubYear = Number(arr[1]) - Number(arr[0]);
      this.deviceNum = Number(arr[1])
      if (this.deviceSubYear < 0) {
        this.deviceSubYear = - this.deviceSubYear;
        this.isDeviceUp = false
      } else {
        this.isDeviceUp = true
      }
    },
    getBorrowYearSub(year) {
      let arr = Object.values(year).slice(-2);
      this.borrowSubYear = Number(arr[1]) - Number(arr[0]);
      this.borrowNum = Number(arr[1])
      if (this.borrowSubYear < 0) {
        this.borrowSubYear = - this.borrowSubYear;
        this.isBorrowUp = false
      } else {
        this.isBorrowUp = true
      }
    },
    getSettleYearSub(year) {
      let arr = Object.values(year).slice(-2);
      this.settleSubYear = Number(arr[1]) - Number(arr[0]);
      this.settleNum = Number(arr[1])
      if (this.settleSubYear < 0) {
        this.settleSubYear = - this.settleSubYear;
        this.isSettleUp = false
      } else {
        this.isSettleUp = true
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.item-wapper {
  height: 134px;
  width: 100%;
  display: flex;
}

.titles {
  font-family: 'puhuiti';
  font-size: 16px;
  margin-bottom: 16px;
}

.item-box:hover {
  box-shadow: 0 0 15px #e7e5e5;
}

.item-box {
  flex: 1;
  margin: 0 10px;
  height: 100%;
  padding: 13px;
  display: flex;
  cursor: pointer;

  .data-left {
    flex: 1;

    .data-title {
      font-family: 'puhuiti45';
      font-weight: 500;
      margin-bottom: 24px;
      font-size: 16px;
    }

    .number {
      font-size: 24px;
      font-family: 'puhuiti45';
      font-weight: 700;
    }

    .text-1 {
      color: #4E5969;
      font-size: 12px;
      margin-right: 10px;
    }

    .text-2 {
      font-size: 14px;
      font-family: 'puhuiti45';
      font-weight: 700;
      margin-right: 5px;
    }
  }

  .chart-box {
    flex: 1;

    div {
      width: 100%;
      height: 100%;
    }
  }

}

.one {
  background-color: #F2F9FE;
}

.two {
  background-color: #F5FEF2;
}

.three {
  background-color: #F2F9FE;
}

.four {
  background-color: #F6F6FF;
}

.five {
  background-color: #FFF0F5;
}

.upColor {
  color: #F44C4C;
}

.dowColor {
  color: #00B42A
}
</style>