<template>
  <div class="app-container">
    <el-card>
      <div v-if="id" slot="header" class="card-title">新增收款单</div>
      <div v-else slot="header" class="card-title">新增收款单</div>
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="left"
      >
        <el-descriptions :column="3" border>
          <el-descriptions-item label="客户">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="customerId"
              required
              error="客户不能为空"
            >
              <customer-selector
                v-model="form.customerId"
                @change="consignor = $event"
              />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="departmentId"
              required
              error="部门不能为空"
            >
              <el-select
                v-model="form.departmentId"
                style="width: 300px"
                placeholder="请选择部门"
              >
                <el-option
                  v-for="item in deptData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="业务员">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="salesmanId"
              required
              error="客户不能为空"
            >
              <el-select v-model="form.salesmanId" placeholder="请选择业务员">
                <el-option
                  v-for="item in creatorData"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="手续费(RMB)">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="feeRate"
              required
              error="手续费不能为空"
            >
              <el-input
                v-model="form.feeRate"
                placeholder="请输入手续费"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="remark"
              required
              error="备注不能为空"
            >
              <el-input v-model="form.remark" placeholder="备注"></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </el-card>
    <el-card class="card">
      <div slot="header" class="card-title">订单信息</div>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          style="padding: 10px; margin-bottom: 10px"
          >添加未收客户款项</el-button
        >
      </el-col>
      <el-table v-loading="loadings" :data="list" border>
        <el-table-column label="订单号" align="center" prop="orderNo" />

        <el-table-column label="运输方式" align="center" prop="transportId">
          <template slot-scope="scope">
            <dict-tag
              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
              :value="scope.row.transportId"
            ></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="出货渠道" align="center" prop="channelName" />
        <el-table-column label="始发地" align="center" prop="toDepartureId" />
        <el-table-column label="目的地" align="center" prop="toDepartureId" />
        <el-table-column label="品名" align="center" prop="title">
          <template slot-scope="scope">
            {{ scope.row.titleZh + "(" + scope.row.titleEn + ")" }}
          </template>
        </el-table-column>
        <el-table-column label="箱数" align="center" prop="num" />
        <el-table-column label="体积/重量" align="center" prop="weight" />
        <!-- <el-table-column label="体积/重量" align="center" prop="sumVolume">
          <template slot-scope="scope">
            {{ scope.row.sumVolume + "/" + scope.row.sumWeight }}
          </template>
        </el-table-column> -->
        <el-table-column label="收款类型" align="center" prop="paymentType">
          <template slot-scope="scope">
            <dict-selector
              :type="DICT_TYPE.PAYMENT_TYPE"
              v-model="scope.row.paymentType"
            ></dict-selector>
          </template>
        </el-table-column>
        <!-- <el-table-column label="收入类型" align="center" prop="sumWeight" /> -->
        <el-table-column label="收入类型" align="center" prop="feeType">
          <template slot-scope="scope">
            <dict-tag
              :type="DICT_TYPE.FEE_TYPE"
              :value="scope.row.feeType"
            ></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="单价美元" align="center" prop="unitPrice" />
        <el-table-column label="外币兑1人民币汇率" align="center" prop="huilv">
          <template slot-scope="scope">
            <el-input v-model="scope.row.huilv"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总金额$" align="center" prop="totalAmount" />
        <el-table-column label="总金额￥" align="center" prop="totalAmount" />
        <el-table-column label="已收金额" align="center" prop="totalAmount" />
        <el-table-column label="本次实收金额" align="center" width="140" prop="totalAmount">
          <template slot-scope="scope">
            <el-input v-model="scope.row.totalAmount">
              <template slot="append">美元</template>
            </el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column label="本次实收金额" align="center" prop="totalAmount" /> -->
        <!-- <el-table-column label="应收金额" align="center" prop="sumWeight" />
        <el-table-column label="收款类型" align="center" prop="payType" />
        <el-table-column label="总金额美元" align="center" prop="sumWeight" />
        <el-table-column label="总金额RMB" align="center" prop="payType" />
        <el-table-column label="实收金额" align="center" prop="actualAmount" /> -->
      </el-table>

      <el-form
        ref="forms"
        :model="form"
        label-width="120px"
        label-position="left"
      >
        <el-descriptions :column="2" border class="card">
          <el-descriptions-item label="收款账户" style="width: 50%">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="platformAccountId"
              required
              error="请选择收款账户"
            >
              <el-select
                v-model="form.platformAccountId"
                placeholder="请选择收款账户"
              >
                <el-option
                  v-for="item in bankData"
                  :key="item.id"
                  :label="item.baAccountName + '(' + item.baAccountNum + ')'"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="是否需要开票" style="width: 50%">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="transportId"
              required
              error="请选择是否需要开票"
            >
              <dict-selector
                :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
                v-model="form.transportId"
              />
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <div class="card">
          <el-form-item
            label="收款附件"
            label-width="120px"
            style="margin-bottom: 0; width: 33%; display: inline-block"
            prop="wenjian"
          >
            <el-upload
              class="upload-demo"
              :action="uploadFileUrl"
              :headers="headers"
              :on-success="handleUploadSuccess"
              :before-upload="handleBeforeUpload"
              :on-error="handleUploadError"
              :before-remove="beforeRemove"
              multiple
            >
              <el-button size="small" type="primary">上传附件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="水单号:"
            label-width="120px"
            style="
              margin-bottom: 0;
              width: 31%;
              margin-left: 2%;
              display: inline-block;
            "
            prop="waterBillNo"
            required
            error="水单号不能为空"
          >
            <el-input
              v-model="form.waterBillNo"
              maxlength="200"
              placeholder="请输入水单号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="实收日期:"
            label-width="120px"
            style="
              margin-bottom: 0;
              width: 31%;
              margin-left: 2%;
              display: inline-block;
            "
            prop="payedAt"
            required
            error="实收日期不能为空"
          >
            <el-date-picker
              clearable
              v-model="form.payedAt"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择实收日期"
            />
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <div slot="footer" style="margin: 20px 0">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button type="primary" @click="submitForm">新 增</el-button>
    </div>
    <el-dialog
      :visible.sync="open"
      title="添加未收客户款项"
      width="80%"
      append-to-body
    >
      <div>
        <!-- <div slot="header" class="card-title">添加未收客户款项</div> -->
        <!-- 搜索工作栏 -->
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="80px"
        >
          <el-row>
            <el-form-item label="始发城市">
              <el-select
                v-model="queryParams.departureId"
                placeholder="请选择始发地"
              >
                <el-option
                  v-for="item in expoerCityList"
                  :label="item.titleZh"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目的城市">
              <el-select
                v-model="queryParams.objectiveId"
                placeholder="请选择始发地"
              >
                <el-option
                  v-for="item in importCityList"
                  :label="item.titleZh"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运输方式">
              <dict-selector
                :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
                v-model="queryParams.transportId"
                formatter="number"
              />
            </el-form-item>
            <el-form-item label="出货渠道">
              <el-select
                v-model="queryParams.channelId"
                placeholder="请选择出货渠道"
              >
                <el-option
                  v-for="item in channelList"
                  :label="item.nameZh"
                  :value="item.channelId"
                  :key="item.channelId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="报关方式">
              <dict-selector
                :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
                v-model="queryParams.customsType"
              />
            </el-form-item>
            <el-form-item label="控货">
              <dict-selector
                :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
                v-model="queryParams.control"
              />
            </el-form-item>
            <el-form-item label="客户名称">
              <customer-selector
                v-model="queryParams.consignorId"
                @change="consignor = $event"
              />
            </el-form-item>
          </el-row>
          <el-form-item label="订单编号" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              placeholder="请输入订单编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="自编号" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              placeholder="请输入自编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading1"
          :data="orderData"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
          <el-table-column label="订单号" align="center" prop="orderNo" />
          <el-table-column label="唛头" align="center" prop="marks" />
          <el-table-column label="品名" align="center" prop="title">
            <template slot-scope="scope">
              {{ scope.row.titleZh + "(" + scope.row.titleEn + ")" }}
            </template>
          </el-table-column>
          <el-table-column label="箱数" align="center" prop="num" />
          <el-table-column label="体积/重量" align="center" prop="weight" />
          <el-table-column label="发货人" align="center" prop="consignorName" />
          <el-table-column label="收货人" align="center" prop="consigneeName" />
          <el-table-column label="订单状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag
                :type="DICT_TYPE.ORDER_STATUS"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
          <el-table-column label="收入类型" align="center" prop="feeType">
            <template slot-scope="scope">
              <dict-tag
                :type="DICT_TYPE.FEE_TYPE"
                :value="scope.row.feeType"
              ></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="单价美元" align="center" prop="unitPrice" />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.rows"
          @pagination="getList"
        />
        <!-- </el-card> -->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveSelectList">确认添加</el-button>
          <el-button @click="hiddenDialog">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userList } from "@/api/system/user";
import { DICT_TYPE } from "@/utils/dict";
import { getToken } from "@/utils/auth";
import CustomerSelector from "@/components/CustomerSelector";
import { getBankAccountPage } from "@/api/ecw/bankAccount";
import { listSimpleDepts } from "@/api/system/dept";
import { getChannelList } from "@/api/ecw/channel";
import { getTradeCityList } from "@/api/ecw/region";
import { createReceipt } from "@/api/ecw/financial";
import { getReceivableList } from "@/api/ecw/financial";

export default {
  name: "CreatCollection",
  components: {
    CustomerSelector,
  },
  data() {
    return {
      loadings: false,
      loading1: false,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/app-api/file/upload", // 上传的图片服务器地址
      form: {},
      creatorData: [],
      list: [],
      fileList: [],
      orderData: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      loading: "",
      open: false,
      bankData: [],
      params: {
        page: 1,
        rows: 20,
      },
      deptData: [],
      deptArr: [],
      oadings: false,
      channelList: [],
      queryParams: {
        page: 1,
        rows: 20,
      },
      multipleSelection: [],
      tradeCityList: [],
      id: 0
    };
  },

  created() {
    let that = this;
    if (that.$route.query.id) {
      this.id = this.$route.query.id;
    }
    this.getList();
    // if(that.$route.query.consignorId){
    //   this.queryParams.consignorId = this.$route.query.consignorId
    // }
    // if(that.$route.query.writeOffName){
    //   this.form.writeOffName = this.$route.query.writeOffName
    // }
    userList("salesman").then((res) => (that.creatorData = res.data));
    getChannelList().then((res) => (that.channelList = res.data));
    getTradeCityList().then((res) => (that.tradeCityList = res.data));
    getBankAccountPage(that.params).then(
      (res) => (that.bankData = res.data.list)
    );
    listSimpleDepts().then((res) => {
      res.data.forEach((item) => {
        if (item.parentId == 0) {
          that.deptArr.push(item);
        } else {
          that.deptData.push(item);
        }
      });

      that.deptData.forEach((value) => {
        var dept = that.deptArr.filter((itt) => itt.id == value.parentId);
        if (dept.length > 0) {
          value.name = dept[0].name + " | " + value.name;
        }
      });
    });
    this.id && getReceivableList({ ...that.params, id: this.id }).then(res => {
      console.log(res, '==================')
    })
  },
  computed: {
    expoerCityList() {
      return this.tradeCityList.filter((item) => item.type == 2);
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type == 1);
    },
  },
  methods: {
    getReceivableListByIds() {
      
    },
    getList() {
      this.loading1 = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      this.addBeginAndEndTime(params, this.dateType, "createTime");
      // 执行查询
      getReceivableList(params).then((response) => {
        this.orderData = response.data.list;
        this.total = response.data.total;
        this.loading1 = false;
      });
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除？`);
    },
    handleUploadSuccess(res, file, fileList) {
      var arr = [];
      fileList.forEach((item) => {
        arr.push(item.response.data);
      });
      this.fileList = arr;
      console.log(this.fileList);
      this.loading.close();
    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
    },
    hiddenDialog() {
      this.open = false;
    },
    submitForm() {
      const params = this.form;
      console.log(params);
      // createReceipt()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    saveSelectList() {
      this.list = this.multipleSelection
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
    },
  },
};
</script>

<style>
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 40px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
</style>
