<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="客户">
          <el-select v-model="searchDto.CustomerId" placeholder="请选择" clearable>
            <el-option
              v-for="item in Customers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="下单渠道">
          <el-select v-model="searchDto.ChannelId" placeholder="请选择" clearable>
            <el-option
              v-for="item in Channels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="所属公司">
          <el-select v-model="searchDto.SettlementCompany" placeholder="请选择" clearable>
            <el-option
              v-for="item in FinanceCompanys"
              :key="item.Value"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="发货时间">
          <div class="block">
            <el-date-picker
              v-model="searchDto.DelvieryDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" size="small" type="primary" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-download" size="small" type="primary" @click="download">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="sData" border show-summary>
        <el-table-column label="渠道名称" prop="渠道名称" />
        <el-table-column label="客户名称" prop="所属客户" />
        <el-table-column label="营业额" prop="收入" />
        <el-table-column label="成本" prop="总成本" />
        <el-table-column label="补贴" prop="补贴" />
        <el-table-column label="利润" prop="毛利">
          <template slot-scope="scope">
            <span
              :style="
                'color:' +
                  (scope.row.毛利>=0? 'green' : 'red')
              "
            >
              {{ Math.round(scope.row.毛利) }}
              ({{
                Math.round(
                  (scope.row.毛利率 *
                    10000
                  )) /
                  100 +
                  "%"
              }})
              {{ scope.row.毛利 >= 0 ? "↑" : "↓" }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { _getCustomers, _getChannel, _getFinanceCompanys } from '@/api/baseInfo'
import { Message } from 'element-ui'
import { _getBill } from '@/api/financeBill'
import { Loading } from 'element-ui'
import { exportExcelNew } from '@/utils/filedown'

export default {
  name: 'Bill',
  data() {
    return {
      Customers: [],
      Channels: [],
      searchDto: {
        CustomerId: '',
        ChannelId: '',
        DelvieryDate: [],
        StartDate: {},
        EndDate: {},
        financeCompanys: ''
      },
      FinanceCompanys: [],
      sData: [],
      pagerDto: {
        QuerySort: [{ Field: 'Id', IsDesc: false }],
        keyword: null,
        PageIndex: 1,
        PageSize: 20,
        total: 0
      }
    }
  },
  created() {
    var that = this
    _getCustomers().then(response => {
      that.Customers = response
    })
    _getChannel().then(response => {
      // debugger;
      that.Channels = response
    })
    _getFinanceCompanys().then(response => {
      that.FinanceCompanys = response
    })
  },
  methods: {
    download() {
      if (this.searchDto.DelvieryDate.length == 0) {
        Message({
          message: '请输入发货时间',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      this.searchDto.StartDate = this.searchDto.DelvieryDate[0]
      this.searchDto.EndDate = this.searchDto.DelvieryDate[1]
      exportExcelNew('/Finance/GetBillDetail', this.searchDto, 'post')
    },
    search() {
      if (this.searchDto.DelvieryDate.length == 0) {
        Message({
          message: '请输入发货时间',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      var loading = Loading.service()
      this.searchDto.StartDate = this.searchDto.DelvieryDate[0]
      this.searchDto.EndDate = this.searchDto.DelvieryDate[1]
      _getBill(this.searchDto).then(response => {
        this.sData = response
        loading.close()
      }).catch(ex => {
        loading.close()
      })
    }
  }
}
</script>
