<template>
  <div class="app-container">
    <div class="header-container">
      <div class="el-page-header__left" @click="goBack">
        <i class="el-icon-back"></i>
        <div class="el-page-header__title">返回</div>
      </div>
      <div class="el-page-header__content">
        <el-tabs v-model="activeName">
          <el-tab-pane
            :label="'工单详情' + (index + 1)"
            :name="'order_' + (index + 1)"
            v-for="(item, index) in dataList"
            :key="index"
          ></el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div v-for="(item, index) in dataList" :key="index">
      <div v-show="activeName === 'order_' + (index + 1)">
        <div class="top-container">
          <span>订单编号：{{ item.orderId }}</span>
          <span>下单时间：{{ item.payTime }}</span>
        </div>

        <el-card class="card-container goods-container" shadow="never">
          <div slot="header" class="title">订单信息</div>
          <el-table :data="item.orderDetails" style="width: 100%" border>
            <el-table-column label="商品信息" min-width="200">
              <template slot-scope="scope">
                <div class="goods-info">
                  <el-image class="image" :src="$showImgUrl(scope.row.imgUrl)"></el-image>
                  <div class="name">{{ scope.row.goodsName }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="goodsSpecName" label="规格" align="center"></el-table-column>
            <el-table-column prop="price" label="单价" align="center"></el-table-column>
            <el-table-column prop="num" label="数量" align="center"></el-table-column>
          </el-table>
        </el-card>

        <el-card class="card-container" shadow="never">
          <div slot="header" class="title">服务工单信息</div>
          <div class="order-info">
            <el-row :gutter="30">
              <el-col :xs="24" :sm="12">
                <div class="item">
                  <div class="label">信息编号：</div>
                  <div class="value">{{ item.workerOrder }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12">
                <div class="item">
                  <div class="label">总部信息编号：</div>
                  <div class="value">{{ item.pgid }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12">
                <div class="item">
                  <div class="label">工单状态：</div>
                  <div class="value">{{ item.orderState }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12">
                <div class="item">
                  <div class="label">售后服务网点：</div>
                  <div class="value">{{ item.installName }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12">
                <div class="item">
                  <div class="label">主要服务人员：</div>
                  <div class="value">{{ item.workerName }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12">
                <div class="item">
                  <div class="label">服务人员电话：</div>
                  <div class="value">{{ item.workerPhone }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12">
                <div class="item">
                  <div class="label">工单接收时间：</div>
                  <div class="value">{{ item.orderReceTime }}</div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12">
                <div class="item">
                  <div class="label">完工时间：</div>
                  <div class="value">{{ item.finishTime }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="card-container" shadow="never">
          <div slot="header" class="title">工单反馈信息</div>
          <el-table :data="item.fkxxs" style="width: 100%" border>
            <el-table-column prop="operatorType" label="操作类别" align="center" min-width="100"></el-table-column>
            <el-table-column prop="operatorContent" label="操作内容" align="center" min-width="160"></el-table-column>
            <el-table-column
              prop="lastOperatorTime"
              label="最后操作时间"
              align="center"
              min-width="160"
            ></el-table-column>
            <el-table-column prop="operatorName" label="操作人" align="center" min-width="120"></el-table-column>
            <el-table-column prop="operatorWebsit" label="操作网点" align="center" min-width="120"></el-table-column>
            <el-table-column prop="result" label="反馈结果" align="center" min-width="100"></el-table-column>
          </el-table>
        </el-card>

        <el-card class="card-container" shadow="never">
          <div slot="header" class="title">辅材支付信息</div>
          <el-table :data="item.fcxxs" style="width: 100%" border>
            <el-table-column prop="id" label="ID" align="center"></el-table-column>
            <el-table-column prop="orderNo" label="费用单号" align="center"></el-table-column>
            <el-table-column prop="operatorWebsit" label="操作网点" align="center"></el-table-column>
            <el-table-column prop="operatorName" label="操作人" align="center"></el-table-column>
            <el-table-column prop="payStatus" label="支付状态" align="center"></el-table-column>
            <el-table-column prop="payTime" label="支付时间" align="center"></el-table-column>
            <el-table-column prop="amount" label="金额" align="center"></el-table-column>
            <el-table-column prop="goodsSpecName" label="商品详情" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="openDetail(scope.row.details)">查看详情</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center"></el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>

    <el-dialog title="辅材详情" :visible.sync="goodsDetailDialog" width="60%" :close-on-click-modal="false">
      <el-table :data="goodsDetailList" style="width: 100%" border>
        <el-table-column prop="id" label="商品ID" align="center"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="number" label="数量" align="center"></el-table-column>
        <el-table-column prop="amount" label="单价" align="center"></el-table-column>
        <el-table-column prop="sub_amount" label="小计" align="center"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsDetailDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkOrder, getCompensateList } from '@/api/order'
import * as Storage from '@/api/storage'
import { mapGetters } from 'vuex'

export default {
  name: 'detail',
  data() {
    return {
      activeName: 'order_1',
      orderId: '',
      dataList: {},
      goodsDetailDialog: false,
      goodsDetailList: []
    }
  },

  computed: {
    ...mapGetters(['userid', 'name'])
  },

  created() {
    this.orderId = this.$route.query.orderId
    this.getDetail()
  },
  methods: {
    getDetail() {
      getWorkOrder({ orderId: this.orderId }).then(res => {
        this.dataList = res.data
      })
    },
    goBack() {
      this.$router.go(-1)
    },

    // 理赔
    openDetail(list) {
      this.goodsDetailList = list
      this.goodsDetailDialog = true
    }
  }
}
</script>

<style scoped lang="scss">
.header-container {
  display: flex;
  line-height: 24px;
  .el-page-header__left {
    align-items: center;
  }
  ::v-deep .el-tabs__header {
    margin-bottom: 0;
  }
  ::v-deep .el-tabs__item {
    padding: 0 10px;
    font-size: 16px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    background: none;
  }
}
.top-container {
  display: flex;
  margin-top: 30px;
  span {
    margin-right: 20px;
    font-weight: 500;
  }
}
.goods-container {
  .goods-info {
    display: flex;
    .image {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .name {
      flex: 1;
    }
  }
}

.card-container {
  margin-top: 20px;
  ::v-deep .el-card__header {
    background: #f5f7fa;
  }
  ::v-deep .el-card__body {
    padding: 0;
  }
  .title {
    font-weight: 500;
    color: #409eff;
  }
  .order-info {
    padding: 10px 20px;
    .item {
      display: flex;
      align-items: center;
      font-size: 14px;
      height: 36px;
      .label {
        font-weight: 500;
        width: 100px;
      }
      .value {
        flex: 1;
      }
    }
  }
}
</style>
