<template>
  <tf-page>
    <template v-slot:action>
      <el-form :inline="true">
        <el-form-item label="起始井号:">
          <el-input
            size="small"
            placeholder="请输入起始井号"
            v-model="searchValue.startPoint"
            clearable
            style="margin-right: 10px"
          ></el-input>
        </el-form-item>

        <el-form-item label="终止井号:">
          <el-input
            size="small"
            placeholder="请输入终止井号"
            v-model="searchValue.endPoint"
            clearable
            style="margin-right: 10px"
          ></el-input>
        </el-form-item>

        <el-form-item class="date-time" label="检测日期:">
          <el-date-picker
            v-model="searchValue.startDate"
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd"
            size="small"
            :picker-options="sOpition"
            @change="sDateChange"
          ></el-date-picker>至
          <el-date-picker
            v-model="searchValue.finishDate"
            type="date"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd"
            size="small"
            :picker-options="eOpition"
            @change="eDateChange"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="缺陷等级:">
          <el-select size="small" clearable v-model="searchValue.defectLevel" placeholder="选择缺陷等级">
            <el-option v-for="item in defectLevels" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="整改建议:">
          <el-select size="small" clearable v-model="searchValue.defectLevel" placeholder="选择整改建议">
            <el-option
              v-for="item in checkSuggestList"
              :key="item.codeValue"
              :label="item.codeValue"
              :value="item.codeValue"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="small" style="margin-right: 5px" type="primary" @click="updateTable">搜索</el-button>
          <download-excel
            style="display:inline-block"
            :fields="exportFields"
            :data="exportData"
            :before-finish="afterExport"
            name="管道缺陷汇总表"
            type="xls"
          >
            <el-button size="small" type="primary">导出</el-button>
          </download-excel>
        </el-form-item>
      </el-form>
    </template>
    <tf-table
      :columns="defectSumCols"
      :data="tableData"
      :pagination="pagination"
      v-loading="loading"
      @page-change="onPageChange"
    ></tf-table>
  </tf-page>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { IPagination } from '@/api/common'
import { getDefaultPagination } from '@/utils/constant'
import { defectSumCols } from '../../cols'
import { queryPageDefectInfo, queryDictionariesId } from '@/views/pipelineDefect/api/pipelineDefect'

@Component({ name: 'DefectSum' })
export default class DefectSum extends Vue {
  get defectLevels() {
    return ['一级', '二级', '三级', '四级']
  }

  checkSuggestList = []

  defectSumCols = defectSumCols
  loading: Boolean = false
  pagination: IPagination = getDefaultPagination()

  tableData = []

  sOpition = {
    disabledDate: (time) => {
      time = time.getTime()
      if (this.searchValue.finishDate) {
        return time > new Date(this.searchValue.finishDate).getTime()
      }
      return time > new Date().getTime()
    }
  }
  eOpition = {
    disabledDate: (time) => {
      time = time.getTime()
      if (this.searchValue.startDate) {
        return time < new Date(this.searchValue.startDate).getTime() - 8.64e7 || time > new Date().getTime()
      }
      return time > new Date().getTime()
    }
  }

  searchValue = {
    startDate: '',
    finishDate: '',
    startPoint: '',
    endPoint: '',
    checkSuggest: '',
    defectLevel: ''
  }
  exportFields = {}
  exportData = []

  afterExport() {
    this.$message.success('导出数据成功')
  }
  sDateChange(t) {
    console.log('时间选择')
    if (!this.searchValue.finishDate) {
      this.$nextTick(() => {
        this.searchValue.finishDate = this.searchValue.startDate
      })
    }
  }
  eDateChange(t) {
    if (!this.searchValue.startDate) {
      this.$nextTick(() => {
        this.searchValue.startDate = this.searchValue.finishDate
      })
    }
  }

  initCheckSuggest () {
    queryDictionariesId({ keys: 'check_suggest' }).then(res => {
      this.checkSuggestList = res.result.check_suggest
    })
  }

  mounted() {
    this.setExportFields()
    this.updateTable()
    this.initCheckSuggest()
  }
  setExportFields () {
    this.defectSumCols.forEach(i => {
      if (i.label !== '序号') {
        this.exportFields[i.label] = i.prop
      }
    })
  }

  onPageChange(pagination) {
    this.pagination = { ...this.pagination, ...pagination }
    this.updateTable()
  }

  updateTable() {
    let data: any = { ...this.pagination }
    data.wordInfoState = 1
    data.startPoint = this.searchValue.startPoint
    data.endPoint = this.searchValue.endPoint
    data.jcStartDate = this.searchValue.startDate
    data.jcEndDate = this.searchValue.finishDate
    data.checkSuggest = this.searchValue.checkSuggest
    data.defectLevel = this.searchValue.defectLevel

    queryPageDefectInfo(data).then((res) => {
      if (res.code === 1) {
        this.tableData = res.result.records
        this.pagination.total = res.result.total
        this.exportData = res.result.records
      } else this.$message.error('程序出错')
    })
  }
}
</script>

<style lang='scss' scoped>
/deep/.el-form-item__content {
  input {
    width: 160px !important;
  }
}
/deep/ .date-time {
  .el-form-item__content {
    input {
      width: 100% !important;
    }
  }
}
</style>