<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="70px">
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="起始时间"
        prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="截止时间"
        prop="endDate">
        <el-date-picker
          default-time="23:59:59"
          v-model="form.endDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        :label="agencyName()"
        label-width="120px"
        prop="keyWords1">
        <el-select v-model="form.keyWords1">
          <el-option
            label="全部"
            value=""></el-option>
          <el-option
            v-for="item in agencyList"
            :key="item.id"
            :value="item.name"
            :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="地区"
        prop="keyWords2">
        <el-input v-model="form.keyWords2"></el-input>
      </el-form-item>
      <el-form-item
        :label="scenicName==='仙门山'?'业务姓名':'导游姓名'"
        prop="keyWords3">
        <el-input v-model="form.keyWords3"></el-input>
      </el-form-item>
      <div class="btn-wrap">
        <el-button @click="reset()">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getGuideStatistics">
          搜索
        </el-button>
        <el-button
          type="primary"
          @click="exportStatist">
          导出
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <!-- <div class="block-title">
        统计信息
      </div> -->

      <el-table
        border
        class="spanTable"
        v-loading="loading"
        v-if="tableMaxHeight"
        :max-height="tableMaxHeight"
        :data="tableData"
        :span-method="arraySpanMethod"
        :row-class-name="totalRowClassName"
        :cell-class-name="handleCellStyle"
        :header-cell-class-name="handleCellStyle"
        :row-click="(row, column, event)=>{console.log(row)}"
      >
        <!-- :row-class-name="totalRowClassName" -->
        <el-table-column
          prop="travelAgencyName"
          :label="`${agencyName()}名称`"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="guide_name"
          :label="scenicName==='仙门山'?'业务':'导游'"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="ticketTypeName"
          label="票种"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="单价"
        ></el-table-column>
        <el-table-column
          prop="sum_count"
          label="销售数量"
        ></el-table-column>
        <el-table-column
          prop="sum_people"
          label="销售人数"
        ></el-table-column>
        <el-table-column
          prop="sum_multi_people"
          width="110"
          label="销售总人次">
          <template
            slot="header">
            销售总人次
            <Tip msg="售票人数 × 票种人数"></Tip>
          </template>
        </el-table-column>
        <el-table-column
          prop="sum_price"
          label="销售金额"
        ></el-table-column>
        <el-table-column
          prop="cancel_count"
          label="退款数量"
        ></el-table-column>
        <el-table-column
          prop="cancel_people"
          label="退款人数"
        ></el-table-column>
        <el-table-column
          width="110"
          prop="cancel_multi_people"
          label="退票总人次">
          <template
            slot="header">
            退票总人次
            <Tip msg="退票人数 × 票种人数"></Tip>
          </template>
        </el-table-column>
        <el-table-column
          prop="cancelPrice"
          label="退款金额"
        ></el-table-column>
        <el-table-column
          prop="actual_count"
          label="实售数量"
        ></el-table-column>
        <el-table-column
          prop="actual_people"
          label="实售人数"
        ></el-table-column>
        <el-table-column
          width="110"
          prop="actual_multi_people"
          label="实售总人次">
          <template
            slot="header">
            实售总人次
            <Tip msg="实售人数 × 票种人数"></Tip>
          </template>
        </el-table-column>
        <el-table-column
          prop="actual_price"
          label="实售金额"
        ></el-table-column>
      </el-table>
    </div>

    <ElDialog
      title="统计详情"
      width="760px"
      v-model="dialogVisible">
      <DetailDialog
        :info="currentItem"
      ></DetailDialog>
    </ElDialog>
  </div>
</template>

<script>
import { apiGuideStatistics, exportGuideStatistics } from '@/api/travelAgency'
import ElDialog from '@/components/Dialog'
import DetailDialog from './guideStatistic/DetailDialog'
import VueScrollTo from 'vue-scrollto'
import moment from 'moment'

export default {
  name: 'guideStatistic',
  components: {
    ElDialog,
    DetailDialog
  },
  computed: {
    agencyList () {
      return this.$store.state.app.agencyList
    },
    scenicName () {
      return this.$store.state.user.scenicName
    }
  },
  data () {
    return {
      form: {
        startDate: new Date(moment().format('YYYY-MM-DD') + ' 00:00:00'),
        endDate: new Date(moment().format('YYYY-MM-DD') + ' 23:59:59'),
        keyWords1: '', // 旅行社名称
        keyWords2: '', // 地区
        keyWords3: '' // 导游
      },
      tableData: [],
      currentItem: {},
      dialogVisible: false,
      loading: false,
      tableMaxHeight: 0
    }
  },
  created () {
    this.getGuideStatistics()
  },

  mounted () {
    this.setTableHeight()
    window.addEventListener('resize', this.setTableHeight)
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },

    showDetail (item) {
      this.currentItem = item
      this.dialogVisible = true
      console.log(item)
    },
    exportStatist () {
      exportGuideStatistics(this.form).then(res => {
        this.$message.success('导出成功。')
        this.goToDownload()
      })
    },
    totalRowClassName ({ row, rowIndex }) {
      if (row.travelAgencyName === '总计') {
        return 'table-total-row'
      }

      if (row.travelAgencyName === '总计' && row.guide_name === '小计' && row.ticketTypeName === '小计') {
        return 'table-total-row table-total-row1'
      }

      if (row.guide_name === '小计' && row.ticketTypeName === '小计') {
        return 'table-total-row table-total-row2'
      }

      if (row.price === '小计') {
        return 'table-total-row table-total-row3'
      }
    },
    // 获取导游统计信息
    getGuideStatistics () {
      this.loading = true
      this.colunmSpan0 = null
      this.colunmSpan1 = null
      this.colunmSpan2 = null
      apiGuideStatistics(this.form).then(res => {
        this.tableData = res?.data
        // 第一次进入页面不滚动
        if (this.firstTimeIn) {
          this.firstTimeIn = false
          return
        }
        this.$nextTick(() => {
          VueScrollTo.scrollTo('#table-box', 1000, { container: '.app-main .el-scrollbar__wrap' })
        })
      }).finally(() => {
        this.loading = false
      })
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // const isMember = this.tableData[rowIndex].hasOwnProperty('memberTypeName')
      if (!this.colunmSpan0) {
        this.colunmSpan0 = this.getSpanArrayByRepeat(this.tableData, 'travelAgencyName')
      }
      let lastSpan = this.colunmSpan0[this.colunmSpan0.length - 1]

      if (!this.colunmSpan1) {
        this.colunmSpan1 = this.getSpanArrayByRepeat(this.tableData, 'guide_name')
      }
      let lastSpan1 = this.colunmSpan1[this.colunmSpan1.length - 1]

      if (!this.colunmSpan2) {
        this.colunmSpan2 = this.getSpanArrayByRepeat(this.tableData, 'ticketTypeName')
      }
      let lastSpan2 = this.colunmSpan2[this.colunmSpan2.length - 1]

      if (columnIndex === 0) {
        if (rowIndex === lastSpan[0]) {
          return [lastSpan[1] - lastSpan[0] + 1, 1]
        }
        return this.getRowSpanByRepeat(this.colunmSpan0, rowIndex)
      }
      if (columnIndex === 1) {
        if (rowIndex === lastSpan1[0]) {
          return [lastSpan1[1] - lastSpan1[0] + 1, 1]
        }
        if (this.tableData[rowIndex].guide_name === '小计') {
          return [1, 3]
        }
        return this.getRowSpanByRepeat(this.colunmSpan1, rowIndex)
      }
      if (columnIndex === 2) {
        if (this.tableData[rowIndex].guide_name === '小计') {
          return [0, 0]
        }
        if (this.tableData[rowIndex].ticketTypeName === '小计') {
          return [1, 2]
        }
        if (rowIndex === lastSpan2[0]) {
          return [lastSpan2[1] - lastSpan2[0] + 1, 1]
        }
        return this.getRowSpanByRepeat(this.colunmSpan2, rowIndex)
      }
      if (columnIndex === 3) {
        if (this.tableData[rowIndex].ticketTypeName === '小计') {
          return [0, 0]
        }
      }
    },

    getSpanArrayByRepeat (data, tag) {
      let indexArray = []

      data.forEach((item, index) => {
        if (index > 0) {
          if ((item[tag] !== data[index - 1][tag])) {
            indexArray.push(index)
          }
        }
      })
      let rowSpanArray = indexArray.map((i, index) => {
        if (index === 0) {
          return [0, i - 1]
        } else {
          return [indexArray[index - 1], i - 1]
        }
      })
      if (indexArray.length > 0) {
        rowSpanArray.push([indexArray[indexArray.length - 1], data.length - 1])
      }
      rowSpanArray.pop()
      return rowSpanArray
    },
    getRowSpanByRepeat (spanArray, rowIndex) {
      let span = spanArray.find(i => {
        return rowIndex >= i[0] && rowIndex <= i[1]
      })
      // console.log(span)
      if (!span || (span[1] === span[0])) {
        return [1, 1]
      }

      if (rowIndex === span[0]) {
        return [span[1] - span[0] + 1, 1]
      } else {
        return [0, 0]
      }
    },
    setTableHeight () {
      let wrap = document.querySelector('.app-main').getBoundingClientRect()
      // let table = this.$refs['table-wrap'].getBoundingClientRect()
      this.tableMaxHeight = wrap.height - 50
    },
    handleCellStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 3 && columnIndex <= 7) {
        if (columnIndex === 7) {
          return 'greenBg boldBorder'
        }
        return 'greenBg'
      }

      if (columnIndex > 7 && columnIndex <= 11) {
        if (columnIndex === 11) {
          return 'redBg boldBorder'
        }
        return 'redBg'
      }

      if (columnIndex > 11) {
        if (columnIndex === 11) {
          return 'blueBg boldBorder'
        }
        return 'blueBg'
      }

      if (columnIndex === 6) {
        return 'boldBorder'
      }
    }

  }
}
</script>
<style lang="scss" scoped>
// .boxWrap {
//   position: absolute;top: 0;left: 0;width: 100%;height: 100%; overflow: hidden;
// }
::v-deep .el-table--border{
  .boldBorder{
    border-right-width: 5px
  }
  td.greenBg{
    background: rgba(0, 128, 0, 0.07) !important;
  }
  td.redBg{
    background: rgba(255, 0, 0, 0.07) !important;
  }
  td.blueBg{
    background: rgba(0, 0, 255, 0.07) !important;
  }
}

::v-deep .el-table {
  .table-total-row.border3 td{
    border-bottom-width: 4px;
  }
  .table-total-row.border2 td{
    border-bottom-width: 3px;
  }
  .table-total-row.border1 td{
    border-bottom-width: 2px;
  }
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td{
    background: rgba(248, 237, 117, 0.561) !important;
}

::v-deep .el-table--border {
  td,th{
    border-color: rgba(48, 77, 121, 0.5);
  }
}
.table-box {
  border: 0;
   ::v-deep .el-tabs__nav-wrap {
    padding: 0 24px;
  }
}

</style>

<style lang="scss">
.spanTable {
  tr td:first-child .cell,tr th:first-child .cell {
    padding-left: 10px;
  }
}
</style>
