<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="68px">
          <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>
            <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="GoodsName"/>
        <el-table-column label="订单号" align="center" prop="OrderSn"/>
        <el-table-column label="订单手机号" align="center" prop="UPhone"/>
        <el-table-column label="退换货原因" align="center" prop="NeedMsg"/>
        <el-table-column label="退换货类型" align="center" prop="UserNeed"/>
        <el-table-column label="处理状态" align="center" prop="ProcessDes"/>
        <el-table-column label="到期时间" align="center" prop="TaskEndtime"/>
        <el-table-column label="申请时间" align="center" prop="Addtime"/>
        <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.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 售后申请信息对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
        <el-col :span="24" class="card-box" v-loading="loading">
          <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.GoodsId}}</div>
                  </td>
                  <td>
                    <div class="cell">商品名</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.GoodsName}}</div>
                  </td>
                  <td>
                    <div class="cell">商品规格</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.SpecDes}}</div>
                  </td>
                  <td>
                    <div class="cell">商品数量</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.Quantity}}</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.Money}}元</div>
                  </td>
                  <td>
                    <div class="cell">运费金额</div>
                  </td>
                  <td>
                    <div class="cell">{{form.order.Freight}}元</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.Tel}}</div>
                  </td>
                  <td>
                    <div class="cell">申请原因</div>
                  </td>
                  <td>
                    <div class="cell" v-text='userMsg(form.retreat.info.needMsg)'></div>
                  </td>
                  <td>
                    <div class="cell">售后类型</div>
                  </td>
                  <td>
                    <div class="cell" v-text='userNeed(form.retreat.info.userNeed)'></div>
                  </td>
                  <td>
                    <div class="cell">退款金额</div>
                  </td>
                  <td>
                    <div class="cell">{{form.retreat.info.refundMoney/100}}元</div>
                  </td>
                  <td>
                    <div class="cell">货物状态</div>
                  </td>
                  <td>
                    <div class="cell" v-text='goodsStatus(form.retreat.info.goodsStatus)'></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box" v-loading="loading" 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="退货地址">
                    <el-option v-for="(item,index) in form.address" :key="item.value" :label="item" v-if="item != '' "
                               :value="getIndex(index)"></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>
    </el-card>
  </div>
</template>
<script>
  import {listRetreat, getRetreat, retreatSubmit} from '@/api/module/retreat'

  export default {
    name: "retreat",

    data() {
      return {
        fullHeight: '',
        tableHeight: 500,
        //退货地址
        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: 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},
        ],
        //状态
        orderInfo: true,
        //拒绝框
        reject: false,
        //退货地址
        reback: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 售后申请信息表格数据
        retreatList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          goodsId: null,
          goodsName: null,
          applyTime: [],
          beginTime: 0,
          endTime: 0,
        },

        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.getList();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })

    },
    watch: {
      fullHeight(val, oldval) {
        // console.log(val)
        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
        this.tableHeight = val - formHeight - 110
      },
      'queryParams.applyTime'() {
        // select组件，clear的时候，将addTimeInterval的值，初始化为null，判断当其值为null时，赋值为数组
        if(!this.queryParams.applyTime && typeof(this.queryParams.applyTime) !== "undefined") {
          this.queryParams.applyTime = [];
          this.queryParams.beginTime = 0;
          this.queryParams.endTime = 0;
        }
      }
    },
    methods: {
      //原因  卖家拒绝（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 {
          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() {
        this.loading = true;
        listRetreat(this.queryParams).then(response => {
          console.log(response.data)
          // for
          this.retreatList = response.data.list;
          this.total = response.data.total;

          this.loading = false;
        });
      },
      // 取消按钮
      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.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.beginTime = 0;
        this.queryParams.endTime = 0;
        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.Id
        getRetreat(id).then(response => {
          this.loading = false;
          console.log("000", response.data)
          this.form = response.data;
          this.open = true;
          this.title = "售后申请信息详情";
        });
      },
      // 取消关闭  详情对话框
      handleCancel() {
        this.open = false;
      },

    } //methods结束
  };
</script>
<style scoped>
  .app-container {
    height: 100%;
  }

  .box-card {
    height: 100%;
  }

  .box-card /deep/ .el-card__body {
    height: 100%;
    overflow: hidden;
  }

  .el-table {
    height: calc(100% - 120px);
  }
</style>
