<template>
  <div class="n-app-container">
    <el-card shadow="never" style="margin-bottom: 20px">
      <el-row :gutter="20" class="n-row">
        <el-col :span="24">
          <el-form inline>
            <el-form-item label="单号类型">
              <el-select v-model="numberType" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, idx) in numberTypes"
                  :key="idx"
                  :label="item.key"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="单号">
              <multi-input v-model="searchNumbers" />
            </el-form-item>
            <el-form-item label="称重时间">
              <el-date-picker
                v-model="ReceiveDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
              />
            </el-form-item>

            <el-form-item label="下单渠道">
              <el-select
                v-model="pagerDto._Eq_CreateOrderChannelId"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, idx) in Channels"
                  :key="idx"
                  :label="item.Name"
                  :value="item.Id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="所属公司">
              <el-select
                v-model="pagerDto._Eq_CustomerId"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, idx) in FinanceCompanys"
                  :key="idx"
                  :label="item.CompanyName"
                  :value="item.Id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="分公司">
              <el-select
                v-model="pagerDto._Eq_BranchCompanyId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, idx) in brantchCompanies"
                  :key="idx"
                  :label="item.key"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                style="margin-top: 20px"
                type="primary"
                @click="queryFinanceReport()"
              >查看</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                style="margin-top: 20px"
                type="success"
                @click="outFinanceReport()"
              >导出</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                style="margin-top: 20px"
                type="success"
                @click="outFinanceBranchProfitReport()"
              >导出分公司结算</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" style="margin-bottom: 20px">
      <el-row>
        <el-table v-loading="loading" :data="tableData">
          <el-table-column prop="订单号" label="订单号" />
          <el-table-column prop="跟踪号" label="跟踪号" />
          <el-table-column prop="提单号" label="提单号" />
          <el-table-column prop="实际派送渠道" label="派送渠道" />
          <el-table-column prop="所属客户" label="客户名称" />
          <el-table-column prop="分公司名称" label="分公司名称" />
          <el-table-column
            prop="总公司费用"
            label="客户费用"
            width="100"
          />
          <el-table-column
            prop="分公司运费"
            label="分公司结算"
            width="120"
          />
          <el-table-column prop="总成本" label="总成本" width="100" />
          <el-table-column
            prop="分公司利润"
            label="分公司利润"
            width="120"
          />
          <el-table-column
            prop="总公司利润"
            label="总公司利润"
            width="120"
          />
        </el-table>
      </el-row>
      <el-pagination
        :page-sizes="[30, 50, 100, 200]"
        :current-page="pagerDto.PageIndex"
        :page-size="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @current-change="pagerSerach"
        @size-change="sizeChange"
      />
    </el-card>
  </div>
</template>
<script>
import { Chart } from 'highcharts-vue'
import { _getCustomers, _getChannel } from '@/api/baseInfo'
import { _outFinanceReport, _outFinanceBranchProfitReport, _queryFinanceReport } from '@/api/finance/financeReport'
import multiInput from '@/components/Xyy/multiInput.vue'
export default {
  name: 'FinanceReport',
  components: {
    highcharts: Chart,
    multiInput
  },
  data: function() {
    return {
      loading: false,
      numberTypes: [
        { key: '跟踪号', value: 0 },
        { key: '转单号', value: 1 },
        { key: '提单号', value: 2 }
      ],
      brantchCompanies: [
        { key: '广州分公司', value: 387 },
        { key: '深圳分公司', value: 389 },
        { key: '成都分公司', value: 390 }
      ],
      Channels: [],
      tableData: null,
      FinanceCompanys: [],
      ReceiveDate: [],
      numberType: 0,
      searchNumbers: null,
      pagerDto: {
        PageIndex: 1,
        PageSize: 30,
        total: 0,
        _Eq_CustomerId: null,
        _Eq_CreateOrderChannelId: null,
        _Eq_BranchCompanyId: null,
        _Le_称重时间: null,
        _Gr_称重时间: null,
        _In_跟踪号: null,
        _In_订单号: null,
        _In_提单号: null,
        QuerySort: [{ Field: 'OrderId', IsDesc: true }]
      }
    }
  },
  watch: {
    ReceiveDate: function(n, o) {
      console.log(o, n)
      if (n && n.length > 1) {
        this.pagerDto._Gr_称重时间 = n[0]
        this.pagerDto._Le_称重时间 = n[1]
      } else {
        this.pagerDto._Gr_称重时间 = null
        this.pagerDto._Le_称重时间 = null
      }
    }
  },
  created() {
    var end = this.addDays(new Date(), -1)
    var start = this.addDays(end, -6)
    var endVal = this.DateFormat(start, 'yyyy-MM-dd')
    var startVal = this.DateFormat(end, 'yyyy-MM-dd')
    this.ReceiveDate = [endVal, startVal]
    this.$nextTick(() => {
      this.pagerDto._Gr_称重时间 = endVal
      this.pagerDto._Le_称重时间 = startVal
    })

    _getCustomers().then((res) => {
      this.FinanceCompanys = res
    })
    _getChannel().then((res) => {
      this.Channels = res
    })
  },
  methods: {
    pagerSerach(page) {
      this.pagerDto.PageIndex = page
      this.queryFinanceReport()
    },
    sizeChange(pageSize) {
      this.pagerDto.PageSize = pageSize
      this.queryFinanceReport()
    },
    addDays(d, days) {
      var adjustDate = new Date(d.getTime() + 24 * 60 * 60 * 1000 * days)
      return adjustDate
    },
    DateFormat(d, format) {
      var date = {
        'M+': d.getMonth() + 1,
        'd+': d.getDate(),
        'h+': d.getHours(),
        'm+': d.getMinutes(),
        's+': d.getSeconds(),
        'q+': Math.floor((d.getMonth() + 3) / 3),
        'S+': d.getMilliseconds()
      }
      if (/(y+)/i.test(format)) {
        format = format.replace(
          RegExp.$1,
          (d.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      for (var k in date) {
        if (new RegExp('(' + k + ')').test(format)) {
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? date[k]
              : ('00' + date[k]).substr(('' + date[k]).length)
          )
        }
      }
      return format
    },
    setSearchNumber() {
      this.pagerDto._In_跟踪号 = null
      this.pagerDto._In_订单号 = null
      this.pagerDto._In_提单号 = null
      if (this.searchNumbers && this.searchNumbers.length > 0) {
        if (this.numberType == 0) {
          this.pagerDto._In_跟踪号 = this.searchNumbers
        } else if (this.numberType == 1) {
          this.pagerDto._In_订单号 = this.searchNumbers
        } else {
          this.pagerDto._In_提单号 = this.searchNumbers
        }
      }
    },
    outFinanceReport() {
      this.setSearchNumber()
      const data = this.pagerDto
      this.loading = true
      _outFinanceReport(data).finally(() => {
        this.loading = false
      })
    },
    outFinanceBranchProfitReport() {
      this.setSearchNumber()
      const data = this.pagerDto
      this.loading = true
      _outFinanceBranchProfitReport(data).finally(() => {
        this.loading = false
      })
    },

    queryFinanceReport() {
      this.setSearchNumber()
      const data = this.pagerDto
      this.loading = true
      _queryFinanceReport(data)
        .then((res) => {
          const pageData = res.Result
          this.tableData = pageData
          this.pagerDto.total = res.TotalCount
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
.el-card {
  border: none;
  box-shadow: var(
    --p-card-shadow,
    0 0 0 1px rgba(63, 63, 68, 0.05),
    0 1px 3px 0 rgba(63, 63, 68, 0.15)
  );
  border-radius: var(--p-border-radius-wide, 3px);
}
.n-row {
  margin-bottom: 20px;
}
.esList {
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.esList li {
  line-height: 36px;
  border-bottom: 1px solid #f7f7f7;
}
.esList .pull-right {
  color: #dd4b39;
  float: right;
}
.clearfix span {
  color: #4383b4;
  font-size: 16px;
  line-height: 36px;
}
.listSearch {
  float: right;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
