<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 状态页签 -->
      <el-tabs v-model="activeName" @tab-click="handleClick" class="after-sale-tabs">
          <el-tab-pane label="未处理" name="first"></el-tab-pane>
          <el-tab-pane label="处理中" name="second"></el-tab-pane>
          <el-tab-pane label="已完成" name="third"></el-tab-pane>
        </el-tabs>
      <!-- 搜索条件 -->
      <el-form class="form-params" :model="queryParams" label-width="auto" :inline="true" size="small">
        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker
            v-model="queryParams.applyTime"
            type="daterange"
            align="left"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="applyTimeChange"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="商品ID" prop="goods_id">
          <el-input
            v-model="queryParams.goods_id"
            placeholder="请输入商品id"
            clearable
            @keyup.enter.native="handleQuery"
          /></el-form-item>

        <el-form-item label="商品名称" prop="goods_title">
          <el-input
            v-model="queryParams.goods_title"
            placeholder="请输入商品名称"
            clearable
            @keyup.enter.native="handleQuery"
          /></el-form-item>

        <el-form-item label="退换货类型" prop="refund_type">
          <el-select v-model="queryParams.refund_type" placeholder="全部类型" clearable >
            <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="goods_order_sn">
          <el-input
            v-model="queryParams.goods_order_sn"
            placeholder="请输入订单号"
            clearable
            @keyup.enter.native="handleQuery"
          /></el-form-item>

        <el-form-item label="退换货原因" prop="reason">
          <el-select v-model="queryParams.reason" placeholder="全部类型" size="small" clearable >
            <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>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table class="after-sale-table" :data="afterSaleList" :height="afterSaleHeight">
        <el-table-column label="商品ID" align="center" width="150" prop="goodsId"></el-table-column>
        <el-table-column label="商品名称" align="center" width="180" prop="title"></el-table-column>
        <el-table-column label="订单号" align="center" width="240" prop="goods_order_sn"></el-table-column>
        <el-table-column label="退换货类型" align="center" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.refund_type == 1">仅退款</span>
            <span v-if="scope.row.refund_type == 2">退货退款</span>
          </template>
        </el-table-column>
        <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>
          </template>
        </el-table-column>
        <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" prop="deadline">
          <template slot-scope="scope">
            {{formatter(scope.row.deadline)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleInfo(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-con">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { getRetreatList } from '@/api/module/retreat'
  import { dateFormat } from '@/utils'
  export default {
    name: "Index",
    data() {
      return {
        goodsStatus: 1,
        activeName: 'first',
        queryParams: {
          applyTime: [],
          goods_id: '',
          goods_title: '',
          refund_type: '',
          goods_order_sn: '',
          reason: '',
        },
        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]);
            }
          }]
        },
        // 退换货类型
        userNeedOptions: [
          {value: -1,label: '全部类型'},
          {value: 1,label: '仅退款'},
          {value: 2,label: '退货退款'},
        ],
        // 退换货原因
        needMsgOptions: [
          {value: -1,label: '全部原因'},
          {value: 3,label: '协商一致退款'},
          {value: 1,label: '其他'},
          {value: 2,label: '漏发'},
          {value: 4,label: '质量不符'},
        ],
        fullHeight: 0,
        afterSaleHeight: 200,
        currentPage: 1,
        pageSize: 10,
        total: 0,
        // 售后列表
        afterSaleList: [],

      }
    }, // data end
    watch: {
      fullHeight(val) {
        let formHeight = document.getElementsByClassName('form-params')[0].clientHeight;
        let tabsHeight = document.getElementsByClassName('after-sale-tabs')[0].clientHeight;
        this.afterSaleHeight = val - formHeight -tabsHeight - 40 - 40
      }
    },
    created() {
      this.getList();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })
    },
    mounted() {

    },
    methods: {
      /** 顶部 状态页签切换
       * 1-未处理；2-处理中；3-已完成
       * */
      handleClick() {
        switch (this.activeName) {
          case 'first':
            this.goodsStatus = 1
            break
          case 'second':
            this.goodsStatus = 2
            break
          case 'third':
            this.goodsStatus = 3
            break
          default:
            break
        }
        // 搜索条件初始化
        this.resetSearchParams();
        // 列表 查询
        this.getList();
      },
      /** 时间格式处理 */
      applyTimeChange() {
        if( !Array.isArray(this.queryParams.applyTime) ) {
          this.queryParams.applyTime = [];
        }
      },
      /** 列表查询 */
      getList() {
        let params = {
          page: this.currentPage,
          limit: this.pageSize,
          status: this.goodsStatus,
          apply_start_time: '',
          apply_end_time: '',
          goods_id: this.queryParams.goods_id,
          goods_title: this.queryParams.goods_title,
          refund_type: '',
          goods_order_sn: '',
          reason: ''
        }
        // console.log('queryParams：',this.queryParams);
        //console.log('传向后台的参数：',params);

        if( this.queryParams.applyTime.length === 2) {
          params.apply_start_time = new Date(this.queryParams.applyTime[0]).getTime() / 1000
          params.apply_end_time = new Date(this.queryParams.applyTime[1]).getTime() / 1000
        }else {
          params.apply_start_time = ''
          params.apply_end_time = ''
        }

        if (this.queryParams.refund_type === -1) {
          params.refund_type = ''
        }else {
          params.refund_type = this.queryParams.refund_type;
        }

        if (this.queryParams.reason === -1) {
          params.reason = ''
        }else {
          params.reason = this.queryParams.reason;
        }

        getRetreatList(params).then(res=> {
          if(res.code === 1) {
            this.afterSaleList = res.data.data;
            this.total = res.data.count;
          }
        });

      },
      /** 重置 操作 */
      resetQuery() {
        this.resetSearchParams();
        this.getList();
      },
      /** 售后 订单 详情 */
      handleInfo(row) {
        let id = row.refund_sn ? row.refund_sn : 0;
        this.$router.push({
          path: '/system/repeat/edit',
          query: { refund_sn: id }
        });
      },
      /** 调整 列表当前页面 最大展示条数 */
      handleSizeChange(val) {
        this.pageSize = val;
        // this.getList();
      },
      /** 列表 跳转到 第 几 页 */
      handleCurrentChange(val) {
        this.currentPage = val
        // this.getList();
      },
      /** 搜索条件初始化 */
      resetSearchParams() {
        this.pageSize = 10;
        this.currentPage = 1;
        // this.goodsStatus = 1;
        this.queryParams = {
          applyTime: [],
          goods_id: '',
          goods_title: '',
          refund_type: '',
          goods_order_sn: '',
          reason: '',
        }
      },
      /** 搜索条件 键盘enter */
      handleQuery() {

      },
      /** 时间戳转化 格式化 */
      formatter(time) {
        return dateFormat(time * 1000, 'Y-m-d H:i:s')
      },
    } // methods end
  }
</script>

<style scoped>
  /deep/  .el-dialog__body{
    height: 100%;
    overflow:hidden;
  }
  /deep/.after-sale-tabs .el-tabs__item {
    line-height: 30px;
  }
  /deep/.el-form--inline .el-form-item {
    margin-right: 15px;
  }
  .pagination-con {
    text-align: center;
    margin-top: 15px;
  }
</style>
