<template>
  <div class="app-container">
    <div slot="header" class="card-title">{{ $t('收款单') }}</div>
    <!-- 搜索工作栏 -->
    <el-card v-show="showSearch" class="card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
        class="card"
      >
        <el-row :span="24">
          <el-form-item :label="$t('收款单号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.receiptNo"
              :placeholder="$t('请输入收款单号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('客户名称')">
            <customer-selector
              v-model="queryParams.customerId"
              @change="consignor = $event"
            />
          </el-form-item>
          <el-form-item :label="$t('状态')">
            <dict-selector
              :type="DICT_TYPE.ECW_RECEIPT_STATE"
              v-model="queryParams.state"
            />
          </el-form-item>
          <el-form-item :label="$t('业务员')">
            <el-select
              v-model="queryParams.salesmanId"
              :placeholder="$t('请选择业务员')"
            >
              <el-option
                v-for="item in creatorData"
                :key="item.id"
                :label="item.nickname"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :span="24">
          <el-col style="width: 592px">
            <el-form-item :label="$t('创建时间')">
              <el-date-picker
                v-model="queryParams.beginCreateTime"
                type="datetimerange"
                range-separator="-"
                :start-placeholder="$t('请选择日期')"
                :end-placeholder="$t('请选择日期')"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
<!--          <el-form-item :label="$t('自编号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.orderNo"
              :placeholder="$t('请输入自编号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
<!--          <el-form-item :label="$t('订单号')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.orderNo"
              :placeholder="$t('请输入订单号')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="handleQuery">{{ $t('查找') }}</el-button>
          </el-form-item>
        </el-row>
        <!-- <el-row :span="24"> -->
 <!--         <el-form-item :label="$t('商品名称')">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.orderNo"
              :placeholder="$t('请输入商品名称')"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
<!--          <el-form-item :label="$t('费用类型')">
            <dict-selector
              :type="DICT_TYPE.FEE_TYPE"
              v-model="queryParams.feeType"
            ></dict-selector>
          </el-form-item>
          <el-form-item :label="$t('收款类型')">
            <dict-selector
              :type="DICT_TYPE.PAYMENT_TYPE"
              v-model="queryParams.paymentType"
            ></dict-selector>
          </el-form-item> -->

        <!-- </el-row> -->
      </el-form>
    </el-card>
    <el-table v-loading="loadings" :data="list" border class="card">
      <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('收款单号')" align="center" prop="receiptNo">
        <template slot-scope="scope">
          <span style="color: #1890ff;" @click="verificationCancelClick(scope.row)">{{scope.row.receiptNo}}</span>
          <!-- <el-button size="mini" type="text" @click="verificationCancelClick(scope.row)">{{ scope.row.receiptNo }}</el-button> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="自编号" align="center" prop="orderNo" /> -->
      <!-- <el-table-column label="订单号" align="center" prop="orderNo"> -->
        <!-- <template slot-scope="scope"> -->
            <!-- <span style="color: #1890ff;" @click="verificationCancelClick(scope.row)">{{scope.row.orderNo}}</span> -->
            <!-- <el-button size="mini" type="text" @click="verificationCancelClick(scope.row)">{{ scope.row.receiptNo }}</el-button> -->
          <!-- </template> -->
        <!-- </el-table-column> -->
      <el-table-column :label="$t('客户名称')" align="center" prop="customerName" />
      <el-table-column :label="$t('创建日期')" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="币种" align="center">
              <template slot-scope="scope">
                <dict-tag :type="DICT_TYPE.COMMISSION_CURRENCY_TYPE" :value="scope.row.currencyId" />
              </template>
            </el-table-column> -->
      <!-- <el-table-column label="汇率" align="center" prop="totalAmount" /> -->
      <el-table-column :label="$t('实收日期')" align="center" prop="payedAt">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.writeOffAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('业务员')" align="center" prop="salesmanName" />
      <el-table-column :label="$t('状态')" align="center">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.ECW_RECEIPT_STATE"
            :value="scope.row.state"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('是否开票')" align="center">
        <template slot-scope="scope">
          {{ scope.row.openInvoice === 0 ? $t('否') : $t('是') }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('操作')"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state === 0 || scope.row.state == 1 || scope.row.state == 2 || scope.row.state == 3"
            size="mini"
            type="text"
            @click="handleAdd(scope.row.id)"
            >{{ $t('编辑') }}</el-button
          >
          <!-- <el-button
            v-if="scope.row.state == "
            size="mini"
            type="text"
            @click="verificationClick(scope.row)"
            >核销</el-button
          > -->
          <el-button
            v-if="scope.row.state == 4 || scope.row.state == 5 || scope.row.state == 6"
            size="mini"
            type="text"
            @click="verificationCancelClick(scope.row)"
            >{{ $t('反核销') }}</el-button
          >
          <el-button
            v-if="scope.row.state == 5"
            size="mini"
            type="text"
            @click="openInvoice(scope.row.id)"
            >{{ $t('开票') }}</el-button
          >
          <el-button v-if="scope.row.state == 1 || scope.row.state == 2 || scope.row.state == 3" size="mini" type="text" @click="verificationCancelClick(scope.row)">{{ $t('收款') }}</el-button>
          <el-button v-if="scope.row.state == 0 || scope.row.state == 1" size="mini" type="text" @click="deleteClick(scope.row)">{{ $t('删除') }}</el-button>
          <el-button
            v-if="scope.row.state != 0"
            size="mini"
            type="text"
            @click="toprint(scope.row.id)"
            >{{ $t('打印') }}</el-button
          >
          <el-button
            v-if="scope.row.state != 0"
            size="mini"
            type="text"
            @click="exportReceipt(scope.row.id)"
            >{{ $t('导出账单') }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :title="$t('导出账单')"
      :visible.sync="open"
      width="500px"
      style="margin-top: 20vh !important"
      append-to-body
    >
      <!-- <div slot="title" class="card-title" style='border-bottom: 2px solid #f8f8f8;'>
            <span>导出账单</span>
            <i class="el-icon-close" @click="cancel"></i>
          </div> -->
      <div class="dialog-footer">
        <el-button type="primary" style="width: 130px" @click="submitForm(1)" v-loading="downloading">{{ $t('国内账单') }}</el-button
        >
        <el-button
          plain
          v-loading="downloading"
          type="primary"
          style="width: 130px; margin: 0"
          @click="submitForm(2)"
          >Debite note</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSimpleUsers } from "@/api/system/user";
import { DICT_TYPE } from "@/utils/dict";
import CustomerSelector from "@/components/CustomerSelector";
import {
  getReceiptList,
  // receiptVerification,
  // receiptVerificationCancel,
  receiptExportExcel,
  deleteReceipt
} from "@/api/ecw/financial";

export default {
  name: "Voucher",
  components: {
    CustomerSelector,
  },
  data() {
    return {
      exportId: "",
      open: false,
      showSearch: true,
      loadings: false,
      form: {},
      creatorData: [],
      list: [],
      total: 0,
      dateType: [],
      loading: "",
      params: {
        page: 1,
        rows: 20,
      },
      // 查询参数
      queryParams: {
        page: 1,
        rows: 20,
        dateType: null,
        date: null,
        originId: null,
        destinationId: null,
        transportId: null,
        isCargoControl: null,
        orderExceptionStatus: null,
        orderExceptionType: null,
        orderNo: null,
        consignorId: null,
        marks: null,
        prodId: null,
        productRecord: null,
        followUpSalesmanId: null,
      },
      downloading: false, // 导出状态
    };
  },
  created() {
    let that = this;
    listSimpleUsers().then((res) => (that.creatorData = res.data));
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
      // 执行查询
      getReceiptList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    verificationClick(row) {
      const id = row.id;
      return this.$router.push("receiptDetail?id=" + id);
    //   this.$modal
    //     .confirm("您确认要核销吗？")
    //     .then(function () {
    //       return receiptVerification(id);
    //     })
    //     .then(() => {
    //       this.getList();
    //       this.$modal.msgSuccess("核销成功");
    //     })
    //     .catch(() => {});
    },
    verificationCancelClick(row) {
      const id = row.id;
      return this.$router.push("receiptDetail?id=" + id);
      // this.$modal
      //   .confirm("您确认要反核销吗？")
      //   .then(function () {
      //     return receiptVerificationCancel(id);
      //   })
      //   .then(() => {
      //     this.getList();
      //     this.$modal.msgSuccess("反核销成功");
      //   })
      //   .catch(() => {});
    },
    deleteClick(row) {
      const id = row.id;
      this.$modal.confirm(this.$t('是否确认删除该收款单?')).then(function() {
        return deleteReceipt(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('删除成功'));
      }).catch(() => {});
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log(11)
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      return this.$router.push("creatCollection?id=" + id);
    },
    toprint(id) {
      return this.$router.push("printVoucher?id=" + id);
    },
    openInvoice(id) {
      return this.$router.push("openInvoice?id=" + id);
    },
    exportReceipt(id) {
      this.open = true;
      this.exportId = id;
    },
    submitForm(type) {
      this.downloading = true
      receiptExportExcel({ id: this.exportId, billType: type }).then((response) => {
          this.$download.excel(response, `${type === 1 ? this.$t('国内账单') : "Debite_note"}.xls`);
          this.open = false;
        }
      ).finally(() => this.downloading = false)
    },
    /** 取消按钮 */
    //  cancel() {
    //    this.open = false;
    //  },
  },
};
</script>

 <style scoped>
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 160px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
</style>