<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="提单号">
          <el-input v-model="billName" class="input-with-select" />
        </el-form-item>

        <el-form-item>
          <el-button
            icon="el-icon-search"
            size="small"
            plain
            @click="getdata()"
          >搜索</el-button>
        </el-form-item>

        <el-form-item v-show="status=='0'">
          <el-button icon="el-icon-plus" size="small" plain type="primary" @click="dialogStartVisible=true">开始对帐</el-button>
        </el-form-item>
      </el-form>
      <el-tabs type="card" value="1" @tab-click="tab_cliek">
        <el-tab-pane name="1">
          <span slot="label">
            待对帐
            <el-badge :value="s1" :max="999" class="item" />
          </span>
          <el-table :data="s1Data" border>
            <el-table-column label="帐单名称" prop="Name">
              <template slot-scope="scope">
                <el-link @click="changeBillName(scope.row)"> {{ scope.row.Name }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="帐单类型" prop="StrDeliveryBillType" />
            <el-table-column label="对帐币种" width="100" prop="Currency" />
            <el-table-column label="重量">
              <template slot-scope="scope">
                <el-tag> 我方{{ scope.row.SysWeight }}KG</el-tag>
                <el-tag>对方{{ scope.row.ServiceWeight }}KG</el-tag>
                <el-tag type="danger">差异{{ (scope.row.SysWeight-scope.row.ServiceWeight).toFixed(3) }}KG</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="金额">
              <template slot-scope="scope">
                <el-tag> 我方{{ scope.row.SysFreigh }}</el-tag>
                <el-tag>对方{{ scope.row.ServiceFreigh }}</el-tag>
                <el-tag type="danger">未确认{{ (scope.row.NotConfirmedFreigh) }}</el-tag>
                <el-tag type="success">确认{{ (scope.row.ConfirmedFreigh) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="补扣款">
              <template slot-scope="scope">
                <el-tag> 补款{{ scope.row.Supplement }}</el-tag>
                <el-tag type="danger">扣款{{ scope.row.Deduction }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="UpdateTime"
              width="200"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand">
                  <el-button size="mini">
                    运费<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'getOriginals_'+scope.row.Id">帐单数据</el-dropdown-item>
                    <el-dropdown-item :command="'getNotConfirmeds_'+scope.row.Id">未确认数据</el-dropdown-item>
                    <el-dropdown-item :command="'getConfirmeds_'+scope.row.Id">已确认数据</el-dropdown-item>
                    <el-dropdown-item :command="'setNotConfirmeds_'+scope.row.Id">处理差异</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown @command="handleCommand">
                  <el-button size="mini">
                    补扣款<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'getSupplements_'+scope.row.Id">补款信息</el-dropdown-item>
                    <el-dropdown-item :command="'getDeductions_'+scope.row.Id">扣款信息</el-dropdown-item>
                    <el-dropdown-item :command="'setSupplements_'+scope.row.Id">处理补款</el-dropdown-item>
                    <el-dropdown-item :command="'setDeductions_'+scope.row.Id">处理扣款</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button size="mini" type="success" @click="setPassBill(scope.row.Id)">
                  通过
                </el-button>
                <el-button size="mini" type="danger" @click="deleteBill(scope.row.Id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane name="3">
          <span slot="label">
            最终确认
            <el-badge :value="s3" :max="999" class="item" />
          </span>
          <el-table :data="s3Data" border>
            <el-table-column label="帐单名称" prop="Name" />
            <el-table-column label="对帐币种" width="100" prop="Currency" />
            <el-table-column label="重量">
              <template slot-scope="scope">
                <el-tag> 我方{{ scope.row.SysWeight }}KG</el-tag>
                <el-tag>对方{{ scope.row.ServiceWeight }}KG</el-tag>
                <el-tag type="danger">差异{{ (scope.row.SysWeight-scope.row.ServiceWeight).toFixed(3) }}KG</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="金额">
              <template slot-scope="scope">
                <el-tag> 我方{{ scope.row.SysFreigh }}</el-tag>
                <el-tag>对方{{ scope.row.ServiceFreigh }}</el-tag>
                <el-tag type="danger">未确认{{ (scope.row.NotConfirmedFreigh) }}</el-tag>
                <el-tag type="success">确认{{ (scope.row.ConfirmedFreigh) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="补扣款">
              <template slot-scope="scope">
                <el-tag> 补款{{ scope.row.Supplement }}</el-tag>
                <el-tag type="danger">扣款{{ scope.row.Deduction }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="UpdateTime"
              width="200"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand">
                  <el-button size="mini">
                    运费<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'getOriginals_'+scope.row.Id">帐单数据</el-dropdown-item>
                    <el-dropdown-item :command="'getNotConfirmeds_'+scope.row.Id">未确认数据</el-dropdown-item>
                    <el-dropdown-item :command="'getConfirmeds_'+scope.row.Id">已确认数据</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown @command="handleCommand">
                  <el-button size="mini">
                    补扣款<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'getSupplements_'+scope.row.Id">补款信息</el-dropdown-item>
                    <el-dropdown-item :command="'getDeductions_'+scope.row.Id">扣款信息</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button size="mini" type="success" @click="setPassBill(scope.row.Id)">
                  通过
                </el-button>
                <el-button size="mini" type="danger" @click="setRejectBill(scope.row.Id)">
                  驳回
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane name="4">
          <span slot="label">
            待结款
            <el-badge :value="s4" :max="999" class="item" />
          </span>
          <el-table :data="s4Data" border>
            <el-table-column label="帐单名称" prop="Name" />
            <el-table-column label="对帐币种" width="100" prop="Currency" />
            <el-table-column label="重量">
              <template slot-scope="scope">
                <el-tag> 我方{{ scope.row.SysWeight }}KG</el-tag>
                <el-tag>对方{{ scope.row.ServiceWeight }}KG</el-tag>
                <el-tag type="danger">差异{{ (scope.row.SysWeight-scope.row.ServiceWeight).toFixed(3) }}KG</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="金额">
              <template slot-scope="scope">
                <el-tag> 我方{{ scope.row.SysFreigh }}</el-tag>
                <el-tag>对方{{ scope.row.ServiceFreigh }}</el-tag>
                <el-tag type="danger">未确认{{ (scope.row.NotConfirmedFreigh) }}</el-tag>
                <el-tag type="success">确认{{ (scope.row.ConfirmedFreigh) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="补扣款">
              <template slot-scope="scope">
                <el-tag> 补款{{ scope.row.Supplement }}</el-tag>
                <el-tag type="danger">扣款{{ scope.row.Deduction }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="最终金额"
            >
              <template slot-scope="scope">
                <el-tag type="info">应付 {{ scope.row.Receivables }} RMB</el-tag>
                <el-tag>已付 {{ scope.row.Payment }} RMB</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="UpdateTime"
              width="200"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand">
                  <el-button size="mini">
                    帐单<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'getOriginals_'+scope.row.Id">帐单数据</el-dropdown-item>
                    <el-dropdown-item :command="'getNotConfirmeds_'+scope.row.Id">未确认数据</el-dropdown-item>
                    <el-dropdown-item :command="'getConfirmeds_'+scope.row.Id">已确认数据</el-dropdown-item>
                    <el-dropdown-item :command="'getSupplements_'+scope.row.Id">补款信息</el-dropdown-item>
                    <el-dropdown-item :command="'getDeductions_'+scope.row.Id">扣款信息</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown @command="handleCommand">
                  <el-button size="mini">
                    收款<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'setPayment_'+scope.row.Id">收款</el-dropdown-item>
                    <el-dropdown-item :command="'getPaymentLog_'+scope.row.Id">收款明细</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane name="5">
          <span slot="label">
            已结款
            <el-badge :value="s5" :max="999" class="item" />
          </span>
          <el-table :data="s5Data" border>
            <el-table-column label="帐单名称" prop="Name" />
            <el-table-column label="对帐币种" width="100" prop="Currency" />
            <el-table-column label="重量">
              <template slot-scope="scope">
                <el-tag> 我方{{ scope.row.SysWeight }}KG</el-tag>
                <el-tag>对方{{ scope.row.ServiceWeight }}KG</el-tag>
                <el-tag type="danger">差异{{ (scope.row.SysWeight-scope.row.ServiceWeight).toFixed(3) }}KG</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="金额">
              <template slot-scope="scope">
                <el-tag> 我方{{ scope.row.SysFreigh }}</el-tag>
                <el-tag>对方{{ scope.row.ServiceFreigh }}</el-tag>
                <el-tag type="danger">未确认{{ (scope.row.NotConfirmedFreigh) }}</el-tag>
                <el-tag type="success">确认{{ (scope.row.ConfirmedFreigh) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="补扣款">
              <template slot-scope="scope">
                <el-tag> 补款{{ scope.row.Supplement }}</el-tag>
                <el-tag type="danger">扣款{{ scope.row.Deduction }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="最终金额"
            >
              <template slot-scope="scope">
                <el-tag type="info">应付 {{ scope.row.Receivables }} RMB</el-tag>
                <el-tag>已付 {{ scope.row.Payment }} RMB</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="UpdateTime"
              width="200"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-dropdown @command="handleCommand">
                  <el-button size="mini">
                    帐单<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'getOriginals_'+scope.row.Id">帐单数据</el-dropdown-item>
                    <el-dropdown-item :command="'getNotConfirmeds_'+scope.row.Id">未确认数据</el-dropdown-item>
                    <el-dropdown-item :command="'getConfirmeds_'+scope.row.Id">已确认数据</el-dropdown-item>
                    <el-dropdown-item :command="'getSupplements_'+scope.row.Id">补款信息</el-dropdown-item>
                    <el-dropdown-item :command="'getDeductions_'+scope.row.Id">扣款信息</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button size="mini" @click="handleCommand('getPaymentLog_'+scope.row.Id)">
                  结款明细
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

      </el-tabs>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogConfirmVisible"
      width="30%"
    >
      <span>是否确定通过该帐单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogConfirmVisible = false">取 消</el-button>
        <el-button type="primary" @click="postPass">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogRejectVisible"
      width="30%"
    >
      <span>是否确定驳回该帐单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRejectVisible = false">取 消</el-button>
        <el-button type="primary" @click="postReject">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="处理差异" :visible.sync="dialogNotConfirmed">
      <el-form label-width="80px">
        <el-form-item label="确认文件">
          <el-upload
            class="upload-demo"
            action="http://120.24.149.148/api/Finance/updateLoadFile"
            :on-success="changeTempUrl"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel文件
              <el-link type="primary" @click="handleCommand('getNotConfirmeds_'+billId)">待处理差异</el-link>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNotConfirmed = false">取 消</el-button>
        <el-button type="primary" @click="postConfirmed">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="feeType==1?'扣款':'补款'" :visible.sync="dialogInputSupplementOrDeduction">
      <el-form label-width="80px">
        <el-form-item label="确认文件">
          <el-upload
            class="upload-demo"
            action="http://120.24.149.148/api/Finance/updateLoadFile"
            :on-success="changeTempUrl"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel文件
              <el-link type="primary" @click="feeType==1? handleCommand('getDeductions_'+billId):handleCommand('getSupplements_'+billId)">已处理数据</el-link>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" dialogInputSupplementOrDeduction= false">取 消</el-button>
        <el-button type="primary" @click="postSupplementOrDeduction">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="付款明细" :visible.sync="dialogFees">
      <el-table :data="PaymentData" border>
        <el-table-column label="付款时间" prop="CreateTime" />
        <el-table-column label="原已付款" prop="OldPayment" />
        <el-table-column label="付款金额" prop="Payment" />
        <el-table-column label="新已付款" prop="NewPayment" />
      </el-table>
    </el-dialog>
    <el-dialog title="付款" :visible.sync="dialogPaymentVisible">
      <el-form :model="row" label-width="80px">
        <el-form-item label="付款金额">
          <el-input v-model="postPaymentFee" min="0" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPaymentVisible = false">取 消</el-button>
        <el-button type="primary" @click="postPayment">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="开始对帐" :visible.sync="dialogStartVisible">
      <el-form :model="createDto" label-width="80px">
        <el-form-item label="帐单名称">
          <el-input v-model="createDto.Name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="帐单币种">
          <el-input v-model="createDto.Currency" autocomplete="off" />
        </el-form-item>
        <el-form-item label="帐单类型">
          <enums
            :model.sync="createDto.DeliveryBillType"
            enum-name="DeliveryBillType"
            title="帐单类型"
          />
        </el-form-item>
        <el-form-item label="帐单文件">
          <el-upload
            class="upload-demo"
            action="http://120.24.149.148/api/Finance/updateLoadFile"
            :on-success="changeCreateBillUrl"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel文件
              <el-link type="primary" href="http://120.24.149.148/api/FinanceServiceDeliveyBill/GetAddDeliverBillTempler">下载模板</el-link>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStartVisible = false">取 消</el-button>
        <el-button type="primary" :loading="saving" @click="postStart">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { _getQtys, _getData, _getConfirmeds, _getNotConfirmeds, _getOriginals, _getSupplements
  , _getDeductions, _addDeliveryBill, _inputSupplementOrDeduction, _updateConfirmed, _Pass, _Rereject
  , _postPayment, _getPaymentLog, _changeBillName, _deleteBill, _getDeliveryBillTypes }
  from '@/api/financeDelivery'
import Enums from '@/components/Xyy/Enums/enums'
export default {
  name: 'Delivery',
  components: { 'enums': Enums },
  data() {
    return {
      saving: false,
      dialogFees: false,
      dialogPaymentVisible: false,
      postPaymentFee: 0,
      s1: 0,
      s2: 0,
      s3: 0,
      s4: 0,
      s5: 0,
      dialogNotConfirmed: false,
      dialogInputSupplementOrDeduction: false,
      dialogStartVisible: false,
      dialogConfirmVisible: false,
      dialogRejectVisible: false,
      status: '0',
      createDto: {
        Name: '',
        Currency: '',
        ServiceBillUrl: '',
        DeliveryBillType: 0
      },
      s1Data: [],
      s2Data: [],
      s3Data: [],
      s4Data: [],
      s5Data: [],
      billId: 0,
      tempUrl: '',
      feeType: 1,
      billName: ''
    }
  },
  created() {
    this.getdata()
  },
  methods:
  {
    getDeliveryBillTypes() {
      return _getDeliveryBillTypes()
    },
    deleteBill(id) {
      this.$confirm('是否确认删除帐号?').then(response => {
        _deleteBill({ billId: id }).then(response => {
          this.getdata()
        })
      })
    },
    tab_cliek(t) {
      this.status = t.name - 1
      this.getdata()
    },
    handleCommand(command) {
      var action = command.split('_')[0]
      this.billId = command.split('_')[1]
      if (action === 'getOriginals') {
        _getOriginals(this.billId)
      } else if (action == 'getConfirmeds') {
        _getConfirmeds(this.billId)
      } else if (action == 'getNotConfirmeds') { _getNotConfirmeds(this.billId) } else if (action == 'getSupplements') { _getSupplements(this.billId) } else if (action == 'getDeductions') { _getDeductions(this.billId) } else if (action == 'setNotConfirmeds') { this.setNotConfirmeds() } else if (action == 'setSupplements') {
        this.feeType = 2
        this.setInputSupplementOrDeduction()
      } else if (action === 'setDeductions') {
        this.feeType = 1
        this.setInputSupplementOrDeduction()
      } else if (action === 'setPayment') {
        this.setPayment()
      } else if (action === 'getPaymentLog') {
        this.getPaymentLog()
      }

      // this.$message('click on item ' + command);
    },
    postPayment() {
      _postPayment({ Id: this.billId, postPaymentFee: this.postPaymentFee }).then(response => {
        this.dialogPaymentVisible = false
        this.getdata()
      })
    },
    setPayment() {
      this.dialogPaymentVisible = true
    },
    getPaymentLog() {
      this.dialogFees = true
      _getPaymentLog(this.billId).then(response => {
        this.PaymentData = response
      })
    },
    setNotConfirmeds() {
      this.dialogNotConfirmed = true
    },
    setInputSupplementOrDeduction() {
      this.dialogInputSupplementOrDeduction = true
    },
    getdata() {
      _getData(this.status, this.billName).then(response => {
        if (this.status == '0') { this.s1Data = response } else if (this.status == '1') { this.s2Data = response } else if (this.status == '2') { this.s3Data = response } else if (this.status == '3') { this.s4Data = response } else if (this.status == '4') { this.s5Data = response }
      })
      _getQtys(this.billName).then(response => {
        for (var i = 0; i < response.length; i++) {
          var data = response[i]
          if (data.Key == 0) {
            this.s1 = data.Value
          }
          if (data.Key == 1) {
            this.s2 = data.Value
          }
          if (data.Key == 2) {
            this.s3 = data.Value
          }
          if (data.Key == 3) {
            this.s4 = data.Value
          }
          if (data.Key == 4) {
            this.s5 = data.Value
          }
        }
      })
    },
    postStart() {
      this.saving = true
      debugger
      _addDeliveryBill(this.createDto).then(response => {
        if (response.ErrorFileUrl) {
          this.$alert('<p style="color:red">导入失败了<b>' + response.ErrorQty + '</b>条数据<br/><a class="el-link el-link--primary is-underline" href =' + response.ErrorFileUrl + ' target=_blank>下载错误详情</a></p>', '导入结果', {
            dangerouslyUseHTMLString: true
          })
        } else {
          this.$message({
            type: 'success', message: '添加成功'
          })
        }
        this.createDto.ServiceBillUrl = ''
        this.createDto.Name = ''
        this.Currency = ''
        this.dialogStartVisible = false
        this.getdata()
        this.saving = false
      }).catch(() => {
        this.saving = false
      })
    },
    postConfirmed() {
      _updateConfirmed({ billId: this.billId, url: this.tempUrl }).then(
        response => {
          this.getdata()
          this.dialogNotConfirmed = false
          this.tempUrl = ''
        })
    },
    postSupplementOrDeduction() {
      _inputSupplementOrDeduction({ billId: this.billId, url: this.tempUrl, type: this.feeType }).then(
        response => {
          this.getdata()
          this.dialogInputSupplementOrDeduction = false
          this.tempUrl = ''
        })
    },
    setRejectBill(billId) {
      this.billId = billId
      this.dialogRejectVisible = true
    },
    setPassBill(billId) {
      this.billId = billId
      this.dialogConfirmVisible = true
    },
    postPass() {
      _Pass({ billId: this.billId })
        .then(response => {
          this.getdata()
          this.dialogConfirmVisible = false
          this.billId = 0
        })
    },
    postReject() {
      _Rereject({ billId: this.billId })
        .then(response => {
          this.getdata()
          this.dialogRejectVisible = false
          this.billId = 0
        })
    },
    changeCreateBillUrl(r) {
      this.createDto.ServiceBillUrl = r.Data.url
    },
    changeTempUrl(r) {
      this.tempUrl = r.Data.url
    },
    changeBillName(r) {
      this.$prompt('输入新的帐单名称', '修改帐单名称').then(value => {
        _changeBillName({ Name: value.value, Id: r.Id }).then(() => {
          r.Name = value.value
          this.$message({ message: '修改成功', type: 'success' })
        })
      })
    }
  }
}

</script>
