<template>
  <div>
    <!-- <div class="common-card">
      <h3>订单状态</h3>
      <yl-step></yl-step>
    </div> -->
    <div class="common-card">
      <h3>计划参数</h3>
      <el-form ref="planForm" label-width="237px" class="grid-form-class">
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="计划类型" prop="unit1">
              <div class="content">
                {{ $route.query.planType }}
              </div>
            </el-form-item>
            <el-form-item label="计划周期">
              <div class="content">{{ $route.query.planPrd }}</div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="订单日期">
              <div class="content">{{ $route.query.docmkDate }}</div>
            </el-form-item>
            <el-form-item label="到货时长">
              <div class="content">{{ $route.query.delvDays }}</div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!--列表-->
    <div class="common-card">
      <h3>药品明细</h3>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="list"
        fit
        stripe
        border
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="60"
        ></el-table-column>
        <el-table-column label="药品编码" prop="drugListId" width="200" />
        <el-table-column label="药品信息" min-width="300">
          <template slot-scope="scope">
            <div class="drug-name">
              <el-tag v-if="scope.row.drugName">
                {{ scope.row.drugName }}
              </el-tag>
              {{ "【" + scope.row.dosformName + "】" }}
              <el-tag v-if="scope.row.essdrugType">
                {{
                  scope.row.essdrugType === "0"
                    ? "非基药"
                    : scope.row.essdrugType === "1"
                    ? "基药"
                    : scope.row.essdrugType
                }}
              </el-tag>
              <br />
              {{ "生产厂家 【" + scope.row.prodentpName + "】" }}
              <br />
              {{
                "药品规格 【" +
                scope.row.specName +
                "*" +
                scope.row.convrat +
                scope.row.prepunt +
                "/" +
                scope.row.pacUnt +
                "】"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供应商" prop="splerName" width="200" />
        <el-table-column label="订货数量" prop="ordCnt" width="100" />
        <el-table-column label="采购价" prop="purcPric" width="100" />
        <el-table-column label="采购金额" prop="purcAmt" width="100" />
        <el-table-column label="当前库存" prop="invCnt" width="100" />
        <el-table-column label="最低库存" prop="lowInv" width="100" />
        <el-table-column label="最高库存" prop="highInv" width="100" />
      </el-table>
      <p class="price-css">
        合计数量：{{ amount.num }} <span></span>合计金额： {{ amount.price }}
      </p>
    </div>
    <div class="foot-button">
      <el-button type="info" @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import { countNumPrice } from "@/utils/utils";
import { getDetlList } from "@/api/purchasing-management/procurement-plan-management";
export default {
  components: { ylStep },
  data() {
    return {
      listLoading: false,
      list: [],
      amount: {
        num: 0,
        price: 0
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },

    //获取列表数据
    getData() {
      this.listLoading = true;
      getDetlList({ id: this.$route.query.id })
        .then((response) => {
          this.list = response.data;
          this.amount = countNumPrice(this.list);
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
</style>