<template>
  <div class="content-height p20">
    <div class="page-title">
      <PageHeader title="盘点计划详情"> </PageHeader>
    </div>
    <div>
      <StatusStep :activeCode="infoData.planStatus" :statusList="statusList" />
      <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%"
                    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>
  </div>
</template>

<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  import PageHeader from '@/components/PageHeader';
  import { allocationType } from '@/utils/dict/warehouse';
  import { useDictLabelFilter } from '@/utils/dict';
  import StatusStep from '@/components/StatusStep/index.vue';
  import { getInventoryPlanDetailById } from '@/api/inventory';
  export default {
    components: { StatusStep, PageHeader },
    data() {
      return {
        allocationType,
        planStatus: [
          { code: '0', label: '未派单', class: 'danger-text' },
          { code: '1', label: '已派单', class: 'primary-text' },
          { code: '2', label: '已完成', class: 'primary-text' },
          { code: '3', label: '已撤回', class: 'primary-text' }
        ],
        infoData: {},
        // 流程实例
        id: undefined, // 流程实例的编号
        processInstance: {},

        // BPMN 数据
        bpmnXML: null,
        bpmnControlForm: {
          prefix: 'flowable'
        },
        activityList: [],
        // 审批记录
        tasksLoad: true,
        tasks: []
      };
    },
    created() {
      this._getDetail();
    },
    filters: {
      dictFilter: useDictLabelFilter
    },
    computed: {
      statusList() {
        const base = [{ label: '创建' }];
        switch (this.infoData.planStatus) {
          case '0':
            base.push({ code: '0', label: '未派单', activeColor: '#cc3300' });
            break;
          case '1':
            base.push({ code: '1', label: '已派单', activeColor: '#157a2c' });
            break;
          case '2':
            base.push({ code: '1', label: '已派单', activeColor: '#157a2c' });
            base.push({ code: '2', label: '已完成', activeColor: '#157a2c' });
            break;
          case '3':
            base.push({ code: '3', label: '已撤回', activeColor: '#cc3300' });
            break;
        }
        return base;
      }
    },
    methods: {
      async _getDetail() {
        console.log(this.$route.query.id);
        getInventoryPlanDetailById(this.$route.query.id).then((data) => {
          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>
