<template>
  <div class="revenues">
    <div class="filter-container">
      <el-select
        v-model="listQuery.StatType"
        size="small"
        placeholder="Stats Type"
        class="mr"
        @change="handleStatsTypeChange"
      >
        <el-option
          v-for="item in statsType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        ref="croSelection"
        v-model="listQuery.CroId"
        size="small"
        placeholder="CRO"
        clearable
        style="width:120px;margin-right:5px;"
      >
        <el-option v-for="item of croList" :key="item.Id" :label="item.CROName" :value="item.Id" />
      </el-select>
      <el-select
        v-show="listQuery.StatType == 2 || listQuery.StatType == 0"
        v-model="listQuery.Nation"
        placeholder="Nation"
        size="small"
        style="width:120px;margin-right:5px;"
        clearable
      >
        <el-option label="CN" value="0" />
        <el-option label="US" value="1" />
      </el-select>
      <el-select
        v-show="listQuery.StatType == 1 || listQuery.StatType == 0|| listQuery.StatType == 3"
        v-model="listQuery.AttendedReviewerType"
        placeholder="Attended Type"
        size="small"
        style="width:150px;margin-right:5px;"
        clearable
      >
        <el-option label="CN" value="0" />
        <el-option label="US" value="1" />
        <el-option label="CN&US" value="2" />
      </el-select>

      <el-input v-show="listQuery.StatType == 2 || listQuery.StatType == 0" v-model="listQuery.Reviewer" size="small" placeholder="Reviewer ID" clearable class="mr" />
      <el-input v-show="listQuery.StatType == 1 || listQuery.StatType == 0" v-model="listQuery.TrialCode" size="small" placeholder="Trial ID" clearable class="mr" />
      <el-date-picker
        v-model="listQuery.BeginDate"
        size="small"
        placeholder="Beginning Month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        type="month"
        style="width:120px;margin-right:5px"
        :picker-options="beginPickerOption"
        :clearable="false"
      />To
      <el-date-picker
        v-model="listQuery.EndDate"
        size="small"
        placeholder="End Month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        type="month"
        style="width:120px;margin:0 5px"
        :picker-options="endpickerOption"
        :clearable="false"
      />
      <el-button type="text" size="small" @click="handleReset">Reset</el-button>
      <el-button type="primary" size="small" @click="handleSearch">Search</el-button>
      <el-button type="primary" size="small" :disabled="arrID.length==0" @click="handleExport">Export Excel</el-button>
      <el-button type="primary" size="small" :loading="dialogLoading" @click="handleVerify">Verify</el-button>
      <el-button
        style="margin-left: auto"
        type="primary"
        size="small"
        @click="handleSetting"
      >Settings</el-button>
    </div>
    <div ref="listContainer" v-loading="listLoading" class="list-container clearfix">
      <el-table
        v-if="tableHeight"
        ref="revenusList"

        size="small"
        stripe
        :data="list"
        height="99%"
        show-summary
        :summary-method="getSummaries"
        @sort-change="sortByColumn"
        @selection-change="handleSelectChange"
      >
        <el-table-column type="selection" />
        <el-table-column type="index" width="40" />
        <el-table-column
          v-for="(col,index) in cols"
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :min-width="col.width"
          sortable="custom"
          show-overflow-tooltip
        />
        <el-table-column prop="Total" label="Total($)" min-width="200" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">

            <div v-if="statsType==1 && scope.row.MissingTrialCodes.length>0">
              <span>{{ scope.row.Total | rounding }}</span>
              <span style="color: red"> (Need setting trial unit price)</span>
            </div>
            <div v-else-if="scope.row.MissingTrialCodes.length>0">
              <span>{{ scope.row.Total | rounding }}</span>
              <span
                style="color: red"
              > ({{ scope.row.MissingTrialCodes.join(',') }} need setting trial unit price)</span>
            </div>
            <div v-else>{{ scope.row.Total | rounding }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />
    </div>
    <el-dialog title="Revenues Price Verification" :visible.sync="dialogVisible" size="small" width="600px">
      <div v-if="verifyList.length>0" class="verify-wrapper">
        <div v-for="(item, index) in verifyList" :key="index" style="margin-bottom:5px;word-break:keep-all;word-wrap:break-word;">
          Trial ID:
          <span style="font-weight:bold;margin-right:5px">{{ item.trialCode }}</span>
          <span>({{ item.priceType.join(', ') }} <span style="color:red;">did not set unit price</span>)</span>

        </div>
      </div>
      <div v-else>
        No data.
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
// eslint-disable-next-line no-unused-vars
import { FormatTime } from '@/utils/formatter'
import store from '@/store'
import { mapGetters, mapMutations } from 'vuex'
import { getRevenuesStatistics, getRevenuesVerifyList } from '@/api/financials'
import { getColumns } from './revenues'
import { exportExcelWithTotal } from '@/utils/export'
import floatObj from '@/utils/float-operation'
const getListQueryDefault = () => {
  return {
    CroId: '',
    TrialCode: '',
    Reviewer: '',
    BeginDate: new Date(new Date().setMonth(new Date().getMonth() - 1)).format('yyyy-MM'),
    EndDate: new Date(new Date().setMonth(new Date().getMonth() - 1)).format('yyyy-MM'),
    StatType: 3,
    PageIndex: 1,
    PageSize: 20,
    Asc: true,
    SortField: ''
  }
}
export default {
  components: { Pagination },
  filters: {
    rounding(value) {
      return value ? Number(value).toFixed(2) : value
    }
  },
  data() {
    return {
      listQuery: getListQueryDefault(),
      list: [],
      total: 0,
      listLoading: false,
      beginPickerOption: {
        disabledDate: time => {
          if (this.listQuery.EndDate) {
            return time.getTime() > new Date(this.listQuery.EndDate).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endpickerOption: {
        disabledDate: time => {
          if (this.listQuery.BeginDate) {
            return time.getTime() > Date.now() || time.getTime() <= new Date(this.listQuery.BeginDate).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      statsType: [
        { label: 'Monthly', value: 3 },
        { label: 'Trial', value: 1 },
        { label: 'Reviewer', value: 2 },
        { label: 'Detail', value: 0 }
      ],
      cols: [],
      arrID: [],
      tableHeight: 0,
      dialogVisible: false,
      dialogLoading: false,
      verifyList: []
    }
  },
  computed: {
    ...mapGetters(['croList', 'revenusQuery'])
  },
  mounted() {
    store.dispatch('global/getCROList')
    this.revenusQuery ? this.listQuery = this.revenusQuery : ''
    this.cols = getColumns(this.listQuery.StatType)
    this.getList()
  },
  methods: {
    getList() {
      // this.tableHeight = 0

      this.listLoading = true
      getRevenuesStatistics(this.listQuery).then(res => {
        this.listLoading = false
        this.tableHeight = this.$refs.listContainer.clientHeight - 10 + 'px'
        this.list = res.Result.CurrentPageData
        this.list.forEach(element => {
          element.Expedited = element.Expedited === 0 ? 'No' : element.Expedited === 1 ? '24-Hour' : '48-Hour'
          if (element.LastName && element.FirstName) { element.FullName = `${element.LastName} / ${element.FirstName}` }
        })
        this.total = res.Result.TotalCount
      }).catch(() => { this.listLoading = false })
    },
    handleSearch() {
      this.listQuery.PageIndex = 1
      this.getList()
      this.setQueryParam(this.listQuery)
    },
    handleReset() {
      const type = this.listQuery.StatType
      this.listQuery = getListQueryDefault()
      this.listQuery.StatType = type
      this.getList()
    },
    handleStatsTypeChange(val) {
      this.tableHeight = 0
      this.cols = getColumns(val)
      this.listQuery.Reviewer = ''
      this.listQuery.CroId = ''
      this.listQuery.TrialCode = ''
      this.listQuery.PageIndex = 1
      this.listQuery.Asc = true
      this.listQuery.SortField = ''
      this.$refs.revenusList.doLayout()
      this.arrID = []
      this.getList()
      this.$refs.revenusList.doLayout()
    },
    handleVerify() {
      this.dialogLoading = true
      const param = {
        beginDate: this.listQuery.BeginDate,
        endDate: this.listQuery.EndDate
      }
      getRevenuesVerifyList(param).then(res => {
        this.dialogLoading = false
        this.dialogVisible = true
        this.verifyList = []
        if (res.Result) {
          res.Result.forEach(item => {
            const obj = {}
            obj.trialCode = item.TrialCode
            obj.priceType = []
            for (var i in item) {
              if (item[i] === false) {
                obj.priceType.push(i)
              }
            }
            this.verifyList.push(obj)
          })
        }
      })
    },
    handleExport() {
      const cro = this.$refs.croSelection.selectedLabel
      const sheetName = `${this.listQuery.BeginDate}--${this.listQuery.EndDate}`
      let columns = []
      let conditional = ''
      let headerArr = []
      let numFmts = []
      let totalRow = []
      let totalUSD = 0
      let index = 1
      var exportExcelData = this.list.filter(item => this.arrID.indexOf(item.Id) > -1)
      exportExcelData.forEach(element => {
        totalUSD += element.Total
        element.Index = index++
        if (this.listQuery.StatType === 1) {
          if (element.Expedited === 0) {
            element.Expedited = 'No'
          } else if (element.Expedited === 1) {
            element.Expedited = '24-Hour'
          } else {
            element.Expedited = '48-Hour'
          }
        }
      })
      if (this.listQuery.StatType === 0) {
        columns = [
          { key: 'Index', width: 5 },
          { key: 'TrialCode', width: 20 },
          { key: 'Expedited', width: 15 },
          { key: 'Indication', width: 15 },
          { key: 'Cro', width: 15 },
          { key: 'FullName', width: 30 },
          { key: 'ChineseName', width: 15 },
          { key: 'ReviewerCode', width: 15 },
          { key: 'YearMonth', width: 15 },
          { key: 'Total', width: 20 }
        ]
        if (cro) {
          conditional = `Type:Detail  CRO:${cro}  Beginning Month:${this.listQuery.BeginDate}  End Month:${this.listQuery.EndDate}`
        } else {
          conditional = `Type:Detail  Beginning  Month:${this.listQuery.BeginDate}  End Month:${this.listQuery.EndDate}`
        }
        headerArr = ['', 'Trial ID', 'Expedited', 'Indication', 'CRO', 'Name', 'Name CN', 'Reviewer ID', 'Month', 'Total($)']
        numFmts = [{ colIndex: 10, format: '#,##0.00' }]
        totalRow = ['', 'Total(Current Page)', '', '', '', '', '', '', '', totalUSD]
      } else if (this.listQuery.StatType === 1) {
        columns = [
          { key: 'Index', width: 5 },
          { key: 'TrialCode', width: 20 },
          { key: 'Expedited', width: 15 },
          { key: 'Indication', width: 15 },
          { key: 'Cro', width: 15 },
          { key: 'Total', width: 20 }
        ]
        if (cro) {
          conditional = `Type:Trial  CRO:${cro}  Beginning Month:${this.listQuery.BeginDate}  End Month:${this.listQuery.EndDate}`
        } else {
          conditional = `Type:Trial  Beginning Month:${this.listQuery.BeginDate}  End Month:${this.listQuery.EndDate}`
        }
        headerArr = ['', 'Trial ID', 'Expedited', 'Indication', 'CRO', 'Total($)']
        numFmts = [{ colIndex: 6, format: '#,##0.00' }]
        totalRow = ['', 'Total(Current Page)', '', '', '', totalUSD]
      } else if (this.listQuery.StatType === 2) {
        columns = [
          { key: 'Index', width: 5 },
          { key: 'FullName', width: 30 },
          { key: 'ChineseName', width: 15 },
          { key: 'ReviewerCode', width: 15 },
          { key: 'Total', width: 20 }
        ]
        if (cro) {
          conditional = `Type:Reviewer  CRO:${cro}  Beginning Month:${this.listQuery.BeginDate}  End Month:${this.listQuery.EndDate}`
        } else {
          conditional = `Type:Reviewer  Beginning Month:${this.listQuery.BeginDate}  End Month:${this.listQuery.EndDate}`
        }
        headerArr = ['', 'Name', 'Name CN', 'Reviewer ID', 'Total($)']
        numFmts = [{ colIndex: 5, format: '#,##0.00' }]
        totalRow = ['', 'Total(Current Page)', '', '', totalUSD]
      } else {
        columns = [
          { key: 'Index', width: 5 },
          { key: 'YearMonth', width: 40 },
          { key: 'Total', width: 40 }
        ]
        if (cro) {
          conditional = `Type:Monthly  CRO:${cro}  Beginning Month:${this.listQuery.BeginDate}  End Month:${this.listQuery.EndDate}`
        } else {
          conditional = `Type:Monthly  Beginning Month:${this.listQuery.BeginDate}  End Month:${this.listQuery.EndDate}`
        }
        headerArr = ['', 'Month', 'Total($)']
        numFmts = [{ colIndex: 3, format: '#,##0.00' }]
        totalRow = ['', 'Total(Current Page)', totalUSD]
      }

      exportExcelWithTotal(sheetName, columns, 'Revenues', conditional, headerArr, exportExcelData, totalRow, numFmts)
    },
    handleSetting() { this.$router.push({ name: 'RevenuesSetting' }) },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 2) {
          sums[index] = 'Total (Current Page)'
          return
        }
        if (column.property === 'Total') {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values
              .reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return floatObj.add(prev, curr)
                } else {
                  return prev
                }
              }, 0)
          }
        }
      })

      return sums
    },
    sortByColumn(column) {
      if (column.order === 'ascending') {
        this.listQuery.Asc = true
      } else {
        this.listQuery.Asc = false
      }
      if (column.prop === 'FullName') {
        this.listQuery.SortField = 'LastName'
      } else {
        this.listQuery.SortField = column.prop
      }
      this.listQuery.PageIndex = 1
      this.getList()
    },
    handleSelectChange(val) {
      const arr = []
      for (let index = 0; index < val.length; index++) {
        arr.push(val[index].Id)
      }
      this.arrID = arr
    },
    ...mapMutations({
      setQueryParam: 'financials/SET_REVENUSQUERYPARAM'
    })
  }

}
</script>
<style lang="scss">
.revenues{
  height: 100%;
  display: flex;
  flex-direction: column;
  .filter-container{
    display:flex;
    align-items: center;
  }
  .mr{
    margin-right: 5px;
    width: 140px;
  }
  .el-table {
    overflow: visible !important;
  }
  .el-table .cell {
    white-space: nowrap;
  }
  .list-container{
    padding: 5px 0px;
    flex: 1;
  }
  .pagination{
    text-align: right;
  }
  .el-dialog__header{
    padding: 10px;
  }
  .el-dialog__body{
    padding: 10px;
    min-height: 300px;
    font-size: 13px;
  }
}
</style>
