<template>
  <div class="detail_page">
    <div class="content">
      <div class="head_box">
        售后详情
        <div v-if="detailRow.type != 2" class="btn_list">
          <el-button @click="refuse" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">拒绝售后</el-button>
          <el-button style="background-color: #3F9B6A;color: #fff" @click="handle">同意售后</el-button>
        </div>
        <div class="btn_list" style="margin-right: 10px;">
          <el-button @click="back" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
        </div>
      </div>
      <div class="detail">
        <div class="order_info">
          <!-- <p class="detail_title">订单信息</p> -->
          <TitleWithCircle title="订单信息" style="margin-bottom: 15px;"/>
          <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 && item.value" class="active" @click="getInfo(item)">查看物流</span>
                <span v-if="item.type === 3 && !item.value">暂无物流信息</span>
              </p>
            </li>
          </ul>
        </div>

        <div class="after_sale_shop">
          <!-- <p class="detail_title">售后商品</p> -->
          <TitleWithCircle title="售后商品" style="margin-bottom: 15px;"/>
          <div v-for="(item,index) in shopList" :key="index" class="goods_list">
            <div class="good_details">
              <ul>
                <li>
                  <img :src="$baseURL+item.image">
                </li>
                <li>
                  <p>{{ item.productName }}</p>
                  <p>{{ item.skuValue }}</p>
                  <p>SKU: {{ item.sku }}</p>
                </li>
                <li>
                  <p>¥{{ item.productPrice*item.number }}</p>
                  <p>¥{{ `${item.productPrice}*${item.number}` }}</p>
                </li>
                <li>¥{{ item.total }}</li>
              </ul>
            </div>
          </div>
          <div class="total">
            <ul>
              <li />
              <li />
              <li>退款总金额</li>
              <li>¥{{ total }}</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="after_sales_record">
        <!-- <p class="detail_title">协商历史</p> -->
        <TitleWithCircle title="协商历史" style="margin-bottom: 15px;"/>
        <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.time }}</p>
          </div>
          <div class="record_list_content">
            <p>
              <!-- <span>{{ item.type }}:</span> -->
              <span> 留言：{{ item.reason }}</span>
            </p>
            <p v-if="item.images.length !=0">
              <span>举证图片:</span>
              <el-image
                v-for="(imgItem, imgIndex) in item.images"
                :key="imgIndex"
                style="width: 100px; height: 100px"
                :src="imgItem"
                :preview-src-list="item.images"
              />
              <!--              <img v-for="(imgItem, imgIndex) in item.images" :src="imgItem" :key="imgIndex" alt>-->
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      append-to-body
      :fullscreen="!true"
      :before-close="close"
      width="55%"
    >
      <orderInfo v-if="dialog.type===1" :orderInfoData="orderInfo" :shopListData="shopList"/>
      <storeInfo v-if="dialog.type===2" :dialog="dialog.arr"/>
      <logistics v-if="dialog.type===3" :logistics-list="dialog" />
      <buyer v-if="dialog.type===4" :dialog="dialog.arr" />
      <afterSale v-if="dialog.type===5" :dialog="dialog" @close="close" @dialogs="dialogs" />
      <!-- <goods v-if="dialog.type===1" :info="info" />
      <audit-log v-if="dialog.type===2" :info="info" />-->
    </el-dialog>
  </div>
</template>

<script>
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 { afterGetById, getDilevery, getBuyer, handles } from '@/api/after'
import { businessListGetById } from '@/api/business'
import TitleWithCircle from '@/components/top/index';
export default {
  components: {
    afterSale,
    buyer,
    logistics,
    orderInfo,
    storeInfo,
    TitleWithCircle
  },
  props: {
    detailRow: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      orderInfo: [
        { name: '订单ID', value: '', type: 1, field: 'orderFormid' },
        { name: '售后订单ID', value: '', type: '', field: 'afterFormid' },
        { name: '支付时间', value: '', type: '', field: 'paymentTime' },
        { name: '支付方式', value: '', type: '', field: 'paymentMode' },
        { name: '订单总金额', value: '', type: '', field: 'orderPrice' },
        { name: '店铺名称', value: '', type: 2, field: 'shopName' },
        { name: '物流单号', value: '', type: 3, field: 'deliverFormid' },
        { name: '售后类型', value: '', type: '', field: 'afterType' },
        { name: '买家账户', value: '', type: 4, field: 'customerName' }
      ],
      shopList: [
        {
          image:
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=137628589,3436980029&fm=26&gp=0.jpg',
          productName: 'DAD 气垫霜',
          skuValue: '粉色, 中瓶',
          skuId: '2525',
          productPrice: '60',
          number: '2',
          salePrice: '50'
        },
      ],
      recordList: [],
      total: 0,
      dialog: {},
      afterDetails: '',
      shopId: 0
    }
  },
  watch: {
    detailRow: {
      handler (nVal, oVal) {
        if (nVal) {
          this.getDetails()
        }
      }
    },
    deep: true
  },
  created () {
    this.getDetails()
  },
  methods: {
    async getDetails () {
      const res = await afterGetById({ afterId: this.detailRow.afterId })
      if (res.code === '') {
        this.afterDetails = res.data
        this.shopId = this.afterDetails.shopId
        const o = res.data
        this.getOrderInfo(o)
        this.shopList = o.products
        this.total = o.refundPrice
        this.recordList = o.afterHistory
      }
    },
    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,
        orderId: this.afterDetails.orderId,
        afterId: this.afterDetails.afterId
      }
    },
    refuse () {
      this.dialog = {
        title: '拒绝售后',
        visible: true,
        type: 5,
        btnName: '拒绝售后',
        orderId: this.afterDetails.orderId,
        afterId: this.afterDetails.afterId
      }
    },
    async getInfo (item) {
      console.log(item.type, 'item.type')
      switch (item.type) {
        case 1:
          this.dialog = {
            title: '订单信息',
            visible: true,
            type: item.type
          }
          break;

        case 2:
          businessListGetById({
            shopId: this.afterDetails.shopId
          }).then(res => {
            if (res.code === '') {
              this.dialog = {
                title: '店铺信息',
                visible: true,
                type: item.type,
                arr: res.data
              }
            }
          }).catch(err => { console.log(err) })
          break;
        case 3:
          getDilevery({
            express: this.afterDetails.express,
            deliverFormid: this.afterDetails.deliverFormid
          }).then(res => {
            if (res.code === '') {
              this.dialog = {
                title: '物流信息',
                visible: true,
                type: item.type,
                arr: res.data,
                detail: this.afterDetails
              }
            }
          }).catch(err => { console.log(err) })
          break;

        case 4:
          getBuyer({
            buyerUserId: this.afterDetails.buyerUserId
          }).then(res => {
            if (res.code === '') {
              this.dialog = {
                title: '买家信息',
                visible: true,
                type: item.type,
                arr: res.data
              }
            }
          }).catch(err => { console.log(err) })
          break;

        default:
          return;
      }
    },
    async dialogs (arr) {
      if (arr.btnName === '拒绝售后') {
        const res = await handles({
          orderId: arr.orderId,
          afterId: arr.afterId,
          state: '2',
          remark: arr.remark
        })
        if (res.code === '') {
          this.$message.success('成功拒绝售后')
          this.dialog.visible = false
          this.back()
        }
      } else if (arr.btnName === '同意售后') {
        const res = await handles({
          orderId: arr.orderId,
          afterId: arr.afterId,
          state: '1',
          remark: arr.remark
        })
        if (res.code === '') {
          this.$message.success('成功同意售后')
          this.dialog.visible = false
          this.back()
        }
      }
    },
    // 返回
    back () {
      this.$emit('cancel')
    },
    close () {
      this.dialog = {}
    }
  }
}
</script>
<style lang="scss">
@import url("../../../../styles/elDialog.scss");
</style>
<style lang='less' scoped>
.detail_page {
  background-color: #fff;
  height: calc(100% - 10px);
  .content {
    .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 30px;
      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: #3F9B6A;
        }
      }
    }

    .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: 23%;
              margin-right: 20px;
            }
            &:nth-child(2) {
              color: #666666;
            }
          }
        }
        .active {
          color: #3F9B6A !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;
            font-size: 16px;
            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 {
                }
              }
              &:nth-child(4) {
              }
              p {
                margin: 0;
                padding: 0;
                height: 30px;
                line-height: 30px;
              }
            }
          }
        }
      }
      .total {
        padding-left: 20px;
        ul {
          margin: 0;
          padding: 30px 0;
          display: flex;
          justify-content: flex-end;

          li {
            // height: 40px;
            font-size: 16px;
            color: #333333;
            display: flex;
            width: 90px;
            // justify-content: center;
            // align-items: center;
            &:nth-child(4) {
              margin-right: 140px;
            }
          }
        }
      }
    }

    .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;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-dialog__wrapper {
  .el-dialog__header {
    height: 70px;
    background-color: #3f9b6a;
    .el-dialog__title {
      font-size: 24px;
      color: #fff;
    }
  }
}
 ::v-deep .buttonHover:hover{
    color:#3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
</style>
