<template>
  <el-main class="box" ref="tablePanel">
    <!-- 搜索条件 -->
    <div class="search-form-box" ref="searchPanel">
      <div class="search-basics">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="80px"
          class="search-top"
          @submit.native.prevent
        >
          <el-select
            v-model="searchForm.year"
            clearable
            placeholder="请选择年份"
            @change="findinfo"
          >
            <el-option
              v-for="item in optionYears"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <dict-select
            v-model="searchForm.type"
            dictCode="xmgl-xmlx"
            validate="required"
            placeholder="请选择项目类型"
            :clearable="true"
            @keyup.enter.native="findinfo"
          />

          <!--  <el-select
          v-model="searchForm.type"
          clearable
          placeholder="请选择类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
          <project-info-selector
            ref="projectInfo"
            v-model="searchForm.projectId"
            style="width: 100%"
            @keyup.enter.native="findinfo"
          ></project-info-selector>
          <el-button
            size="small"
            type="primary"
            class="el-icon-search search-btn"
            @click="findinfo"
            >查询</el-button
          >
          <el-button
            size="small"
            type="primary"
            plain
            class="el-icon-refresh"
            @click="handleReset"
            >重置</el-button
          >
        </el-form>
        <div class="moreBtn">
          <el-button size="small" plain @click="searchMore">{{
            showMore ? '基础搜索' : '高级搜索'
          }}</el-button>
        </div>
      </div>
      <!-- 高级input -->
      <div class="advancedInput" :class="showMore ? 'open' : 'close'">
         <el-date-picker
            unlink-panels
            v-model="searchForm.yearMonth"
            value-format="yyyy-MM"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            @change="findinfo"
          >
          </el-date-picker>
      </div>
    </div>
    <!-- 内容部分 -->
    <div class="content">
      <!--  -->
      <div class="flex">
        <div class="content-div flex-1 border-radius">
          <span class="title">投资进度统计(万元)</span>
          <column-bar-line :params="params" />
        </div>
      </div>
      <div class="flex height">
        <div class="content-div flex-1 border-radius relative">
          <span class="title">施工进度统计</span>
          <column-transverse
            :params_="params_"
            @handleNotNext="handleNotNext"
          />
          <div class="control">
            <el-link type="primary" class="previous" @click="handlePrv">
              <i class="el-icon-caret-left"></i>
            </el-link>
            <span>{{ params_.pageBean.page }}</span>
            <el-link type="primary" class="next" @click="handleNext">
              <i class="el-icon-caret-right"></i>
            </el-link>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="flex">
        <div class="content-div flex-1 border-radius pad">
          <span class="title">招投标统计</span>
          <pie-chart-bidding :params="params" />
        </div>
        <div class="content-div flex-1 border-radius pad">
          <span class="title">合同金额统计(万元)</span>
          <pie-chart-contract :params="params" />
        </div>
        <!-- <div class="content-div flex-1 border-radius pad">
          <span class="title">变更金额统计</span>
          <pie-Chart-build :params='params' />
        </div> -->
      </div>
      <!--  -->
      <!-- <div class="flex">
        <div class="content-div flex-1 border-radius">
          <span class="title">工程变更统计</span>
          <column-eng-change />
        </div>
        <div class="content-div flex-1 border-radius">
          <span class="title">质量巡检统计</span>
          <line-double-chart />
        </div>
        <div class="content-div flex-1 border-radius">
          <span class="title">月报统计</span>
          <leave-line-chart />
        </div>
      </div> -->
      <!--  -->
      <!-- <div class="flex">
        <div class="content-div flex-1 border-radius">
          <span class="title">计量支付统计</span>
          <column-pay />
        </div>
      </div> -->
    </div>
  </el-main>
</template>
<script>
import ColumnBarLine from '@/components/charts/projectStatisticsCharts/ColumnBarLine.vue'
import ColumnTransverse from '@/components/charts/projectStatisticsCharts/ColumnTransverse.vue'
import PieChartBidding from '@/components/charts/projectStatisticsCharts/PieChartBidding.vue'
import PieChartBuild from '@/components/charts/projectStatisticsCharts/PieChartBuild.vue'
import PieChartContract from '@/components/charts/projectStatisticsCharts/PieChartContract.vue'
// import LeaveLineChart from '@/components/charts/projectStatisticsCharts/LeaveLineChart.vue'
// import LineDoubleChart from '@/components/charts/projectStatisticsCharts/LineDoubleChart.vue'
// import ColumnEngChange from '@/components/charts/projectStatisticsCharts/ColumnEngChange.vue'
// import ColumnPay from '@/components/charts/projectStatisticsCharts/ColumnPay.vue'
export default {
  name: 'projectInformationStatistics',
  components: {
    ColumnBarLine,
    ColumnTransverse,
    PieChartBidding,
    // PieChartBuild,
    PieChartContract,
    // LeaveLineChart,
    // LineDoubleChart,
    // ColumnEngChange,
    // ColumnPay,
  },
  data() {
    return {
      searchForm: {
        year: new Date().getFullYear(),
      },
      contentHeight: '',
      options: [
        {
          name: '道路工程',
          value: '1',
        },
        {
          name: '市政设施',
          value: '2',
        },
        {
          name: '楼宇厂房',
          value: '3',
        },
        {
          name: '生态环保',
          value: '4',
        },
        {
          name: '服务配套',
          value: '5',
        },
        {
          name: '政权建设',
          value: '6',
        },
        {
          name: '征地拆迁',
          value: '7',
        },
      ],
      value: '',
      showMore: false,
      optionYears: [],
      params: {
        endTime: `${new Date().getFullYear()}-12-31`,
        projectId: '',
        startTime: `${new Date().getFullYear()}-01-01`,
        type: ''
      }, //请求参数
      params_: {
        pageBean: {
          page: 1,
          pageSize: 30,
          showTotal: true,
        },
        querys: [
          // {
          //   group: 'main',
          //   operation: 'BETWEEN',
          //   property: 'CREATE_TIME_',
          //   relation: 'AND',
          //   value: [
          //     `${new Date().getFullYear()}-01-01 00:00:00`,
          //     `${new Date().getFullYear()}-12-31 23:59:59`
          //   ]
          // }
        ],
      },
      isAdd: true,
    }
  },
  mounted() {
    this.getYear()
    this.getContentHeight()
    this.$root.$on('resize', () => {
      this.getContentHeight(500)
    })
    this.$bus.$on('reHeight', () => {
      this.getContentHeight()
    })
    this.findinfo()
  },
  methods: {
    searchMore() {
      this.showMore = !this.showMore
        if(!this.showMore){
        this.searchForm.yearMonth = []
        }
      this.searchForm.year=''
    },
    getYear() {
      const myDate = new Date()
      const startYear = 2006 //起始年份
      const endYear = myDate.getFullYear() //结束年份
      for (let i = endYear; i >= startYear; i--) {
        this.optionYears.push({
          label: i + '年',
          value: i,
        })
      }
    },
    getContentHeight(delay) {
      setTimeout(() => {
        const mainHeight = this.$refs.tablePanel.$el.clientHeight
        const searchHeight = this.$refs.searchPanel.clientHeight
        this.contentHeight = mainHeight - searchHeight
      }, delay || 0)
    },
    findinfo() {
      let params = {
        projectId: this.searchForm.projectId,
        startTime: this.searchForm.year ? `${this.searchForm.year}-01-01` : '',
        endTime: this.searchForm.year ? `${this.searchForm.year}-12-31` : '',
        type: this.searchForm.type,
      }
      this.params = params
      this.$refs.projectInfo.getProjectData(this.searchForm.year)

      /* 施工进度配置参数 */
      this.params_.querys = []
      let querys = {
        id_: this.searchForm.projectId,
        project_type_: this.searchForm.type,
        CREATE_TIME_: this.searchForm.year,
        year_month_: this.searchForm.yearMonth,
      }
      for (let i in querys) {
        if (querys[i] && typeof querys[i] !== 'undefined') {
          if (i == 'CREATE_TIME_') {
            // this.params_.querys.push({
            //   group: 'main',
            //   operation: 'BETWEEN',
            //   property: i,
            //   relation: 'AND',
            //   value: [
            //     `${querys[i]}-01-01 00:00:00`,
            //     `${querys[i]}-12-31 23:59:59`
            //   ]
            // },
            this.params_.querys.push(
              {
                group: 'createTimeGroup',
                operation: 'BETWEEN',
                property: 'commencement_time_',
                relation: 'OR',
                value: [
                  `${querys[i]}-01-01 00:00:00`,
                  `${querys[i]}-12-31 23:59:59`,
                ],
              },
              {
                group: 'createTimeGroup',
                operation: 'BETWEEN',
                parentGroup: '',
                property: 'COMPLETION_TIME_',
                relation: 'OR',
                value: [
                  `${querys[i]}-01-01 00:00:00`,
                  `${querys[i]}-12-31 23:59:59`,
                ],
              },
              // {
              //   group: 'createTimeSubGroup',
              //   operation: 'LESS_EQUAL',
              //   parentGroup: 'createTimeGroup',
              //   property: 'commencement_time_',
              //   relation: 'AND',
              //   value: `${querys[i]}-12-31 23:59:59`,
              // },
              // {
              //   group: 'createTimeSubGroup',
              //   operation: 'LESS',
              //   parentGroup: 'createTimeGroup',
              //   property: 'PROJECT_STATUS_',
              //   relation: 'AND',
              //   value: '12',
              // }
            )
          }else if (i == 'year_month_') {
             let lastDate=querys[i][1]
            let str=lastDate.split('-')
            let year=parseInt(str[0])
            let month=parseInt(str[1])
            let date = new Date(year, month, 0).getDate()
            let arr = [
              `${querys[i][0]}-01 00:00:00`,
              `${querys[i][1]}-${date} 23:59:59`,
            ]
            params.startTime = querys[i] ? `${querys[i][0]}-01` : ''
            params.endTime = querys[i] ? `${querys[i][1]}-${date}` : ''
            this.params_.querys.push(
              {
                group: 'createTimeGroup',
                operation: 'BETWEEN',
                property: 'commencement_time_',
                relation: 'OR',
                value: arr,
              },
              {
                group: 'createTimeGroup',
                operation: 'BETWEEN',
                parentGroup: '',
                property: 'COMPLETION_TIME_',
                relation: 'OR',
                value: arr,
              },
              // {
              //   group: 'createTimeSubGroup',
              //   operation: 'LESS_EQUAL',
              //   parentGroup: 'createTimeGroup',
              //   property: 'commencement_time_',
              //   relation: 'AND',
              //   value: arr[1],
              // },
              // {
              //   group: 'createTimeSubGroup',
              //   operation: 'LESS',
              //   parentGroup: 'createTimeGroup',
              //   property: 'PROJECT_STATUS_',
              //   relation: 'AND',
              //   value: '12',
              // }
            )
          } else {
            this.params_.querys.push({
              group: 'advance',
              operation: 'LIKE',
              property: i,
              relation: 'AND',
              value: querys[i],
            })
          }
        }
      }
      this.isAdd = true
      this.params_ = {...this.params_}
    },
    handleReset() {
      this.searchForm = {
        projectId: '',
        year: '',
        type: '',
      }
      this.params = {}
      this.params_ = {
        pageBean: {
          page: 1,
          pageSize: 30,
          showTotal: true,
        },
        querys: [],
      }
      this.isAdd = true
    },
    handleNext() {
      if (this.isAdd) {
        this.params_.pageBean.page += 1
      }
      this.params_ = {...this.params_}
    },
    handleNotNext() {
      this.isAdd = false
      if (this.params_.pageBean.page > 1) {
        this.params_.pageBean.page -= 1
      }
      this.$message.info('没有数据了')
    },
    handlePrv() {
      this.isAdd = true
      this.params_.pageBean.page -= 1
      if (this.params_.pageBean.page == 0) {
        this.params_.pageBean.page = 1
      }
      this.params_ = {...this.params_}
    },
  },
  destroyed() {
    this.$root.$off('resize')
    this.$bus.$off('reHeight')
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/common.scss';

.box {
  padding: 0;
  overflow: auto;
  overflow-x: hidden;
}

.search-form-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px;
  padding-right: 10px;
}
/* 内容部分样式 */
.content {
  overflow: auto;
  border-radius: 10px;
  box-sizing: border-box;
  height: calc(100% - 70px);
  .flex {
    display: flex;
    height: calc(50% - 10px);
    &:nth-child(n + 1) {
      margin-top: 10px;
    }
  }
  .flex-1 {
    flex: 1;
  }
  .flex-2 {
    flex: 2;
  }
  .border-radius {
    border-radius: 8px;
  }
  .title {
    font-size: 16px;
    margin-top: 10px;
    margin-left: 20px;
    font-weight: bold;
  }
  .content-div {
    background-color: #fff;
    // height: 380PX;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    &:nth-child(2) {
      margin-left: 10px;
    }
    &:nth-child(3) {
      margin-left: 10px;
    }
  }
  .relative {
    position: relative;
  }
  .control {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    align-items: center;
  }
}
.height {
  height: 800px !important;
}
.advancedInput {
  display: flex;
  align-items: center;
  padding: 0 10px;
  overflow: hidden;
}
.open {
  animation: slideContentUp 0.3s linear both;
}
.close {
  animation: slideContentDown 0.3s linear both;
}

/* 动态设置高度 */
@keyframes slideContentUp {
  from {
    height: 0;
  }

  to {
    height: 60px;
  }
}

@keyframes slideContentDown {
  from {
    height: 60px;
  }

  to {
    height: 0;
  }
}
.search-basics {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.moreBtn {
  margin: 0 10px;
}
.search-top {
  display: flex;
  align-items: center;
}
</style>
