<template>
    <div class="p_all_20 bigbiv">
         <div class="tabsbox">
            <div>
                <!--  type="card" -->
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="售后工单" name="sale" disabled></el-tab-pane>
                    <el-tab-pane label="投诉工单" name="complain" disabled></el-tab-pane>
                </el-tabs>
            </div> 
            <div class="btnbox">
                <el-dropdown class="item"  @command="handleCommand" trigger="click">
                    <span class="el-dropdown-link" v-if="historyList && historyList.length>0">
                        {{historyListInit['name']}}<span class="p_l_10">{{historyListInit['addTime']}}</span> <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" v-if="historyList && historyList.length>0">
                        <el-dropdown-item :command="item" v-for="(item,index) in historyList" :key="index">{{item.name}} <span class="p_l_20">{{item.addTime}}</span> </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <section class="bigwrap" v-loading="loading">
            <div class="searchTop m_b_10" v-if="activeName=='complain'">
                <div class="search-item">
                <span class="label">类型：</span>
                <el-select
                    class="input"
                    clearable
                    filterable
                    v-model="baseType"
                    placeholder="请选择类型"
                    disabled
                >
                    <el-option v-for="item in complainList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                </div>
            </div>
            <!-- 售后--经销商 -->
            <el-steps :active="detailsInfo.moveType+1" align-center finish-status="success" v-if="baseType==1 && detailsInfo.isSd==0">
                <el-step title="发起申请" description="买家发起申请"></el-step>
                <el-step title="抛单处理" description="城市服务运营中心客服抛转"></el-step>
                <el-step title="商家处理" description="收到申请，商家处理中"></el-step>
                <el-step title="回抛确认" description="城市服务运营中心客服抛转"></el-step>
                <el-step title="确认解决" description="买家确认商家是否已解决"></el-step>
            </el-steps>
            <!-- 售后---市代 -->
            <el-steps :active="detailsInfo.moveType" align-center finish-status="success" v-if="baseType==1 && detailsInfo.isSd==1">
                <el-step title="发起申请" description="买家发起申请"></el-step>
                <el-step title="商家处理" description="收到申请，商家处理中"></el-step>
                <el-step title="确认解决" description="买家确认商家是否已解决"></el-step>
            </el-steps>
            <!-- 投诉---经销商 -->
            <el-steps :active="moveTypeSteps || detailsInfo.moveType+1" 
            align-center finish-status="success" v-if="baseType!==1 && detailsInfo.isSd==0">
                <el-step title="发起申请" description="买家发起申请"></el-step>
                <el-step title="抛单处理" description="城市服务运营中心客服抛转"></el-step>
                <el-step title="平台介入" description="E淘客服介入调查"></el-step>
                <el-step title="商家处理" description="收到申请，商家处理中"></el-step>
                <el-step title="平台核实" description="E淘客服核实"></el-step>
                <el-step title="回抛确认" description="城市服务运营中心客服抛转"></el-step>
                <el-step title="确认解决" description="买家确认商家是否已解决"></el-step>
            </el-steps>
            <!-- 投诉---市代 -->
            <el-steps :active="moveTypeSteps || detailsInfo.moveType" 
            align-center finish-status="success" v-if="baseType !==1 && detailsInfo.isSd==1">
                <el-step title="发起申请" description="买家发起申请"></el-step>
                <el-step title="平台介入" description="E淘客服介入调查"></el-step>
                <el-step title="商家处理" description="收到申请，商家处理中"></el-step>
                <el-step title="平台核实" description="E淘客服核实"></el-step>
                <el-step title="确认解决" description="买家确认商家是否已解决"></el-step>
            </el-steps>
            <div class="contentBig m_t_20">
                <!-- info -->
                <div class="infobig">
                    <div class="portLeft">
                        <div class="titPart">
                            <div class="left">工单状态：<span class="f_c_f60">{{detailsInfo.moveTypeContent}}</span></div>
                        </div>
                         
                               <!-- 投诉工单---商家回复 -->
                        <div class="complain_platform" v-if="(detailsInfo.isSd==1 && detailsInfo.moveType==1) 
                        || (detailsInfo.isSd==0 && detailsInfo.moveType==1) 
                        || (this.detailsInfo.moveType ==5 && this.baseType !== 1 && this.detailsInfo.isSd ==0) 
                        || (this.detailsInfo.moveType ==5 && this.baseType !== 1 && this.detailsInfo.isSd ==1)">
                            <div class="m_t_20 m_b_20 f_w">商家回复：</div>
                            <el-form
                                ref="ruleForm"
                                label-width="100px"
                                :model="paramsCompalin"
                                :rules="rules"
                            >
                                <el-form-item label="上传凭证">
                                <template>
                                    <div>
                                        <div class="imgsizeCom compalin_img">
                                            <uploadImg ref="uploadImgRef" @uploadResult="uploadResult" 
                                        :isMultiple="true" :limitNum='3' :hideLength="3"></uploadImg>
                                        </div>
                                    </div>
                                </template>
                                </el-form-item>
                                <el-form-item label="文字描述" prop="explainContent">
                                <template>
                                    <div>
                                       <el-input
                                        type="textarea"
                                        :rows="3"
                                        placeholder="请输入内容"
                                        v-model="paramsCompalin.explainContent">
                                        </el-input>
                                    </div>
                                </template>
                                </el-form-item>
                                <el-form-item>
                                     <el-button type="primary" @click="onSave('ruleForm')">确定</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <p class="f_w f_16 m_t_20 m_b_20">协商历史</p>
                         <div class="overflowAuto">

                          <!-- 发起人 end -->
                         <div class="timeStatus" v-if="detailsInfo.moveType ==4">
                            <div class="userItem">
                                <img class="imgUser" src="@/assets/img/defphoto.png" alt="">
                                <div class="rightdiv m_l_10">
                                    <p class="p1">{{detailsInfo.sdUserName}}(发起人)：<span class="p_l_20">{{detailsInfo.confirm}}</span></p>
                                    <p class="p2">{{detailsInfo.moveTypeContent}}，工单结束</p>
                                </div>
                            </div>
                        </div>
                          <!-- E淘平台 核实-->
                         <div class="timeStatus" v-if="baseType !==1 && detailsInfo.moveType>=3 && detailsInfo.moveType!=5">
                            <div class="userItem">
                                <img class="imgUser" src="@/assets/img/defetao.png" alt="">
                                <div class="rightdiv m_l_10">
                                    <p class="p1">E淘平台(核实) <span>{{detailsInfo.returnPlatformAddTime}}</span></p>
                                    <p class="p2">{{detailsInfo.returnPlatformExplain}}</p>
                                </div>
                            </div>
                            <div class="imgShow" v-if="detailsInfo.returnPlatformImage">
                                <el-image 
                                class="elImageStyle"
                                 v-for="(item,index) in detailsInfo.returnPlatformImage.split(',')"
                                :key="index"
                                   :src="item" 
                                    :preview-src-list="[item]">
                                </el-image>
                            </div>
                        </div>
                        <!-- 商家回复 -->
                        <div class="timeStatus" v-if="detailsInfo.moveType>=2 && detailsInfo.moveType !=5">
                            <div class="userItem">
                                <img class="imgUser" v-if="detailsInfo.logImage" :src="detailsInfo.logImage" alt="">
                                <img class="imgUser" v-else src="@/assets/img/defaultPic.jpg" alt="">
                                
                                <div class="rightdiv m_l_10">
                                    <p class="p1">{{detailsInfo.brandName}}(商家回复)： <span class="p_l_20">{{detailsInfo.ghAddTime}}</span></p>
                                    <p class="p2">{{detailsInfo.ghExplain}}</p>
                                </div>
                            </div>
                            <div class="imgShow" v-if="detailsInfo.ghVoucherImage">
                                <el-image 
                                class="elImageStyle"
                                v-for="(item,index) in detailsInfo.ghVoucherImage.split(',')"
                                :key="index"
                                    :src="item" 
                                    :preview-src-list="detailsInfo.ghVoucherImage.split(',')">
                                </el-image>
                            </div>
                        </div>
                        <!-- E淘平台 介入-->
                         <div class="timeStatus" v-if="baseType !==1 &&  detailsInfo.moveType>=2">
                            <div class="userItem">
                                <img class="imgUser" src="@/assets/img/defetao.png" alt="">
                                <div class="rightdiv m_l_10">
                                    <p class="p1">E淘平台(介入)：<span class="p_l_20">{{detailsInfo.platformAddTime}}</span></p>
                                    <p class="p2">{{detailsInfo.platformExplain}}</p>
                                </div>
                            </div>
                            <div class="imgShow" v-if="detailsInfo.platformVoucherImage">
                                <el-image 
                                class="elImageStyle"
                                 v-for="(item,index) in detailsInfo.platformVoucherImage.split(',')"
                                :key="index"
                                   :src="item" 
                                    :preview-src-list="detailsInfo.platformVoucherImage.split(',')">
                                </el-image>
                            </div>
                        </div>
                        <!-- 发起人 start -->
                         <div class="timeStatus">
                            <div class="userItem">
                                <img class="imgUser" src="@/assets/img/defphoto.png" alt="">
                                <div class="rightdiv m_l_10">
                                    <p class="p1">{{detailsInfo.sdUserName}}(发起人)：<span class="p_l_20">{{detailsInfo.addTime}}</span></p>
                                    <p class="p2">{{detailsInfo.explainTob}}</p>
                                </div>
                            </div>
                            <div class="imgShow" v-if="detailsInfo.voucherImage">
                                <el-image 
                                class="elImageStyle"
                                 v-for="(item,index) in detailsInfo.voucherImage.split(',')"
                                :key="index"
                                    :src="item" 
                                    :preview-src-list="detailsInfo.voucherImage.split(',')">
                                </el-image>
                         
                            </div>
                        </div>
                                                     
                         </div>
                        
                  
                    </div>
                    <div class="portRight">
                        <div class="titPart">
                            <div class="left">工单信息</div>
                        </div>
                        <template v-if="detailsInfo.products && detailsInfo.products.length>0 && baseType !==3">
                            <div class="infoImg" v-for="(item,index) in detailsInfo.products" :key="index">
                                <div class="imgdiv">
                                    <img :src="item.image" alt="">
                                </div>
                                <div class="textdiv">
                                    <p class="name f_14 ellipsis_2">{{item.productInfo}}</p>
                                    <p class="pp">规格：{{item.spec}}</p>
                                    <p class="pp">供货价：¥{{item.settleSupplyPrice}}</p>
                                </div>
                            </div>
                        </template>
                        <ul class="ulbox ulbox1 m_t_10">
                            <li>
                                <span class="s1">品牌名称：</span>
                                <span class="s2">{{detailsInfo.brandName}}</span>
                            </li>
                            <li>
                                <span class="s1">订单编号：</span>
                                <span class="s2">{{detailsInfo.sdOrderCode}}</span>
                            </li>
                            <li>
                                <span class="s1">发起人：</span>
                                <span class="s2">{{detailsInfo.sdUserName}}</span>
                            </li>
                            <li>
                                <span class="s1">联系电话：</span>
                                <span class="s2">{{detailsInfo.sdPhoneNumber}}</span>
                            </li>
                        </ul>
                        <ul class="ulbox ulbox2 p_t_10">
                            <li>
                                <span class="s1">{{baseType==1?'售后':'投诉'}}编号：</span>
                                <span class="s2">{{detailsInfo.orderCode}}</span>
                            </li>
                            <li>
                                <span class="s1">发起日期：</span>
                                <span class="s2">{{detailsInfo.addTime}}</span>
                            </li>
                            <li>
                                <span class="s1">{{baseType==1?'售后':'投诉'}}类型：</span>
                                <span class="s2">{{detailsInfo.postSaleTypeContent}}</span>
                            </li>
                            <li>
                                <span class="s1">{{baseType==1?'售后':'投诉'}}原因：</span>
                                <span class="s2">{{detailsInfo.postSaleReasonContent}}</span>
                            </li>
                            <li>
                                <span class="s1">{{baseType==1?'售后':'投诉'}}说明：</span>
                                <span class="s2">{{detailsInfo.explainTob}}</span>
                            </li>
                        </ul>
                        <template v-if="baseType !==3">
                            <div class="titPart titTop0">
                                <div class="left">补发地址</div>
                            </div>
                            <ul class="ulbox ulbox3" v-if="detailsInfo.addressMap">
                                <li>
                                    <span class="s1">收货人：</span>
                                    <span class="s2">{{detailsInfo.addressMap.receiver}}</span>
                                </li>
                                <li>
                                    <span class="s1">收货电话：</span>
                                    <span class="s2">{{detailsInfo.addressMap.mobilePhone}}</span>
                                </li>
                                <li>
                                    <span class="s1">收货地址：</span>
                                    <span class="s2">{{detailsInfo.addressMap.addressName}}</span>
                                </li>
                            </ul>     
                        </template>
                        <div class="titPart titTop0" v-if="detailsInfo.ghRemark">
                            <div class="left">备注</div>
                        </div>
                        <p class="remark">{{detailsInfo.ghRemark}}</p>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import uploadImg from "@/components/common/uploadImg"
// `baseType` '基础类型 1 售后申请 2 商品投诉 3品牌投诉 ',
// "moveType": 0,//0发起申请 1市代流转 2商家流转 3 回流转市代 4确认解决 5流转平台 6 回流平台',
// "moveType": //经销商为0，市代为1 == 发起申请,
// moveType=4为确认解决。无能什么类型的客诉单
// isSd：0经销商，1市代
// 供货商  (售后) 2  (投诉)7
// 运营中心  (流转)5   (回流)  6
import merge from 'webpack-merge';
export default {
    name:'saledetails',
    components: {
        uploadImg
    },
    computed:{
        moveTypeSteps(){
            // 投诉 步骤
            if(this.detailsInfo.moveType ==5 && this.baseType !== 1 && this.detailsInfo.isSd ==0){
                return 3 //投诉 -- 经销商的 平台介入
            }else if(this.detailsInfo.moveType ==2 && this.baseType !== 1 && this.detailsInfo.isSd ==0){
                return 4
            }else if(this.detailsInfo.moveType ==6 && this.baseType !== 1 && this.detailsInfo.isSd ==0){
                return 5
            }else if(this.detailsInfo.moveType ==3 && this.baseType !== 1 && this.detailsInfo.isSd ==0){
                return 6
            }else if(this.detailsInfo.moveType ==4 && this.baseType !== 1 && this.detailsInfo.isSd ==0){
                return 7
            }else if(this.detailsInfo.moveType ==5 && this.baseType !== 1 && this.detailsInfo.isSd ==1){
                return 2 //市代
            }else if(this.detailsInfo.moveType ==2 && this.baseType !== 1 && this.detailsInfo.isSd ==1){
                return 3 
            }else if(this.detailsInfo.moveType ==6 && this.baseType !== 1 && this.detailsInfo.isSd ==1){
                return 4 
            }else if(this.detailsInfo.moveType ==4 && this.baseType !== 1 && this.detailsInfo.isSd ==1){
                return 5 
            }
        }
    },
    data(){
        return {
            activeName:'sale',
            baseType:1,
            searchParam: {
                id:''
            },
            detailsInfo:{},
            paramsCompalin:{
                "id":"",//客诉id
                "voucherImage":"",//多张图片逗号隔开
                "explainContent":"",//文本内容
                "plateFrom":null,
                    //  售后 1市代已经流转->2供货商已经流转->3市代确认->4确认
                    //  投诉 1市代已经流转->5平台已经流转->7供货商已经流转->6平台确认->8市代确认->4确认  
            },
            complainList: [
                {
                value: 2,
                label: "单品投诉"
                },{
                value: 3,
                label: "品牌投诉"
                },
            ],
            historyList:[],
            hisInit:true,
            rules:{
                explainContent: [{ required: true, message: '不能为空', trigger: "change" }],
            },
            loading:false
        }
    },
    mounted(){
        if(this.$route.query.id){
            this.searchParam.id = this.$route.query.id
            this.paramsCompalin.id = this.$route.query.id
            this.getInfo()
        }
    },
    methods:{
     uploadResult(res){
        this.paramsCompalin.voucherImage = res?res:''
     },
        handleCommand(command) {
            this.searchParam.id = command.id
            this.paramsCompalin.id = command.id
            this.historyListInit = command
            this.hisInit =false
            this.getInfo()
            this.$router.replace({query: merge(this.$route.query,{'id':command.id})});
        },
        handleClick(tab, event) {
            this.activeName =tab.name
            this.searchParam ={}
            let init ={
                pageNum:1,
                pageSize:10,
                userId:''
            }
            let sp_shop = {
                storeName:'',
                storeState:''
            }
            let sp_mall = {
                mallName:'',
                contacts:'',
                status:''
            }
            if(tab.name=='sale'){
                this.searchParam = Object.assign(init,sp_shop)
            }else{
                this.searchParam = Object.assign(init,sp_mall)
            }
            this.getInfo()
        },
        getInfo() {
            var params = this.searchParam;
            let apiurl= '/litigation/info'
            this.loading =true
            this.$axios.get(apiurl,{
                params
            }).then((res) => {
              let {code,data,message,msg} =res.data
              if(code==200){
                  this.detailsInfo = data
                  this.baseType =data.baseType 
                  if(this.baseType==1){
                      this.activeName = 'sale'
                  }else{
                      this.activeName = 'complain'
                  }
                  if(this.hisInit){
                    this.getOrderList(data.orderId)
                  }
              }else{
                this.$message.error(message || msg);
              }
              this.loading =false

            }).catch(()=>{
            
            })
        },
        getOrderList(orderId) {
            let apiurl= '/litigation/complaintListByAll'
            this.$axios.post(apiurl,{
                orderId:orderId
            }).then((res) => {
              let {code,data,message,msg} =res.data
              if(code==200){
                  if(data.historyList && data.historyList.length>0){
                    this.historyList = data.historyList
                    let currentId = this.$route.query.id
                      this.historyList.map((res)=>{
                          if(res.id == currentId){
                              this.historyListInit = res
                          }
                      })
                  }
              }else{
                this.$message.error(message || msg);
              }

            }).catch(()=>{
            
            })
        },
        onSave(formName) {
          let params = this.paramsCompalin;
          params.plateFrom = this.baseType==1?2:7

          this.$refs[formName].validate(valid => {
            if (valid) {
              this.$axios.post('/litigation/update', params).then(res => {
                let { code, data, msg,message} = res.data;
                if (code == 200) {
                  this.$message.success(msg || message);
                  this.$router.go(0)
                } else {
                  this.$message.error(msg || message);
                }
              });
            } else {
              return false;
            }
          });
        },
    }
}
</script>
<style lang="scss" scoped>
.imgsizeCom >>>.el-upload--picture-card{
    height: 100px;
    width: 100px;
    line-height: 100px;
    margin-bottom: 0;
}
.imgsizeCom >>>.el-upload-list--picture-card .el-upload-list__item{
    height: 100px;
    width: 100px;
    line-height: 100px;
    margin-bottom: 0;
}
>>>.el-tabs__item.is-disabled{
    color: '';
}
>>>.el-tabs__item.is-active {
    color: #FF6800;
}
>>>.el-input.is-disabled .el-input__inner{
    color: #666;
}
.remark{
    word-break: break-all;
    line-height: 22px;
    font-size: 12px;
}
.elImageStyle{
    border: 1px solid #e2e2e2;
    padding: 2px;
    width: 100px; height: 100px; margin-right:10px;
}
.bigbiv{
    box-sizing: border-box;
    padding-top: 10px;
}
     .tabsbox{
        position: relative;
        overflow: hidden;
        .btnbox{
            position: absolute;
            right: 0;
            top: 0px;
            .item{
                margin-top: 10px;
                cursor: pointer;
                font-size: 12px;
            }
        }
    }
    .bigwrap{
        margin-top: 10px;
        /deep/ .el-step__title{
            font-size: 14px;
        }
        /deep/ .el-step__head.is-success{
            color: #f60;
            border-color: #f60;
        }
        /deep/ .el-step__title.is-success{
            color: #f60;
            font-weight: bold;
        }
        /deep/ .el-step__description.is-success{
            color: #333;
        }
    } 
    .contentBig{
        
    }
    .titPart{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        font-size: 14px;
        border-bottom: 1px solid rgb(230, 230, 230);
        margin-bottom: 10px;
        color: #333;
        .left{
            font-weight: bold;
            font-size: 14px;
            border-left: 3px solid #ff6600;
            padding-left: 6px;
        }
    }
    .infobig{
        display: flex;
        border:1px solid #e1e1e1;
        min-height: 800px;
        padding: 20px;
        padding-top: 0;
        font-size: 14px;
        .titTop0{
            border-bottom: 0;
            margin-bottom: 0;
            .left{
                border-left: 0;
                padding-left: 0
            }
        }
        .portLeft{
            width: 70%;
            box-sizing: border-box;
            border-right: 1px solid #e1e1e1;
            padding-right: 20px;
        }
        .complain_platform{
              border-bottom: 1px dashed #e1e1e1;
        }
        .timeStatus{
            padding: 16px 0;
            border-bottom: 1px dashed #e1e1e1;
            font-size: 14px;
            .userItem{
                display: flex;
                align-items: top;
                align-content: center;
            }
            .imgUser{
                width: 42px;
                height: 42px;
            }
            .rightdiv{
                .p1{
                    margin-bottom: 6px;
                    color: #999;
                }
                .p2{
                    line-height: 22px;
                }
            }
            .imgShow{
                margin-top: 10px;
            }
        }
        .portRight{
            width: 30%;
            padding-left: 20px;
            box-sizing: border-box;
            .infoImg{
                display: flex;
                align-items: center;
                margin-top: 10px;
                .imgdiv{
                    width: 100px;
                    height: 100px;
                    min-width: 100px;
                    img{
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
                .textdiv{
                    margin-left: 10px;
                    .name{
                        line-height: 22px;
                    }
                    .pp{
                        color: #666;
                        padding-top: 6px;
                        font-size: 12px;
                    }
                }
            }
            .ulbox{
                border-bottom: 1px solid #e1e1e1;
                padding-bottom: 10px;
                overflow: hidden;
                li{
                    padding: 4px 0;
                    display: flex;
                    align-items: top;
                    max-width: 100%;
                    font-size: 12px;
                    .s1{
                        color: #999;
                        font-size: 12px;
                        min-width: 60px;
                        text-align: right;
                        margin-right: 8px;
                        line-height: 22px;
                    }
                    .s2{
                        line-height: 22px;
                        flex: 1;
                        word-break:break-all
                    }
                }
            }
            
        }
    }
</style>