<template>
  <div class="content-height p20">
    <div class="page-title">
      <PageHeader title="盘点工单详情"> </PageHeader>
    </div>
    <div>
      <div class="content-detail mt10">
        <div class="basic-details">
          <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
        </div>
        <div class="mt20">
          <el-form label-width="110px">
            <el-col :span="8">
              <el-form-item label="单据编号">
                <span>{{ infoData.code }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点名称">
                <span>{{ infoData.name }}</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="资产类型">
                <span></span>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="8">
              <el-form-item label="盘点类型">
                <span>{{ infoData.allotName }}</span>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="盘点仓库">
                <span>{{ infoData.warehouseName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点部门">
                <span>{{ infoData.executeGroupName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点人员">
                <span>{{ infoData.executorName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划盘点时长">
                <span>{{ infoData.executorDuration }}分钟</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="审批人">
                <span></span>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="备注">
                <span>{{ infoData.remark }}</span>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
      <div class="content-detail mt20">
        <HeaderTitle title="盘点清单" size="16px"></HeaderTitle>
        <div class="mt20">
          <el-table
            ref="table"
            :data="infoData.planDetailVOS"
            tooltip-effect="dark"
            :max-height="500"
            border
          >
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="物品编码"
              prop="info.categoryCode"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="物品名称" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="right">
                  <el-table
                    ref="filterTable"
                    :data="scope.row.planDetailVOList"
                    style="width: 100%"
                    :max-height="500"
                    border
                  >
                    <el-table-column width="50" type="index" label="序号">
                    </el-table-column>
                    <el-table-column
                      prop="info.packageNo"
                      width="180"
                      label="包装编码"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="info.packingCountBase"
                      label="包装数量"
                    >
                    </el-table-column>
                    <el-table-column prop="info.packingUnit" label="包装单位">
                    </el-table-column>
                    <!-- <el-table-column prop="weight" label="重量">
                    </el-table-column>
                    <el-table-column prop="weightUnit" label="重量单位">
                    </el-table-column> -->
                    <el-table-column width="120" prop="" label="生产日期">
                    </el-table-column>
                  </el-table>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.categoryName }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="批次号"
              prop="info.batchNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="牌号"
              prop="info.brandNum"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="型号"
              prop="info.categoryModel"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="规格"
              prop="info.specification"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量数量"
              prop="info.measureQuantity"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              prop="info.measureUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="重量"
              prop="info.weight"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="info.weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="content-detail mt20">
        <HeaderTitle title="报损报溢清单" size="16px"></HeaderTitle>
        <div class="mt20">
          <el-table :data="reportList" :max-height="500" border>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column
              label="状态"
              prop="status"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{ row }">
                {{
                  row.status > 0
                    ? statusOption.filter((item) => item.value == row.status)[0]
                        .label
                    : ''
                }}
              </template>
            </el-table-column>
            <el-table-column label="数量" :show-overflow-tooltip="true">
              <template slot-scope="{ row }">
                {{
                  row.status > 0
                    ? row[
                        statusOption.filter(
                          (item) => item.value == row.status
                        )[0].numKey
                      ]
                    : 0
                }}
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              label="物品名称"
              prop="categoryName"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="批次号"
              prop="batchNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              width="150"
              label="包装编码"
              prop="packageNo"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装数量"
              prop="info.packingCountBase"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="包装单位"
              prop="info.packingUnit"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              label="重量"
              prop="info.weight"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="重量单位"
              prop="info.weightUnit"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              width="200"
              label="仓库"
              prop="info.warehouseName"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import PageHeader from '@/components/PageHeader';
  import { getOrderInfoByPlanId, getReportList } from '@/api/inventory';

  export default {
    components: { PageHeader },
    data() {
      return {
        infoData: {},
        reportList: [],
        statusOption: [
          {
            label: '盘盈',
            value: '2',
            numKey: 'surplusQuantity'
          },
          {
            label: '丢失',
            value: '3',
            numKey: 'loseQuantity'
          },
          {
            label: '破损',
            value: '4',
            numKey: 'wornQuantity'
          }
        ]
      };
    },
    created() {
      this._getDetail();
    },
    methods: {
      async _getDetail() {
        const data = await getOrderInfoByPlanId({
          planOrderId: this.$route.query.id,
          planId: this.$route.query.planId
        });
        const res = await getReportList({
          planOrderId: this.$route.query.id,
          planId: this.$route.query.planId,
          status: 1
        });
        this.reportList = res;
        this.infoData = data;
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-form-item) {
    margin-bottom: 0 !important;
  }
  .p20 {
    padding: 20px;
  }
  .mt40 {
    margin-top: 40px;
  }

  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    overflow: hidden;
  }
  .content-height {
    height: auto;
    background: #fff;
  }
</style>
