<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="所属月份">
          <el-date-picker
            v-model="pagerDto._Eq_Month"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择日期"
            class="search-item"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="pagerDto._Eq_FinanceCustomerSupplementType"
            placeholder="计费类型"
            filterable
            clearable
            class="search-item"
          >
            <el-option
              v-for="item in types"
              :key="item.Value"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="pagerDto._Eq_CustomerId"
            placeholder="所属客户"
            filterable
            clearable
            class="search-item"
          >
            <el-option
              v-for="item in FinanceCompanys"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传时间">
          <div class="block">
            <el-date-picker
              v-model="pagerDto._Range_CreateTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
              style="width: 260px;"
            />
          </div>
        </el-form-item>
        <el-form-item label="内部单号">
          <el-tooltip v-model="openNumbersInput" effect="light" :manual="true">
            <div slot="content">
              <el-input
                v-model="inputMultiCodes"
                type="textarea"
                rows="7"
                placeholder="请输入单号，每行一个"
              />
              <div style="text-align: right; padding: 5px">
                <el-button
                  size="mini"
                  @click="openNumbersInput = false"
                >关闭</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="inputMultiCodes = ''"
                >清除</el-button>
                <el-button
                  size="mini"
                  type="success"
                  @click="confirmMultiCodes"
                >确定</el-button>
              </div>
            </div>
            <el-input
              v-model="pagerDto._In_SystemNo"
              clearable
              @focus="openNumbersInputPannel"
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item
          class="search-item"
        >
          <el-select v-model="pagerDto._Eq_CurrenyRate" placeholder="选择币种" clearable>
            <el-option
              v-for="item in currencyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="pagerDto._Eq_IsCancel">是否被取消</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button @click="pagerSerach(1)">
            搜索
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option">
      <el-button type="primary" @click="dialogInput=true">
        上传明细
      </el-button>
      <el-button type="info" @click="onUploadSKUOperation">
        上传SKU操作
      </el-button>
    </template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column label="月份" prop="Month" width="80" />
        <el-table-column label="所属客户" prop="CustomerName" />
        <el-table-column label="渠道" prop="PublicName" />
        <el-table-column label="客户单号" prop="CustomerOrderNo" />
        <el-table-column label="运单号" prop="TrackingNumber" />
        <el-table-column label="内部单号" prop="SystemNo" />
        <el-table-column label="费用描述" prop="Describe" />
        <el-table-column label="重派单号/退件原因" prop="OrderRemark" />
        <el-table-column label="费用金额" prop="Fee">
          <template slot-scope="r">
            {{ r.row.Fee }} {{ r.row.CurrenyRate }}
          </template>
        </el-table-column>
        <el-table-column label="费用上传内容" prop="FeeString" />
        <el-table-column label="上传时间" prop="CreateTime" />
        <el-table-column label="上传人" prop="CreateUserName" width="80" />
        <el-table-column label="是否被取消" prop="IsCancel" width="70">
          <template slot-scope="scope">
            <el-tag :type="scope.row.IsCancel ? 'warning' : ''">{{ scope.row.IsCancel ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="85" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.IsCancel"
              type="warning"
              size="mini"
              :loading="scope.row.cancelLoading"
              @click="hanleCancelPayment(scope.row)"
            >
              取消补款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40,100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </template>
    <el-dialog :visible.sync="dialogInput" title="上传明细">
      <el-form>
        <el-form-item label="上传">
          <el-select
            v-model="type"
            placeholder="计费类型"
            filterable
            class="form-item"
          >
            <el-option
              v-for="item in types"
              :key="item.Value"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="月份">
          <el-date-picker
            class="form-item"
            v-model="month"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="币种">
          <el-select v-model="currencyCode" placeholder="选择币种" class="form-item">
            <el-option
              v-for="item in currencyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="对象">
          <el-select v-model="targetValue" placeholder="选择对象" class="form-item">
            <el-option
              v-for="item in targetList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="明细文件">
          <el-upload
            class="upload-demo"
            action="http://wms.xingyunyi.cn/api/Finance/updateLoadFile"
            :on-success="changeFileUrl"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传Excel文件
              <a href="javascript:;" class="template" @click="downloadXlsx('detailFee')">
                下载模板
              </a>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" @click="start">
            开始导入
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 上传SKU -->
    <SkuBatchImport
      :visible.sync="skuBatchImportDialog"
      :customers="Customers"
      @onConfirm="onConfirmSkuBatchImport"
      @onClose="onCloseSkuBatchImport"
    />
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import { _getCustomers, _getCurrency } from '@/api/baseInfo'
import { _getPageResult, _inputFinanceCustomerSupplements, _AddCustomerSKUFeeFinanceCustomer, _getFinanceCustomerSupplementType, _edit, _add, _remave, _getCancelSupplement } from '@/api/financeCustomerSupplement'
import SkuBatchImport from '@/components/SkuBatchImport';
import { format } from '@/utils/multiInput'
export default {
  name: 'FinanceCustomerSupplements',
  components: { 'base-list': BaseList, SkuBatchImport },
  data() {
    return {
      FinanceCompanys: [],
      data: [],
      dataLoading: false,
      month: '',
      types: [],
      dialogInput: false,
      type: '',
      currencyCode: 'CNY',
      currencyList: [],
      targetValue: 3,
      targetList: [
        { value: 0, label: '客户' },
        { value: 1, label: '分公司' },
        { value: 3, label: '全部' }
      ],
      fileUrl: '',
      loading: false,
      pagerDto: {
        _In_SystemNo: undefined,
        _Eq_IsCancel: false,
        PageIndex: 0,
        PageSize: 10,
        total: 0
      },
      skuBatchImportDialog: false,
      Customers: [],
      inputMultiCodes: '',
      openNumbersInput: false,
    }
  },
  created() {
    _getCustomers().then(response => {
      this.Customers = response
    })
    _getCurrency().then((res) => {
      this.currencyList = res.Data
    })
  },
  mounted() {
    this.pagerSerach(1)
    _getFinanceCustomerSupplementType().then(r => {
      this.types = r
    })
    _getCustomers().then(r => {
      this.FinanceCompanys = r
    })
  },
  methods: {
    start() {
      this.loading = true
      _inputFinanceCustomerSupplements(
        this.fileUrl,
        this.type,
        this.month,
        this.currencyCode,
        this.targetValue
      ).then(r => {
        this.$message({ type: 'success', message: '上传成功' })
        this.pagerSerach()
      }).finally(r => {
        this.loading = false
      })
    },
    changeFileUrl(r) {
      this.fileUrl = r.Data.url
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      _getPageResult(this.pagerDto).then(res => {
        this.data = res.Result
        this.pagerDto.total = res.TotalCount
      }).finally(res => { this.dataLoading = false })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    },
    // 上传sku
    onUploadSKUOperation() {
      this.skuBatchImportDialog = true
    },
    onCloseSkuBatchImport() {
      this.skuBatchImportDialog = false
    },
    // 确定上传SKU
    onConfirmSkuBatchImport(params, oncolse, loadingFn) {
      _AddCustomerSKUFeeFinanceCustomer(params).then(r => {
        this.$message({ type: 'success', message: '上传成功' })
        oncolse()
        this.pagerSerach()
      }).finally(r => {
        loadingFn()
      })
    },
    openNumbersInputPannel() {
      const str = format(this.pagerDto._In_SystemNo, '\n')
      this.inputMultiCodes = str
      this.openNumbersInput = true
    },
    confirmMultiCodes() {
      const inputs = this.inputMultiCodes
      const str = format(inputs, ',')
      this.pagerDto._In_SystemNo = str
      this.inputMultiCodes = ''
      this.openNumbersInput = false
    },
    // 取消补款
    hanleCancelPayment(row) {
      this.$set(row, 'cancelLoading', true)
      _getCancelSupplement({ systemNo: row.SystemNo, transactionNumber: row.transactionNumber }).then(() => {
        this.$message({ type: 'success', message: '操作成功' })
      }).finally(() => {
        this.$set(row, 'cancelLoading', false)
      })
    },
    downloadXlsx(name) {
      const fileUrl = `/xlsx/${name}.xlsx`
      const link = document.createElement('a')
      link.href = fileUrl
      link.setAttribute('download', `${name}.xlsx`) // 设置下载属性和文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) // 点击后移除链接
    },
  }
}

</script>
<style scoped>
.search-item {
  width: 152px;
}
.form-item {
  width: 220px;
}
.template {
  font-size: 13px;
  font-weight: 500;
  color: #1890FF;
  text-decoration: underline;
}
</style>
