<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.soNo}}
            </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">
                {{soByType ? '采购员' : '领料人'}}
              </template>
              {{info.userName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                供应商
              </template>
              {{info.supplierName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                登记时间
              </template>
              {{parseTime(info.createTime, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                {{soByType ? '入库时间' : '领料时间'}}
              </template>
              {{parseTime(info.soTime, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                门店
              </template>
              {{info.corpName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                状态
              </template>
              <dict-tag :type="DICT_TYPE.REPAIR_SO_STATUS" :value="info.soStatus"/>
            </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.goodsList" :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="repairWares.name" width="180" />
            <el-table-column label="商品编码" align="center" prop="repairWares.code" width="180" />
            <el-table-column v-if="soByType" label="条形码" align="center" prop="repairWares.barCode" width="180" />
            <el-table-column label="规格" align="center" prop="repairWares.model" width="180" />
            <el-table-column label="数量" align="center" prop="goodsCount" width="150" />
            <el-table-column :label="soByType ? '进价' : '成本'" 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 v-if="soByType" label="供应商" align="center" prop="supplierName" width="180">
              <template slot-scope="scope">
                {{info.supplierName}}
              </template>
            </el-table-column>
            <el-table-column :label="soByType ? '采购仓库' : '仓库'" align="center" prop="wareName" width="150">
              <template slot-scope="scope">
                {{getWareHoseName(scope.row.wareId)}}
              </template>
            </el-table-column>
            <el-table-column label="所属门店" align="center" prop="corpName" width="180" />
            <el-table-column :label="soByType ? '入库时间' : '领料时间'" align="center" prop="soTime" width="150">
              <template slot-scope="scope">
                {{parseTime(info.soTime, '{y}-{m}-{d}')}}
              </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 UserChoose from "@/views/repair/Components/UserChoose.vue";
import SoiTable from "@/views/repair/stockOperate/Components/SoiTable.vue";
import {getRepairSoiByIds} from "@/api/repair/stockOperate/stockOperateItem";
import {getBaseWarehouseList} from "@/api/base/warehouse";

export default {
  name: "soShow",
  components: {SoiTable, UserChoose},
  props:{
    soByType:{
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      dialogVisible: false,
      info:{},
      loading: true,
      warehouseList: null
    }
  },
  methods: {
    async open(row){
      this.dialogVisible = true
      this.info = row
      const ids = row.goodsList.map(item => item.id)
      const res = await getRepairSoiByIds(ids)
      this.info.goodsList = res.data
      const response = await getBaseWarehouseList()
      this.warehouseList = response.data
      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>
