<template>
  <div class="detail_page">
    <div class="content">
      <div class="head_box">
        售后详情
        <div class="btn_list">
          <el-button @click="refuse">拒绝售后</el-button>
          <el-button type="primary" @click="handle">同意售后</el-button>
        </div>
      </div>
      <div class="detail">
        <div class="order_info">
          <p class="detail_title">订单信息</p>
          <ul class="order_list">
            <li v-for="(item,index) in orderInfo" :key="index">
              <p>{{ item.name }}:</p>
              <p :class="[{active: item.type ===1 || item.type ===2 || item.type ===4}]">
                <span @click="getInfo(item)">{{ item.value }}</span>
                <span v-if="item.type ===3" class="active" @click="getInfo(item)">
                  查看物流
                </span>
              </p>
            </li>
          </ul>

        </div>

        <div class="after_sale_shop">
          <p class="detail_title">售后商品</p>
          <div
            v-for="(item,index) in shopList"
            :key="index"
            class="goods_list"
          >
            <div class="good_details">
              <ul>
                <li>
                  <img :src="item.skuImg" />
                </li>
                <li>
                  <p>{{ item.productName }}</p>
                  <p>{{ item.skuNameStr }}</p>
                  <p>SKU: {{ item.skuId }}</p>
                </li>
                <li>
                  <p>¥{{ item.sellPrice*item.buyNum }}</p>
                  <p>¥{{ `${item.sellPrice}*${item.buyNum}` }}</p>
                </li>
                <li> ¥{{ item.applyPrice * item.buyNum }}</li>
              </ul>
            </div>
          </div>
          <div class="total">
            <ul>
              <li></li>
              <li></li>
              <li>退款总金额 </li>
              <li>¥{{ total }}</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="after_sales_record">
        <p class="detail_title">协商历史</p>
        <div v-for="(item,index) in recordList" :key="index" class="record_list">
          <div class="record_list_title">
            <p>{{ item.title }}</p>
            <p>{{ item.name }}</p>
            <p>{{ item.createTime }}</p>
          </div>
          <div class="record_list_content">
            <p>
              <span>{{ item.type }}:</span>
              <span>{{ item.actionNote }}</span>
            </p>
            <p v-if="item.img">
              <span>举证图片:</span>
              <img :src="item.imgSrc" alt="" />
            </p>
          </div>
        </div>
      </div>
    </div>
    <Dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :fullscreen="!true"
      :before-close="close"
      width="55%"
    >
      <orderInfo v-if="dialog.type===1" />
      <storeInfo v-if="dialog.type===2" />
      <logistics v-if="dialog.type===3" />
      <buyer v-if="dialog.type===4" />
      <afterSale v-if="dialog.type===5" :dialog="dialog" @close="close" />
      <!-- <goods v-if="dialog.type===1" :info="info" />
      <audit-log v-if="dialog.type===2" :info="info" /> -->
    </Dialog>
  </div>
</template>

<script>
import { Dialog } from 'element-ui'
import afterSale from './component/after-sales'
import buyer from './component/buyer'
import logistics from './component/logistics'
import orderInfo from './component/order-info'
import storeInfo from './component/store-info'
import AfterSale from '@/api/AfterSale'
export default {
  components: {
    Dialog,
    afterSale,
    buyer,
    logistics,
    orderInfo,
    storeInfo
  },
  data() {
    return {
      orderInfo: [
        { name: '订单ID', value: '', type: 1, field: 'orderCode' },
        { name: '售后订单ID', value: '', type: '', field: 'orderCode' },
        { name: '支付时间', value: '', type: '', field: 'createTime' },
        { name: '支付方式', value: '', type: '', field: 'payChannel' },
        { name: '订单总金额', value: '', type: '', field: '' },
        { name: '店铺名称', value: '', type: 2, field: 'memberAccount' },
        { name: '物流单号', value: '', type: 3, field: 'logisticsNum' },
        { name: '售后类型', value: '', type: '', field: 'returnType' },
        { name: '买家账户', value: '', type: 4, field: 'recName' }
      ],
      shopList: [
        { skuImg: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=137628589,3436980029&fm=26&gp=0.jpg',
          productName: 'DAD 气垫霜', skuNameStr: '粉色, 中瓶', skuId: '2525', sellPrice: '60', buyNum: '2', salePrice: '50' },
        { skuImg: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=137628589,3436980029&fm=26&gp=0.jpg',
          productName: 'DAD 气垫霜', skuNameStr: '粉色, 中瓶', skuId: '2525', sellPrice: '60', buyNum: '2', salePrice: '50' }
      ],
      recordList: [
        { title: '申请平台介入', name: '刘十', time: '2020-05-08 15:30:56', type: '问题描述', value: '不退款', img: '举证图片',
          imgSrc: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=137628589,3436980029&fm=26&gp=0.jpg' },
        { title: '拒绝退款', name: '王辉', time: '2020-04-08 17:30:20', type: '卖家留言', value: '不退款', img: '', imgSrc: '' },
        { title: '发起了售后', name: '张强', time: '2020-03-25 13:25:45', type: '买家留言', value: '不要了, 买到的宝贝不符合预期', img: '', imgSrc: '' }
      ],
      total: 0,
      dialog: {}
    }
  },
  computed: {
    query() {
      return this.$route.query
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    async getDetails() {
      const res = await AfterSale.getInfo(this.query.id)
      const resData = res.data
      if (resData.code === 0) {
        const o = resData.data
        this.getOrderInfo(o)
        this.shopList = o.orderProductDTOList
        this.getTotal(o.orderProductDTOList)
        this.recordList = o.moneyReturnActionHistoryList
        console.log(o, 'rr')
      }
    },
    getTotal(data) {
      if (data && data.length) {
        data.forEach(item => {
          this.total += item.applyPrice * item.buyNum
        })
      }
    },
    getOrderInfo(o) {
      const payChannel = {
        1: '微信支付',
        2: '支付宝支付',
        3: '余额支付'
      }
      const returnType = {
        1: '无售后',
        2: '退款',
        3: '退货'
      }
      this.orderInfo.map(item => {
        item.value = o[item.field] || ''
        if (item.field === 'payChannel') {
          item.value = payChannel[item.value]
        }
        if (item.field === 'returnType') {
          item.value = returnType[item.value]
        }
      })
    },
    handle() {
      this.dialog = {
        title: '同意售后',
        visible: true,
        type: 5,
        btnName: '同意售后',
        allow: true
      }
    },
    refuse() {
      this.dialog = {
        title: '拒绝售后',
        visible: true,
        type: 5,
        btnName: '拒绝售后'
      }
    },
    getInfo(item) {
      if (item.type === 1) {
        this.dialog = {
          title: '订单信息',
          visible: true,
          type: item.type
        }
      }

      if (item.type === 2) {
        this.dialog = {
          title: '店铺信息',
          visible: true,
          type: item.type
        }
      }

      if (item.type === 3) {
        this.dialog = {
          title: '物流信息',
          visible: true,
          type: item.type
        }
      }

      if (item.type === 4) {
        this.dialog = {
          title: '买家信息',
          visible: true,
          type: item.type
        }
      }
    },
    close() {
      this.dialog = {}
    }
  }
}
</script>

<style lang='less' scoped>
.detail_page {
    margin-top: 10px;
    background-color: #fff;
    height: calc(100% - 10px);
    .content {
        padding: 20px;
        .head_box {
            overflow: hidden;
            height: 80px;
            line-height: 80px;
            font-size: 24px;
            border-bottom: 1px solid #E0E5EB;
            .btn_list {
                display: inline-block;
                float: right;
            }
        }
        .detail , .after_sales_record{
          min-height: 500px;
          background:rgba(255,255,255,1);
          box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
          border-radius:4px;
          padding:  1px 10% 20px;
          margin-top: 15px;

          .detail_title {
            font-size: 24px;
            color: #333333;
            position: relative;
            margin:50px 20px 20px;
            &:before {
                content: '';
                display: block;
                position: absolute;
                top: 5px;
                left: -20px;
                width: 4px;
                height: 24px;
                background-color: #3A68F2;
            }
          }
        }

        .order_info {
            .order_list {
                padding-left: 20px;
                overflow: hidden;
                list-style: none;
                li {
                    float: left;
                    width: calc(100% / 3);
                    margin-bottom: 30px;
                    p {
                        margin: 0;
                        padding: 0;
                        display: inline-block;
                        font-size: 16px;
                        color: #333333;
                        &:nth-child(1) {
                            width: 20%;
                        }
                        &:nth-child(2) {
                            color: #666666;
                        }
                    }
                }
                .active {
                    color: #3A68F2 !important;
                    &:hover {
                        cursor: pointer;
                    }
                }
            }
        }

        .after_sale_shop {
            .goods_list {
                padding-left: 20px;
                .good_details {
                    border-bottom: 1px #E0E5EB solid;
                    ul {
                        overflow: hidden;
                        display: flex;
                        margin: 0;
                        padding: 30px 0;
                        li {
                            flex:3;
                            display: flex;
                            // justify-content: center;
                            // align-items: center;
                            text-align: left;
                            img {
                            width: 90px;
                            height: 90px;
                            border-radius:4px;
                            font-size: 16px;
                            color: #333333;
                            }
                            &:nth-child(2),&:nth-child(3) {
                            display: block;
                            }
                            &:nth-child(3) {
                            p {
                                // text-align: center;
                                &:nth-child(1) {
                                font-weight: 600;
                                }
                                &:nth-child(2) {
                                font-size: 12px;
                                }
                            }
                            }
                            &:nth-child(4) {
                            font-weight: 600;
                            }
                            p {
                                margin: 0;
                                padding: 0;
                                height: 30px;
                                line-height: 30px;
                            }
                        }
                    }
                }
            }
            .total {
                padding-left: 20px;
                ul {
                margin: 0;
                padding: 30px 0;
                display: flex;
                li {
                    // height: 40px;
                    flex:3;
                    font-size: 16px;
                    color: #333333;
                    display: flex;
                    // justify-content: center;
                    // align-items: center;
                    &:nth-child(4) {
                    font-weight: 600;
                    }
                }
                }
            }
        }

        .after_sales_record {
            p {
                margin: 0;
                padding:0 ;
                font-size: 16px;
            }
            .record_list {
                padding-left: 20px;
                .record_list_title {
                    background: #F7F7F7;
                    overflow: hidden;
                    margin-bottom: 30px;
                    p {
                        float: left;
                        text-indent: 10px;
                        width: calc(100% / 3);
                        height: 36px;
                        line-height: 36px;
                    }
                }
                .record_list_content {
                    p {
                        overflow: hidden;
                        margin-bottom: 30px;
                        span {
                            display: block;
                            float: left;
                            width: 100px;
                            &:nth-of-type(2) {
                                text-indent: 10px;
                            }
                            &:nth-of-type(2) {
                                color: #666666;
                                width: calc(100% - 100px);
                            }
                        }
                        img {
                            width: 90px;
                            height: 90px;
                            border-radius: 4px;
                        }
                    }
                }
            }
        }
    }
}

/deep/ .el-dialog__wrapper {
  .el-dialog__header {
    height: 70px;
    background-color: #3A68F2;
    .el-dialog__title {
      font-size:24px;
      color: #fff;
    }
  }
}

</style>
