<template>
  <div class="collect">
    <div class="collectHeader">
      <h1 class="headerTitle">合同管理/收款管理</h1>
    </div>
    <div class="collectMain">
      <div class="collectMainTab">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="维保收款" name="first" v-if="collectBtn.collectBtn95">
            <div>
              <div class="searchList">
                <span>
                  <el-input placeholder="请输入查询项目名称" v-model="listCondition.projectName" clearable></el-input>
                </span>
                <span @click="searchMain" class="sBtn">搜索</span>
                <span @click="reset" class="sBtn">重置</span>
              </div>
              <div class="totalTitle">
                <span>总记录条数</span>
                <i>{{listCondition.total}}</i>
                <span>条</span>
              </div>
              <!-- <div class="blurNum">
                <div>
                  <p>
                    总记录条数
                    <i>{{listCondition.total}}</i>条
                  </p>
                </div>
              </div>-->
              <div>
                <el-table
                  :data="tableData.rows"
                  style="width:100%; text-align:center;"
                  border
                  v-loading="listCondition.listloading"
                  :header-cell-style="{'background-color': '#fafafa',
                    'font-weight':'800'}"
                >
                  <!-- <el-table-column prop="contractCode" label="合同编号" min-width="80" align="center"></el-table-column> -->
                  <el-table-column
                    prop="projectName"
                    label="所属项目"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="endDate"
                    label="合同终止时间"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <!-- <el-table-column prop="mobile" label="应收时间" min-width="80" align="center" :show-overflow-tooltip="true"></el-table-column> -->
                  <el-table-column
                    prop="planMoney"
                    label="应收金额(元)"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="workMoney"
                    label="实收金额(元)"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    label="未收金额(元)"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="{row}">
                      <div>
                        <span>{{row.planMoney-row.workMoney}}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="cashierUser" label="收款人" min-width="80" align="center"></el-table-column>
                  <el-table-column label="操作" min-width="120" align="center">
                    <template slot-scope="{row,$index}">
                      <el-button
                        type="primary"
                        size="mini"
                        round
                        plain
                        v-if="collectBtn.collectBtn96"
                        @click.native="getCurrSeek($index, row,'1')"
                        class="SizeBt"
                      >收款</el-button>
                      <el-button
                        type="success"
                        round
                        plain
                        size="mini"
                        v-if="collectBtn.collectBtn97"
                        @click.native="showPHestorytable(row,1,10)"
                        class="SizeBt"
                      >操作记录</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagenation">
                  <span>
                    <el-pagination
                      background
                      layout="prev, pager, next, sizes, total, jumper"
                      :total="listCondition.total"
                      @current-change="click"
                      @size-change="handleSizeChange"
                      :page-sizes="[5, 15,25, 50]"
                      :page-size="listCondition.pageSize"
                    ></el-pagination>
                  </span>
                </div>
              </div>
              <el-dialog
                title="维保收款"
                :visible.sync="isMoney.maintenance"
                :before-close="perEditClose"
                width="1000px"
              >
                <div class="mainMoneyModia">
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>项目名称:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.projectName}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>项目地址:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.projectAddress}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>合同编号:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.contractCode}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>合同来源:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.contractSource}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>合同类型:</span>
                    </el-col>
                    <el-col :span="6">{{moneyDetals.detail.contractType}}</el-col>
                    <el-col :span="4">
                      <span>台量:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.liftNum}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>开始时间:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.givenDate}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>结束时间:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.endDate}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>金额:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.moneys}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>付款方式:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.payMode}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>签订人:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.givenUser}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>签订时间:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.givenDate}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>备注:</span>
                    </el-col>
                    <el-col :span="6">{{moneyDetals.detail.remarks}}</el-col>
                    <el-col :span="4"></el-col>
                    <el-col :span="6"></el-col>
                  </el-row>
                  <div>
                    <div>
                      <h3>收款项目</h3>
                    </div>
                    <el-table
                      :data="moneyDetals.paymentList"
                      style="width:100%; text-align:center;"
                      :header-cell-style="{'background-color': '#fafafa',
                    'font-weight':'800'}"
                    >
                      <el-table-column prop="periods" label="期数" min-width="60" align="center"></el-table-column>
                      <el-table-column prop="planMoney" label="应收金额" min-width="80" align="center"></el-table-column>
                      <el-table-column prop="planDate" label="应收日期" min-width="80" align="center"></el-table-column>
                      <el-table-column label="开票金额" min-width="80" align="center">
                        <template slot-scope="{row,$index}">
                          <div>
                            <span v-if="row.amountInvoice">{{row.amountInvoice}}</span>
                            <span v-if="!row.amountInvoice">
                              <el-input
                                v-model="newEdit[$index].amountInvoice"
                              ></el-input>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="开票日期" min-width="80" align="center">
                        <template slot-scope="{row,$i}">
                          <div>
                            <span v-if="row.billingDate">{{row.billingDate}}</span>
                            <span v-if="!row.billingDate" class="editorDate">
                              <el-date-picker
                                v-model="newEdit[$i].InvoicingDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                              ></el-date-picker>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="开票附件" min-width="80" align="center">
                        <template slot-scope="{row,$index}">
                          <div>
                            <span v-if="row.noteImgUrl">
                              <img :src="row.noteImgUrl" alt />
                            </span>
                            <span v-if="!row.noteImgUrl" @click="getIndex($index)">
                              <el-upload
                                ref="fileList"
                                action="https://app.edtyun.com:8443/business/common/upload"
                                :before-remove="beforeRemove"
                                :limit="1"
                                :on-exceed="handleExceed"
                                :on-success="handleSuceess"
                              >
                                <i class="el-icon-link"></i>
                              </el-upload>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="实收金额" min-width="80" align="center">
                        <template slot-scope="{row,$index}">
                          <div>
                            <span v-if="row.workMoney">{{row.workMoney}}</span>
                            <span v-if="!row.workMoney">
                              <el-input v-model="newEdit[$index].workMoney"></el-input>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="实收日期" min-width="110" align="center">
                        <template slot-scope="{row,$index}">
                          <div>
                            <span v-if="row.workDate">{{row.workDate}}</span>
                            <span v-if="!row.workDate" class="editorDate">
                              <el-date-picker
                                v-model="newEdit[$index].workDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy/MM/dd"
                                value-format="yyyy-MM-dd"
                              ></el-date-picker>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div>
                    <div class="dialogBtn">
                      <el-button
                        type="primary"
                        size="small"
                        round
                        @click="getAdd('addPerData',1)"
                      >确认</el-button>
                      <el-button type="info" size="small" plain round @click="perEditClose">取消</el-button>
                    </div>
                  </div>
                </div>
              </el-dialog>
            </div>
          </el-tab-pane>
          <el-tab-pane label="急修收款" name="second" v-if="collectBtn.collectBtn98">
            <div class="emeryMoney">
              <div>
                <div class="emeryHead">
                  <div>
                    <el-select
                      v-model="pageCondition.projectIdOne"
                      clearable
                      filterable
                      placeholder="请选择项目"
                    >
                      <el-option
                        v-for="item in pageCondition.projectOption"
                        :key="item.projectId"
                        :label="item.projectName"
                        :value="item.projectId"
                      ></el-option>
                    </el-select>
                  </div>
                  <div>
                    <el-input v-model="pageCondition.infoOne" placeholder="请输入电梯注册代码"></el-input>
                  </div>
                  <div>
                    <el-select
                      v-model="pageCondition.workerIdOne"
                      filterable
                      clearable
                      placeholder="请选择维保工"
                    >
                      <el-option
                        v-for="item in pageCondition.workerIdOption"
                        :key="item.userId"
                        :label="item.name"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="selectDate">
                    <span>
                      <el-date-picker
                        v-model="pageCondition.repairBeginOne"
                        type="date"
                        placeholder="急修开始日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions0"
                      ></el-date-picker>
                    </span>
                    <i>至</i>
                    <span>
                      <el-date-picker
                        v-model="pageCondition.repairEndOne"
                        type="date"
                        placeholder="急修结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions1"
                      ></el-date-picker>
                    </span>
                  </div>
                  <div>
                    <div @click="searchEm" class="sBtn">搜索</div>
                    <div @click="reset" class="sBtn">重置</div>
                  </div>
                </div>
                <!-- <div class="emerytitle">
                  <div>
                    <p>
                      总记录条数
                      <i>{{pageCondition.total}}</i>条
                    </p>
                  </div>
                </div>-->
                <div class="totalTitle">
                  <span>总记录条数</span>
                  <i>{{pageCondition.total}}</i>
                  <span>条</span>
                </div>
                <div class="emeryTable">
                  <el-table
                    :data="pageCondition.tableData"
                    style="width:100%; text-align:center;"
                    :header-cell-style="{'background-color': '#fafafa',
                    'font-weight':'800'}"
                    border
                    tooltip-effect="dark"
                  >
                    <el-table-column
                      prop="projectName"
                      label="收费项目"
                      min-width="80"
                      align="center"
                      show-overflow-tooltip
                    ></el-table-column>
                    <!-- <el-table-column
                      prop="registrationCode"
                      label="电梯注册代码"
                      min-width="80"
                      align="center"
                      show-overflow-tooltip
                    ></el-table-column>-->
                    <el-table-column
                      prop="devicePosition"
                      label="电梯位置"
                      min-width="80"
                      align="center"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column prop="workerName" label="维修工" min-width="80" align="center"></el-table-column>
                    <el-table-column label="召修原因" min-width="80" align="center">
                      <template slot-scope="{row}">
                        <div>
                          <span>{{row.repairReason=="0"?"其它":row=="1"?"停电":"故障"}}</span>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="callerDate" label="报修时间" min-width="80" align="center"></el-table-column>
                    <el-table-column prop="recoveryDate" label="恢复时间" min-width="80" align="center"></el-table-column>
                    <el-table-column
                      prop="repairDuration"
                      label="急修时长"
                      min-width="80"
                      align="center"
                    ></el-table-column>
                    <el-table-column prop="costTotal" label="应收款" min-width="80" align="center"></el-table-column>
                    <el-table-column
                      prop="costPaymentDate"
                      label="应收时间"
                      min-width="80"
                      align="center"
                    ></el-table-column>
                    <el-table-column label="操作" min-width="80" align="center">
                      <template slot-scope="{row}">
                        <div>
                          <el-button
                            size="mini"
                            type="primary"
                            round
                            style="margin-left: 5px;"
                            v-if="collectBtn.collectBtn99"
                            @click="handleClick1(row)"
                          >收款</el-button>
                          <el-button
                            size="mini"
                            type="primary"
                            plain
                            round
                            v-if="collectBtn.collectBtn100"
                            style="margin-left: 5px;"
                            @click="handleClick1(row)"
                          >操作记录</el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="pagenation">
                    <span>
                      <el-pagination
                        background
                        layout="prev, pager, next, sizes, total, jumper"
                        :total="pageCondition.total"
                        @current-change="click"
                        @size-change="handleSizeChange"
                        :page-sizes="[5, 15,25, 50]"
                        :page-size="pageCondition.pageSize"
                      ></el-pagination>
                    </span>
                  </div>
                </div>
              </div>
              <el-dialog
                title="急修收款"
                :visible.sync="pageCondition.isDialog"
                width="900px"
                :before-close="pageClose"
              >
                <div>
                  <div>
                    <el-row type="flex">
                      <el-col :span="3" :offset="1">
                        <span>项目名称:</span>
                      </el-col>
                      <el-col :span="6">
                        <span>{{dialogData.projectName}}</span>
                      </el-col>
                      <el-col :span="3">
                        <span>项目地址:</span>
                      </el-col>
                      <el-col :span="6">
                        <span>{{dialogData.projectAddress}}</span>
                      </el-col>
                    </el-row>
                    <el-row type="flex">
                      <el-col :span="3" :offset="1">
                        <span>开始时间:</span>
                      </el-col>
                      <el-col :span="6">
                        <span>{{dialogData.callerDate}}</span>
                      </el-col>
                      <el-col :span="3">
                        <span>结束时间:</span>
                      </el-col>
                      <el-col :span="6">
                        <span>{{dialogData.recoveryDate}}</span>
                      </el-col>
                    </el-row>
                    <el-row type="flex">
                      <el-col :span="3" :offset="1">
                        <span>金额:</span>
                      </el-col>
                      <el-col :span="6">
                        <span>{{dialogData.costTotal}}</span>
                      </el-col>
                      <el-col :span="3">
                        <span>备注:</span>
                      </el-col>
                      <el-col :span="6">
                        <span>{{dialogData.workerFaultDescription}}</span>
                      </el-col>
                    </el-row>
                    <el-row type="flex">
                      <el-col :span="3" :offset="1">
                        <span>创建人:</span>
                      </el-col>
                      <el-col :span="6">
                        <span>{{dialogData.createName}}</span>
                      </el-col>
                      <el-col :span="3">
                        <span>维保工:</span>
                      </el-col>
                      <el-col :span="6">
                        <span>{{dialogData.workerName}}</span>
                      </el-col>
                    </el-row>
                    <div>
                      <div>
                        <span>收款项目:</span>
                      </div>
                      <el-table
                        :data="dialogData.erRecordCosts"
                        style="width: 100%; text-align:center;"
                        :header-cell-style="{'background-color': '#fafafa','font-weight':'800'}"
                      >
                        <el-table-column prop="costName" label="项目名称" min-width="80" align="center"></el-table-column>
                        <el-table-column
                          prop="costMoney"
                          label="应收金额"
                          min-width="80"
                          align="center"
                        ></el-table-column>
                        <el-table-column prop="costDate" label="应收日期" min-width="80" align="center"></el-table-column>
                        <el-table-column label="开票金额" min-width="80" align="center">
                          <template slot-scope="{row,$index}">
                            <div>
                              <span v-if="row.invoiceMoney">{{row.invoiceMoney}}</span>
                              <span v-if="!row.invoiceMoney">
                                <el-input v-model="pageCondition.listDiaData[$index].invoiceMoney"></el-input>
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column label="开票日期" min-width="80" align="center">
                          <template slot-scope="{row,$index}">
                            <div>
                              <span v-if="row.invoiceDate"></span>
                              <span v-if="!row.invoiceDate">
                                <el-date-picker
                                  v-model="pageCondition.listDiaData[$index].invoiceDate"
                                  type="date"
                                  placeholder="选择日期"
                                  format="yyyy/MM/dd"
                                  value-format="yyyy-MM-dd"
                                ></el-date-picker>
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="invoiceEnclosure"
                          label="开票附件"
                          min-width="80"
                          align="center"
                        >
                          <template slot-scope="{row,$index}">
                            <div>
                              <span v-if="row.invoiceEnclosure">
                                <a :href="row.invoiceEnclosure" target="_blank">点击查看</a>
                              </span>
                              <span v-if="!row.invoiceEnclosure" @click="getIndex($index)">
                                <el-upload
                                  ref="fileList"
                                  action="https://app.edtyun.com:8443/business/common/upload"
                                  :before-remove="beforeRemove"
                                  :limit="1"
                                  :on-exceed="handleExceed"
                                  :on-success="handleSuceess2"
                                >
                                  <i class="el-icon-link"></i>
                                </el-upload>
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column label="实收金额" min-width="80" align="center">
                          <template slot-scope="{row,$index}">
                            <div>
                              <span v-if="row.payMoney">{{row.payMoney}}</span>
                              <span v-if="!row.payMoney">
                                <el-input v-model="pageCondition.listDiaData[$index].payMoney"></el-input>
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column label="实收日期" min-width="80" align="center">
                          <template slot-scope="{row,$index}">
                            <div>
                              <span v-if="row.receivedAmount">{{row.receivedAmount}}</span>
                              <span>
                                <el-date-picker
                                  v-model="pageCondition.listDiaData[$index].receivedAmount"
                                  type="date"
                                  placeholder="选择日期"
                                  format="yyyy/MM/dd"
                                  value-format="yyyy-MM-dd"
                                ></el-date-picker>
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <div>
                    <div class="textAlign">
                      <el-button type="primary" size="small" round @click="changeDiaData">确认</el-button>
                      <el-button type="info" size="small" plain round @click="pageClose">取消</el-button>
                    </div>
                  </div>
                </div>
              </el-dialog>
            </div>
          </el-tab-pane>
          <el-tab-pane label="大修收款" name="third" v-if="collectBtn.collectBtn101">
            <div>
              <div class="searchList">
                <span>
                  <el-input placeholder="请输入查询项目名称" v-model="listCondition.projectName" clearable></el-input>
                </span>
                <span @click="searchMain" class="sBtn">搜索</span>
                <span @click="reset" class="sBtn">重置</span>
              </div>
              <!-- <div class="blurNum">
                <div>
                  <p>
                    总记录条数
                    <i>{{listCondition.total}}</i>条
                  </p>
                </div>
              </div>-->
              <div class="totalTitle">
                <span>总记录条数</span>
                <i>{{listCondition.total}}</i>
                <span>条</span>
              </div>
              <div>
                <el-table
                  :data="bigtableData.rows"
                  style="width:100%; text-align:center;"
                  border
                  v-loading="listCondition.listloading"
                  :header-cell-style="{'background-color': '#fafafa',
                    'font-weight':'800'}"
                >
                  <!-- <el-table-column prop="contractCode" label="合同编号" min-width="80" align="center"></el-table-column> -->
                  <el-table-column
                    prop="projectName"
                    label="所属项目"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="paymentCode"
                    label="收款单号"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="planDate"
                    label="应收时间"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="planMoney"
                    label="应收金额(元)"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="workMoney"
                    label="实收金额(元)"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                    prop="uncollectedMoney"
                    label="未收金额(元)"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column prop="cashierUser" label="收款人" min-width="80" align="center"></el-table-column>
                  <el-table-column label="操作" min-width="120" align="center">
                    <template slot-scope="{row,$index}">
                      <el-button
                        type="primary"
                        size="mini"
                        round
                        plain
                        v-if="collectBtn.collectBtn102"
                        @click.native="getCurrSeek($index, row,'2')"
                        class="SizeBt"
                      >收款</el-button>
                      <el-button
                        type="success"
                        round
                        plain
                        size="mini"
                        v-if="collectBtn.collectBtn103"
                        @click.native="showPHestorytable(row,1,10)"
                        class="SizeBt"
                      >操作记录</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagenation">
                  <span>
                    <el-pagination
                      background
                      layout="prev, pager, next, sizes, total, jumper"
                      :total="listCondition.total"
                      @current-change="click"
                      @size-change="handleSizeChange"
                      :page-sizes="[5, 15,25, 50]"
                      :page-size="listCondition.pageSize"
                    ></el-pagination>
                  </span>
                </div>
              </div>
              <el-dialog
                title="大修收款"
                :visible.sync="isMoney.emecry"
                :before-close="mainClose"
                width="900px"
              >
                <div class="mainMoneyModia">
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>项目名称:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.projectName}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>项目地址:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.projectAddress}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>合同编号:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.contractCode}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>合同来源:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.contractSource}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>合同类型:</span>
                    </el-col>
                    <el-col :span="6">{{moneyDetals.detail.contractType}}</el-col>
                    <el-col :span="4">
                      <span>台量:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.liftNum}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>开始时间:</span>
                    </el-col>
                    <el-col :span="6">
                      <span></span>
                    </el-col>
                    <el-col :span="4">
                      <span>结束时间:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.endDate}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>金额:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.moneys}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>付款方式:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.payMode}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>签订人:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detail.givenUser}}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>签订时间:</span>
                    </el-col>
                    <el-col :span="6">
                      <span>{{moneyDetals.detailgivenDate}}</span>
                    </el-col>
                  </el-row>
                  <el-row type="flex" justify="start">
                    <el-col :span="4">
                      <span>备注:</span>
                    </el-col>
                    <el-col :span="6">{{moneyDetals.detail.remarks}}</el-col>
                    <el-col :span="4"></el-col>
                    <el-col :span="6"></el-col>
                  </el-row>
                  <div>
                    <div>
                      <h3>收款项目</h3>
                    </div>
                    <el-table
                      :data="moneyDetals.paymentList"
                      style="width:100%; text-align:center;"
                      :header-cell-style="{'background-color': '#fafafa',
                    'font-weight':'800'}"
                    >
                      <el-table-column prop="summary" label="零件名称" min-width="80" align="center"></el-table-column>
                      <el-table-column prop="planMoney" label="应收金额" min-width="80" align="center"></el-table-column>
                      <el-table-column prop="planDate" label="应收日期" min-width="80" align="center"></el-table-column>
                      <el-table-column label="开票金额" min-width="80" align="center">
                        <template slot-scope="{row,$index}">
                          <div>
                            <span v-if="row.amountInvoice">{{row.amountInvoice}}</span>
                            <span v-if="!row.amountInvoice">
                              <el-input v-model="newEdit[$index].amountInvoice"></el-input>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="开票日期" min-width="80" align="center">
                        <template slot-scope="{row,$i}">
                          <div>
                            <span v-if="row.billingDate">{{row.billingDate}}</span>
                            <span v-if="!row.billingDate" class="editorDate">
                              <el-date-picker
                                v-model="newEdit[$i].InvoicingDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                              ></el-date-picker>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="开票附件" min-width="80" align="center">
                        <template slot-scope="{row,$index}">
                          <div>
                            <span v-if="row.noteImgUrl">
                              <img :src="row.noteImgUrl" alt />
                            </span>
                            <span v-if="!row.noteImgUrl" @click="getIndex($index)">
                              <el-upload
                                ref="fileList"
                                action="business/common/upload"
                                :before-remove="beforeRemove"
                                :limit="1"
                                :on-exceed="handleExceed"
                                :on-success="handleSuceess"
                              >
                                <i class="el-icon-link"></i>
                              </el-upload>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="实收金额" min-width="80" align="center">
                        <template slot-scope="{row,$index}">
                          <div>
                            <span v-if="row.workMoney">{{row.workMoney}}</span>
                            <span v-if="!row.workMoney">
                              <el-input v-model="newEdit[$index].workMoney"></el-input>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="实收日期" min-width="80" align="center">
                        <template slot-scope="{row,$index}">
                          <div>
                            <span v-if="row.workDate">{{row.workDate}}</span>
                            <span v-if="!row.workDate" class="editorDate">
                              <el-date-picker
                                v-model="newEdit[$index].workDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy/MM/dd"
                                value-format="yyyy-MM-dd"
                              ></el-date-picker>
                            </span>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div>
                    <div class="dialogBtn">
                      <el-button
                        type="primary"
                        size="small"
                        round
                        @click="getAdd('addPerData',2)"
                      >确认</el-button>
                      <el-button type="info" size="small" plain round @click="mainClose">取消</el-button>
                    </div>
                  </div>
                </div>
              </el-dialog>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--操作记录-->
    <div class="Hestory">
      <el-dialog
        title="操作记录"
        :visible.sync="dialogHestory"
        width="80%"
      >
        <el-table :data="Hestorytable" border style="width: 100%;color:#101010" v-loading="PHestorytableLoad">
          <el-table-column prop="contractsId" label="合同ID" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="description" label="操作方式" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="beforeContent" label="变更前内容" min-width="200px" :show-overflow-tooltip="true">
            <template slot-scope="props">
              <span v-html="props.row.beforeContent">{{props.row.beforeContent}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="afterContent" label="变更后内容" min-width="200px" :show-overflow-tooltip="true">
            <template slot-scope="props">
              <span v-html="props.row.afterContent">{{props.row.afterContent}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="operatorName" label="操作人" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="operateDate" label="操作时间" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
        <div class="pagenation">
          <span>
            <el-pagination
              background
              layout="prev, pager, next, sizes, total, jumper"
              :total="PHestorytableTotal"
              @current-change="Hestoryclick"
              @size-change="HestoryhandleSizeChange"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="PHestorypagesize"
            ></el-pagination>
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      dialogHestory:false,
      PHestorytableLoad:false,
      PHestorypagesize:10,
      PHestorycurrpage:1,
      PHestorytableTotal:10,
      PcontractId:'',
      Hestorytable:[],
      listCondition: {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        projectName: "",
        searchProjectName: "",
        pageSize: 15,
        pageNum: 1,
        total: 0,
        listloading: false,
        paymentType: 1
      },
      tableData: {},
      bigtableData: {},
      isMoney: {
        maintenance: false,
        emecry: false
      },
      a: null,
      newEdit: [],
      moneyDetals: {
        detail: {}
      },
      // 急修
      pageCondition: {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        projectId: "",
        projectIdOne: "",
        projectOption: [],
        workerId: "",
        workerIdOne: "",
        workerIdOption: [],
        infoOne: "",
        info: "",
        repairBeginOne: "",
        repairBegin: "",
        repairEndOne: "",
        repairEnd: "",
        total: 0,
        pageNum: 1,
        pageSize: 15,
        tableData: [],
        isDialog: false,
        listDiaData: []
      },
      emercyList: {},
      dialogData: {},
      // 大修
      big: {},
      pickerOptions0: {
        disabledDate: time => {
          if (this.pageCondition.repairEndOne != "") {
            var a = new Date(
              this.pageCondition.repairEndOne.replace(/-/g, "/")
            );
            return time.getTime() > a;
          }
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          if (this.pageCondition.repairBeginOne != "") {
            var a = new Date(
              this.pageCondition.repairBeginOne.replace(/-/g, "/")
            );
            return time.getTime() < a;
          }
        }
      },
      collectBtn:{
        collectBtn95:0,
        collectBtn96:0,
        collectBtn97:0,
        collectBtn98:0,
        collectBtn99:0,
        collectBtn100:0,
        collectBtn101:0,
        collectBtn102:0,
        collectBtn103:0,
      }
    };
  },
  created(){
    var collectBtn = {}
    this.getButton(94).then(result => {
      if (result.data.statusCode==="1") {
        collectBtn = result.data.data
        collectBtn.map((item)=>{
          if(item.id==95){
            this.collectBtn.collectBtn95 = item.checked?1:0 
          }else if(item.id==96){
            this.collectBtn.collectBtn96 = item.checked?1:0  
          }else if(item.id==97){
            this.collectBtn.collectBtn97 = item.checked?1:0  
          }else if(item.id==98){
            this.collectBtn.collectBtn98 = item.checked?1:0  
          }else if(item.id==99){
            this.collectBtn.collectBtn99 = item.checked?1:0  
          }else if(item.id==100){
            this.collectBtn.collectBtn100 = item.checked?1:0  
          }else if(item.id==101){
            this.collectBtn.collectBtn101 = item.checked?1:0  
          }else if(item.id==102){
            this.collectBtn.collectBtn102= item.checked?1:0  
          }else if(item.id==103){
            this.collectBtn.collectBtn103= item.checked?1:0  
          }
        })
      }
    });
  },
  mounted() {
    this.getMainList();
    this.getProjectList();
    this.getRolemtWork();
  },
  methods: {
  
    getProjectList() {
      var url = "business/project/projectIDList";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.pageCondition.projectOption = res.data ? res.data : [];
        }
      });
    },
    getRolemtWork() {
      var url = "system/companyuser/getCompanyMembers";
      var param = {
        roleCode: "ROLEMTWORK",
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.pageCondition.workerIdOption = res.data ? res.data : [];
        } else {
          this.pageCondition.workerIdOption = [];
        }
      });
    },
    /**
     * 
     * 
     维保
     **
     */
    handleClick(tab, event) {
      this.activeName = tab.name;
      this.tableData.row = {};
      if (tab.index === "0") {
        this.listCondition.pageSize = 15;
        this.listCondition.pageNum = 1;
        this.listCondition.total = 0;
        this.listCondition.paymentType = "1";
        this.listCondition.searchProjectName = "";
        this.getMainList();
      } else if (tab.index === "1") {
        this.pageCondition.pageSize = 15;
        this.pageCondition.pageNum = 1;
        this.pageCondition.total = 0;
        this.pageCondition.projectId = "";
        this.pageCondition.workerId = "";
        this.pageCondition.info = "";
        this.pageCondition.repairBegin = "";
        this.pageCondition.repairEnd = "";
        this.getEmeryList();
      } else {
        this.listCondition.pageSize = 15;
        this.listCondition.pageNum = 1;
        this.listCondition.total = 0;
        this.listCondition.searchProjectName = "";
        this.listCondition.paymentType = "2";
        this.$nextTick(() => {
          this.getBigList();
        });
      }
    },
    handleSizeChange(val) {
      this.listCondition.pageSize = val;
      this.listCondition.pageNum = 1;
      switch (this.activeName) {
        case "first":
          this.getMainList();
          break;
        case "second":
          this.getEmeryList();
          break;
        case "third":
          this.getBigList();
          break;
      }
    },
    click(val) {
      this.listCondition.pageNum = val;
      this.getMainList();
    },
    searchMain() {
      this.listCondition.searchProjectName = this.listCondition.projectName;
      this.listCondition.pageSize = 15;
      this.listCondition.pageNum = 1;
      this.listCondition.total = 0;
      this.getMainList();
    },
    reset() {
      this.listCondition.pageSize = 15;
      this.listCondition.pageNum = 1;
      this.listCondition.total = 0;
      this.listCondition.searchProjectName = "";
    },
    getMainList() {
      var url = "business/payment/maintenance/list";
      var param = {
        mtCompanyId: this.listCondition.mtCompanyId,
        pageSize: this.listCondition.pageSize,
        pageNum: this.listCondition.pageNum,
        paymentType: this.listCondition.paymentType,
        projectName: this.listCondition.searchProjectName
      };
      this.axios.post(url, param).then(res => {
        console.log(res);
        if (res.statusCode === "1") {
          this.tableData = res.data ? res.data : {};
          this.listCondition.total = res.data ? res.data.total : 0;
        }
      });
    },
    getCurrSeek(i, row, a) {
      var url;
      if (a === "1") {
        url = "business/payment/maintenance/detail";
        this.isMoney.maintenance = true;
      } else {
        url = "business/payment/capital/detail";
        this.isMoney.emecry = true;
      }
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        id: row.contractId
        // paymentType: a
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.moneyDetals = res.data
            ? res.data
            : {
                detail: {
                  contractCode: "",
                  contractSource: null,
                  projectAddress: "",
                  contractType: null,
                  endDate: "",
                  givenDate: "",
                  givenUser: "",
                  liftNum: 0,
                  projectName: "",
                  moneys: 0,
                  payMode: null
                },
                paymentList: []
              };
          this.newEdit = [].concat(
            JSON.parse(JSON.stringify(this.moneyDetals.paymentList))
          );
        } else {
          this.moneyDetals = {
            detail: {
              contractCode: "",
              contractSource: null,
              projectAddress: "",
              contractType: null,
              endDate: "",
              givenDate: "",
              givenUser: "",
              liftNum: 0,
              projectName: "",
              moneys: 0,
              payMode: null
            },
            paymentList: []
          };
          this.newEdit = [].concat(
            JSON.parse(JSON.stringify(this.moneyDetals.paymentList))
          );
          this.$message.error(res.message);
        }
      });
    },
    HestoryhandleSizeChange(val){
      this.PHestorypagesize = val;
      this.showPHestorytable(this.PHestorycurrpage,this.PHestorypagesize)
    },
    Hestoryclick(val) {
      this.PHestorycurrpage = val;
      this.showPHestorytable(this.PHestorycurrpage,this.PHestorypagesize)
    },
    showPHestorytable(row,pageNum,pageSize){
      this.dialogHestory = true;
      this.PHestorytableLoad = true;
      this.PcontractId = row.contractId
      var url = "business/payment/history/list";
      var param = {
        contractId:row.contractId,
        pageNum: pageNum,
        pageSize: pageSize
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode) this.PHestorytableLoad=false;
        if(data.statusCode==="1"){
          this.Hestorytable = data.data?data.data.rows:[]
          this.PHestorytableTotal = data.data?data.data.total:0
        }else if(data.statusCode==="9"){
          this.Hestorytable = []
          this.PHestorytableTotal = 0
        }else{
          this.$message.error(data.message);
        }
      });
    },
    mainClose() {
      this.isMoney.maintenance = false;
      this.isMoney.emecry = false;
    },
    handleRemove(file, fileList) {},
    beforeRemove(file, fileList) {
      this.urlImg = "";
    },
    handleExceed(files, fileList) {},
    handleSuceess(response, file, fileList) {
      this.newEdit[this.a].urlImg = response.data;
    },
    getIndex(i) {
      this.a = i;
    },
    getAdd(a, b) {
      var _this = this;
      // var url=""
      // if(b==1)
      var url = "business/payment/batch/modify";
      var param = { paymentList: this.newEdit };
      console.log(this.newEdit);
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            callback: action => {
              _this.isMoney.maintenance = false;
              this.moneyDetals.paymentList = [];
              _this.newEdit = [];
              _this.getMainList();
            }
          });
        } else {
          _this.message.error(res.message);
        }
      });
    },
    perEditClose() {
      this.isMoney.maintenance = false;
      this.moneyDetals.paymentList = [];
      this.newEdit = [];
      this.getMainList();
    },
    /*****/
    getEmeryList() {
      var url = "business/emergency/emergency-repair/page";
      var param = {
        mtCompanyId: this.pageCondition.mtCompanyId,
        pageNum: this.pageCondition.pageNum,
        projectId: this.pageCondition.projectId,
        info: this.pageCondition.info,
        workerId: this.pageCondition.workerId,
        pageSize: this.pageCondition.pageSize,
        repairBegin: !this.pageCondition.repairBegin
          ? null
          : this.pageCondition.repairBegin,
        repairEnd: !this.pageCondition.repairEnd
          ? null
          : this.pageCondition.repairBegin,
        status: 2
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.pageCondition.tableData = res.data.page.rows;
          res.data.page.rows.map(item => {
            if (item.callerDate)
              item.callerDate = item.callerDate.split(" ")[0];
            if (item.recoveryDate)
              item.recoveryDate = item.recoveryDate.split(" ")[0];
            return item;
          });
          this.pageCondition.total = res.data.page.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleClick1(row) {
      // this.pageCondition.dialogData = row;
      var url = "business/emergency/emergency-repair/findOne";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        id: row.id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.dialogData = res.data ? res.data : [];
          this.pageCondition.listDiaData = [].concat(
            JSON.parse(JSON.stringify(this.dialogData.erRecordCosts))
          );
          this.pageCondition.isDialog = true;
        } else {
          this.pageCondition.isDialog = true;
          this.$message.error(res.message);
        }
      });
    },
    pageClose() {
      this.dialogData.erRecordCosts = [];
      // this.pageCondition.listDiaData = [
      //   {
      //     id: "",
      //     erRecordId: "",
      //     costName: "",
      //     costMoney: "",
      //     costDate: "",
      //     costDesc: "",
      //     payMoney: "",
      //     payDate: "",
      //     invoiceMoney: "",
      //     invoiceDate: "",
      //     invoiceEnclosure: ""
      //   }
      // ];
      this.pageCondition.listDiaData = [];
      this.pageCondition.isDialog = false;
    },
    changeDiaData() {
      var _this = this;
      var url = "business/emergency/emergency-repair/modifyCost";
      var param = { id: this.dialogData.id, erRecordCosts: [] };
      if (this.pageCondition.listDiaData) {
        let list = this.pageCondition.listDiaData.map(item => {
          item.id = _this.dialogData.id;
          return item;
        });
        param.erRecordCosts = list;
      }
      this.axios.post(url, param).then(res => {
        if(res.statusCode=="1"){
           this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            callback: action => {
             _this.pageCondition.isDialog = false;
              _this.dialogData.erRecordCosts = [];
              _this.pageCondition.listDiaData = [];
              _this.getEmeryList();
            }
          });
        }else{
          this.$message.error(res.message);
        }
      });
    },
    handleSuceess2(response, file, fileList) {
      this.pageCondition.listDiaData[this.a].invoiceEnclosure = response.data;
    },
    searchEm() {
      this.pageCondition.pageSize = 15;
      this.pageCondition.pageNum = 1;
      this.pageCondition.total = 0;
      this.pageCondition.projectId = this.pageCondition.projectIdOne;
      this.pageCondition.workerId = this.pageCondition.workerIdOne;
      this.pageCondition.info = this.pageCondition.infoOne;
      this.pageCondition.repairBegin = this.pageCondition.repairBeginOne;
      this.pageCondition.repairEnd = this.pageCondition.repairEndOne;
      this.getEmeryList();
    },
    // 大修函数
    getBigList() {
      var url = "business/payment/capital/list";
      var param = {
        mtCompanyId: this.listCondition.mtCompanyId,
        pageSize: this.listCondition.pageSize,
        pageNum: this.listCondition.pageNum,
        projectName: this.listCondition.searchProjectName
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.bigtableData = res.data ? res.data : {};
          this.listCondition.total = res.data ? res.data.total : 0;
        } else {
        }
      });
    }
  }
};
</script>