<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="shopId" v-if="this.$auth.hasPermi('system:gameAftermarket:all')">
          <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 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="status">
          <el-select style="width: 100%" v-model="queryParams.status" filterable 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="gameId">
          <el-select style="width: 100%" v-model="queryParams.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-form-item label="游戏账号" prop="gameAccount">
          <el-input v-model="queryParams.gameAccount" style="width: 200px;" placeholder="请输入游戏账号" clearable
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
      </el-row>


      <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> -->
      </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="shopName" label="店铺名称">
      </el-table-column>
      <el-table-column prop="acquirePrice" label="收购价格">
      </el-table-column>
      <el-table-column prop="gameAccount" label="游戏账号">
      </el-table-column>
      <el-table-column prop="gameName" label="游戏名称">
      </el-table-column>
      <!--<el-table-column prop="status" label="售后状态" width="100px">-->
        <!--<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>-->
          <!--<span v-if="scope.row.status=='3'">售后已退款</span>-->
          <!--<span v-if="scope.row.status=='4'">售后已还号</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="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="remark" label="备注">
      </el-table-column>
      <el-table-column prop="createBy" label="申报人">
      </el-table-column>
      <el-table-column prop="createTime" label="申报时间">
      </el-table-column>

      <el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" v-if="scope.row.aftermarketId!=0"
                     v-hasPermi="['system:gameAftermarket:add']" @click="handlelook(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="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="acquirePrice">
                <el-input v-model="form1.acquirePrice" disabled placeholder="请输入收购价格"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属游戏" prop="gameId">
                <el-select style="width: 100%" 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="gameAccount">
                <el-input v-model="form1.gameAccount" 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="saleStaus">
                <el-select style="width: 100%" v-model="form1.saleStaus" placeholder="请选择是否出售">
                  <el-option v-for="item in saleoptions" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form1.saleStaus=='1'">
              <el-form-item label="订单编号" prop="paymentId">
                <el-input v-model="form1.paymentId" placeholder="请输入订单编号"/>
              </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" 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="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"
                           :before-upload="beforeAvatarUpload" :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-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 v-if="ckjd" title="售后进度" :visible.sync="ckjd" append-to-body width="1000px">
      <el-table :data="jdTableData" style="width: 100%">
        <el-table-column prop="nickName" label="操作人" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.createBy!='1'">{{scope.row.nickName}}</span>
            <span v-else>客服</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="createById" label="操作人Id" width="180">
                </el-table-column> -->
        <el-table-column prop="createTime" label="操作时间">
        </el-table-column>
        <el-table-column prop="status" label="进度类型">
        </el-table-column>
        <el-table-column prop="remark" label="操作内容">
        </el-table-column>
      </el-table>
    </el-dialog>


  </div>
</template>

<script>
  import {
    getSysDeptInfo,
    getDeptInfo,
    accountMonitoring,
    add,
    upData,
    getPhone,
    view,
    deletePhone,
    getPaymentInfo,
    updateOriginalPrice,
    getTBusGoodsPaymentSum,
    updatePaymentStatus,
    paginQuery,
    paginQueryAdd,
    orderInfo,
    getShlist
  } from '@/api/data/afterSalesOrder'
  import {
    getInitGoodsManager
  } from '@/api/data/goods'
  import {
    queryTBusShop,
    getTBusShopInfo
  } 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'],
    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 {
        ckjd: false,
        jdTableData: [],
        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,
        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'
          }],
          aftermarketType: [{
            required: true,
            message: '请选择售后类型',
            trigger: 'blur'
          }],
          paymentId: [{
            required: true,
            message: '请输入订单编号',
            trigger: 'blur'
          }],
          level: [{
            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: '氪金兽'
        }],
        saleoptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        shTypeoptions: [{
          value: '0',
          label: '找回'
        }, {
          value: '1',
          label: '冻结'
        }, {
          value: '2',
          label: '其他'
        }],
        csoptions: [{
          value: 'goods_status_3',
          label: '已售'
        }, {
          value: '',
          label: '未售'
        }],
        shdjoptions: [{
          value: '1',
          label: '售后一级'
        }, {
          value: '2',
          label: '售后二级'
        }],
        lsOptions: [{
          value: 'Y',
          label: '是'
        }, {
          value: 'N',
          label: '否'
        }],
        hhoptions: [{
          value: 'Y',
          label: '是'
        }, {
          value: 'N',
          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,
          status: '0',
          shopId: '',
          beginTime: '',
          endTime: ''
        },

        // 表单参数
        form1: {
          level: 1
        }
      }
    },
    created() {
      this.getShopInfo()
      this.initGoodsManager()
      this.loadAll() //获取店铺
    },
    methods: {
      // 上传成功
      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
        })
      },
      /** 查看按钮操作 */
      handlelook(item) {
        getShlist(item.id).then(res => {
          if (res.rows.length != 0) {
            this.ckjd = true
            this.jdTableData = res.rows
          } else {
            this.$modal.msgError('暂无进度')
          }
        })
      },

      /** 删除按钮操作 */
      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(() => {
        })
      },
      getShopInfo() {
        getTBusShopInfo().then(res => {
          if (res.msg) {
            this.queryParams.shopId = res.data.id
          } else { //admin/分销/买号
            this.queryParams.shopId = ''
          }
          this.getList()
        })
      },
      /** 查询账号信息列表 */
      getList() {
        this.loading = true
        accountMonitoring(this.queryParams).then(response => {
          this.tableData = response.data.table.rows
          this.total = response.data.table.total
          this.loading = false
        })
      },

      /** 搜索按钮操作 */
      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.level = '1'
              this.form1.staus = '0'
              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)
              }
            })
          }
        })
      },

      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>
