<template>
  <div class="complaint-detail-page">
    <Card v-if="loading" class="loading-card">
      <Spin fix size="large" />
    </Card>
    <Card v-else>
      <div class="info-item">
        <div class="title">投诉信息</div>
        <div class="base-info">
          <div class="left-order-no">
            <span class="left-label">投诉单号</span>
            <span class="left-info">{{ complaintData.complaintId }}</span>
          </div>
          <div class="right-order-status">
            <span class="left-label">处理结果</span>
            <span class="left-info">
              {{ComplaintStatusObj[complaintData.complaintStatus]}}
            </span>
          </div>
        </div>
      </div>
      <div class="info-item">
        <div class="title">基本信息</div>
        <div class="basic-info">
          <div class="basic-info-con">
            <div class="cell-info">
              <span class="left-label">关联单号</span>
              <span class="left-info">{{ complaintData.orderId }}</span>
            </div>
            <div class="cell-info">
              <span class="left-label">投诉描述</span>
              <span class="left-info">{{ complaintData.description }}</span>
            </div>
            <div class="cell-info">
            <span class="left-label">订单类型</span>
            <span class="left-info">{{ OrderStatusObj[complaintData.orderType] }}</span>
          </div>
            <div class="cell-info">
             <span class="left-label">附件</span>
             <img v-for="(item, index) in complaintData.attachmentList" :key="index" :src="item" alt="" class="attachment-img">
            </div>
          </div>
        </div>
      </div>
      <div class="info-item">
        <div class="title">投诉人信息</div>
          <div class="base-info">
            <div class="left-order-no">
              <span class="left-label">用户昵称</span>
              <span class="left-info">{{ complaintData.nickName }}</span>
            </div>
            <div class="right-order-status">
              <span class="left-label">联系方式：</span>
              <span class="left-info">{{ complaintData.userPhone }}</span>
            </div>
          </div>
      </div>
      <div class="info-item">
        <div class="title">商家信息</div>
          <div class="base-info">
            <div class="left-order-no">
              <span class="left-label">商家名称</span>
              <span class="left-info">{{ complaintData.shopName }}</span>
            </div>
            <div class="right-order-status">
              <span class="left-label">联系方式：</span>
              <span class="left-info">{{ complaintData.shopContactPhone }}</span>
            </div>
          </div>
      </div>
      <div class="info-item">
        <div class="title">处理记录</div>
        <tables
          :columns="handleColumns"
          v-model="complaintData.handleLogList"
        ></tables>
        <!-- <div class="handle-info">
              <div class="handle-info-con">
                <div class="cell-info">
                  动作：{{item.handle}}
                </div>
                <div class="cell-info">
                  备注：{{item.remark}}
                </div>
                <div class="cell-info">
                  时间：{{item.time}}
                </div>
              </div>
            </div> -->
      </div>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { OrderStatusObj, ComplaintStatusObj } from '@/enums'
import { formatTime } from '@/libs/tools'
export default {
  name: 'complaint-detail',
  components: {
    Tables
  },
  data () {
    return {
      loading: false,
      complaintData: {},
      ComplaintStatusObj,
      OrderStatusObj,
      handleColumns: [
        { title: '动作', key: 'handle', minWidth: 120, align: 'center' },
        {
          title: '备注',
          key: 'remark',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.remark || '--')
          }
        },
        {
          title: '时间',
          key: 'time',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', formatTime(params.row.time))
          }
        }
      ]
    }
  },
  methods: {
    requestData (complaintId) {
      this.loading = true
      this.api({
        apiName: 'complaintDetail',
        postdata: complaintId,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.complaintData = res.data
        }
      })
    }
  },
  mounted () {
    let complaintId = this.$route.query.complaintId
    console.log(complaintId)
    this.requestData(complaintId)
  }
}
</script>

<style scoped lang="less">
.complaint-detail-page {
  .info-item {
    padding: 20px 36px;
    border: 1px solid #dcdee2;
    border-radius: 5px;
    margin-bottom: 15px;
    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .base-info {
      display: flex;
      // justify-content: space-between;
      flex: 1;
      .left-order-no{
        border: 1px solid #F8F8F8;
        width: 500px;
        display: flex;
        flex: 1;
        .left-label{
          display: block;
          width: 200px;
          height: 40px;
          padding-right:10px;
          line-height: 40px;
          text-align: right;
          background: #F8F8F8;
        }
        .left-info{
          display: block;
          width: 300px;
           padding-left:10px;
           line-height: 40px;
          // background: #F8F8F8;
        }
      }
       .right-order-status{
        border: 1px solid #F8F8F8;
        // width: 400px;
        display: flex;
        flex: 1;
        .left-label{
          display: block;
          width: 200px;
          padding-right:10px;
          line-height: 40px;
          text-align: right;
          background: #F8F8F8;
        }
        .left-info{
          display: block;
          width: 100px;
          padding-left:10px;
           line-height: 40px;
          // background: #F8F8F8;
        }
      }
    }
    .basic-info-con{
      display: flex;
      // justify-content: space-between;
      flex: 1;
      flex-flow: row wrap;
      .cell-info{
        border: 1px solid #F8F8F8;
        width: 500px;
        display: flex;
        flex: 1;
        .left-label{
          display: block;
          width: 200px;
          height: 40px;
          padding-right:10px;
          line-height: 40px;
          text-align: right;
          background: #F8F8F8;
        }
        .left-info{
          display: block;
          width: 300px;
           padding-left:10px;
           line-height: 40px;
          // background: #F8F8F8;
        }
        .attachment-img {
          width: 80px;
        }
      }
    }

  }
}
</style>
