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

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="68px">
      <el-row>
        <el-form-item label="找回日期" prop="beginTime">
          <div class="block">
            <el-date-picker v-model="queryParams.beginTime" value-format="yyyy-MM-dd" type="date"
                            placeholder="选择日期" style="width: 200px;">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="" prop="endTime">
          <div class="block">
            <el-date-picker v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
                            placeholder="选择日期" style="width: 200px;">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="处理日期" prop="beginTime">
          <div class="block">
            <el-date-picker v-model="queryParams.beginTime1" value-format="yyyy-MM-dd" type="date"
                            placeholder="选择日期" style="width: 200px;">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="" prop="endTime">
          <div class="block">
            <el-date-picker v-model="queryParams.endTime1" type="date" value-format="yyyy-MM-dd"
                            placeholder="选择日期" style="width: 200px;">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-row>
      <el-form-item label="游戏账号" prop="gameAccount">
        <el-input v-model="queryParams.gameAccount" style="width: 200px;" placeholder="请输入游戏账号" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="价格区间" prop="gameAccount">
        <el-input v-model="queryParams.price1" style="width: 200px;" placeholder="请输入初始价格" clearable
                  @keyup.enter.native="handleQuery"/>
        <el-input v-model="queryParams.price2" style="width: 200px;margin-left: 20px;" placeholder="请输入结束价格" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="地区" prop="district">
        <el-input v-model="queryParams.district" style="width: 200px;" placeholder="请输入地区"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select style="width: 100%" v-model="queryParams.status" placeholder="请选择状态">
          <el-option v-for="item in stoptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="售后类型" prop="aftermarketType">
        <el-select v-model="queryParams.aftermarketType" style="width: 100%" clearable
                   placeholder="请选择售后类型">
          <el-option v-for="(item,index) in dict.type.after_sales_type" :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺" prop="shopId">
        <el-select style="width: 100%" v-model="queryParams.shopId" filterable placeholder="请选择店铺">
          <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
        </el-button>

        <el-button style="margin-left: 20px;" icon="el-icon-refresh" size="mini" @click="resetQuery">重置
        </el-button>

        <el-button style="margin-left: 20px;" icon="el-icon-plus" type="primary" size="mini"
                   v-hasPermi="['system:gameAftermarket:add']" @click="handleAdd">新增
        </el-button>
        <span style="margin: 0 1.25rem;">
					找回数量：{{zhCount}}
				</span>
        <span>
					找回金额：{{zhPrice}}
				</span>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border :row-class-name="tableRowClassName"
              :header-cell-style="{background: '#e1effb', color: 'black'}" style="width: 100%">
      <el-table-column prop="retrieveDate" label="找回日期">
        <template slot-scope="scope">
          <span v-if="scope.row.retrieveDate">{{scope.row.retrieveDate.slice(0,10)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="acquirePrice" label="收购价格">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="idNo" label="身份证">
      </el-table-column>
      <el-table-column prop="mobile" label="电话">
      </el-table-column>
      <el-table-column prop="gameAccount" label="游戏账号">
      </el-table-column>
      <el-table-column prop="service" label="服务商">
        <template slot-scope="scope">
          <span v-if="scope.row.service=='taohaowan'">淘号玩</span>
          <span v-if="scope.row.service=='panzhi'">盼之</span>
          <span v-if="scope.row.service=='pangxie'">螃蟹</span>
          <span v-if="scope.row.service=='nanzhi'">南栀</span>
          <span v-if="scope.row.service=='jiaoyiyou'">交易游</span>
          <span v-if="scope.row.service=='kejinshou'">氪金兽</span>
          <span v-if="scope.row.service=='baiqing'">白情</span>
        </template>
      </el-table-column>
      <el-table-column prop="aftermarketType" label="售后类型">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.after_sales_type" :value="scope.row.aftermarketType"/>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status=='0'">待处理</span>
          <span v-if="scope.row.status=='1'">已处理(失败)</span>
          <span v-if="scope.row.status=='2'">已处理(成功)</span>
        </template>
      </el-table-column>

      <el-table-column prop="afterorderStatus" label="售后订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.afterorderStatus == null">正常</span>
          <span v-if="scope.row.afterorderStatus=='0'">处理中</span>
          <span v-if="scope.row.afterorderStatus=='1'">售后已退款</span>
          <span v-if="scope.row.afterorderStatus=='2'">售后已解决</span>
          <span v-if="scope.row.afterorderStatus=='3'">待处理</span>
        </template>
      </el-table-column>

      <el-table-column prop="createBy" label="申报人">
      </el-table-column>
      <el-table-column prop="createTime" label="申报日期">
      </el-table-column>
      <!-- <el-table-column prop="updateName" label="处理人">
            </el-table-column> -->
      <el-table-column prop="transactTime" label="处理日期">
      </el-table-column>
      <el-table-column prop="district" label="地区">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>

      <el-table-column  label="是否已支付">
        <template slot-scope="scope">
          <div v-if="scope.row.paymentId != 0" style="background: #00ff00;">
            是
          </div>
        </template>
      </el-table-column>



      <el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" v-hasPermi="['system:gameAftermarket:edit']"
                     @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button v-if="scope.row.status=='1'&&scope.row.reparationId==null" type="danger"
                     v-hasPermi="['system:gameAftermarket:peifu']" @click="handleUpdate1(scope.row)">赔付
          </el-button>
          <el-button type="success"
                     v-hasPermi="['system:gameAftermarket:peifu']" @click="handleUpdate2(scope.row)">处理进度
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>


    <!-- 添加手机号信息对话框 -->
    <el-dialog v-if="xz" :title="title" :visible.sync="xz" append-to-body width="1000px">
      <div style="padding: 10px;overflow: auto">
        <el-form ref="form" :model="form1" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="店铺名称" prop="shopId">
                <el-select filterable v-model="form1.shopId" :disabled='disabled' style="width: 100%"
                           clearable placeholder="请选择店铺名称">
                  <el-option v-for="(item,index) in deptOptions" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="找回日期" prop="retrieveDate">
                <el-date-picker style="width: 100%" value-format="yyyy-MM-dd"
                                v-model="form1.retrieveDate" type="date" placeholder="请选择找回日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理日期" prop="transactTime">
                <el-date-picker style="width: 100%" value-format="yyyy-MM-dd"
                                v-model="form1.transactTime" type="date" placeholder="请选择处理日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form1.name" placeholder="请输入姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证" prop="idNo">
                <el-input v-model="form1.idNo" placeholder="请输入身份证"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="mobile">
                <el-input v-model="form1.mobile" placeholder="请输入电话"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信" prop="wxNo">
                <el-input v-model="form1.wxNo" placeholder="请输入微信"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收购价格" prop="acquirePrice">
                <el-input v-model="form1.acquirePrice" placeholder="请输入收购价格"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属游戏" prop="gameId">
                <el-select style="width: 100%" :disabled='disabled' v-model="form1.gameId"
                           placeholder="请选择所属游戏">
                  <el-option v-for="(item,index) in gameList" :key="item.id" :label="item.gameName"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="售后类型" prop="aftermarketType">
                <el-select v-model="form1.aftermarketType" style="width: 100%" clearable
                           placeholder="请选择售后类型">
                  <el-option v-for="(item,index) in dict.type.after_sales_type" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="游戏账号" prop="gameAccount">
                <el-input v-model="form1.gameAccount" :disabled='disabled' placeholder="请输入游戏账号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="包赔服务" prop="service">
                <el-select style="width: 100%" v-model="form1.service" placeholder="请选择包赔服务商">
                  <el-option v-for="item in bpfwsoptions" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="售后状态" prop="status">
                <el-select style="width: 100%" v-model="form1.status" placeholder="请选择状态">
                  <el-option v-for="item in stoptions" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="售后订单状态" prop="status">
                <el-select style="width: 100%" v-model="form1.afterorderStatus" placeholder="请选择状态">
                  <el-option v-for="item in dict.type.afterorder_status" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>


            </el-col>


            <!-- <el-col :span="12" v-if="title=='修改找回信息'">
                            <el-form-item label="申报人" prop="createName">
                                <el-input v-model="form1.createName" placeholder="请输入申报人" />
                            </el-form-item>
                        </el-col> -->
            <el-col :span="12">
              <el-form-item label="地区" prop="district">
                <el-input v-model="form1.district" placeholder="请输入地区"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form1.remark" placeholder="请输入备注"/>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="找回凭证" prop="credentials">
                <div class="img_list">
                  <div style="position: relative;">
                    <span style="color: red;" v-if="form1.credentials==null">无凭证</span>
                    <image-preview style="margin-right: 10px;" v-else
                                   v-for="item in form1.credentials.split(',')"
                                   :src="'https://static.taohaowan.com/'+item" :width="100" :height="100"/>
                  </div>
                </div>
                <el-upload ref="upload" :action="uploadImgUrl" list-type="picture-card"
                           :on-success="handleAvatarSuccess"
                           :on-remove="handleRemove" :on-change="changeUpload" :show-file-list="true"
                           accept="image/png, image/jpeg, application/pdf" :multiple="true" :headers="headers">
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="售后信息" prop="retrieveMessage">
                <editor v-model="form1.retrieveMessage" :min-height="192"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 处理进度 -->
    <el-dialog title="处理进度" :visible.sync="cljd" width="80%">
      <div>
        <el-form ref="form3" :model="form3" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="进度类型" prop="status">
                <el-select style="width: 100%" v-model="form3.status" filterable placeholder="请选择进度类型">
                  <el-option v-for="item in shoptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form3.remark" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
				<el-button @click="cljd = false">取 消</el-button>
				<el-button type="primary" @click="submitForm2()">确 定</el-button>
			</span>
    </el-dialog>

    <!-- 赔付信息对话框 -->
    <el-dialog v-if="peifu" title="赔付信息" :visible.sync="peifu" append-to-body width="1000px">
      <div>
        <el-form ref="form2" :model="form2" :rules="rules1" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="店铺名称" prop="shopId">
                <el-select filterable disabled v-model="form2.shopId" style="width: 100%" clearable
                           placeholder="请选择店铺名称">
                  <el-option v-for="(item,index) in deptOptions" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="售后编号" prop="aftermarketId">
                <el-input disabled v-model="form2.aftermarketId" placeholder="请输入售后编号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="历史数据" prop="histories">
                <el-select filterable v-model="form2.histories" style="width: 100%" clearable
                           placeholder="请选择历史数据">
                  <el-option v-for="(item,index) in lsOptions" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品编号" prop="goodsId">
                <el-input v-if="form2.histories=='N'" @blur="blur" v-model="form2.goodsId"
                          placeholder="请输入商品编号"/>
                <el-input v-else v-model="form2.goodsId" placeholder="请输入商品编号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="游戏账号" prop="gameAccount">
                <el-input v-model="form2.gameAccount" disabled placeholder="请输入游戏账号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="成本金额" prop="gamePrice">
                <el-input v-model="form2.gamePrice" placeholder="请输入成本金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销售金额" prop="salesPrice">
                <el-input v-if="form2.histories=='Y'" v-model="form2.salesPrice"
                          placeholder="请输入销售金额"/>
                <el-input v-else disabled v-model="form2.salesPrice" placeholder="请输入销售金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商家退款" prop="merchantsPrice">
                <el-input v-if="form2.histories=='Y'" v-model="form2.merchantsPrice"
                          placeholder="请输入商家退款"/>
                <el-input v-else disabled v-model="form2.merchantsPrice" placeholder="请输入商家退款"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="平台退款" prop="firmsPrice">
                <el-input v-if="form2.histories=='Y'" v-model="form2.firmsPrice"
                          placeholder="请输入平台退款"/>
                <el-input v-else disabled v-model="form2.firmsPrice" placeholder="请输入平台退款"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总价" prop="totalPrice">
                <el-input v-if="form2.histories=='Y'" v-model="form2.totalPrice" placeholder="请输入总价"/>
                <el-input v-else disabled v-model="form2.totalPrice" placeholder="请输入总价"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支出利润" prop="margins">
                <el-input v-if="form2.histories=='Y'" v-model="form2.margins" placeholder="请输入支出利润"/>
                <el-input v-else disabled v-model="form2.margins" placeholder="请输入支出利润"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="2.5倍支出利润" prop="multiplePrice">
                <el-input v-model="form2.multiplePrice" placeholder="请输入多倍包赔利润"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收款人姓名" prop="payeeName">
                <el-input v-model="form2.payeeName" placeholder="请输入收款人姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收款账号" prop="payeeAccount">
                <el-input v-model="form2.payeeAccount" placeholder="请输入收款账号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收款账号名称" prop="payeeAccountName">
                <el-input v-model="form2.payeeAccountName" placeholder="请输入收款账号名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="包赔服务" prop="service">
                <el-select style="width: 100%" disabled v-model="form2.service" placeholder="请选择包赔服务商">
                  <el-option v-for="item in bpfwsoptions" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-select style="width: 100%" disabled v-model="form2.type" placeholder="请选择类型">
                  <el-option v-for="item in typeoptions" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form2.histories=='Y'" required label="备注" prop="remark">
                <el-input v-model="form2.remark" placeholder="请输入备注"/>
              </el-form-item>
              <el-form-item v-else label="备注" prop="remark">
                <el-input v-model="form2.remark" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">生成 订单</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {
    getSysDeptInfo,
    getDeptInfo,
    accountMonitoring,
    add,
    upData,
    getPhone,
    shjdAdd,
    view,
    deletePhone,
    getPaymentInfo,
    updateOriginalPrice,
    getTBusGoodsPaymentSum,
    updatePaymentStatus,
    paginQuery,
    paginQueryAdd,
    orderInfo
  } from '@/api/data/retrieveDetails'
  import {
    getInitGoodsManager
  } from '@/api/data/goods'
  import {
    queryTBusShop,
    getInfo
  } from '@/api/data/goodsPayment'
  import Cookies from 'js-cookie'
  import {
    getToken
  } from '@/utils/auth'

  export default {

    dicts: ['pallet_type', 'service_name', 'collection_source', 'after_sales_type', 'afterorder_status'],
    data() {
      var checkPhone = (rule, value, callback) => { // 手机号验证
        if (!value) {
          return callback(new Error('手机号不能为空'))
        } else {
          const reg = /^1[3456789]\d{9}$/
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的手机号'))
          }
        }
      }
      return {
        userName: '',
        uploadImgUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传的图片服务器地址
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        zhCount: 0,
        zhPrice: 0,
        // 统计
        originalprice: 0,
        salesprice: 0,
        paidinprice: 0,
        lr: 0,
        bplr: 0,
        allPrice: 0,
        // 筛选
        // activeNames: ['1'],
        cs: 0,
        cs1: 0,
        cs2: 0,
        cs3: 0,
        input: '',
        ck: false,
        yxbh: false,
        yxdq: false,
        spbh: false,
        sjbh: false,
        form3: {},
        cljd: false,
        disabled: false,
        block: false,
        originalPrice1open: false,
        originalPriceopen: false,
        xz: false,
        peifu: false,
        openPicture: false,
        cbj: false,
        cbj1: false,
        cbj2: true,
        fl: false,
        openFkpz1: false,
        bp: false,
        zybd: true,
        sjbd: false,
        bpLr: false,
        form2: {
          gamePrice: 0,
          originalPrice: 0,
          salesPrice: 0,
          merchantsPrice: 0,
          firmsPrice: 0,
          totalPrice: 0,
          margins: 0
        },
        rules: {
          shopId: [{
            required: true,
            message: '请选择店铺名称',
            trigger: 'blur'
          }],
          retrieveDate: [{
            required: true,
            message: '请选择找回日期',
            trigger: 'blur'
          }],
          transactTime: [{
            required: true,
            message: '请选择处理日期',
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: '请选择状态',
            trigger: 'blur'
          }],
          district: [{
            required: true,
            message: '请输入地区',
            trigger: 'blur'
          }],
          acquirePrice: [{
            required: true,
            message: '请输入收购价格',
            trigger: 'blur'
          }],
          gameId: [{
            required: true,
            message: '请选择游戏',
            trigger: 'blur'
          }],
          gameAccount: [{
            required: true,
            message: '请输入游戏账号',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            message: '请输入电话号码',
            trigger: 'blur'
          },
            {
              validator: checkPhone,
              trigger: 'blur'
            }
          ],
          idNo: [{
            required: true,
            message: '请输入身份证',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          service: [{
            required: true,
            message: '请选择服务商',
            trigger: 'blur'
          }]
        },
        rules1: {
          shopId: [{
            required: true,
            message: '请选择店铺',
            trigger: 'blur'
          }],
          histories: [{
            required: true,
            message: '请选择历史数据',
            trigger: 'blur'
          }],
          aftermarketId: [{
            required: true,
            message: '请输入售后编号',
            trigger: 'blur'
          }],
          goodsId: [{
            required: true,
            message: '请输入商品编号',
            trigger: 'blur'
          }],
          gamePrice: [{
            required: true,
            message: '请输入成本价格',
            trigger: 'blur'
          }],
          salesPrice: [{
            required: true,
            message: '请输入销售价格',
            trigger: 'blur'
          }],
          merchantsPrice: [{
            required: true,
            message: '请输入商家退款',
            trigger: 'blur'
          }],
          totalPrice: [{
            required: true,
            message: '请输入总价',
            trigger: 'blur'
          }],
          margins: [{
            required: true,
            message: '请输入支出利润',
            trigger: 'blur'
          }],
          firmsPrice: [{
            required: true,
            message: '请输入平台退款',
            trigger: 'blur'
          }],
          gameAccount: [{
            required: true,
            message: '请输入游戏账号',
            trigger: 'blur'
          }],
          payeeName: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          payeeAccount: [{
            required: true,
            message: '请输入收款账号',
            trigger: 'blur'
          }],
          payeeAccountName: [{
            required: true,
            message: '请输入收款账号名称',
            trigger: 'blur'
          }],
          service: [{
            required: true,
            message: '请选择服务商',
            trigger: 'blur'
          }]
        },
        typeoptions: [{
          value: 'ZHPF',
          label: '找回赔付'
        }],

        bpfwsoptions: [{
          value: 'taohaowan',
          label: '淘号玩'
        }, {
          value: 'panzhi',
          label: '盼之'
        }, {
          value: 'nanzhi',
          label: '南栀'
        }, {
          value: 'pangxie',
          label: '螃蟹'
        }, {
          value: 'baiqing',
          label: '白情'
        }, {
          value: 'jiaoyiyou',
          label: '交易游'
        }, {
          value: 'kejinshou',
          label: '氪金兽'
        }],
        csoptions: [{
          value: 'goods_status_3',
          label: '已售'
        }, {
          value: '',
          label: '未售'
        }],
        shdjoptions: [{
          value: '1',
          label: '售后一级'
        }, {
          value: '2',
          label: '售后二级'
        }],
        lsOptions: [{
          value: 'Y',
          label: '是'
        }, {
          value: 'N',
          label: '否'
        }],
        shTypeoptions: [{
          value: '0',
          label: '找回'
        }, {
          value: '1',
          label: '冻结'
        }, {
          value: '2',
          label: '其他'
        }],
        hhoptions: [{
          value: 'Y',
          label: '是'
        }, {
          value: 'N',
          label: '否'
        }],
        shoptions: [{
          value: '客服处理进度',
          label: '客服处理进度'
        }, {
          value: '客服处理结果',
          label: '客服处理结果'
        }],
        stoptions: [{
          value: '0',
          label: '待处理'
        }, {
          value: '1',
          label: '已处理(失败)'
        }, {
          value: '2',
          label: '已处理(成功)'
        }
        ],
        gameList: [],
        deptOptions: [],
        tableData: [],
        // 遮罩层
        loading: true,
        // open:false

        // 总条数
        total: 0,
        // 弹出层标题
        title: '',
        // 显示搜索条件
        showSearch: true,
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          realName: null,
          phone: null,
          shopId: '',
          status: '0',
          beginTime: '',
          endTime: ''
        },

        // 表单参数
        form1: {}
      }
    },
    created() {
      this.getList()
      this.getShopInfo()
      this.initGoodsManager()
      this.loadAll() //获取店铺
    },
    methods: {
      getShopInfo() {
        getInfo().then(res => {
          this.userName = res.user.userName
        })
      },
      // 上传成功
      handleAvatarSuccess(res) {
        this.form1.credentials = res.data.url
      },
      // 删除
      handleRemove(file, fileList) {
        this.form2.electronicDataList = this.form2.electronicDataList.filter(item => item !== file.response.data
          .webUrl)
      },
      // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      changeUpload(file, fileList) {
        if (file.status === 'success') {
          this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter((item) => {
            return item.raw.size / 1024 / 1024 < 50
          })
          this.tobase64(file, fileList)
        }
      },
      tobase64(file, fileList) {
        var reader = new FileReader()
        reader.readAsDataURL(file.raw)
        reader.onload = (e) => {
          const tempobj = {
            data: file.response.data.webUrl,
            suffix: '.' + file.raw.type.split('/')[1],
            fileName: file.name
          }
          this.form2.electronicDataList.push(tempobj.data)

        }

      },
      blur() {
        if (this.form2.goodsId) {
          let query = {
            goodsId: this.form2.goodsId,
            shopId: this.form2.shopId,
            gameAccount: this.form2.gameAccount
          }
          orderInfo(query).then(response => {
            if (response.data.length != 0) {
              response.data.forEach((item) => {
                let gameAccount = Cookies.get('gameAccount')
                if (this.form2.gameAccount == gameAccount) {
                  if (item.gameEnterPrice != null) {
                    this.form2.gamePrice = item.gameEnterPrice
                  } else {
                    this.form2.gamePrice = ''
                  }
                  this.form2.salesPrice = item.salesPrice
                  this.form2.merchantsPrice = item.settlementPrice
                  this.form2.totalPrice = item.totalPrice
                  this.form2.margins = item.platformProfit
                  this.form2.firmsPrice = (Number(this.form2.salesPrice) - Number(this
                    .form2.merchantsPrice)).toFixed(2)
                } else {
                  alert('账号有误请核对!')
                }
              })
            } else {
              alert('商品编号有误请核对!')
            }
          })
        }

      },
      tableRowClassName({
                          row,
                          rowIndex
                        }) {
        if (rowIndex === 1 || rowIndex === 5 || rowIndex === 9) {
          return 'warning-row'
        } else if (rowIndex === 3 || rowIndex === 7) {
          return 'success-row'
        }
        return ''
      },
      loadAll() {
        queryTBusShop().then(response => {
          response.data.forEach((item) => {
            this.deptOptions.push({
              label: item.name,
              value: item.id
            })
          })
        })
        return this.deptOptions
      },
      initGoodsManager() {
        getInitGoodsManager().then(res => {
          this.gameList = res.gameList
        })
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.form1 = {}
        this.resetQuery()
        this.xz = true
        this.title = '添加找回信息'
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const id = row.id
        const names = row.phone
        this.$modal.confirm('是否确认删除手机号["' + names + '"]的数据项？').then(function() {
          return deletePhone(id)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {
        })
      },

      /** 查询账号信息列表 */
      getList() {
        this.loading = true
        accountMonitoring(this.queryParams).then(response => {
          this.tableData = response.data.table.rows
          this.total = response.data.table.total
          this.zhCount = response.data.table.total
          this.zhPrice = response.data.price
          this.loading = false
        })
      },
      //修改按钮
      handleUpdate(row) {
        this.form1 = []
        getPhone(row.id).then(res => {
          this.form1 = res.data
          this.xz = true
          this.disabled = true
          this.title = '修改找回信息'
        })
      },
      handleUpdate2(row) {
        this.form3.aftermarketId = row.id
        this.cljd = true
      },
      //赔付按钮
      handleUpdate1(row) {
        // this.form2 = [];
        this.form2.shopId = row.shopId
        this.form2.aftermarketId = row.id
        this.form2.service = row.service
        this.form2.gameAccount = row.gameAccount
        this.form2.type = 'ZHPF'
        Cookies.set('gameAccount', row.gameAccount)
        this.peifu = true
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.block = false
        this.queryParams.pageNum = 1
        this.getList()
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.block = false
        this.disabled = false
        this.resetForm('queryForm')
        this.handleQuery()
      },

      // 新增确定按钮
      submitForm() {
        this.gameList.forEach(res => {
          if (res.id == this.form1.gameId) {
            this.form1.gameName = res.gameName
          }
        })
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.title == '添加找回信息') {
              this.form1.createBy = this.userName
              add(this.form1).then(res => {
                if (res.code == 200) {
                  this.getList()
                  this.xz = false
                  this.$modal.msgSuccess('添加成功')
                } else {
                  alert(res.msg)
                }
              })
            } else {
              upData(this.form1).then(res => {
                if (res.code == 200) {
                  this.getList()
                  this.xz = false
                  this.$modal.msgSuccess('修改成功')
                } else {
                  alert(res.msg)
                }
              })
            }
          }
        })
      },
      // 新增确定按钮
      submitForm1() {
        this.$refs['form2'].validate(valid => {
          if (valid) {
            this.form2.shShopId = 'b790d9fd177040bc9b987054c434c2af'
            paginQueryAdd(this.form2).then(res => {
              if (res.code == 200) {
                this.getList()
                this.peifu = false
                this.$modal.msgSuccess('已赔付!')
                window.location.reload() //置空form2
              } else {
                alert(res.msg)
              }
            })
          }
        })
      },
      submitForm2() {
        shjdAdd(this.form3).then(res => {
          this.$modal.msgSuccess('已修改此账号售后进度！')
          this.cljd = false
          this.form3 = {}
        })
      },

      cancel() {
        this.xz = false
        this.peifu = false
        this.resetForm('form')
        this.resetForm('form2')
      }

    }
  }
</script>
<style>
  .father {
    height: 80px;
    line-height: 80px;
    font-size: 25px;
    display: flex;
    justify-content: space-around;
  }

  .el-icon-loading {
    color: green;
    margin-right: 5px;
  }

  .el-icon-message-solid {
    color: green;
    margin-right: 5px;
  }

  .el-icon-check {
    color: green;
    margin-right: 5px;
  }

  .el-icon-coin {
    color: green;
    margin-right: 5px;
  }
</style>
