<template>
  <div class="goods-list p_all_20" v-loading="loading">
    <div class="search-wrap">
      <div class="search-box">
        <div class="search-item">
          <span class="label">售后信息：</span>
          <el-input class="input"  @keyup.enter.native="onSearch" style="width:200px;"
          clearable v-model="params.code" placeholder="请输入订单/售后编号"></el-input>
        </div>
        <div class="search-item">
          <span class="label">发起人：</span>
          <el-input class="input"  @keyup.enter.native="onSearch" style="width:140px;"
          clearable v-model="params.userName" placeholder="请输入发起人名称"></el-input>
        </div>
        <div class="search-item">
          <span class="label">售后类型：</span>
          <el-select
            class="input"
            clearable
            filterable
            v-model="params.type"
            placeholder="请选择"
            style="width:140px;"
          >
            <el-option v-for="item in afterTypeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="label">状态：</span>
          <el-select
            class="input"
            clearable
            v-model="params.status"
            placeholder="请选择"
            style="width:120px;"
          >
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div style="margin-right: 10px">
          <span class="label">售后次数：</span>
          <el-select
            class="input"
            style="width:120px;"
            clearable
            v-model="params.afterSalesNumType"
            placeholder="请选择"
          >
            <el-option v-for="item in [{name:'全部',id:0},{name:'一次售后',id:1},{name:'二次售后',id:2}]"
                       :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="search-btn-box2 search-item">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button  @click="onReset">重置</el-button>

        </div>
      </div>

    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
         stripe
      >
       <el-table-column prop="sdOrderCode" label="售后/订单编号" align="center" width="250">
         <template slot-scope="scope">
            <div style="line-height: 14px;">
              {{scope.row.afterSalesCode}}<br/>
              /<br/>
              {{scope.row.orderCode}}
            </div>
          </template>
       </el-table-column>
      <el-table-column prop="baseType" label="售后信息" align="center" width="280">
        <template slot-scope="scope">
           <div class="goodsInfo" >
                <div class="goodsimg">
                  <img :src="scope.row.goodsImg + '?x-oss-process=image/resize,h_200,w_200'" alt="">
                </div>
                <div class="goodDetails">
                  <div>售后类型：{{scope.row.afterSalesType}}</div>
                  <div>SKU： {{ scope.row.model }}</div>
                </div>
           </div>
        </template>
      </el-table-column>
         <el-table-column prop="updateTime" label="发起人/发起日期" align="center" width="200">
          <template slot="header" slot-scope="scope">
              <el-tooltip class="item" effect="light" placement="top">
                  <div slot="content">发起人/收到售后的时间</div>
                  <span>发起人/发起日期 <i class="el-icon-info"></i></span>
              </el-tooltip>
            </template>
          <template slot-scope="scope">
            <div>{{scope.row.userName}}</div>
            <div>{{scope.row.createDate}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="售后次数" align="center" width="100px">
          <template slot-scope="scope">
            <div>{{scope.row.afterSalesNumTypeStr}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="状态" align="center" width="100px">
          <template slot-scope="scope">
            <div :style="{'color': statusColor(scope.row) }">{{statusStr(scope.row)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <div class="edit">
              <span @click="handleToView(scope.row.afterSalesId)">详情</span>
              <el-tooltip class="item" effect="light" :content="scope.row.remake" placement="top">
                  <div slot="content">{{scope.row.remake?scope.row.remake:'暂无备注'}}</div>
                  <span :style="{'color':scope.row.remake?'#f60':''}" @click="showRemark(scope.row.afterSalesId,scope.row.remake)">我的备注</span>
              </el-tooltip>

            </div>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-box">
        <!-- " -->
        <div></div>
        <pagination
          @eventSizeChange="eventSizeChange"
          @eventCurrentChange="eventCurrentChange"
          :total="total"
          :pageSize="params.pageSize"
          :pageNum="params.pageNum"
        ></pagination>
      </div>
    </div>
      <orderRemark v-if="objPropsRemark.dialogFormVisible"
      :objProps="objPropsRemark"  @resData="cancelFormRemark"></orderRemark>

  </div>
</template>

<script>
import pagination from "@/components/common/pagination";
import { _deepClone, _deal,_getStorage} from '@/utils/utils'
import orderRemark from '@/components/common/orderRemark'
import saleMixin from './modules/saleMixin'

export default {
  name:'indexsalelist',
    components: {
        pagination,orderRemark
  },
  mixins:[saleMixin],
  data() {
    return {
      loading: false,
      showMore: false,
      total: 0,
      params: {
        afterSalesNumType:0,
        "code": null,//订单编号 / 售后编号
        "status": null,//状态 1-待确认 2-待处理 3-已处理 4-已关闭 99-全部
        "type": null,
        "userName": null,
        "brandId": "",//供货商当前选择品牌
        "pageNum": 1,
        "pageSize": 10
      },
      brandList: [],
      tableData: [],
      tableDataSale:[],
      afterTypeList: [],
      statusList: [
        {
          value: 0,
          label: "商家待确认",
          color: '#f60'
        }, {
          value: 1,
          label: "商家待处理",
          color: '#fc3d3f'
        }, {
          value: 2,
          label: "买家待确认",
          color: '#0785dd'
        }, {
          value: 3,
          label: "售后已完成",
          color: '#7fe5b2'
        }, {
          value: 4,
          label: "售后未完成",
          color: '#fcb54a'
        }, {
          value: 5,
          label: "售后已撤销",
          color: '#7f7f7f'
        },
      ],
      tolData:{},
      objPropsRemark:{
        dialogFormVisible:false,
        id:'',
        remake:'',
        url:'/order/editRemake', //备注
        scene:'afterSale'
      },
      afterTypeList: []
    };
  },
  computed: {
    statusStr(){
      return (val)=>{
        const item = this.statusList.find(_item => _item.label == val.status)
        return item?item.label:''
      }
    },
    statusColor(){
      return (val)=>{
        const item = this.statusList.find(_item => _item.label == val.status)
        return item?item.color:''
      }
    },
  },
  mounted() {
    if(this.$route.query.status){
      this.params.status = ~~this.$route.query.status
    }
    this.getData();
    this.getAfterSalesType()
  },
  methods: {
      getAfterSalesType () {
        this.$axios.get("/order/afterSalesType").then(res => {
          let { data, code } = res.data;
          if (code == 200) {
            this.afterTypeList = data;
          }
        }).catch(() => {
          this.$message.error('服务器异常');
        });
      },
         // 备注
      showRemark(id,remark){
          this.objPropsRemark.id = id?id:'';
          this.objPropsRemark.remake = remark?remark:''
          this.objPropsRemark.dialogFormVisible = true;
      },
      cancelFormRemark(res,type){
        this.objPropsRemark.dialogFormVisible = res.state;
        if(type=='ok'){
          this.getData()
        }
      },
    handleToView(id) {
      this.$router.push({ path: "/aftersale/detailsale", query: { id } });
    },
    onSearch() {
      this.params.pageNum = 1;
      this.getData();
    },
    onReset(){
      this.params = {
        afterSalesNumType:0,
         "pageNum":1,
        "pageSize":20,
        "code":null,//订单编号
        "status":null,
        "type":null,
        "userName":null
      }
      this.getData();
    },

    getData() {
      this.loading = true
      let { brandId } = _getStorage('info');
      this.params.brandId =brandId;
      this.params.type = this.params.type || undefined
      this.$axios.post("/order/listToSup", this.params).then(res => {
        let { data, code,message,msg } = res.data;
        if (code == 200) {
           if(data && data.list && data.list.length>0){
              this.total = parseInt(data.total);
              this.tableData =data.list
            }else{
              this.tableData =[]
              this.total =0
            }
        }else{
          this.$message.error(message || msg)
        }
      }).catch(() => {
        this.$message.error('服务器异常');
      }).finally(() => {
        this.loading = false;
      });
    },
    eventSizeChange(e) {
      this.params.pageSize = e;
      this.getData();
    },
    eventCurrentChange(e) {
      this.params.pageNum = e;
      this.getData();
    },
  },

};
</script>

<style lang="scss" scoped>
.goods-list {
  color: #333333;
  box-sizing: border-box;
}
.goodsInfo{
  display: flex;
  text-align: left;
  .goodsimg{
    // border:1px solid #b2b2b2;
    margin-right: 10px;
    position: relative;
    min-width: 50px;
    min-height: 50px;
    img{
      display: block;
      max-width: 100%;
      width: 100%;
      position: absolute;
      top:50%;left: 50%;
      transform: translate(-50%,-50%);
    }
  }
}
.search-wrap {
  .search-box {
    overflow: hidden;
    flex-wrap: wrap;
    display: flex;
    transition: max-height 0.15s ease-in-out;
    .search-item {
      margin-right: 15px;
      margin-bottom: 15px;
      .label {
        display: inline-block;
        width: 74px;
        text-align: right;
        font-size: 14px;
      }
      .input {
        width: 250px;
      }
    }
  }
  .search-btn-box2{
    flex: 1;
    text-align: left;
    .left1{
      margin-left: 10px;
    }
  }
  .search-btn-box {
    margin-bottom: 10px;

    display: flex;
    align-items: center;
    .icon-arrow {
      margin-left: 4px;
      transition: transform 0.25s ease-in-out;
    }
    .more {
      color: #ff6600;
      margin-left: 10px;
      cursor: pointer;
      line-height: 33px;
    }
  }
}
.edit {
  color: #0785dd;
  span {
    cursor: pointer;
    margin: 0 4px;
  }
}
.pagination-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon_vip{
  height: 14px;
  vertical-align: text-bottom;
}
.goodDetails {
  text-align: left;
  line-height: 1em;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
</style>
