<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="82px" class="queryFormInline">
          <el-form-item label="申请时间" prop="applyTime">
            <el-date-picker
              size="small"
              v-model="queryParams.applyTime"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="商品ID" prop="goodsId">
            <el-input
              v-model="queryParams.goodsId"
              placeholder="请输入商品id"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="商品名称" prop="goodsName">
            <el-input
              v-model="queryParams.goodsName"
              placeholder="请输入商品名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="退换货类型" prop="userNeed">
            <el-select v-model="queryParams.userNeed" placeholder="全部原因" size="small" clearable @change="userNeedChange">
              <el-option v-for="item in userNeedOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="退换货原因" prop="needMsg">
            <el-select v-model="queryParams.needMsg" placeholder="全部类型" size="small" clearable @change="needMsgChange">
              <el-option v-for="item in needMsgOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="处理状态" prop="processDes">
            <el-select v-model="queryParams.processDes" placeholder="全部状态" size="small" clearable @change="processDesChange">
              <el-option v-for="item in processDesOptions" :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 icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="retreatList" :height="tableHeight">
        <el-table-column label="序号" align="center" prop="id"/>
        <el-table-column label="商品名称" align="center" prop="goods_title"/>
        <el-table-column label="订单号" align="center" prop="refund_sn"/>
        <el-table-column label="订单手机号" align="center" prop="UPhone"/>
        <el-table-column label="退换货原因" align="center" prop="reason">
          <template slot-scope="scope">
            <span v-if="scope.row.reason==1">协商一致退款</span>
            <span v-if="scope.row.reason==2">质量问题</span>
            <span v-if="scope.row.reason==3">物流问题</span>
            <span v-if="scope.row.reason==4">假冒品牌</span>
            <span v-if="scope.row.reason==5">少件/漏发/破损/污渍</span>
            <span v-if="scope.row.reason==6">7天无理由</span>
            <span v-if="scope.row.reason==7">拍错/多拍/不想要</span>
            <span v-if="scope.row.reason==8">其他</span>
              

          </template>
        </el-table-column>
        <el-table-column label="退换货类型" align="center" prop="refund_type">
          <template slot-scope="scope">
            <span v-if="scope.row.refund_type==1">退款</span>
             <span v-if="scope.row.refund_type==2">退货</span>
              <span v-if="scope.row.refund_type==3">换货</span>
          
          </template>
        </el-table-column>
        <el-table-column label="处理状态" align="center" prop="status">
       <template slot-scope="scope">
          <span v-if="scope.row.reason==-1">关闭</span>
          <span v-if="scope.row.reason==1">用户取消</span>
          <span v-if="scope.row.reason==2">待审核</span>
          <span v-if="scope.row.reason==3">驳回</span>
          <span v-if="scope.row.reason==4">待退货</span>
          <span v-if="scope.row.reason==5">待收货</span>
          <span v-if="scope.row.reason==6">重新发货</span>
          <span v-if="scope.row.reason==7">重新收货</span>
          <span v-if="scope.row.reason==8">待打款</span>
                 <span v-if="scope.row.reason==9">已完成</span>
         </template>
        </el-table-column>
        <!-- <el-table-column label="到期时间" align="center" prop="TaskEndtime"/> -->
        <el-table-column label="申请时间" align="center" prop="created_time">
           <template slot-scope="scope">
            {{formatter(scope.row.created_time)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleInfo(scope.row)"
            >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      />
    </el-card>








     <!-- 售后申请信息对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="80%" class="after-sales-details">
        <el-col :span="24" class="card-box" >
          <el-card>
            <div slot="header">
              <span>订单信息</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
             
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td>
                    <div class="cell">商品图</div>
                  </td>
                  <td>
                    <!-- <div class="cell"><img :src="form.order.Img" alt="" width="120" height="98"></div> -->
                  </td>
                  <td>
                    <div class="cell">商品ID</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.goods_id}}</div>
                  </td>
                  <td>
                    <div class="cell">商品名</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.goods_title}}</div>
                  </td>
                  <td>
                    <div class="cell">商品规格</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.goods_option_title}}</div>
                  </td>
                  <td>
                    <div class="cell">商品数量</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.goods_total}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">订单编号</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.order_sn}}</div>
                  </td>
                  <td>
                    <div class="cell">订单应付金额</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.Money}}元</div>
                  </td>
                  <td>
                    <div class="cell">订单实付金额</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.order_money/100}}元</div>
                  </td>
                  <td>
                    <div class="cell">运费金额</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.dispatch_price/100}}元</div>
                  </td>
                  <td>
                    <div class="cell">商品金额</div>
                  </td>
                  <td>
                    <!-- <div class="cell">{{form.order.SellerMoney}}元</div> -->
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">联系电话</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.receiver_phone}}</div>
                  </td>
                  <td>
                    <div class="cell">申请原因</div>
                  </td>
                  <td>
                    <div class="cell" v-text='userMsg(form.retreat.info.reason)'></div>
                  </td>
                  <td>
                    <div class="cell">售后类型</div>
                  </td>
                  <td>
                    <div class="cell" v-text='userNeed(form.retreat.info.refund_type)'></div>
                  </td>
                  <td>
                    <div class="cell">退款金额</div>
                  </td>
                  <td>
                    <div class="cell">{{form.retreat.info.price/100}}元</div>
                  </td>
                  <td>
                    <div class="cell">货物状态</div>
                  </td>
                  <td>
                    <div class="cell" v-text='goodsStatus(form.retreat.info.order_status)'></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box"  v-if="orderInfo">
          <el-card>
            <div slot="header">
              <span>订单状态</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <!-- 已处理 -->
              <el-row :gutter="30" class="mb8"
                      v-if="form.retreat.info.processDes == 3 && form.retreat.info.userNeed == 1">
                <el-col :span="1.5">
                  {{form.retreat.info.dse}}
                </el-col>
              </el-row>
              <!-- 已处理 -->
              <el-row :gutter="30" class="mb8"
                      v-if="form.retreat.info.processDes == 2 && form.retreat.info.userNeed == 1">
                <el-col :span="1.5">
                  {{form.retreat.info.dse}}
                </el-col>
              </el-row>
              <!-- 仅退款 -->
              <el-row :gutter="30" class="mb8"
                      v-if="form.retreat.info.userNeed == 1 && form.retreat.info.processDes == 1">
                <el-col :span="1.5">
                  <el-button
                    type="success"
                    size="mini"
                    @click="handleagree"
                  >同意
                  </el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleRejectPre"
                  >拒绝
                  </el-button>
                </el-col>
              </el-row>
              <!-- 退货退款 -->
              <el-row :gutter="30" class="mb8" v-if="form.retreat.info.userNeed == 2">
                <el-col :span="1.5">
                  <el-button
                    type="success"
                    size="mini"
                    @click="handleAddress"
                  >同意申请,并发送退货地址
                  </el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleRejectPre"
                  >拒绝
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box" v-if="reject">
          <el-card>
            <div slot="header">
              <span>拒绝信息</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <el-form :model="submitParam" ref="queryForm" label-width="68px">
                <el-form-item label="拒绝原因">
                  <el-select v-model="submitParam.act_cause" placeholder="拒绝原因">
                    <el-option v-for="item in actCause" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                </el-form-item>
                <el-form-item label="详细说明" prop="goods_name">
                  <el-input
                    v-model="submitParam.des"
                    placeholder="请输入商品名称"
                    clearable
                    size="small"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="cyan" size="mini" @click="handleReject">确定提交</el-button>
                  <el-button size="mini" @click="handleRejectCancel">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box" v-if="reback">
          <el-card>
            <div slot="header">
              <span>退货地址</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <el-form :model="submitParam" ref="queryForm" label-width="68px">
                <el-form-item label="退货地址">
                  <el-select v-model="submitParam.address" placeholder="退货地址" style="width:500px;">
                    <el-option v-for="(item,index) in form.address" :key="item.value" :label="item.label" v-if="item != '' "
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                </el-form-item>
                <el-form-item label="退货说明" prop="des">
                  <el-input
                    v-model="submitParam.des"
                    placeholder="可以详细说明原因"
                    clearable
                    size="small"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="cyan" size="mini" @click="handleRefund">确定提交</el-button>
                  <el-button size="mini" @click="handleRebackCancel">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
  import {listRetreat, getRetreat, retreatSubmit,getSearchParams} from '@/api/module/retreat'
import {dateFormat} from '@/utils'
  export default {
    name: "retreat",
    data() {
      return {
        // 遮罩层
        loading: false,
        fullHeight: 0,
        tableHeight: 0,
        //退货地址
        address: [],
        //提交信息
        submitParam: {
          event_id: 0,
          act: "",
          act_cause: 0,
          des: "",
          address: "",
          imgObj: []
        },
        //拒绝原因  1:,2:,3:,4:,5,6:,7:,8:,9:,10:,11:,12:,13:,14:
        actCause: [
          {label: '请选择拒绝原因',value:0},
          {label: "买家要求退款金额过高", value: 1},
          {label: "买家举证无效，商品没问题", value: 2},
          {label: "买家未举证，商品没问题", value: 3},
          {label: "商品已超售后服务时限", value: 4},
          {label: "退回商品后才能退款", value: 5},
          {label: "过期未操作", value: 6},
          {label: "退回的商品影响2次销售", value: 7},
          {label: "已经协商好换货或维修", value: 8},
          {label: "买家家退回的商品不是我店铺的", value: 9},
          {label: "买家填写的退货单号无记录", value: 10},
          {label: "没收到退货，快递还在途中", value: 11},
          {label: "买家擅自使用到货付款", value: 12},
          {label: "买家退回的商品不全", value: 13},
          {label: "其他", value: 14},
        ],
        // 售后类型/退换货类型
        userNeedOptions: [
          {value: -1,label:'全部类型'},
          {value: 1,label: '仅退款'},
          {value: 2,label: '退货退款'},
          {value: 3,label: '客服仲裁'}
        ],
        // 退换货原因
        needMsgOptions: [
          {value: -1,label: '全部原因'},
          {value: 1,label: '协商一致退款'},
          {value: 2,label: '质量问题'},
          {value: 3,label: '物流问题'},
          {value: 4,label: '假冒品牌'},
          {value: 5,label: '少件/漏发/破损/污渍'},
          {value: 6,label: '7天无理由'},
          {value: 7,label: '拍错/多拍/不想要'},
          {value: 8,label: '其他'},
        ],
        // 处理状态
        processDesOptions: [
          {value: -1,label: '全部状态'},
          {value: 1,label: '未处理'},
          {value: 2,label: '处理中'},
          {value: 3,label: '已处理'},
          {value: 4,label: '客服介入'},
        ],
        //状态
        orderInfo: true,
        //拒绝框
        reject: false,
        //退货地址
        reback: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 售后申请信息表格数据
        retreatList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: true,
        // 查询参数
        queryParams: {
          page: 1,
          limit: 10,
          applyTime: [],
          beginTime: '',
          endTime: '',
          goodsId: null,
          goodsName: null,
          userNeed: null,
          needMsg: null,
          processDes: null
        },

        data: {},
        // 表单参数
        form: {
          retreat: {info: {needMsg: 0}},
          order: {},
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      };
    },
    created() {
      this.getParams();
      this.getList();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })
    },
    watch: {
      fullHeight(val) {
        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
        this.tableHeight = val - formHeight - 120
      },
      'queryParams.applyTime'() {
        // select组件，clear的时候，将addTimeInterval的值，初始化为null，判断当其值为null时，赋值为数组
        if(!this.queryParams.applyTime && typeof(this.queryParams.applyTime) !== "undefined") {
          this.queryParams.applyTime = [];
          this.queryParams.beginTime = '';
          this.queryParams.endTime = '';
        }
      }
    },
    methods: {
       formatter(time) {
        return dateFormat(time, 'Y-m-d H:i:s')
      },
      getParams() {
        getSearchParams().then(res => {
          if(res.userNeed && res.userNeed.length > 0) {
            this.userNeedOptions = res.userNeed;
          }
          if(res.needMsg && res.needMsg.length > 0) {
            this.needMsgOptions = res.needMsg;
          }
          if(res.processDes && res.processDes.length > 0) {
            this.processDesOptions = res.processDes;
          }
        });
      },
      //原因  卖家拒绝（1:买家要求退款金额过高2:买家举证无效，商品没问题3:买家未举证，商品没问题4:商品已超售后服务时限5:退回商品后才能退款6:过期未操作,7:其他）
      actCauses(actCause) {
        if (actCause == 1) {
          return "买家要求退款金额过高"
        } else if (actCause == 2) {
          return "买家举证无效，商品没问题"
        } else if (actCause == 3) {
          return "买家未举证，商品没问题"
        } else if (actCause == 4) {
          return "商品已超售后服务时限"
        } else if (actCause == 5) {
          return "退回商品后才能退款"
        } else if (actCause == 6) {
          return "过期未操作"
        } else if (actCause == 7) {
          return "其他"
        } else {
          return "未知"
        }
      },
      //行为1：同意：2拒绝3：客服介入4：撤销 5:发送收货地址 6：同意收货 7:买家上传物流信息
      act(act) {
        if (act == 1) {
          return "同意"
        } else if (act == 2) {
          return "拒绝"
        } else if (act == 3) {
          return "客服介入"
        } else if (act == 4) {
          return "撤销"
        } else if (act == 5) {
          return "发送收货地址"
        } else if (act == 6) {
          return "同意收货"
        } else if (act == 7) {
          return "买家上传物流信息"
        } else {
          return "未知"
        }
      },
      //角色 1:2：3：客服 4：系统
      role(id) {
        if (id == 1) {
          return "商家操作"
        } else if (id == 2) {
          return "用户操作"
        } else if (id == 3) {
          return "客服操作"
        } else if (id == 4) {
          return "系统操作"
        } else {
          return "未知"
        }
      },
      // //获取地址后缀id
      // getIndex(index) {
      //   index = index.slice(14);
      //   return index
      // },
      //商品状态  0:,1:,2:,3
      goodsStatus(status) {
        if (status == 0) {
          return "待付款"
        } else if (status == 1) {
          return "待发货"
        } else if (status == 2) {
          return "待收货"
        } else if (status == 3) {
          return "已完成"
        } else if (status == 4){
          return "已结算"
        }else if (status == -1){
          return "订单取消"
        }
      },
      userNeed(ids) { //1:：2：3：
        if (ids == 1) {
          return "仅退款"
        } else if (ids == 2) {
          return "退款退货"
        } else if (ids == 3) {
          return "客服仲裁"
        } else {
          return "未知"
        }
      },
      userMsg(typs) {
        if (typs == 1) {
          return "协商一致退款"
        } else if (typs == 2) {
          return "质量问题"
        } else if (typs == 3) {
          return "物流问题"
        } else if (typs == 4) {
          return "假冒品牌"
        } else if (typs == 5) {
          return "少件/漏发/破损/污渍"
        } else if (typs == 6) {
          return "7天无理由"
        } else if (typs == 7) {
          return "拍错/多拍/不想要"
        } else {
          return "其他"
        }
      },

      /** 查询售后申请信息列表 */
      getList() {
        listRetreat(this.queryParams).then(res => {
          if(res.data) {
            this.retreatList = res.data.data;
            this.total = res.data.count;
          }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          "order": [],
          "retreat": []

        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if(this.queryParams.applyTime.length === 2) {
          this.queryParams.beginTime = new Date(this.queryParams.applyTime[0]).getTime() / 1000;
          this.queryParams.endTime = new Date(this.queryParams.applyTime[1]).getTime() / 1000;
        }
        this.queryParams.page = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.beginTime = '';
        this.queryParams.endTime = '';
        this.handleQuery();
      },
      //同意申请并发货
      handleAddress() {
        this.orderInfo = false
        this.reject = false
        this.reback = true
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      handleRejectCancel() {
        this.orderInfo = true
        this.reject = false
      },
      handleRejectPre() {
        this.orderInfo = false
        this.reject = true
      },
      handleRebackCancel() {
        this.reject = false
        this.reback = false
        this.orderInfo = true
      },
      //同意申请并发送收货地址
      handleRefund() {
        const id = this.form.retreat.info.id
        this.loading = true;
        this.submitParam.event_id = id
        this.submitParam.act = "send-dz"
        retreatSubmit(this.submitParam).then(response => {
          // console.log("同意申请并发送收货地址",response)
          if (response.code == 0) {
            this.msgSuccess(response.msg);
          }
          this.loading = false;
        });
      },
      //拒绝操作提交
      handleReject() {
        const id = this.form.retreat.info.id
        this.loading = true;
        this.submitParam.event_id = id
        this.submitParam.act = "reject"
        retreatSubmit(this.submitParam).then(response => {
          if (response.code == 0) {
            this.msgSuccess(response.msg);
          }
         // console.log("拒绝提交返回", response)
          this.loading = false;
        });
      },

      /** 同意按钮操作 */
      handleagree() {
        const id = this.form.retreat.info.id
        this.loading = true;
        this.submitParam.event_id = id
        // this.submitParam.money=id
        this.submitParam.act = "agree"
        retreatSubmit(this.submitParam).then(response => {
          if (response.code == 0) {
            this.msgSuccess(response.msg);
          }
          // console.log("确定提交返回",response)
          this.loading = false;
        });
      },
      /** 查看详情 */
      handleInfo(row) {
        // this.loading = true;
        // this.reset();
        const id = row.refund_sn
        getRetreat(id).then(response => {
          this.loading = false;
          //console.log("000", response.data)
          this.form.order = response.data;
          this.open = true;
          this.title = "售后申请信息详情";
        });
      },
      // 取消关闭  详情对话框
      handleCancel() {
        this.open = false;
      },
      //
      userNeedChange(val) {
        if(val === '') {
          this.queryParams.userNeed = null;
        }
      },
      needMsgChange(val) {
        if(val === '') {
          this.queryParams.needMsg = null;
        }
      },
      processDesChange(val) {
        if(val === '') {
          this.queryParams.processDes = null;
        }
      }

    } //methods结束
  };
</script>
<style scoped lang="scss" type="text/stylus">
  /deep/.queryFormInline {
    .el-form-item {
      margin-bottom: 5px ;
    }
  }
</style>
