<template>
  <div class="app-container" v-loading="loading">
    <el-card class="card-box">
      <div class="detail-box">
        <image-preview :src="detail.picture" :width="100" :height="100" style="margin-right: 16px"/>
        <el-descriptions style="flex: 1" title="基础信息" :column="4">
          <el-descriptions-item label="订单编号">{{ detail.orderNo | dv}}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <dict-tag :options="dict.type.order_status" :value="detail.status" size="mini"/>
          </el-descriptions-item>
          <el-descriptions-item label="客户">{{ detail.customer | dv}}</el-descriptions-item>
          <el-descriptions-item label="订单日期">{{ detail.orderDate | dv}}</el-descriptions-item>
          <el-descriptions-item label="交货日期">{{ detail.deliveryDate | dv}}</el-descriptions-item>
          <el-descriptions-item label="用料">{{ detail.material | dv}}</el-descriptions-item>
          <el-descriptions-item label="特殊要求" :span="2">{{ detail.remark | dv}}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ detail.createBy | dv}}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ detail.createTime | dv}}</el-descriptions-item>
          <el-descriptions-item label="数量">{{ detail.num | dv}}</el-descriptions-item>
          <el-descriptions-item label="已上报">{{ detail.reportNum | dv}}</el-descriptions-item>
          <el-descriptions-item label="已清点">{{ detail.storeNum | dv}}</el-descriptions-item>
          <el-descriptions-item label="进度">
            <el-progress style="width: 200px" :percentage="detail.progress" :color="ProgressColors" :format="ProgressFormat"/>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <el-card class="card-box">
      <el-tabs>
        <el-tab-pane label="产品列表">
          <order-prod
            v-if="detail.id != null"
            :query="{orderId: detail.id}"
            hidden-search
            :container-class="null"
            :hide-columns="['id', 'orderNo']"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getOrder } from '@/api/bst/order'
import { ProgressColors, ProgressFormat } from '@/utils/constants'
import OrderProd from '@/views/bst/orderProd/index.vue'

export default {
  name: "OrderView",
  components: { OrderProd },
  dicts: ['order_status'],
  data() {
    return {
      detail: {},
      loading: false,
      ProgressColors,
    }
  },
  created() {
    this.detail.id = this.$route.params.id;
    this.getDetail();
  },
  methods: {
    ProgressFormat,
    getDetail() {
      this.loading = true;
      getOrder(this.detail.id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.detail-box {
  display: flex;
  justify-content: space-between;
}
</style>
