<template>
  <el-dialog
    :visible.sync="visible"
    v-if="visible"
    title="出库单详情"
    width="60vw"
    append-to-body
    @close="closeOuboundDetail"
  >
    <div class="main_container">
      <el-descriptions
        title=""
        :column="3"
        size="medium"
        border
        label-class-name="title-col"
        content-class-name="title-col"
      >
        <el-descriptions-item>
          <template slot="label"> 批次号 </template>
          {{ outboundData.batchNo }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 名称 </template>
          {{ outboundData.name }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 牌号 </template>
          {{ outboundData.brandNum }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label"> 物品编码 </template>
          {{ outboundData.ca }}
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label"> 编码 </template>
          {{ outboundData.categoryCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 类型</template>
          {{ typeName[Number(outboundData.rootCategoryLevelId)] }}
        </el-descriptions-item>

        <!-- <el-descriptions-item>
          <template slot="label"> 牌号 </template>
          {{}}
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label"> 型号 </template>
          {{ outboundData.modelType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 规格 </template>
          {{ outboundData.specification }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label"> 领料类型 </template>
          <span v-if="outboundData.type"></span>
        </el-descriptions-item> -->
        <!-- <el-descriptions-item>
          <template slot="label"> 销售单数量 </template>
          {{}}
        </el-descriptions-item> -->
        <!-- <el-descriptions-item>
          <template slot="label"> 生产类型 </template>
          {{}}
        </el-descriptions-item> -->

        <!-- <el-descriptions-item>
          <template slot="label"> 工艺路线 </template>
          {{}}
        </el-descriptions-item> -->

        <el-descriptions-item>
          <template slot="label"> 订单数量 </template>
          {{ outboundData.feedQuantity }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 单位 </template>
          {{ outboundData.unit }}
        </el-descriptions-item>

        <!-- <el-descriptions-item>
            <template slot="label"> 订单重量 </template>
            {{ outboundData.weight }}{{ outboundData.weightUnit }}
          </el-descriptions-item> -->

        <el-descriptions-item>
          <template slot="label"> 仓库名称 </template>
          {{ outboundData.warehouseName }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 供应商 </template>
          {{ outboundData.supplierName }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label"> 订单重量 </template>
          {{}}
        </el-descriptions-item> -->
        <!-- <el-descriptions-item>
          <template slot="label"> 要求生产数量 </template>
          {{}}
        </el-descriptions-item> -->
        <!-- <el-descriptions-item>
          <template slot="label"> 要求生产重量 </template>
          {{}}
        </el-descriptions-item> -->
        <!-- <el-descriptions-item>
          <template slot="label"> 要求完成日期 </template>
          {{}}
        </el-descriptions-item> -->
        <!-- <el-descriptions-item>
          <template slot="label"> 所属工厂 </template>
          {{}}
        </el-descriptions-item> -->
        <!-- <el-descriptions-item :span="3">
          <template slot="label"> </template>
        </el-descriptions-item> -->
      </el-descriptions>
    </div>
    <div slot="footer" class="footer">
      <div>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getOutboundDetail } from '@/api/produce/picking.js';
  import { typeName } from '../common.js';

  export default {
    mixins: [dictMixins],
    props: {
      info: Object,
      type: String
    },
    data() {
      return {
        visible: false,
        loading: false,
        tableList: [],
        outboundData: {},
        typeName
      };
    },
    computed: {},
    created() {},
    methods: {
      open(item) {
        this.visible = true;
        this.getOutboundDetailData(item.pickOrderId, item.categoryCode);
      },
      cancel() {
        this.visible = false;
      },

      closeOuboundDetail() {
        this.visible = false;
      },

      async getOutboundDetailData(pickOrderId, categoryCode) {
        await getOutboundDetail({ pickOrderId, categoryCode }).then((res) => {
          if (res.length != 0) {
            const totalNumber = res.reduce((acc, cur) => {
              return cur.feedQuantity ? Number(cur.feedQuantity) + acc : acc;
            }, 0);
            res[0].feedQuantity = totalNumber;
            this.outboundData = res[0];
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  .basic-details-title {
    margin: 10px 0;
  }

  .title-col {
    color: #000000 !important;
    background-color: #fff;
  }
</style>
