<template>
  <div class="app-container">
    <div slot="header" class="card-title">应付款</div>
    <!-- 搜索工作栏 -->
    <el-card v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
        class="card"
      >
        <el-row>
          <el-form-item label="柜号:">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.containerNo"
              placeholder="请输入柜号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="自编号:">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.payableNo"
              placeholder="请输入自编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!--              <el-form-item label="订单号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item> -->
          <el-form-item label="始发城市:">
            <el-select
              v-model="queryParams.departureId"
              placeholder="请选择始发城市"
              clearable
            >
              <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="请选择目的城市"
              clearable
            >
              <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"
              clearable
            />
          </el-form-item>
        </el-row>

        <!--              <el-form-item label="付款单号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入付款单号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item> -->

        <!--              <el-form-item label="状态:">
                  <dict-selector :type="DICT_TYPE.ECW_RECEIPT_STATE" v-model="queryParams.control" />
              </el-form-item>
               <el-form-item label="业务员:">
                  <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-row>
              <el-form-item label="收款时间:" >
                  <el-date-picker
                    v-model="dateType"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="请选择日期"
                    end-placeholder="请选择日期">
                  </el-date-picker>
              </el-form-item>
          </el-row> -->
        <el-row>
          <!--              <el-form-item label="商品名称:" >
                <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item> -->
          <el-form-item label="供应商名称:">
            <el-input
              style="max-width: 188px"
              v-model="queryParams.orderNo"
              placeholder="请输入供应商名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="费用类型:">
            <dict-selector
              :type="DICT_TYPE.FEE_TYPE"
              v-model="queryParams.feeType"
            ></dict-selector>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查找</el-button>
            <el-button
              style="margin-left: 10px"
              type="success"
              @click="handleAdd(0)"
              >新增请款单</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-table v-loading="loadings" :data="list" border class="card">
      <el-table-column label="自编号" align="center" prop="payableNo" />
      <el-table-column label="货柜号" align="center" prop="containerNo" />
      <el-table-column label="供应商" align="center" prop="supplierName" />
      <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="totalAmount">
        <template slot-scope="scope">
          <span>{{ scope.row.totalAmount }}</span>
          <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" />
        </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"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="editClick(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="text"  @click="handleAdd(scope.row.id)"
            >请款</el-button
          >
          <el-button size="mini" type="text" @click="deleteClick(scope.row)">删除</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="费用登记"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form ref="costForm" :model="costObj" label-width="80px">

        <el-form-item label="操作步骤">
          <el-select v-model="costObj.stepsId" placeholder="请选择操作步骤">
            <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PROCESS)" :key="type.value" :label="type.label" :value="type.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="费用类型">
          <el-select v-model="costObj.feeType" placeholder="请选择费用类型">
            <el-option v-for="type in this.getDictDatas(DICT_TYPE.FEE_TYPE)" :key="type.value" :label="type.label" :value="type.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="供应商">
          <el-select v-model="costObj.supplierId" placeholder="请选择供应商">
            <el-option v-for="supplier in allSupplier" :key="supplier.id" :label="supplier.companyZh" :value="supplier.id"></el-option>
          </el-select>
        </el-form-item>

        <el-row class="two-element">
          <el-form-item label="金额">
            <el-input-number v-model="costObj.totalAmount" controls-position="right" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item label="" label-width="0px">
            <el-select v-model="costObj.currencyId" placeholder="请选择单位">
              <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PRICE_UNIT)" :key="type.value" :label="type.label" :value="type.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-form-item label="备注">
          <el-input v-model="costObj.remark" type="textarea" rows="2" placeholder="请输入备注"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="operate-button">
        <el-button type="primary" @click="submitEditForm">确定</el-button>
        <el-button @click="cancelEditForm">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userList } from "@/api/system/user";
import { DICT_TYPE } from "@/utils/dict";
import { getTradeCityList } from "@/api/ecw/region";
import { getPayableList, deletePayable, updatePayable } from "@/api/ecw/financial"
import { getSupplierPage } from "@/api/ecw/supplier";

export default {
  name: "Payable",
  components: {},
  data() {
    return {
      open: false,
      showSearch: true,
      loadings: false,
      tradeCityList: [],
      costObj: {},
      creatorData: [],
      list: [],
      total: 0,
      dateType: [],
      loading: "",
      params: {
        page: 1,
        rows: 20,
      },
      queryParams: {
        page: 1,
        rows: 20,
      },
      allSupplier: [],
    };
  },
  computed: {
    expoerCityList() {
      return this.tradeCityList.filter((item) => item.type == 2);
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type == 1);
    },
  },
  created() {
    let that = this;
    userList("salesman").then((res) => (that.creatorData = res.data));
    getTradeCityList().then((res) => (that.tradeCityList = res.data));
    this.getList()
    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allSupplier = data.list;
    });
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
      // 执行查询
      getPayableList(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      return this.$router.push("creatPayment?payableId=" + id);
    },
    submitEditForm() {
      const params = {
        invoiceNumber: this.costObj.invoiceNumber,
        id: this.costObj.id,
        stepsId: this.costObj.stepsId,
        feeType: this.costObj.feeType,
        supplierId: this.costObj.supplierId,
        totalAmount: this.costObj.totalAmount,
        currencyId: this.costObj.currencyId,
        remark: this.costObj.remark
      }
      updatePayable(params).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.getList();
        this.open = false;
      })
    },
    /** 取消按钮 */
    cancelEditForm() {
      this.open = false;
    },
    editClick(row) {
      row.stepsId = String(row.stepsId)
      row.feeType = String(row.feeType)
      row.currencyId = String(row.currencyId)
      this.costObj = { ...row }
      this.open = true;
    },
    deleteClick(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除该应付款?').then(function() {
        return deletePayable(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
  .small-padding ::v-deep .el-button {

  }
  // 页面内元素弹窗form控件宽度设置
  ::v-deep .el-form-item__content {
    > div:not(.el-input-number) {
      width: 100%;
    }
  }
  .operate-button {
    text-align: center;
  }
  .two-element {
    display: flex;
    > :last-child {
      width: 100%;
      margin-left: 10px;
    }
  }
  .card {
    margin-top: 20px;
  }
  .dialog-footer {
    padding: 40px;
  }
  .card-title {
    font-size: 18px;
    font-weight: bold;
  }
</style>