<template>
  <div class="app-container">
    <el-dialog title="单据详情" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-card class="box-card">
        <!-- 卡片头 -->
        <div slot="header" class="clearfix">
          <i class="el-icon-plus"/>
          <span>单据信息</span>
        </div>
        <!-- 卡片内容 -->
        <div>
          <el-descriptions class="margin-top" :column="4" :size="'medium'" border style="margin-bottom: 1rem">
            <el-descriptions-item>
              <template slot="label">
                单号
              </template>
              {{ info.stNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                调出门店
              </template>
              {{ info.outCorpName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                调入门店
              </template>
              {{ info.inCorpName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                总数量
              </template>
              {{ info.itemCount }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                总金额
              </template>
              {{ info.totalPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                调拨日期
              </template>
              {{ parseTime(info.stTime, '{y}-{m}-{d}') }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                调拨人
              </template>
              {{ info.userName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                优惠金额
              </template>
              {{ info.discountPrice }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                本次收款
              </template>
              {{ info.thisCollection }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                本次欠款
              </template>
              {{ info.thisDebt }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态
              </template>
              <dict-tag :type="DICT_TYPE.REPAIR_ST_STATUS" :value="info.stStatus"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                备注
              </template>
              {{ info.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-card class="box-card">
        <!-- 卡片头 -->
        <div slot="header" class="clearfix">
          <i class="el-icon-plus"/>
          <span>商品信息</span>
        </div>
        <!-- 卡片内容 -->
        <div>
          <el-table v-loading="loading" :data="info.items" :stripe="true" :show-overflow-tooltip="true">
            <el-table-column label="序号" align="center">
              <template scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center" prop="wares.name" width="180"/>
            <el-table-column label="商品编码" align="center" prop="wares.code" width="180"/>
            <el-table-column label="条形码" align="center" prop="wares.barCode" width="180"/>
            <el-table-column label="规格" align="center" prop="wares.model" width="180"/>
            <el-table-column label="数量" align="center" prop="goodsCount" width="150"/>
            <el-table-column label="单价" align="center" prop="goodsPrice" width="150">
              <template scope="scope">
                {{ scope.row.goodsPrice }}
              </template>
            </el-table-column>
            <el-table-column label="合计" align="center" prop="total" width="150">
              <template scope="scope">
                {{ scope.row.goodsCount * scope.row.goodsPrice }}
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" width="180"/>
          </el-table>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getBaseWarehouseList} from "@/api/base/warehouse";
import {getSt} from "@/api/repair/stockTransfer/stockTransfer";

export default {
  name: "sTShow",
  props: {
    soByType: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      dialogVisible: false,
      info: {},
      loading: true,
      warehouseList: null
    }
  },
  methods: {
    async open(row) {
      try {
        this.dialogVisible = true
        this.loading = true
        this.info = row
        const id = row.id
        const res = await getSt(id)
        console.log(res.data)
        this.info.items = res.data.items
        const response = await getBaseWarehouseList()
        this.warehouseList = response.data
      } finally {
        this.loading = false
      }
    },
    getWareHoseName(value) {
      return this.warehouseList.find(item => item.id === value).name
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
}
</style>
