<template>
  <div class="app-container">
    <!-- 详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单信息" name="first">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="订单编号" >
                  <el-input v-model="form.orderNo" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="顺序号" >
                  <el-input v-model="form.orderNum" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单状态" >
                  <el-input v-model="form.state" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="城市" >
                  <el-input v-model="form.city" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="店铺" >
                  <el-input v-model="form.shopName" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间" >
                  <el-input v-model="form.createdAt" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="商品数量" >
                  <el-input v-model="form.goodsNum" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="金额" >
                  <el-input v-model="form.amount" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="付款时间" >
                  <el-input v-model="form.payTime" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="用户昵称" >
                  <el-input v-model="form.userName" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户电话" >
                  <el-input disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="完成时间" >
                  <el-input v-model="form.finishTime" disabled/>
                </el-form-item>
              </el-col>
            </el-row>           
            <el-table :data="goodsList">
              <el-table-column label="商品名称" align="center" prop="goodsName" />
              <el-table-column label="缩略图" align="center">
                <template slot-scope="scope">              
                  <div class="image-tmp">
                    <el-image style="width: 100px; height: 100px"  :src="getPicsList(scope.row.pics)" :preview-src-list="getPicsBigList(scope.row.pics)">
                      <div slot="error" class="image-slot"></div>            
                    </el-image>
                  </div>    
                </template>
              </el-table-column>
              <el-table-column label="商品分类" align="center" prop="categoryName" />
              <el-table-column label="原售价" align="center" prop="amount" />
              <el-table-column label="折扣价" align="center" prop="realAmount" />
              <el-table-column label="实付" align="center" prop="realAmount" />
              <el-table-column label="数量" align="center" prop="num" />              
            </el-table> 
            <div style="margin-top: 20px;">
              <div style="font-weight:bold;font-size: larger;">
                <span>退款信息</span>
              </div>
              <el-form-item label="退款状态" >
                <el-input  v-model="form.refundState" style="width:200px;" disabled/>
              </el-form-item>
              <el-form-item label="退款金额" >
                <el-input  v-model="form.refundAmount" style="width:200px;" disabled/>
              </el-form-item>
              <el-form-item label="处理备注" >
                <el-input  v-model="form.desc" type="textarea" disabled/>
              </el-form-item>
            </div>            
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="订单日志" name="second">
          <el-table  :data="logList">
            <el-table-column label="状态" align="center" prop="status" />              
            <el-table-column label="操作" align="center" prop="operation" />
            <el-table-column label="时间" align="center" prop="createAt" />
            <el-table-column label="操作人" align="center" prop="operationUser" />
            <el-table-column label="内容" align="center" prop="content" />        
            </el-table>
        </el-tab-pane>
      </el-tabs>      
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLogList } from "@/api/system/order";
import { getDetial } from "@/api/system/refund";
import piovince from '@/utils/piovince';
export default {
  name: "RefundDetial",  
  data() {
    return {
      piovince,
      // 总条数
      total: 0,
      // 订单表格数据
      refundList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,     
      shopName: null,    
      goodsList:[],
      // 表单参数
      form: {},
      refundId: null,     
      activeName:"first",
      logList: []      
    };
  },
  created() {
   
  },
  methods: {
    getProvince(province){
      let list=this.piovince;
      for(let i=0;i<list.length;i++){
        if(list[i].children.length>0){
          let childrenList=list[i].children;
          for(let j=0;j<childrenList.length;j++){
            if(childrenList[j].value == province){
              return childrenList[j].name;
            } 
          }
        }       
      }
    },
    // 取消按钮
    cancel() {
      this.activeName="first";
      this.open = false;    
    },
    /** 提交按钮 */
    submitForm() {
      this.open=false;
      this.activeName="first"     
    },
    formatterState(state){
       if(state == 0){
        return "创建未校验（创建未校验）";
      }else if(state == 1){
        return "未支付（待付款）";
      }else if(state == 2){
        return "已支付（待制作）";
      }else if(state == 3){
        return "支付制作中（制作中）";
      }else if(state == 4){
        return "制作完成未取（待取餐）";
      }else if(state == 5){
        return "取餐中（取餐中）";
      }else if(state == 6){
        return "正常完成（已完成）";
      }else if(state == 7){
       return "待取超时（已完成）";
      }else if(state == 8){
       return "未支付取消（已取消）";
      }else if(state == 9){
        return "支付后制作前取消（已取消）";
      }else if(state == 10){
        return "制作中取消（已取消）";        
      }else if(state == 11){
        return "制作完成取消（已取消）";  
      }else if(state == 12){
        return "退款中（退款中）";  
      }else if(state == 13){
        return "退款失败（退款失败）";  
      }else if(state == 14){
        return "部分退款（部分退款）";  
      }else if(state == 15){
        return "已退款（已退款）";  
      }else if(state == 50){
        return "其他人工干预状态（其他人工干预状态）";  
      }
    },
    handleClick(tab) {
      if(tab.name=="first"){
        this.getRefundDetail(this.refundId);
      }else if(tab.name=="second"){
        this.getLogList();
      }
    },
    /** 查询订单日志列表 */
    getLogList() {
      //this.loading = true;
      getLogList({orderId:this.orderId}).then(response => {
        if(response.code=="200"){
          this.logList = response.data; 
        }
      });
    },

    /** 详情按钮操作 */
    getDetial(row) {
      this.goodsList=[];
      this.orderId= row.orderId; 
      this.refundId=row.id;
      this.title="退款信息";
      this.open = true;
      this.getRefundDetail(this.refundId);
    },
    getRefundDetail(id){
      getDetial(id).then(response => {
        if(response.code=="200"){
          this.goodsList=[];
          this.form = response.data.order;
          this.form.refundAmount=response.data.refundAmount;
          this.form.remark=response.data.remark;
          this.form.refundState=response.data.state;
          if(response.data.state!=""){
            if(response.data.state=="1"){
              this.form.refundState="退款中"
            }else if(response.data.state=="2"){
              this.form.refundState="退款成功"
            }else if(response.data.state=="3"){
              this.form.refundState="退款失败 "
            }
          }
          this.form.shopName=response.data.order.shop.name;
          this.form.state=this.formatterState(response.data.order.state);  
          this.form.city=this.getProvince(response.data.order.shop.city);        
          if(response.data.order.orderDetails.length>0){
            let list=response.data.order.orderDetails;
            for(let i=0;i<list.length;i++){
             this.goodsList.push({"goodsName":list[i].goods.name,"pics":list[i].goods.pics,
             "categoryName":list[i].goods.categoryName,"price":list[i].goods.price,"discount":list[i].goods.discount,
             "realAmount":list[i].realAmount,"num":list[i].num})
            }
          }
        }        
      });
    },
    getPicsList(str){   
      let picObj = JSON.parse(str);  
      return picObj.thumbnail
    },
    getPicsBigList(str){
      let list=[];
      let picObj = JSON.parse(str);  
      list.push(picObj.thumbnail)
      return list;
    },    
  }
};
</script>