<template>
  <div class="n-app-container">
    <el-card shadow="never" style="margin-bottom: 20px">
      <el-form inline>
        <el-form-item label="收货时间">
          <el-date-picker
            v-model="pagerDto._Range_ReceiveTime"
            type="daterange"
            range-separator="~"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-select
            v-model="pagerDto._Eq_CustomerId"
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              v-for="(item, idx) in Users"
              :key="idx"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户单号">
          <!-- <el-input v-model="pagerDto._Eq_CustomerOrderNo" clearable /> -->
          <multi-input v-model="pagerDto._In_CustomerOrderNo" />
        </el-form-item>
        <el-form-item label="行运易单号">
          <multi-input v-model="pagerDto._In_SystemNo" />
        </el-form-item>
        <el-form-item label="转单号">
          <multi-input v-model="pagerDto._In_TransferNumber" />
        </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="业务员" v-if="getSellRoles">
          <el-select
            v-model="pagerDto._Eq_SalesmanUserId"
            placeholder="业务员"
            clearable
            filterable
          >
            <el-option
              v-for="item in Users"
              :key="item.Id"
              :label="item.NickName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="searchLoading"
            @click="search"
          >搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-bottom: 20px">
      <el-table v-loading="tableLoading" :data="tableData">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="ReceiveTimeStr" label="收货日期" />
        <el-table-column prop="CompanyName" label="客户名称" />
        <el-table-column prop="CustomerOrderNo" label="客户单号" />
        <el-table-column prop="SystemNo" label="行运易单号" />
        <el-table-column prop="TransferNumber" label="转单号" />
        <el-table-column prop="PublicName" label="渠道" />
        <el-table-column prop="BoxCount" label="件数" />
        <el-table-column prop="CustomerConfirmBillWeight" label="计费重" />
        <el-table-column prop="CustomerConfirmUnitPrice" label="单价" />
        <el-table-column prop="CustomerConfirmTotalSurcharges" label="应收附加费" />
        <el-table-column prop="CustomerConfirmTotal" label="应收" />
        <el-table-column prop="SettlementConfirmBillWeight" label="结算重" />
        <el-table-column prop="SettlementConfirmUnitPrice" label="结算单价" />
        <el-table-column prop="SettlementConfirmTotalSurcharges" label="结算附加费" />
        <el-table-column prop="GrossProfit" label="销售毛利" />
        <el-table-column prop="NickName" label="业务员" />
      </el-table>
      <el-pagination
        :page-sizes="[20, 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 { _getChannel, _getCustomers, _getAllUsers } from '@/api/baseInfo'
import { _getGrossProfitByOrder } from '@/api/order/fba/report'
import multiInput from '@/components/Xyy/multiInput.vue'
import { mapGetters } from "vuex";

export default {
  name: 'GrossSales',
  components: { 'multi-input': multiInput },
  data() {
    return {
      pagerDto: {
        _Eq_CustomerId: undefined,
        _Eq_SalesmanUserId: undefined,
        _In_SystemNo: undefined,
        _In_CustomerOrderNo: undefined,
        _In_BillNo: null,
        _Eq_CreateOrderChannelId: undefined,
        PageIndex: 1,
        PageSize: 20,
        total: 0,
        QuerySort: [{ Field: 'Id', IsDesc: true }],
        _Range_ReceiveTime: []
      },
      ReceivingTime: [], // 收货时间
      Customers: [],
      Channels: [],
      Users: [],
      searchLoading: false,
      tableData: [{}], // 主列表
      tableLoading: false
    }
  },
  computed: {
    ...mapGetters(["roles"]),
    // 销售按钮
    getSellRoles() {
      // 显示
      if(this.roles.length === 0) return true
      // 隐藏
      return !(this.roles.some((item) => item.includes('销售')))
    }
  },
  created() {
    _getChannel().then((res) => {
      this.Channels = res
    })
    _getCustomers().then((res) => {
      this.Customers = res
    })
    _getAllUsers().then((res) => {
      this.Users = res
    })
  },
  methods: {
    // 搜索
    search(pageIndex) {
      if (pageIndex && pageIndex > 0) {
        this.pagerDto.PageIndex = pageIndex
      } else {
        this.pagerDto.PageIndex = 1
      }
      this.getData()
    },
    getData() {
      _getGrossProfitByOrder(this.pagerDto)
        .then((res) => {
          this.tableData = res.Result
          this.pagerDto.total = res.TotalCount
        })
        .finally(() => {
          this.searchLoading = false
        })
    },
    pagerSerach(page) {
      this.pagerDto.PageIndex = page
      this.getData()
    },
    sizeChange(pageSize) {
      this.pagerDto.PageIndex = 1
      this.pagerDto.PageSize = pageSize
      this.getData()
    }
  }
}
</script>
