<template>
  <div class="goods-list p_all_20" v-loading="loading">
    <div class="search-wrap">
      <div class="search-box" :style="{height: searchHeight}">
        <div class="search-item">
          <span class="label">订单编号：</span>
          <el-input class="input"  @keyup.enter.native="onSearch" 
          clearable v-model="params.orderCode" placeholder="请输入订单编号"></el-input>
        </div>
        <div class="search-item">
          <span class="label">状态：</span>
          <el-select
            class="input"
            clearable
            v-model="params.moveType"
            placeholder="请选择"
          >
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></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="180"></el-table-column>
       <el-table-column prop="afterSaleNum" label="售后次数" align="center" width="80"></el-table-column>
       <el-table-column prop="complaintNum" label="投诉次数" align="center" width="80"></el-table-column>
       <el-table-column prop="baseType" label="当前类型" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.baseType==1?'售后':scope.row.baseType==2?'单品投诉':'品牌投诉'}}</div>
          </template>
        </el-table-column>

        <el-table-column prop="updateTime" label="状态" align="center">
          <template slot-scope="scope">
            <div :style="{'color':scope.row.moveTypeContent=='待处理'?'#f60':scope.row.moveTypeContent=='已处理'?'#31B907':''}">{{scope.row.moveTypeContent}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="发起人" align="center" width="200">
          <template slot-scope="scope">
            <div>{{scope.row.sdUserName}}</div>
            <div>{{scope.row.addTime}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="ghRemark" label="备注" align="center">
          <template slot-scope="scope">
            <div>
              <el-tooltip class="item" effect="light" :content="scope.row.ghRemark" placement="top">
                <span class="ellipsis_2">{{scope.row.ghRemark}}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
           <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <div class="edit">
              <span @click="handleToView(scope.row.id)">查看</span>
              <span @click="showRemark(scope.row.id,scope.row.ghRemark)">备注</span>
            </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'

export default {
  name:'salelist',
    components: {
        pagination,orderRemark
  },
  data() {
    return {
      loading: false,
      showMore: false,
      total: 0,
      params: {
         "pageNum":1,
        "pageSize":20,
        "id":"",  //客诉id
        "orderCode":"",//订单code
        "moveType":"" //流转状态 0未处理 1已处理 2已完成
      },
      brandList: [],
      tableData: [],
      tableDataSale:[],
      statusList: [
          {
          value: 0,
          label: "待处理"
          },{
          value: 1,
          label: "已处理"
          },{
          value: 2,
          label: "已结束"
          },
      ],
      tolData:{},
      objPropsRemark:{
        dialogFormVisible:false,
        id:'',
        ghRemark:'',
        url:'/litigation/updateServiceRemark', //商家备注
        scene:'afterSale'
      },
    };
  },
  computed: {
    deg() {
      return this.showMore ? 180 : 0;
    },
    searchHeight() {
      return this.showMore ? "auto" : "47px";
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
         // 备注
      showRemark(id,remark){
          this.objPropsRemark.id = id;
          this.objPropsRemark.ghRemark = 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/details", query: { id } });
    },
    onSearch() {
      this.params.pageNum = 1;
      this.getData();
    },
    onReset(){
      this.params = {
         "pageNum":1,
        "pageSize":20,
        "id":"",  //客诉id
        "orderCode":"",//订单id
        "moveType":"" //流转状态 0未处理 1已处理 2已完成
      }
      this.getData();
    },

    getData() {
      this.loading = true
      let { brandId } = _getStorage('info');
      this.params.brandId =brandId;
      this.$axios.post("/litigation/list", this.params).then(res => {
        let { data, code } = 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
            }
        }
        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;
}
.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;
}
</style>
