<template>
  <div class="fullHeight whiteBlock">
    <div style="padding: 15px 15px 0">
      <p class="pageTitle">基本信息</p>
      <el-form
        :inline="true"
        ref="searchForm"
        :model="searchForm"
        size="medium"
      >
        <el-form-item label="合同名称">
          <el-input
            v-model="searchForm.contractName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getList">{{
            $t('message.energyManage.waybill.query')
          }}</el-button>
          <el-button type="warning" plain @click="refresh">{{
            $t('message.deviceManage.refresh')
          }}</el-button>
          <el-button type="primary" size="medium" @click="add(1)"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="List" @row-click="showDetailFn">
        <el-table-column
          prop="contractName"
          label="合同名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="contractNumber"
          align="center"
          label="合同编号"
        ></el-table-column>
        <el-table-column
          prop="partyAUnits"
          align="center"
          label="甲方单位"
        ></el-table-column>
        <el-table-column
          prop="partyBUnit"
          align="center"
          label="乙方单位"
        ></el-table-column>
        <el-table-column
          prop="contractAmount"
          align="center"
          label="合同金额"
        ></el-table-column>
        <el-table-column
          prop="paymentMethod"
          align="center"
          label="付款方式"
        ></el-table-column>
        <el-table-column
          prop="advancePayment"
          align="center"
          label="预付款"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="tableBtns" style="margin-left: 40px !important">
              <div @click.stop="edit(scope.row, 1)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>编辑</span>
              </div>
              <div @click.stop="deleteDev(scope.row, 1)" class="operationText">
                <img
                  src="@/assets/images/icon-delete.png"
                  width="15px"
                  height="15px"
                />
                <span>删除</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="pagInfo.pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pagInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(pagInfo.total)"
        background
      ></el-pagination>
    </div>
    <!-- 新增弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="basicForTitle"
      :visible.sync="dialogShow"
      width="1450px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="contractForm"
          ref="contractForm"
          :rules="contractFormRules"
          label-width="70px"
          :inline="true"
        >
          <el-form-item label="签订日期" prop="signDate">
            <el-date-picker
              v-model="baseInfoFrom.signDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="合同编号" prop="contractNumber">
            <el-input
              v-model="baseInfoFrom.contractNumber"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同名称" prop="contractName">
            <el-input
              v-model="baseInfoFrom.contractName"
              style="width: 485px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同类型" prop="contractType">
            <el-input
              v-model="baseInfoFrom.contractType"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              v-model="baseInfoFrom.startTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="baseInfoFrom.endTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="合同金额" prop="contractAmount">
            <el-input
              v-model="baseInfoFrom.contractAmount"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="金额（大写）"
            prop="amount"
            label-width="100px !important"
          >
            <el-input
              v-model="baseInfoFrom.amount"
              style="width: 457px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="甲方单位" prop="partyAUnits">
            <el-input
              v-model="baseInfoFrom.partyAUnits"
              style="width: 480px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="乙方单位" prop="partyBUnit" label-width="70px">
            <el-input
              v-model="baseInfoFrom.partyBUnit"
              style="width: 488px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="税点" prop="taxPoint">
            <el-input
              v-model="baseInfoFrom.taxPoint"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>

          <el-form-item label="签订人" prop="signatory">
            <el-input
              v-model="baseInfoFrom.signatory"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款方式" prop="paymentMethod">
            <el-input
              v-model="baseInfoFrom.paymentMethod"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="结算方式" prop="billingMethod">
            <el-input
              v-model="baseInfoFrom.billingMethod"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="预付款" prop="advancePayment">
            <el-input
              v-model="baseInfoFrom.advancePayment"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="保证金" prop="deposit">
            <el-input
              v-model="baseInfoFrom.deposit"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款条件" prop="paymentTerm">
            <el-input
              v-model="baseInfoFrom.paymentTerm"
              style="width: 1330px"
              type="textarea"
              :rows="2"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="收款条件" prop="receivingCondition">
            <el-input
              v-model="baseInfoFrom.receivingCondition"
              style="width: 1330px"
              type="textarea"
              :rows="4"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="baseInfoFrom.remark"
              style="width: 1330px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button
            class="cancleBtn"
            @click="dialogShow = false"
            icon="el-icon-circle-close"
            size="medium"
            >{{ $t('message.deviceManage.cancel') }}
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="submit(1)"
            size="medium"
            >{{ $t('message.deviceManage.save') }}
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 详情弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      title="详情"
      :visible.sync="addOrEditDialog"
      width="1450px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="contractForm"
          ref="contractForm"
          :rules="contractFormRules"
          label-width="70px"
          :inline="true"
        >
          <el-form-item label="签订日期">
            <el-date-picker
              v-model="detailData.signDate"
              disabled
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="合同编号">
            <el-input
              v-model="detailData.contractNumber"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同名称">
            <el-input
              v-model="detailData.contractName"
              disabled
              style="width: 485px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同类型">
            <el-input
              v-model="detailData.contractType"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="detailData.startTime"
              disabled
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="detailData.endTime"
              disabled
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="合同金额">
            <el-input
              v-model="detailData.contractAmount"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>

          <el-form-item label="金额（大写）" label-width="100px !important">
            <el-input
              v-model="detailData.amount"
              disabled
              style="width: 457px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="甲方单位">
            <el-input
              v-model="detailData.partyAUnits"
              disabled
              style="width: 480px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="乙方单位" label-width="70px">
            <el-input
              v-model="detailData.partyBUnit"
              disabled
              style="width: 488px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="税点">
            <el-input
              v-model="detailData.partyBUnit"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="签订人">
            <el-input
              v-model="detailData.signatory"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款方式">
            <el-input
              v-model="detailData.paymentMethod"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="结算方式">
            <el-input
              v-model="detailData.billingMethod"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="预付款">
            <el-input
              v-model="detailData.advancePayment"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="保证金">
            <el-input
              v-model="detailData.deposit"
              disabled
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款条件">
            <el-input
              v-model="detailData.paymentTerm"
              disabled
              style="width: 1330px"
              type="textarea"
              :rows="2"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="收款条件">
            <el-input
              v-model="detailData.receivingCondition"
              disabled
              style="width: 1330px"
              type="textarea"
              :rows="4"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="detailData.remark"
              disabled
              style="width: 1330px"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="btnAdd">
          <el-button type="primary" size="medium" @click="add(2)"
            >新增</el-button
          >
        </div>
        <el-tabs
          style="margin-bottom: 5px; width: 196px"
          v-model="dialogSteps"
          type="card"
        >
          <el-tab-pane label="付款记录" name="0"></el-tab-pane>
          <el-tab-pane label="到货验收" name="1"></el-tab-pane>
        </el-tabs>

        <div class="importMaterialBox" v-show="dialogSteps == 0">
          <el-table
            class="tables"
            :data="orderMaterialList"
            height="360"
            style="min-height: auto"
          >
            <el-table-column
              label="申请付款金额"
              prop="requestPaymentAmount"
              align="center"
            ></el-table-column>
            <el-table-column
              label="申请付款时间"
              prop="requestPaymentTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="付款人"
              prop="payer"
              align="center"
            ></el-table-column>
            <el-table-column
              label="付款状态"
              prop="paymentStatus"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="实际付款金额"
              prop="actualPaymentAmount"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="实际付款时间"
              prop="actualPaymentTime"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="付款凭证"
              prop="paymentProof"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  :preview="
                    scope.row.invoiceVoucher[0]
                      ? scope.row.invoiceVoucher[0].url
                      : []
                  "
                  :src="
                    scope.row.invoiceVoucher[0]
                      ? scope.row.invoiceVoucher[0].url
                      : []
                  "
                  alt=""
                  width="50px"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="开票金额"
              prop="invoiceAmount"
              align="center"
            >
            </el-table-column>
            <el-table-column label="税点" prop="taxPoint" align="center">
            </el-table-column>
            <el-table-column
              label="发票开具状态"
              prop="invoicingStatus"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="发票凭证"
              prop="invoiceVoucher"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  :preview="
                    scope.row.paymentProof[0]
                      ? scope.row.paymentProof[0].url
                      : []
                  "
                  :src="
                    scope.row.paymentProof[0]
                      ? scope.row.paymentProof[0].url
                      : []
                  "
                  alt=""
                  width="50px"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <div
                  class="tableBtns"
                  style="
                    position: absolute;
                    width: 200px;
                    right: -65%;
                    top: 28% !important;
                  "
                >
                  <div
                    @click="edit(scope.row, 2)"
                    class="operationText"
                    style="margin-right: 20px !important"
                  >
                    <img
                      src="@/assets/images/icon-edit.png"
                      width="15px"
                      height="15px"
                    />
                    <span>编辑</span>
                  </div>
                  <div @click="deleteDev(scope.row, 2)" class="operationText">
                    <img
                      src="@/assets/images/icon-delete.png"
                      width="15px"
                      height="15px"
                    />
                    <span>删除</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="importMaterialBox" v-show="dialogSteps == 1">
          <el-table
            class="tables"
            :data="ArrivalList"
            height="360"
            style="min-height: auto"
          >
            <el-table-column
              label="到货数量"
              prop="arrivedQuantity"
              align="center"
            ></el-table-column>
            <el-table-column
              label="到货时间"
              prop="arrivalTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="负责人"
              prop="head"
              align="center"
            ></el-table-column>
            <el-table-column
              label="验收状态"
              prop="acceptanceStatus"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="验收结果"
              prop="acceptanceResult"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="到货照片"
              prop="arrivalPicture"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  :preview="
                    scope.row.arrivalPicture[0]
                      ? scope.row.arrivalPicture[0].url
                      : []
                  "
                  :src="
                    scope.row.arrivalPicture[0]
                      ? scope.row.arrivalPicture[0].url
                      : []
                  "
                  alt=""
                  width="50px"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="验收照片"
              prop="acceptancePhoto"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  :preview="
                    scope.row.acceptancePhoto[0]
                      ? scope.row.acceptancePhoto[0].url
                      : []
                  "
                  :src="
                    scope.row.acceptancePhoto[0]
                      ? scope.row.acceptancePhoto[0].url
                      : []
                  "
                  alt=""
                  width="50px"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="验收人"
              prop="acceptancePerson"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="验收时间"
              prop="acceptanceTime"
              align="center"
            >
            </el-table-column>
            <el-table-column label="品类" prop="category" align="center">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="specificationAndModel"
              align="center"
            >
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <div
                  class="tableBtns"
                  style="
                    position: absolute;
                    width: 200px;
                    right: -60%;
                    top: 28% !important;
                  "
                >
                  <div @click="edit(scope.row, 3)" class="operationText">
                    <img
                      src="@/assets/images/icon-edit.png"
                      width="15px"
                      height="15px"
                    />
                    <span>编辑</span>
                  </div>
                  <div @click="deleteDev(scope.row, 3)" class="operationText">
                    <img
                      src="@/assets/images/icon-delete.png"
                      width="15px"
                      height="15px"
                    />
                    <span>删除</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="dialog-footer" >
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="addOrEditDialog = false"
            size="medium"
            >确认
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 详情-付款记录新增 -->
    <el-dialog
      :modal-append-to-body="false"
      @close="close"
      :title="tenderRecordStitle"
      :visible.sync="tenderRecordsShow"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          ref="addEditForm"
          :model="tenderRecordsForm"
          label-width="120px"
          class="dialogFormBox"
        >
          <el-form-item label="申请付款金额" prop="requestPaymentAmount">
            <el-input
              v-model="tenderRecordsForm.requestPaymentAmount"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请付款时间" prop="requestPaymentTime">
            <el-date-picker
              style="width: 320px !important"
              v-model="tenderRecordsForm.requestPaymentTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="付款人" prop="payer">
            <el-input
              v-model="tenderRecordsForm.payer"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款状态" prop="paymentStatus">
            <el-input
              v-model="tenderRecordsForm.paymentStatus"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="实际付款金额" prop="actualPaymentAmount">
            <el-input
              v-model="tenderRecordsForm.actualPaymentAmount"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="实际付款时间" prop="actualPaymentTime">
            <el-date-picker
              style="width: 320px !important"
              v-model="tenderRecordsForm.actualPaymentTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="开票金额" prop="invoiceAmount">
            <el-input
              v-model="tenderRecordsForm.invoiceAmount"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="税点" prop="taxPoint">
            <el-input
              v-model="tenderRecordsForm.taxPoint"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="发票开具状态" prop="invoicingStatus">
            <el-input
              v-model="tenderRecordsForm.invoicingStatus"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款凭证">
            <el-upload
              :action="$store.state.UPLOADURL"
              list-type="picture-card"
              multiple
              name="files"
              :limit="1"
              :file-list="fileList1"
              :on-success="(file) => handleSuccess(file, 1)"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 1)"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="发票凭证">
            <el-upload
              :action="$store.state.UPLOADURL"
              list-type="picture-card"
              multiple
              name="files"
              :limit="1"
              :file-list="fileList2"
              :on-success="(file) => handleSuccess(file, 2)"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 2)"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="tenderRecordsShow = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t('message.deviceManage.cancel') }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submit(2)"
              size="medium"
              >{{ $t('message.deviceManage.save') }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 详情-到货验收新增 -->
    <el-dialog
      :modal-append-to-body="false"
      @close="close"
      :title="tenderListShowtitle"
      :visible.sync="tenderListShow"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          ref="ArrivalFrom"
          :model="ArrivalFrom"
          label-width="120px"
          class="dialogFormBox"
        >
          <el-form-item label="到货数量" prop="arrivedQuantity">
            <el-input
              v-model="ArrivalFrom.arrivedQuantity"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="到货时间" prop="arrivalTime">
            <el-date-picker
              style="width: 320px !important"
              v-model="ArrivalFrom.arrivalTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="负责人" prop="head">
            <el-input
              v-model="ArrivalFrom.head"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="验收状态" prop="acceptanceStatus">
            <el-input
              v-model="ArrivalFrom.acceptanceStatus"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="验收结果" prop="acceptanceResult">
            <el-input
              v-model="ArrivalFrom.acceptanceResult"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item label="验收人" prop="acceptancePerson">
            <el-input
              v-model="ArrivalFrom.acceptancePerson"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="验收时间" prop="acceptanceTime">
            <el-date-picker
              style="width: 320px !important"
              v-model="ArrivalFrom.acceptanceTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="品类" prop="category">
            <el-input
              v-model="ArrivalFrom.category"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="规格型号" prop="specificationAndModel">
            <el-input
              v-model="ArrivalFrom.specificationAndModel"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="到货照片">
            <el-upload
              :action="$store.state.UPLOADURL"
              list-type="picture-card"
              multiple
              name="files"
              :limit="1"
              :file-list="fileList3"
              :on-success="(file) => handleSuccess(file, 3)"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 3)"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="验收照片">
            <el-upload
              :action="$store.state.UPLOADURL"
              list-type="picture-card"
              multiple
              name="files"
              :limit="1"
              :file-list="fileList4"
              :on-success="(file) => handleSuccess(file, 4)"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 4)"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="tenderListShow = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t('message.deviceManage.cancel') }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submit(3)"
              size="medium"
              >{{ $t('message.deviceManage.save') }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addGtMaterialContractApi,//合同信息
  deletGtMaterialContractApi,
  editGtMaterialContractApi,
  gettGtMaterialContractPageApi,
  addGtMaterialContractPaymentRecordApi,//付款记录
  deletGtMaterialContractPaymentRecordApi,
  editGtMaterialContractPaymentRecordApi,
  getGtMaterialContractPaymentRecordPageApi,
  addGtMaterialContractArrivalAcceptanceApi,//到货验收
  deletGtMaterialContractArrivalAcceptanceApi,
  editGtMaterialContractArrivalAcceptanceApi,
  gettGMaterialContractArrivalAcceptancePageApi
} from '@/assets/js/api/materialManagement.js'
export default {
  mounted() {
    this.getList()
  },
  data() {
    return {
      searchForm: {
        contractName: '',
      },
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      baseInfoFrom: {
        signDate: "",
        contractNumber: "",
        contractName: "",
        contractType: "",
        startTime: "",
        endTime: "",
        contractAmount: "",
        amount: "",
        partyAUnits: "",
        partyBUnit: "",
        taxPoint:'',
        signatory: "",
        paymentMethod: "",
        billingMethod: "",
        advancePayment: "",
        deposit: "",
        paymentTerm: "",
        receivingCondition: "",
        remarks: "",
      },//基本信息表单
      detailData: {},
      dialogSteps: 0,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      tenderRecordsForm: {
        requestPaymentAmount: "",
        requestPaymentTime: "",
        payer: "",
        paymentStatus: "",
        actualPaymentAmount: "",
        actualPaymentTime: "",
        invoiceAmount: "",
        taxPoint: "",
        invoicingStatus: "",
        paymentProof: "",//付款凭证
        invoiceVoucher: "",//发票凭证
        gtMaterialContractId: "",//合同id
      },//付款记录表单
      gtMaterialContractId: "",
      ArrivalList: [],
      ArrivalFrom: {
        arrivedQuantity: "",
        head: "",
        acceptanceStatus: "",
        acceptanceResult: "",
        acceptancePerson: "",
        acceptanceTime: "",
        category: "",
        specificationAndModel: "",
        arrivalPicture: "",
        acceptancePhoto: "",
      },
      List: [],
      basicForTitle: '',//新增
      tenderListShowtitle: '',
      tenderListShow: false,
      tenderListForm: {},
      tenderRecordStitle: '',
      tenderRecordsShow: false,
      tenderRecordsForm: {},
      tenderRecordsList: [],
      orderMaterialList: [],
      contractForm: {},
      contractFormRules: {},
      addOrEditDialog: false,
      surveySchemeList: [],
      dialogShow: false,

    }
  },
  methods: {
    //查询基本信息
    getList() {
      gettGtMaterialContractPageApi({
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        projectSn: this.$store.state.projectSn,
        contractName: this.searchForm.contractName,
      }).then((result) => {
        if (result.success) {
          this.List = result.result.records
          this.pagInfo.total = result.result.total
        }
      })
    },
    //查询付款记录
    getPaymentList() {
      getGtMaterialContractPaymentRecordPageApi({
        projectSn: this.$store.state.projectSn,
        gtMaterialContractId: this.gtMaterialContractId
      }).then((result) => {
        if (result.success) {
          result.result.map((item) => {
            if (item.invoiceVoucher.includes("[")) {
              item.invoiceVoucher = JSON.parse(item.invoiceVoucher);
              if (item.invoiceVoucher.length !== 0 && !item.invoiceVoucher[0].url.includes(this.$store.state.FILEURL)) {
                item.invoiceVoucher[0].url =
                  this.$store.state.FILEURL + item.invoiceVoucher[0].url;
              }
            } else {
              let url = item.invoiceVoucher

              if (url.length !== 0 && !url.includes(this.$store.state.FILEURL)) {
                item.invoiceVoucher = [{}]
                item.invoiceVoucher[0].url =
                  this.$store.state.FILEURL + url;
              }
            }
            if (item.paymentProof.includes("[")) {
              item.paymentProof = JSON.parse(item.paymentProof);
              if (item.paymentProof.length !== 0 && !item.paymentProof[0].url.includes(this.$store.state.FILEURL)) {
                item.paymentProof[0].url =
                  this.$store.state.FILEURL + item.paymentProof[0].url;
              }
            } else {
              let url = item.paymentProof

              if (url.length !== 0 && !url.includes(this.$store.state.FILEURL)) {
                item.paymentProof = [{}]
                item.paymentProof[0].url =
                  this.$store.state.FILEURL + url;
              }
            }

          });
          this.orderMaterialList = result.result


        }
      })
    },
    //查询到货验收
    getArrivalList() {
      gettGMaterialContractArrivalAcceptancePageApi({
        projectSn: this.$store.state.projectSn,
        gtMaterialContractId: this.gtMaterialContractId
      }).then((result) => {
        if (result.success) {
          result.result.map((item) => {
            if (item.arrivalPicture.includes("[")) {
              item.arrivalPicture = JSON.parse(item.arrivalPicture);
              if (item.arrivalPicture.length !== 0 && !item.arrivalPicture[0].url.includes(this.$store.state.FILEURL)) {
                item.arrivalPicture[0].url =
                  this.$store.state.FILEURL + item.arrivalPicture[0].url;
              }
            } else {
              let url = item.arrivalPicture

              if (url.length !== 0 && !url.includes(this.$store.state.FILEURL)) {
                item.arrivalPicture = [{}]
                item.arrivalPicture[0].url =
                  this.$store.state.FILEURL + url;
              }
            }
            if (item.acceptancePhoto.includes("[")) {
              item.acceptancePhoto = JSON.parse(item.acceptancePhoto);
              if (item.acceptancePhoto.length !== 0 && !item.acceptancePhoto[0].url.includes(this.$store.state.FILEURL)) {
                item.acceptancePhoto[0].url =
                  this.$store.state.FILEURL + item.acceptancePhoto[0].url;
              }
            } else {
              let url = item.acceptancePhoto

              if (url.length !== 0 && !url.includes(this.$store.state.FILEURL)) {
                item.acceptancePhoto = [{}]
                item.acceptancePhoto[0].url =
                  this.$store.state.FILEURL + url;
              }
            }

          });
          this.ArrivalList = result.result


        }
      })
    },
    add(type) {
      if (type == 1) {
        this.basicForTitle = '新增信息'
        this.dialogShow = true
        this.baseInfoFrom = {}
      } else if (type == 2 && this.dialogSteps == 0) {
        this.tenderRecordStitle = '新增记录'
        this.tenderRecordsShow = true
        this.tenderRecordsForm = {}
        this.close()
      } else if (type == 2 && this.dialogSteps == 1) {
        this.tenderListShow = true
        this.tenderListShowtitle = '新增验收'
        this.ArrivalFrom={}
        this.close()

      }
    },
    edit(obj, type) {
      if (type == 1) {
        this.basicForTitle = '编辑信息'
        this.dialogShow = true
        this.baseInfoFrom = JSON.parse(JSON.stringify(obj))
      } else if (type == 2) {
        this.tenderRecordStitle = '编辑记录'
        this.tenderRecordsShow = true
        this.tenderRecordsForm = JSON.parse(JSON.stringify(obj))
        this.fileList1 = obj.invoiceVoucher
        this.fileList2 = obj.paymentProof
      } else {
        this.tenderListShow = true
        this.tenderListShowtitle = '编辑验收'
        this.ArrivalFrom = JSON.parse(JSON.stringify(obj))
        this.fileList3 = obj.arrivalPicture
        this.fileList4 = obj.acceptancePhoto
      }

    },
    //提交//编辑
    submit(type) {
      if (type == 1) {
        let params = JSON.parse(JSON.stringify(this.baseInfoFrom))
        params.projectSn = this.$store.state.projectSn
        this.$refs.contractForm.validate((valid) => {
          if (valid) {
            if (this.basicForTitle == '新增信息') {
              addGtMaterialContractApi(params).then((result) => {
                if (result.success) {
                  this.$message.success(result.message)
                  this.getList()
                }
              })
            } else if (this.basicForTitle === '编辑信息') {
              editGtMaterialContractApi(params).then((result) => {
                if (result.success) {
                  this.$message.success(result.message)
                  this.getList()
                }
              })
            }
            this.dialogShow = false
          } else {
            return false
          }
        })
      } else if (type == 2) {
        let params = JSON.parse(JSON.stringify(this.tenderRecordsForm))
        params.projectSn = this.$store.state.projectSn
        params.paymentProof = JSON.stringify(this.fileList1)
        params.invoiceVoucher = JSON.stringify(this.fileList2)
        params.gtMaterialContractId = this.gtMaterialContractId
        this.$refs.addEditForm.validate((valid) => {
          if (valid) {
            if (this.tenderRecordStitle == '新增记录') {
              addGtMaterialContractPaymentRecordApi(params).then((result) => {
                if (result.success) {
                  this.$message.success(result.message)
                  this.getPaymentList()
                }
              })
            } else if (this.tenderRecordStitle == '编辑记录') {
              editGtMaterialContractPaymentRecordApi(params).then((result) => {
                if (result.success) {
                  this.$message.success(result.message)
                  this.getPaymentList()
                }
              })
            }
            this.tenderRecordsShow = false
          } else {
            return false
          }
        })
      } else {
        let params = JSON.parse(JSON.stringify(this.ArrivalFrom))
        params.projectSn = this.$store.state.projectSn
        params.arrivalPicture = JSON.stringify(this.fileList3)
        params.acceptancePhoto = JSON.stringify(this.fileList4)
        params.gtMaterialContractId = this.gtMaterialContractId
        this.$refs.ArrivalFrom.validate((valid) => {
          if (valid) {
            if (this.tenderListShowtitle == '新增验收') {
              addGtMaterialContractArrivalAcceptanceApi(params).then((result) => {
                if (result.success) {
                  this.$message.success(result.message)
                  this.getArrivalList()
                }
              })
            } else if (this.tenderListShowtitle == '编辑验收') {
              editGtMaterialContractArrivalAcceptanceApi(params).then((result) => {
                if (result.success) {
                  this.$message.success(result.message)
                  this.getArrivalList()
                }
              })
            }
            this.tenderListShow = false
          } else {
            return false
          }
        })
      }

    },
    //删除
    deleteDev(obj, type) {
      if (type == 1) {
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deletGtMaterialContractApi({ id: obj.id }).then((res) => {
              if (res.success) {
                this.getList()
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if (type == 2) {
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deletGtMaterialContractPaymentRecordApi({ id: obj.id }).then((res) => {
              if (res.success) {
                this.getPaymentList()
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deletGtMaterialContractArrivalAcceptanceApi({ id: obj.id }).then((res) => {
              if (res.success) {
                this.getArrivalList()
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //显示检查详细弹框
    showDetailFn(row) {
      this.detailData = row
      this.addOrEditDialog = true
      this.gtMaterialContractId = this.detailData.id
      this.getPaymentList()
      this.getArrivalList()
    },
    // 删除文件
    handleRemove(file, fileList, type) {
      if (type == 1) {
        this.fileList1 = fileList
      } else if (type == 2) {
        this.fileList2 = fileList
      }
      else if (type == 3) {
        this.fileList3 = fileList
      }
      else if (type == 4) {
        this.fileList4 = fileList
      }
    },
    handleSuccess(file, type) {
      let data = {
        name: file.data[0].filename,
        url: this.$store.state.FILEURL + file.data[0].imageUrl
      }
      if (type == 1) {
        this.fileList1.push(
          data
        )
      }
      else if (type == 2) {
        this.fileList2.push(
          data
        )
      }
      else if (type == 3) {
        this.fileList3.push(
          data
        )
      }
      else if (type == 4) {
        this.fileList4.push(
          data
        )
      }


    },
    close() {
      this.fileList1 = []
      this.fileList2 = []
      this.fileList3 = []
      this.fileList4 = []
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getList()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getList()
    },
    refresh() {
      this.searchForm = {}
      this.pagInfo.pageNo = 1 //页数
      this.pagInfo.pageSize = 10 //条数
      this.getList()
    },
  }
}
</script>
<style lang="less" scoped>
.tables2 {
  min-height: auto;
}

::v-deep .dialog_content {
  padding: 0 0px;
}

.btnAdd {
  position: absolute;
  right: 20px;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 200px !important;
}
</style>