<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
        售后详情
      </div>
<div class="content" v-if="item!=null" style="padding-bottom: 20px;">
  <div class="desct"></div>
<div class="order-status" v-if="item!=null" >
          <el-steps  :active="item.status==4?item.status+1:item.status" align-center finish-status="success">
            <el-step title="待审核"></el-step>
              <el-step title="平台已审核等待用户发货"></el-step>
              <el-step title="用户已发货待仓库审核"></el-step>
              <el-step title="财务审核"></el-step>
              <el-step title="退款成功"></el-step>
            </el-steps>
      </div>
           <el-card shadow="never" style="margin-top: 15px">
             <div class="operate-container"  v-if="item!=null">
               <span style="margin-left: 20px" class="color-danger">售后状态：
                  <el-tag prop="status" v-for="(ite, index) in salesStatusOptions"    v-if="item.status==ite.dictValue">{{ite.dictLabel}}</el-tag>
               </span>
               <div class="operate-button-container"  >
                 <el-button size="mini"  @click="showOrder">查看订单</el-button>
               </div>
               <div class="operate-button-container"  >
                  <el-button size="mini" @click="editDelivery()" v-show="item.salesStatus==0&&item.status===1" v-hasPermi="['his:storeAfterSales:edit']">编辑物流</el-button>
               </div>
             </div>

     <div style="margin: 20px 0px">
       <span class="font-small">基本信息</span>
     </div>
     <el-descriptions   :column="3" border  >
        <el-descriptions-item label="订单编号"> <span v-if="item!=null">{{item.orderCode}}</span></el-descriptions-item>
        <el-descriptions-item label="会员"  ><span>{{nickName}} </span></el-descriptions-item>
        <el-descriptions-item label="退款金额"  ><span v-if="item!=null"> {{item.refundAmount}}</span></el-descriptions-item>
        <el-descriptions-item label="申请类型"  > <dict-tag :options="refundTypeOptions" :value="item.refundType"/></el-descriptions-item>
        <el-descriptions-item label="申请原因"  > <span v-if="item!=null"> {{item.reasons}}</span> </el-descriptions-item>
        <el-descriptions-item label="说明"  >  <span v-if="item!=null"> {{item.explains}}</span></el-descriptions-item>
        <el-descriptions-item label="状态"  ><dict-tag :options="salesStatusOptions" :value="item.status"/> </el-descriptions-item>
        <el-descriptions-item label="售后状态"  ><dict-tag :options="afterSalesStatusOptions" :value="item.salesStatus"/> </el-descriptions-item>
        </el-descriptions  >
        <div style="margin: 20px 0px">
          <span class="font-small">收货信息</span>
        </div>
        <el-descriptions   :column="3" border  >
            <el-descriptions-item label="收货人"  >
                <span v-if="item!=null">
                  {{item.consignee}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="手机号码"  >
                <span v-if="item!=null">
                  {{item.phoneNumber}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="收货地址"  >
                <span v-if="item!=null">
                  {{item.address}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="快递公司"  >
                <span v-if="item!=null">
                  {{item.deliveryName}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="运单号"  >
                <span v-if="item!=null">
                  {{item.deliverySn}}
                </span>
            </el-descriptions-item>
        </el-descriptions>
</el-card>
</div>



<div class="content" v-if="item!=null">
     <div class="desct">
       商品信息
     </div>
   <el-table
          border
          :data="prod"
          size="small"
          style="width: 100%;margin-top: 20px" >
          <el-table-column label="商品图片" width="150" align="center">
            <template slot-scope="scope">
              <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="300" align="center">
            <template slot-scope="scope">
              <p>{{JSON.parse(scope.row.jsonInfo).productName}}</p>
            </template>
          </el-table-column>
          <el-table-column label="价格" width="240" align="center">
            <template slot-scope="scope">
              <p>价格：￥{{JSON.parse(scope.row.jsonInfo).price}}</p>

            </template>
          </el-table-column>
          <el-table-column label="属性" width="240" align="center">
            <template slot-scope="scope">
              {{JSON.parse(scope.row.jsonInfo).sku}}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="180" align="center">
            <template slot-scope="scope">
                {{JSON.parse(scope.row.jsonInfo).num}}
            </template>
          </el-table-column>
          <el-table-column label="小计"  align="center">
            <template slot-scope="scope">
              ￥{{JSON.parse(scope.row.jsonInfo).num*JSON.parse(scope.row.jsonInfo).price}}
            </template>
          </el-table-column>
        </el-table>
  </div>


      <div class="content" v-if="item!=null">
           <div class="desct">
             操作信息
           </div>
        <el-table style="margin-top: 20px;width: 100%"
                ref="orderHistoryTable"
                :data="logs" border>
        <el-table-column label="操作时间"  width="160" align="center">
          <template slot-scope="scope">
            {{scope.row.changeTime}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{scope.row.changeMessage}}
          </template>
        </el-table-column>
      </el-table>
</div>
<el-dialog :title="edit.title" :visible.sync="edit.open" width="500px" append-to-body>
  <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
    <el-form-item label="快递公司" prop="deliveryName">
      <el-input v-model="editForm.deliveryName" placeholder="请输入"  />
    </el-form-item>
    <el-form-item label="运单号" prop="deliverySn">
      <el-input v-model="editForm.deliverySn" placeholder="请输入"  />
    </el-form-item>
  </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>
<el-drawer
    :with-header="false"
    :append-to-body="true"
     size="75%"
      :title="show.title" :visible.sync="show.open"
      >
      <storeOrderDetails  ref="Details" />
    </el-drawer>


    </div>
</template>

<script>
import {tuiMoney,noAuditing, auditing, codeId, logList, itemList,listSales, getSales, delSales, addSales, updateSales, exportSales } from "@/api/store/storeAfterSales";
import storeOrderDetails from '../components/storeOrderDetails.vue';
  export default {
    name: "orderDet",
    components: { storeOrderDetails },
    props:["data"],
    data() {
      return {
        edit:{
          open:false,
          title:"添加物流"
        },
        editForm:{
          id:null,
          deliveryName:null,
          deliverySn:null
        },
        editRules:{
          deliveryName: [
            { required: true, message: "物流名称不能为空", trigger: "blur" }
          ],
          deliverySn: [
            { required: true, message: "物流单号不能为空", trigger: "blur" }
          ],
        },
        show:{
          open:false,
          title:"订单详情"
        },
        logs:[],
        nickName:null,
        storeName:null,
        orderOptions:[],
        refundTypeOptions:[],
        salesStatusOptions:[],
        afterSalesStatusOptions:[],
        item:null,
        prod:null,
        form: {
          sreason: '',
        }
      }
    },
    created() {
    this.getDicts("sys_order_status").then(response => {
        this.orderOptions = response.data;
      });
    this.getDicts("sys_refund_type").then(response => {
        this.refundTypeOptions = response.data;
      });
    this.getDicts("sys_sales_status").then(response => {
        this.salesStatusOptions = response.data;
      });
    this.getDicts("sys_after_sales_status").then(response => {
        this.afterSalesStatusOptions = response.data;
      });
    },
    methods: {
      getlist(){
      getSales(this.item.id).then(response => {
          this.item = response.data;
          this.getitemList();
          this.getlogList();
          this.$parent.$parent.getList();
        });
      },
      tuimoney(row){
      var that=this;
       this.$confirm('是否确认财务审核?', "财务审核", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(function() {
        var data={
          id:that.item.id,
          status:row,
        }
         return tuiMoney(data);
       }).then(() => {
         this.msgSuccess("操作成功");
          this.getlist();
       }).catch(function() {});
      },
      NoAuditing(row){
      var that=this;
      this.$confirm('是否撤销退款?', "撤销退款", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(function() {
         var data={
            id:that.item.id,
            status:row,
          }
         return noAuditing(data);
       }).then(() => {
         this.msgSuccess("操作成功");
         this.getlist();
       }).catch(function() {});
      },
      submitForm() {
        var id=this.item.id;
        this.editForm.id = id;
        updateSales(this.editForm).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("编辑成功");
                  this.edit.open = false;
                  getSales(id).then(response => {
                      this.item = response.data;
                      this.getitemList();
                      this.getlogList();
                  });
                }
              });
      },
      editDelivery(){
        this.edit.open = true;
        this.editForm.deliveryName = this.item.deliveryName;
        this.editForm.deliverySn = this.item.deliverySn;
      },
      
      cancel1(){
        this.edit.open = false;
        this.editForm.deliveryName = null;
        this.editForm.deliverySn = null;
      },
      goAuditing(row){
        var that=this;
        this.$confirm('是否确认审核通过?', "审核", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          var data={
            id:that.item.id,
            status:row,
          }
          return auditing(data);
        }).then(() => {
          this.msgSuccess("操作成功");
          this.getlist();
        }).catch(function() {});
      },
      showOrder(row){
            this.show.open=true;
            codeId(this.item.orderId).then(response => {
              setTimeout(() => {
                   this.$refs.Details.getDetails(this.item.orderId,this.nickName,this.storeName);
              }, 1);
            });
      },
      getDetails(orderId,nickName,storeName) {
        this.nickName=nickName;
        this.storeName=storeName;
        this.item=null;
          getSales(orderId).then(response => {
              this.item = response.data;
              this.getitemList();
              this.getlogList();
          });
      },
      getitemList(){
        itemList(this.item.id).then(response => {
            this.prod = response.data;
        });
      },
      getlogList(){
        logList(this.item.id).then(response => {
            this.logs = response.data;
        });
      }
    }
  }
</script>
<style>
  .content{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;

      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }

</style>

<style scoped>
.order-content{
  margin: 10px;

}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}
</style>
