<template>
  <div class="app-container">

    <div class = "search-bx"  >
        <div class="search">
          <el-row :gutter="0">

              <el-input v-model="tableObj.getdataListParm.parammaps.reimbursementCode" placeholder="报销申请单号" class="filter-item" style="width: 120px;padding-bottom:10px;" />

              <el-select v-model="tableObj.getdataListParm.parammaps.employeeId" placeholder="申报人" class="filter-item" style="width: 120px;" clearable filterable>
                <el-option v-for="(item,index) in employeeNameList" :key="index" :label="item.name" :value="item.id" />
              </el-select>

              <el-input v-model="tableObj.getdataListParm.parammaps.beginServiceCost" placeholder="申报金额" style="width:90px"></el-input>
                -
              <el-input v-model="tableObj.getdataListParm.parammaps.endServiceCost" placeholder="申报金额" style="width:90px;margin-right:10px;"></el-input>


              <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime1" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="申报时间" end-placeholder="申报时间" style="width: 250px;" />

              <el-select v-model="tableObj.getdataListParm.parammaps.payStatus" placeholder="付款状态" class="filter-item" style="width: 120px;" clearable>
                  <el-option v-for="item in moneyNameList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>

              <el-select v-model="tableObj.getdataListParm.parammaps.declareTypeName" placeholder="申报类型" class="filter-item" style="width: 120px;" clearable   >
                  <el-option v-for="item in declareTypeList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>

               <el-input v-model="tableObj.getdataListParm.parammaps.postCode" placeholder="寄送发票快递单号" style="width:120px"></el-input>


              <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime2" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="付款时间" end-placeholder="付款时间" style="width: 250px;" />


                <el-button class="successBorder" @click="form_search">查询</el-button>
                <el-button class="successBorder" @click="form_clear">重置</el-button>

                <!-- <el-button  class="success" icon="el-icon-upload2" @click="form_export">导出</el-button> -->

          </el-row>
        </div>


    </div>


    <div class="table"   >
      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" :max-height="myHeight">


        <el-table-column label="序号" align="center" type="index" width="50px"  fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报销申请单号" min-width="110px" align="center"  fixed="left">
          <template slot-scope="scope">
            <span  style = "color:#409EFF; cursor: pointer;" @click="form_see(scope.row)">{{ scope.row.reimbursementCode   }}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款状态" min-width="90px" align="center"  fixed="left">
          <template slot-scope="scope">
            <span>{{ scope.row.payStatus  }}</span>
          </template>
        </el-table-column>

        <el-table-column label="申报类型" min-width="90px" align="center"  >
          <template slot-scope="scope">
            <span>{{ scope.row.declareTypeName  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申报金额(元)" min-width="110px" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.serviceCost  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申报人" min-width="90px" align="center"  >
          <template slot-scope="scope">
            <span>{{ scope.row.employeeName  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申报时间" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.declareDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申报原因" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.declareReason }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发票照片" min-width="110px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style = "color:#409EFF; cursor: pointer;" @click="form_see_nums(scope.row)">查看</span>
          </template>
        </el-table-column>
        <el-table-column label="寄送发票快递单号" min-width="140px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.postData }}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款时间" min-width="120px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.payDate  }}</span>
          </template>
        </el-table-column>

        <el-table-column label="备注" min-width="120px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.remark   }}</span>
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center"   :width="autoWidth"  v-if="autoWidth !== 0"   class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">

             <el-button class="miniSuccess" @click="form_sure(row)" v-if="isExpensespayAdd && row.isComplete  == '1'">完成付款</el-button>

            <el-button class="miniSuccess" @click="form_revoke(row)" v-if="isExpensespayAdd && row.isRevoke  == '1'">撤销</el-button>


          </template>
        </el-table-column>

      </el-table>

      <el-row :gutter="0">
        <el-col :span="6" :offset="12" style="color:#f00">
          列表申报总金额：{{tableSumMoney}}
        </el-col>


      </el-row>

      <pagination v-show="tableObj.total>=0" :total="tableObj.total" :page.sync="tableObj.getdataListParm.offset" :limit.sync="tableObj.getdataListParm.pagecount" @pagination="get_table_data" />
    </div>

    <!-- 新增/编辑 -->
    <el-dialog title="报销申请详情" :visible.sync="create.dialogFormVisible" :close-on-click-modal="false" width="95%">
      <div class="app-add">
        <el-form ref="tempTableForm"   :model="create.temp" label-position="right" label-width="150px" style="width: 95%;margin:0 auto 50px">

        <el-row :gutter="25">

              <el-col :span="declareTypeLength"   >

                  <el-form-item label="报销人：" prop="employeeName">
                    <el-input ref="employeeName" v-model="create.temp.employeeName" class="filter-item" style="width: 100%;" disabled/>
                  </el-form-item>

                  <el-form-item label="申报类型：" prop="declareTypeName">
                    <el-input ref="declareTypeName" v-model="create.temp.declareTypeName" class="filter-item" style="width: 100%;" disabled/>
                  </el-form-item>

                  <el-form-item label="申报金额：" prop="serviceCost">
                    <el-input ref="serviceCost" v-model="create.temp.serviceCost" class="filter-item" style="width: 100%;" disabled/>
                  </el-form-item>

                  <el-form-item label="寄送发票快递名称：" prop="postName">
                    <el-input ref="postName" v-model="create.temp.postName" class="filter-item" style="width: 100%;" maxlength="11" placeholder="" disabled />
                  </el-form-item>

                  <el-form-item label="寄送发票快递单号：" prop="postCode">
                    <el-input ref="postCode" v-model="create.temp.postCode" class="filter-item" style="width: 100%;" maxlength="11" placeholder="" disabled />
                  </el-form-item>

                  <el-form-item label="申报原因：" prop="declareReason">
                    <el-input ref="declareReason" v-model="create.temp.declareReason" type="textarea" :autosize="{ minRows: 4, maxRows: 8} "  :rows="8" placeholder="" maxlength="200" class="filter-item" style="width: 100%;" disabled />
                  </el-form-item>

                  <el-form-item label="备注：" prop="remark">
                    <el-input ref="remark" v-model="create.temp.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 8} "  :rows="8" placeholder="" maxlength="200" class="filter-item" style="width: 100%;" disabled />
                  </el-form-item>

                  <el-form-item label="发票照片：" prop="scenePhoto1">
                     <el-row>
                      <el-col :span="6"  v-for="(item,index) in tableInvocieList ">
                          <el-col :span="24">
                            <el-image style="width: 250px; height: 250px;display:inline-block"  :src="item"></el-image>
                          </el-col>
                      </el-col>
                    </el-row>
                  </el-form-item>
              </el-col>


              <el-col :span="16" v-if ="declareType == 1">

                <h3>报销清单</h3>
                <el-row  v-if="create.dialogStatus==='create' || create.dialogStatus=='update' ">
                      <el-button class="miniPrimary" @click="add_travel_expenses()">增加一条明细</el-button>
                      <el-button class="miniPrimary" @click="choose_travel()">关联出差单</el-button>
                </el-row>
                <el-row v-if="create.dialogStatus=='create' || create.dialogStatus=='update'">

                        <el-col :span="8">
                            <el-form-item label="创建人：" prop="vdate">
                              <el-input   v-model="create.temp.vdate"   disabled/>
                            </el-form-item>
                         </el-col>

                         <el-col :span="8">
                            <el-form-item label="时间：" prop="billDate">
                              <el-date-picker v-model="create.temp.billDate" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;" :clearable="false" disabled />
                            </el-form-item>
                         </el-col>

                         <el-col :span="8">
                            <el-form-item label="合计金额：" prop="vdate">
                              <el-input   v-model="sumPriceAll1"   disabled/>
                            </el-form-item>
                         </el-col>


                </el-row>

                <el-row>
                  <el-table key="0"  :data="tableTravelList" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" >

                    <el-table-column label="序号" align="center" type="index" width="50px">
                      <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="日期" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.businessDate }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="出差地" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.businessAdress }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="拜见人" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.clienter }}</span>

                      </template>
                    </el-table-column>
                    <el-table-column label="差旅费" min-width="110px" align="center">
                        <el-table-column label="交通费" min-width="110px" align="center">
                          <template slot-scope="scope">
                            <span  >{{ scope.row.toll }}</span>

                          </template>
                        </el-table-column>
                        <el-table-column label="油费" min-width="110px" align="center">
                          <template slot-scope="scope">
                            <span  >{{ scope.row.oilCost }}</span>

                          </template>
                        </el-table-column>
                        <el-table-column label="住宿费" min-width="110px" align="center">
                          <template slot-scope="scope">
                            <span  >{{ scope.row.hotelCost }}</span>

                          </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="业务招待费" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.serviceCost }}</span>

                      </template>
                    </el-table-column>
                    <el-table-column label="其他费用" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.otherCost }}</span>

                      </template>
                    </el-table-column>
                    <el-table-column label="合计" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span>{{ parseFloat(scope.row.toll) + parseFloat(scope.row.oilCost)+ parseFloat(scope.row.hotelCost) + parseFloat(scope.row.serviceCost) + parseFloat(scope.row.otherCost) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="出差单号" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.travelCode }}</span>
                      </template>
                    </el-table-column>


                  </el-table>
                </el-row>


              </el-col>

              <el-col :span="16" v-if ="declareType == 2">
                <h3>报销清单</h3>

                <el-row  >

                        <el-col :span="8">
                            <el-form-item label="创建人：" prop="vdate">
                              <el-input   v-model="create.temp.vdate"   disabled/>
                            </el-form-item>
                         </el-col>

                         <el-col :span="8">
                            <el-form-item label="时间：" prop="billDate">
                              <el-input   v-model="create.temp.billDate"   disabled/>

                            </el-form-item>
                         </el-col>

                         <el-col :span="8">
                            <el-form-item label="合计金额：" prop="vdate">
                              <el-input   v-model="sumPriceAll2"   disabled/>
                            </el-form-item>
                         </el-col>


                </el-row>

                <el-row>
                  <el-table key="0"  :data="tableBuyList" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed"  >

                    <el-table-column label="序号" align="center" type="index" width="50px">
                      <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="类型" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.goodsType }}</span>

                      </template>
                    </el-table-column>
                    <el-table-column label="名称" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.goodsName }}</span>

                      </template>
                    </el-table-column>
                    <el-table-column label="购买日期" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.purchaseDate }}</span>

                      </template>
                    </el-table-column>
                    <el-table-column label="数量" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.goodsNum }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="单位名称" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.company }}</span>

                      </template>
                    </el-table-column>
                    <el-table-column label="单价" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span  >{{ scope.row.goodsPrice }}</span>

                      </template>
                    </el-table-column>
                    <el-table-column label="合计" min-width="110px" align="center">
                      <template slot-scope="scope">
                        <span>{{  parseFloat(scope.row.toll) + parseFloat(scope.row.oilCost) }}</span>

                      </template>
                    </el-table-column>
                  </el-table>
                </el-row>


              </el-col>
          </el-row>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="success" @click="form_sure(create.temp)" v-if="isExpensespayAdd && create.temp.isComplete  == '1'">完成付款</el-button>
          <el-button class="cancelClose" @click="create.dialogFormVisible = false;get_table_data()">关闭</el-button>
          <el-button v-if="create.dialogStatus==='create' || create.dialogStatus==='update'" class="success" :disabled="isokDisable" @click="create.dialogStatus==='create'?add_dialog_save():form_edit_save()">确认</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 查看/反馈 -->
    <el-dialog  title="报销详情" :visible.sync="createSee.dialogFormVisible" :close-on-click-modal="false" width="95%" :before-close="dialog_close">
      <div class="app-add">


        <RemotePayDetail :remote-data="remoteData"  />


        <div slot="footer" class="dialog-footer">


          <el-button class="cancelClose" @click="dialog_close()">关闭</el-button>


        </div>
      </div>
    </el-dialog>


     <!-- 确认回收 -->
    <el-dialog title="确认是否已付款" :visible.sync="sure.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="app-add">
        <el-form ref="suretemp" :rules="sure.rules" :model="sure.temp" label-position="right" label-width="150px" style="width: 70%;margin:0 auto 50px">

          <el-form-item label="付款时间：" prop="collectDate">

            <el-date-picker v-model="sure.temp.collectDate" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  :picker-options="setDisabled"  style="width: 100%;" :clearable="false"   />

          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="dialog_sure_close()">关闭</el-button>
          <el-button class="success" @click="form_sure_save()">确认</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 撤销 -->
    <el-dialog title="确认是否撤销" :visible.sync="revoke.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="app-add">
        <el-form ref="revoketemp" :rules="revoke.rules" :model="revoke.temp" label-position="right" label-width="150px" style="width: 70%;margin:0 auto 50px">

          <el-form-item label="撤销原因：" prop="revokeReason">
            <el-input ref="remark" v-model="revoke.temp.revokeReason" type="textarea" :autosize="{ minRows: 4, maxRows: 8} "  :rows="8" placeholder="请输入，最多200个字" maxlength="200" class="filter-item" style="width: 100%;"   />
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="revoke.dialogFormVisible = false;get_table_data()">关闭</el-button>
          <el-button class="success" @click="form_revoke_save()">确认</el-button>
        </div>
      </div>
    </el-dialog>


             <!-- 查看/反馈 -->
    <el-dialog  title="发票详情" :visible.sync="createSeeNums.dialogFormVisible" :close-on-click-modal="false" width="75%">
      <div class="app-add">
        <el-row>
            <el-col :span="6"  v-for="(item,index) in tableInvocieList ">
                <el-col :span="24">
                  <el-image style="width: 350px; height: 350px;display:inline-block"  :src="item"></el-image>
                </el-col>
             </el-col>
          </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose" @click="createSeeNums.dialogFormVisible = false;">关闭</el-button>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script>


import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth, wxpush  } from '@/api/common'
import Cookies from 'js-cookie'
import {  parseTime, json2excel } from '@/utils/index.js'
// import littleTable from './components/littleTable'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import { MessageBox } from 'element-ui'

import RemotePayDetail from '@/componentView/RemotePayDetail.vue'

import { constants } from 'zlib';


export default {
  name: 'ExpensesPayment',
  components: { Pagination , RemotePayDetail },
  data() {
    return {
      myHeight:document.documentElement.clientHeight - 85 - 160,
      employeid: Cookies.get('employeid'),
      disabled: false,

      rowData:{},
      isHome:"",

      sumPriceAll1:0,
      sumPriceAll2:0,
      isRoleEdit: [],isExpensespayAdd: [],


      send_select_list: [
        { name: 'getUserFuzzy', offset: 0, pagecount: 0, parammaps: { "inputvalue": "" } },
      ],

      customerNameList: [], // 客户名称
      groupNameList: [], // 集团
      // 下拉框 - 技术人员
      employeeNameList: [],


       // 下拉框 - 创建人
      createrNameList: [],


      // 下拉框 - 款项状态
      moneyNameList: [
        { "name": "未付款", "id": "未付款" },
        { "name": "已付款", "id": "已付款" }
      ],

      // 下拉框 - 申报类型
      declareTypeList: [
        { "name": "出差", "id": "出差" },
        { "name": "物流费", "id": "物流费" },
        { "name": "交通费", "id": "交通费" },
        { "name": "办公费", "id": "办公费" },
        { "name": "通讯费", "id": "通讯费" },
        { "name": "业务招待费", "id": "业务招待费" },
        { "name": "房租及业务管理费", "id": "房租及业务管理费" },
        { "name": "水电费", "id": "水电费" },
        { "name": "社保", "id": "社保" },
        { "name": "公积金", "id": "公积金" },
        { "name": "工资", "id": "工资" },
        { "name": "手续费", "id": "手续费" },
        { "name": "采购", "id": "采购" },
        { "name": "其他费用", "id": "其他费用" },
      ],


      //表格 - 列表 - 查询
      tableObj: {
        getdataListParm: {
          name: 'getReimbursementCost',
          page: 1,
          offset: 1,
          pagecount: parseInt(Cookies.get('pagecount')),
          returntype: 'Map',
          parammaps: {
            reimbursementCode: "",
            employeeId: "",
            payStatus: "",
            declareTypeName: "",

            postCode: "",
            beginServiceCost: "",
            endServiceCost: "",

            inputDatetime1: "",
            inputDatetime2: "",

            beginDeclareDate: "",
            endDeclareDate: "",
            beginPayDate: "",
            endPayDate: "",


          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },

      tableSumMoney:0,
      tableNoMoney:0,

      download: {
        getdataListParm: {
          name: 'getReimbursementCost',
          page: 1,
          offset: 1,
          pagecount: 0,
          returntype: 'Map',
          parammaps: {
            reimbursementCode: "",
            employeeId: "",
            payStatus: "",
            declareTypeName: "",

            postCode: "",
            beginServiceCost: "",
            endServiceCost: "",

            inputDatetime1: "",
            inputDatetime2: "",

            beginDeclareDate: "",
            endDeclareDate: "",
            beginPayDate: "",
            endPayDate: "",


          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },


      createSee:{
        temp:{},
        dialogFormVisible: false,
      },


      textMap: {
        create: '新增',
        see: '查看',
        update: '编辑'
      },

      autoWidth: 130,
      // 新增/编辑
      create: {
        dialogFormVisible: false,
        dialogStatus: '',
        temp: {employeeId: '', declareTypeName: '', serviceCost: '', billDate: parseTime(new Date(), '{y}-{m}-{d}'), postName: '', postCode: '', declareReason: '', remark: '',
        scenePhoto1: -1, scenePhoto2: -1, scenePhoto3: -1, scenePhoto4: -1, scenePhoto5: -1, scenePhoto6: -1, scenePhoto7: -1, scenePhoto8: -1, scenePhoto9: -1,scenePhoto10: -1,
          picname1: '', picname2: '', picname3: '', picname4: '', picname5: '', picname6: '', picname7: '', picname8: '', picname9: '',  picname10: '',},
        rules: {
          // customerName: [{ required: true, message: '必填', trigger: 'blur' }],
          // vdate: [{ required: true, message: '必填', trigger: 'blur' }],
          // visiterId: [{ required: true, message: '必填', trigger: 'blur' }],
          // receiverId: [{ required: true, message: '必填', trigger: 'blur' }],
          // receiverTel: [{ required: true, message: '必填', trigger: 'blur' }],
          // content: [{ type: 'string', required: true, message: '必填', trigger: 'blur' }],
          // scenePhoto1: [{ required: true, message: '必填', trigger: 'blur' }],
        },
        // 出差小表格
        getTableTravelListParm: {
          name: 'getReimbursementBusiness',
          returntype: 'Map',
          parammaps: { id: "" }
        },
         //  采购小表格
        getTableBuyListParm: {
          name: 'getReimbursementPurchase',
          returntype: 'Map',
          parammaps: { id: "" }
        },


      },

      //1 出差，2 采购  3其它
      declareType:1,
      declareTypeLength:8,
       //出差小表格
      tableTravelList:[
        // {id:1,NoEdit:true,Edit:false},
        // {id:2,NoEdit:false,Edit:true},
      ],
      //z这里表格初始ID
      tableTravelId:91,

      //采购小表格
      tableBuyList:[
        // {id:1,NoEdit:true,Edit:false},
        // {id:2,NoEdit:false,Edit:true},
      ],
      //z这里表格初始ID
      tableBuyId:91,

      imageUrl0:"",

      // 撤销
      revoke: {
        dialogFormVisible: false,
        dialogStatus: '',
        temp: { revokeReason: '',  id: '' },
        rules: {
          revokeReason: [{ required: true, message: '必填', trigger: 'blur' }],
        }
      },

      // 确认回收
      sure: {
        dialogFormVisible: false,
        dialogStatus: '',
        temp: { collectDate: '',  id: '' },
        // rules: {
        //   revokeReason: [{ required: true, message: '必填', trigger: 'blur' }],
        // }
      },

      remoteData:{ id:"" },


      //发票信息
      tableInvocieList :[],


      createSeeNums:{
        dialogFormVisible: false,
      },


      setDisabled: {
        disabledDate(time) {
           return time.getTime() > Date.now();  // 可选历史天、可选当前天、不可选未来天
          //return time.getTime() > Date.now() - 8.64e7;  // 可选历史天、不可选当前天、不可选未来天
          // return time.getTime() < Date.now() - 8.64e7;  // 不可选历史天、可选当前天、可选未来天
          // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
        },
      },


      requestParam: {},
      isokDisable: false,
      selectList: [],
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },

  watch: {


  },

  created() {

    this.get_select_list()
    this.get_auto_buttons()

    var rowData = this.$route.params.rowData
    var isHome = this.$route.params.isHome
    var codeNum = this.$route.params.codeNum

    console.log("rowData",rowData,"======isHome",isHome,"======codeNum",codeNum)


    if(isHome == 'home'){
      this.rowData = rowData
      this.isHome = isHome
      this.tableObj.getdataListParm.parammaps.reimbursementCode = codeNum
      this.get_table_data()

    } else {
      this.rowData = {}
      this.isHome = ""
      this.codeNum = ""

      this.get_table_data()
    }


  },

  watch: {

    tableTravelList: {
      deep: true,
      handler: function (item) {
          //计算总价格
          var sum = 0
          this.tableTravelList.forEach(function(i){
              sum = parseFloat(i.toll) + parseFloat(i.oilCost)+ parseFloat(i.hotelCost) + parseFloat(i.serviceCost) + parseFloat(i.otherCost)  + sum
          })

            this.sumPriceAll1 = sum


      }
    },
    tableBuyList: {
      deep: true,
      handler: function (item) {
          //计算总价格
          var sum = 0
          this.tableBuyList.forEach(function(i){
              sum = parseFloat(i.goodsPrice) * parseFloat(i.goodsNum)  + sum
          })

            this.sumPriceAll2 = sum


      }
    },


  },

  methods: {


    //获取按钮权限
    get_auto_buttons() {
      const Edit = 'ExpensesPayment'
      const isRoleEdit = checkButtons(JSON.parse(sessionStorage.getItem('buttons')), Edit)
      this.isRoleEdit = isRoleEdit

      const ExpensespayAdd = 'review:expensespay:revoke'
      const isExpensespayAdd = checkButtons(JSON.parse(sessionStorage.getItem('buttons')), ExpensespayAdd)
      this.isExpensespayAdd = isExpensespayAdd
    },
    //获取所有下拉框的内容
    get_select_list() {

      GetDataByNames(this.send_select_list).then(response => {

        this.employeeNameList = response.data.getUserFuzzy.list
        console.log("申报人下拉框", this.employeeNameList)


      })

    },
    //加载表格
    get_table_data() {
      var me = this
      this.tableObj.listLoading = true
      console.log("this.tableObj.getdataListParm======>", this.tableObj.getdataListParm)
      GetDataByName(this.tableObj.getdataListParm).then(response => {
        console.log('table数据======>', response.data.list)
        if (response.data.list !== null) {


          this.tableObj.list = response.data.list
          this.tableObj.pageNum = response.data.pageNum
          this.tableObj.pageSize = response.data.pageSize
          this.tableObj.total = response.data.total

          console.log('table数据======>', this.tableObj.list)

           //计算操作栏宽度
           var btnNum = 0
              var arrList = response.data.list
              arrList.forEach(function(row){
                  var itemBtnNum = 0
                  if(me.isExpensespayAdd && row.isComplete  == '1'){
                    itemBtnNum = itemBtnNum + 1
                  }
                  if(me.isExpensespayAdd && row.isRevoke  == '1'){
                    itemBtnNum = itemBtnNum + 1
                  }


                  console.log(itemBtnNum)
                  if(itemBtnNum > btnNum){
                    btnNum = itemBtnNum
                  }
              })
              console.log("btnNum=============",btnNum)
              me.autoWidth = btnNum * 90


        } else {
          this.tableObj.list = []
        }
        setTimeout(() => {
          this.tableObj.listLoading = false
        }, 100)
      })


      var send_price = {
        name: 'getReimbursementCostOfPrice',
        parammaps: this.tableObj.getdataListParm.parammaps
      }

      GetDataByName(send_price).then(response => {
        console.log('table总价格数据======>', response )
        if (response.data.list !== null) {
          this.tableSumMoney = response.data.list[0].totlePrice

        } else {
          this.tableSumMoney = ""

        }
      })


    },
    form_search() {
      console.log('点击了查询')


      if (this.tableObj.getdataListParm.parammaps.inputDatetime1 !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime1 !== null) {
        this.tableObj.getdataListParm.parammaps.beginDeclareDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime1[0], '{y}-{m}-{d}')
        this.tableObj.getdataListParm.parammaps.endDeclareDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime1[1], '{y}-{m}-{d}')
      } else {
        this.tableObj.getdataListParm.parammaps.inputDatetime1 = ''
        this.tableObj.getdataListParm.parammaps.beginDeclareDate = ''
        this.tableObj.getdataListParm.parammaps.endDeclareDate = ''
      }

      if (this.tableObj.getdataListParm.parammaps.inputDatetime2 !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime2 !== null) {
        this.tableObj.getdataListParm.parammaps.beginPayDate  = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime2[0], '{y}-{m}-{d}')
        this.tableObj.getdataListParm.parammaps.endPayDate  = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime2[1], '{y}-{m}-{d}')
      } else {
        this.tableObj.getdataListParm.parammaps.inputDatetime2 = ''
        this.tableObj.getdataListParm.parammaps.beginPayDate  = ''
        this.tableObj.getdataListParm.parammaps.endPayDate  = ''
      }


      this.tableObj.getdataListParm.offset = 1
      this.get_table_data()
    },
    form_clear() {
      console.log('点击了重置')


      this.tableObj.getdataListParm.parammaps.reimbursementCode = ''
      this.tableObj.getdataListParm.parammaps.employeeId  = ''
      this.tableObj.getdataListParm.parammaps.payStatus = ''
      this.tableObj.getdataListParm.parammaps.declareTypeName = ''

      this.tableObj.getdataListParm.parammaps.postCode  = ''
      this.tableObj.getdataListParm.parammaps.beginServiceCost  = ''

      this.tableObj.getdataListParm.parammaps.endServiceCost  = ''


      this.tableObj.getdataListParm.parammaps.inputDatetime1 = ''
      this.tableObj.getdataListParm.parammaps.inputDatetime2 = ''

      this.tableObj.getdataListParm.parammaps.beginDeclareDate  = ''
      this.tableObj.getdataListParm.parammaps.endDeclareDate  = ''
      this.tableObj.getdataListParm.parammaps.beginPayDate  = ''
      this.tableObj.getdataListParm.parammaps.endPayDate  = ''


      this.tableObj.getdataListParm.offset = 1
      this.get_table_data()


    },


    // 查看
    form_see_nums(row) {
      console.log(row)

      var  tableInvocieList  = []

      if(row.scenePhoto1 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto2 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname2
         tableInvocieList.push(url)
      }
      if(row.scenePhoto3 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname3
         tableInvocieList.push(url)
      }
      if(row.scenePhoto4 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname4
         tableInvocieList.push(url)
      }
      if(row.scenePhoto5 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname5
         tableInvocieList.push(url)
      }
      if(row.scenePhoto6 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname6
         tableInvocieList.push(url)
      }
      if(row.scenePhoto7 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname7
         tableInvocieList.push(url)
      }
      if(row.scenePhoto8 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname8
         tableInvocieList.push(url)
      }
      if(row.scenePhoto9 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname9
         tableInvocieList.push(url)
      }


      this.tableInvocieList  = tableInvocieList
      console.log( this.tableInvocieList )

      this.createSeeNums.dialogFormVisible = true


    },

    //图片展示
    show_pic1() {
      this.imageIsShow = true
    },


     // 查看
    form_see(row) {
      console.log('点击了查看', row)
      // this.$nextTick(() => {
      //   this.$refs.temp.resetFields()
      // })

      this.create.temp = Object.assign({}, row)

      this.create.temp.id = row.id


      var  tableInvocieList  = []
      if(row.scenePhoto1 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto2 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto3 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto4 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto5 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto6 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto7 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto8 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }
      if(row.scenePhoto9 !== "-1"){
        var url = process.env.VUE_APP_BASE_API + row.picname1
         tableInvocieList.push(url)
      }


      this.tableInvocieList  = tableInvocieList
      console.log( this.tableInvocieList )


      if(row.declareTypeName == "出差"){


         this.declareType = 1
         this.declareTypeLength = 8
         this.create.getTableTravelListParm.parammaps.id = row.id
         this.getTableTravelList()

      } else if(row.declareTypeName == "采购"){
        this.declareType = 2
         this.declareTypeLength = 8
        this.create.getTableBuyListParm.parammaps.id = row.id
        this.getTableBuyList()
      } else {
          this.declareType = 3
         this.declareTypeLength = 24
      }


      this.create.dialogStatus = 'see'
      this.create.dialogFormVisible = true
    },

    getTableTravelList(){
      GetDataByName(this.create.getTableTravelListParm).then(response => {
        if (response.data.list !== null) {

          this.tableTravelList = response.data.list

        } else {
          this.tableTravelList = []
        }

        console.log("出差小表格", this.tableTravelList)
      })
    },
    getTableBuyList(){
      GetDataByName(this.create.getTableBuyListParm).then(response => {


        if (response.data.list !== null) {

          this.tableBuyList = response.data.list

        } else {
          this.tableBuyList = []
        }
        console.log("采购小表格", this.tableBuyList)
      })
    },


    // 确认回收
    form_sure(row) {
      console.log('点击了确认', row)
      this.reset_sure()
      this.sure.temp.id = row.id
      this.sure.dialogFormVisible = true
    },
    // 确认回收 - 重置
    reset_sure() {
      this.sure.temp.collectDate = ""
    },

    // 确认回收 - 确认
    form_sure_save() {
      this.$refs['suretemp'].validate(valid => {
        if (valid) {
          var send_data =  {
              name: 'completeReimbursementCost',
              parammaps: this.sure.temp

          }

                 PostDataByName(send_data).then(response => {
                    console.log('确认回收参数', send_data)
                    if (response.msg !== 'fail') {
                      this.$notify({ title: '成功', message: '提交成功', type: 'success', duration: 2000 })
                      this.sure.dialogFormVisible = false
                      this.create.dialogFormVisible = false
                      this.get_table_data()


                      var rowId = this.sure.temp.id
                    this.get_wxPush(69,'报销',rowId)

                      if(this.isHome == 'home'){
                      // 返回首页
                        this.$router.push({ name: 'Dashboard', params: { isTodo: 'expensesp' }})
                      }
                    } else {
                      this.$notify({ title: '失败', message: '提交失败' + response.data, type: 'error', duration: 2000 })
                    }
                  })


        }
      })
    },


    // 撤销
    form_revoke(row) {
      console.log('点击了撤销', row)
      this.reset_revoke()

      this.revoke.temp.id = row.id
      this.revoke.dialogFormVisible = true
    },
    // 撤销 - 重置
    reset_revoke() {
      this.revoke.temp.revokeReason = ""

    },

    // 撤销 - 确认
    form_revoke_save() {
      this.$refs['revoketemp'].validate(valid => {
        if (valid) {
          var send_data =  {
              name: 'revokeReimbursementCost',
              parammaps: this.revoke.temp

          }


            this.$confirm('是否撤销该条记录?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

                 PostDataByName(send_data).then(response => {
                    console.log('撤销发送参数', send_data)
                    if (response.msg !== 'fail') {
                      this.$notify({ title: '成功', message: '撤销成功', type: 'success', duration: 2000 })
                      this.revoke.dialogFormVisible = false
                      this.get_table_data()


                      var rowId = this.revoke.temp.id
                    this.get_wxPush(70,'报销',rowId)
                    } else {
                      this.$notify({ title: '失败', message: '撤销失败' + response.data, type: 'error', duration: 2000 })
                    }
                  })

            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });


        }
      })
    },


    dialog_close(){
      this.createSee.dialogFormVisible = false
      this.get_table_data()
      if(this.isHome == 'home'){
       // 返回首页
       this.$router.push({ name: 'Dashboard', params: { isTodo: 'sitep' }})
      }
    },

    dialog_sure_close(){
      this.sure.dialogFormVisible = false
      this.get_table_data()
      if(this.isHome == 'home'){
       // 返回首页
       this.$router.push({ name: 'Dashboard', params: { isTodo: 'sitep' }})
      }
    },

    // 导出
    form_export(item) {

       this.download.getdataListParm.parammaps = this.tableObj.getdataListParm.parammaps

       GetDataByName(this.download.getdataListParm).then(response => {
         if (response.data.list !== null) {
           this.download.list = response.data.list
         } else {
           this.download.list = []
         }
         var excelDatas = [
           {
             tHeader: ['序号', '报销申请单号', '付款状态', '申报类型', '申报金额（元）', '申报人', '申报时间', '申报原因', '寄送发票快递单号', '付款时间', '备注'],
             filterVal: ['sort', 'reimbursementCode', 'payStatus', 'declareTypeName', 'serviceCost', 'employeeName', 'declareDate', 'declareReason', 'postData', 'payDate', 'remark' ],
             tableDatas: this.download.list,
             sheetName: 'Sheet1'
           }
         ]
         json2excel(excelDatas, '报销款项', true, 'xlsx')
       })

    },

    // 导入
    form_inport() {
      console.log('点击了导入')
    },
     //微信推送
     get_wxPush(remindId,remindTypeName,rowId){
                   var send_weixin_data1 = {
                        name: 'getRemindData',
                        parammaps: {
                          "userId":Cookies.get('g_userId'),
                          "remindId":remindId,
                          "remindTypeName":remindTypeName,
                          "rowId":rowId

                        }
                      }

                      GetDataByName(send_weixin_data1).then(response => {
                        console.log('微信推送(获取参数)======>', response )
                        if (response.data.message == 'ok') {
                          var receiverStr = response.data.list[0].receivers
                          var receiverArr = receiverStr.split(',')
                          var value1 = response.data.list[0].value1
                          var value2 = response.data.list[0].value2
                          var value3 = response.data.list[0].value3
                          var value4 = response.data.list[0].value4
                          var send_weixin_data2 = {
                            "target": receiverArr,
                            "serviceId": remindId,
                            "content": [
                              { "color": "#173177","value": value1 },
                              { "color": "#173177", "value": value2 },
                              { "color": "#173177", "value": value3 },
                              { "color": "#173177","value": value4 }
                            ]
                          }


                            wxpush(send_weixin_data2).then(response => {
                              console.log('微信推送(获取参数)======>', response )
                            })
                         // this.tableSumMoney = response.data.list[0].totlePrice
                        } else {
                          // this.$notify({ title: '失败', message: '消息推送失败', type: 'error', duration: 2000 })
                        }
                      })
    },


  }
}
</script>
<style lang="scss" scoped>
.search {
  padding-top: 10px;
  clear: both;
}
.table {
  margin-top: 10px;
}

#uploadPic {
  width: 700px;
}


 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

// #uploadPic .el-upload-list--picture-card .el-upload-list__item {
//   width: 70px;
//   height: 70px;
// }
// #uploadPic .el-upload--picture-card {
//   width: 70px;
//   height: 70px;
//   line-height: 70px;
// }
// #uploadPic .hide .el-upload--picture-card {
//   display: none;
// }

// // 查看 隐藏删除
// #uploadPicSee {
//   height: 70px;
// }
// #uploadPicSee .el-upload-list--picture-card .el-upload-list__item {
//   width: 70px;
//   height: 70px;
// }
// #uploadPicSee .el-upload--picture-card {
//   width: 70px;
//   height: 70px;
//   line-height: 70px;
// }
// #uploadPicSee
//   .el-upload-list--picture-card
//   .el-upload-list__item-actions
//   .el-upload-list__item-delete {
//   display: none;
// }

/deep/ .el-input.is-disabled .el-input__inner {color: #000000!important;}
/deep/ .el-textarea.is-disabled .el-textarea__inner {color: #000000!important;}
/deep/ .el-radio__input.is-disabled+span.el-radio__label {color: #000000!important;}
/deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label { color: #000000!important;}

</style>
