<template>
  <ContainerTit>
    <el-card shadow="hover" class="box-card">
      <div slot="header">基础信息</div>
      <el-row class="de_from_row">
        <el-col :span="6">
          <span class="de_label">单据编号：</span>
          <span class="de_val">ORDER3247892472398</span>
        </el-col>
        <el-col :span="6">
          <span class="de_label">制单日期：</span>
          <span class="de_val">2019-09-10 20:20:20</span>
        </el-col>
        <el-col :span="6">
          <span class="de_label">操作人：</span>
          <span class="de_val">小小</span>
        </el-col>
        <el-col :span="6">
          <span class="de_label">仓库：</span>
          <span class="de_val">一号仓库</span>
        </el-col>
        <el-col :span="12">
          <span class="de_label">备注：</span>
          <span class="de_val">一条备注飘过</span>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表格 -->
    <el-card shadow="hover" class="box-card">
      <div slot="header">商品信息</div>
      <el-table border size="small" :data="goodsInfo">
        <el-table-column prop="goods" align="center" label="商品名称">
          <template slot-scope="scope">
            <div class="table-list-box">
              <div style="width: 60px; height: 60px">
                <img
                  :src="scope.row.img"
                  alt=""
                  style="max-width: 100%; max-height: 100%"
                />
              </div>
              <div class="goods-info-box">
                <p class="goods-title">
                  {{ scope.row.goodsName }}
                </p>
                <p class="goods-no">
                  {{ scope.row.goodsNo }}
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unit" align="center" label="单位">
          <template>KG</template>
        </el-table-column>
        <el-table-column prop="goodsWeight" align="center" label="期初库存数量">
          <template slot-scope="scope">
            {{ scope.row.goodsWeight }}
          </template>
        </el-table-column>
        <el-table-column prop="price" align="center" label="期初成本（元）">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="date" align="center" label="小计(元)">
          <template slot-scope="scope">
            {{ scope.row.price * scope.row.goodsWeight }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- // 表格 -->
  </ContainerTit>
</template>

<script>
  export default {
    name: "StartInfo",
    data() {
      return {
        Warehouse_id: "",
        warehouseDetail: {},
        goodsInfo: [
          {
            img:
              "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1536834450,1831163175&fm=26&gp=0.jpg",
            goodsName: "鸡腿",
            goodsNo: "JT123123",
            no: "YUSJ123123",
            warehouseName: "一号仓库",
            unit: "KG",
            goodsWeight: "1000",
            lockStock: "200",
            price: "20000",
            realGoodsPrice: "20000",
            goodsCostMoney: "200",
            realGoodsMoney: "200",
            totalMoney: "2000000",
          },
        ],
      };
    },
    created() {
      if (this.$route.query.id) {
        // this.Warehouse_id = this.$route.query.id
        // this.getWarehouseDetail()
      }
    },
    methods: {
      // 获取期初库存详情
      async getWarehouseDetail() {
        const { data } = await getBeginStock({
          id: this.Warehouse_id,
        });

        this.warehouseDetail = data;
        this.goodsInfo = data.goodsInfo;
      },
    },
  };
</script>

<style scoped>
  .module-box {
    padding: 15px;
    background-color: #ffffff;
  }
  .module-form-item {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .module-form-item .el-form-item {
    flex: 0 0 33%;
  }
  .module-form-item .el-form-item .remarks {
    width: 80%;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
  .table-info {
    color: #333;
    font-size: 12px;
    line-height: 2;
    font-weight: 700;
  }

  .table-list-box {
    display: flex;
    font-size: 12px;
  }
  .table-list-box .goods-info-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
  }
  .table-list-box .goods-info-box p {
    text-align: left;
  }
</style>
