<!--
  @description:订单管理列表
  @Modifier：haoFx
  @routerPath: /shopmall/order/
  @date：  2019/10/9-13:46
-->

<template>
  <div>
    <el-dialog
      :visible.sync="childenData.dialog"
      :close-on-click-modal="false"
      title="订单查看"
      modal-append-to-body
      append-to-body
      width="1238px"
      custom-class="shop_mall_dialog"
    >
      <div class="shopmall-view">
        <!--1.  商品基本信息-->
        <section>
          <div class="content-title">
            1. 基本信息
          </div>
          <table class="tableData">
            <tr>
              <td>采购单位</td>
              <td colspan="3">
                {{ productsInfo.buyerDepartName }}
              </td>
            </tr>
            <tr>
              <td>订单编号</td>
              <td>{{ productsInfo.orderNumber }}</td>
              <td>订单金额(元)</td>
              <td style="color:#1f94f4;">
                ￥&nbsp;{{ tableData | computedPrice }}
              </td>
            </tr>
            <tr>
              <td>供应商</td>
              <td colspan="3">
                {{ productsInfo.goodsDepartName }}
              </td>
            </tr>
          </table>
        </section>
        <!-- 2.  商品介绍-->
        <section>
          <div class="content-title">
            2. 商品列表
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="序号" width="60" type="index" />
            <el-table-column prop="goodsName" label="商品名称" width="382">
              <template slot-scope="{row}">
                <span
                  style="color:#00AACA;cursor: pointer;"
                  @click="goToDetail(row.goodsId)"
                >{{ row.goodsName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="commodityPrice" label="单价(元)" width="250" />
            <el-table-column prop="number" label="数量" width="250" />
            <el-table-column prop="totalPrice" label="小计(元)" width="250" />
          </el-table>
        </section>
        <!--   3.  审核意见-->
        <section>
          <div class="content-title">
            3. 审核意见
          </div>
          <div>
            <div class="progress-content">
              <ul>
                <li v-for="(item,index) in auditList" :key="index" class="first">
                  <i class="node-icon" />
                  <span class="time">{{ item.createUser }}</span>
                  <span class="mon">{{ item.createTime }}</span>
                  <span class="s">{{ item.auditStatus }}</span>
                </li>
              </ul>
            </div>
          </div>
        </section>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getsupllierOrderDetatils } from '@/api/shoppingmall/order.js'
export default {
  filters: {
    computedPrice(newVal) {
      let num = 0
      newVal.forEach(val => {
        num += val.totalPrice * 1
      })
      return num.toFixed(2)
    }
  },
  props: {
    childenData: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      disabled: 'true',
      productsInfo: {
        buyerDepartName: '', // 采购单位
        orderNo: '', // 订单编号
        orderAmount: '', // 订单金额
        supplierDepartName: '' // 供应商
      },
      // 审核意见
      auditOpinionFrom: {
        auditOption: '', // 审核意见
        id: '', // 商品id
        type: '' // 审核标识位 1 审核通过 2 审核拒绝
      },
      tableData: [],
      totalPrice: '',
      auditList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getsupllierOrderDetatils(this.childenData.id).then((res) => {
        if (res.header.ret === '0') {
          this.auditList = res.data.orderTraces
          // const resultList = res.data.orderPage
          const arr = []
          this.productsInfo = res.data
          // resultList.forEach(val => {
          //   arr = arr.concat(val.orderdetails)
          // })
          res.data.orderPage.forEach(item => {
            arr.push(...item.orderdetails[0].skus)
          })
          this.tableData = [...arr]
          this.initStatus()
        }
      }).catch((err) => {
        throw new Error('获取供应商订单详情失败' + err)
      })
    },
    initStatus() {
      this.tableData.forEach((item, index) => {
        this.totalPrice = item.commodityPrice * item.number
      })
    },
    goToDetail(id) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id }
      })
    }
  }
}
</script>

<style scoped lang="less">
.aduit-detail {
  padding: 20px;

  .btn-wrap {
    padding: 5px;

    .closeBtn {
      float: right;
      width: 30px;
      height: 30px;
      border-radius: 30px;
      text-align: center;
    }
  }
}

.el-form-item {
  margin-bottom: 0px;
}
.shopmall-page-title {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-weight: bold;
}
.el-input--small .el-input__inner {
  display: block;
  height: 80px;
}

.progress-content {
  margin-left: 15px;
  padding-left: 5px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

.progress-content li {
  position: relative;
  padding: 9px 0 0 14px;
  line-height: 30px;
  border-left: 1px solid #d9d9d9;
  color: #999;
}

.progress-content li.first {
  padding-top: 0;
  border-left-color: #fff;
}

.progress-content li .node-icon {
  position: absolute;
  left: -6px;
  top: 50%;
  width: 11px;
  height: 11px;
  background: #000000;
  background: url(http://hovertree.com/texiao/css/25/img/order-icons.png) -21px -72px
    no-repeat;
}

.progress-content li .time {
  margin-right: 20px;
  position: relative;
  top: 4px;
  display: inline-block;
  vertical-align: middle;
}

.progress-content li .mon {
  margin-right: 10px;
  position: relative;
  top: 4px;
  display: inline-block;
  vertical-align: middle;
}
.progress-content li .s {
  margin-right: 20px;
  position: relative;
  top: 4px;
  display: inline-block;
  vertical-align: middle;
}

.progress-content li .txt {
  position: relative;
  top: 4px;
  display: inline-block;
  vertical-align: middle;
}

.progress-content li.first .time {
  margin-right: 20px;
}

.progress-content li.first .txt {
  max-width: 600px;
}
</style>
