<template>
  <com-head :options="headList"  v-model="statusa" v-if="!loadding">
    <el-form label-width="90px" inline="true">
      <el-form-item label="房源编码：">
        <el-input v-model="search.state.roomlistingId" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="所属小区：">
        <el-input v-model="search.state.gardenName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="维护人：">
        <el-input v-model="search.state.maintenanceman" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="提审时间：">
        <el-date-picker
          v-model="arraignmentTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核人：">
        <el-input v-model="search.state.reviewer" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="审核状态：">
        <el-select v-model="statusa" placeholder="全部">
          <el-option v-for="(item) in status" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="审核时间：">
        <el-date-picker
          v-model="reviewTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item class="searh-btns">
        <el-button @click="search.reset">重置</el-button>
        <el-button type="primary" @click="search.submit">查询</el-button>
        <el-button type="primary" @click="exportExe" :disabled="!pag.state.total">导出</el-button>
      </el-form-item>
    </el-form>
  </com-head>
</template>

<script>
import comHead from "@/components/head";
import getState from './state'
import { getParams } from "@/state/tableRef";
import axios from 'axios';
import { EXAMINE_SHOW_STATUS } from '@/constant'
import { exporrtSecondHouseAuditEstate, getSecondHouseTotal } from '@/request/config'
import { ref } from '@vue/reactivity';

export default {
  props: {
    parentVM: Object
  },
  setup(props) {
    
    return {
      ...getState(props.parentVM),
      loadding: ref(true),
      status: EXAMINE_SHOW_STATUS,
    }
  },
  
  watch: {
    'dataList.state'() {
      this.referTotal()
    }
  },
  methods: {
    resetSearch() {
      let type = this.search.state.type
      this.search.reset()
      this.search.state.type = type
    },
    async exportExe() {
      let params = {
        ...getParams(this.search.state),
        pageNum: this.pag.state.currPage,
        pageSize: this.pag.state.size
      }
      console.log(params)
      if (!params.arraignmentTimeEnd || !params.arraignmentTimeStart) {
        return this.$alert('请先选择提审时间段', '提示')
      } else {
        const monthDiff = (startDate, endDate) => Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());
        if (monthDiff(this.arraignmentTime[0], this.arraignmentTime[1]) > 3) {
          return this.$alert('最多支持导出连续四个月的数据', '提示')
        }
      }
      
      let res = await axios.get(exporrtSecondHouseAuditEstate, { params })
      location.href = res.data.resultData
    },
    async referTotal() {
      try {
        let res = await axios.post(getSecondHouseTotal)
        const map = {
          allCount: -2,
          areaAuditingCount: 3,
          groupAuditingCount: 1,
          onlineCount: 2,
          unPassCount: -1 
        }
        this.headList = this.initHeadList.map(item => {
          for (let key in res.data[0]) {
            if (item.value === map[key]) {
              return {...item, name: `${item.name}(${res.data[0][key]})`}
            }
          }
          return item
        })
        console.log('...', this.headList)
      } catch(e) {
        console.log(e)
      }
    }
  },
  async mounted() {
    this.initHeadList = this.headList.map(item => ({...item}))
    await this.referTotal()
    
    this.loadding = false
  },
  components: {
    comHead,
  }
}
</script>