<template>
  <div>
    <div class="common-card">
      <h3>订单状态</h3>
      <yl-step></yl-step>
    </div>
    <div class="common-card">
      <h3>单据信息</h3>
      <el-form
        :model="planForm"
        ref="planForm"
        label-width="237px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="退货订单号">
              <div class="content">
                {{ planForm.id }}
              </div>
            </el-form-item>
            <el-form-item label="采购订单号">
              <div class="content">
                {{ planForm.purcOrdId }}
              </div>
            </el-form-item>
            <el-form-item label="订单类型">
              <div class="content">
                {{ planForm.planType }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="供应商">
              <div class="content">
                {{ planForm.splerName }}
              </div>
            </el-form-item>
            <el-form-item label="业务员">
              <div class="content">
                {{ planForm.conerName }}
              </div>
            </el-form-item>
            <el-form-item label="明细条数">
              <div class="content">
                {{ planForm.deltCnt }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="金额">
              <div class="content">
                {{ planForm.amt }}
              </div>
            </el-form-item>
            <el-form-item label="制单人">
              <div class="content">
                {{ planForm.docmker }}
              </div>
            </el-form-item>
            <el-form-item label="制单时间">
              <div class="content">
                {{ planForm.docmkDate }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="当前状态">
              <div class="content" v-if="planForm.stas == 'B'">已提交</div>
              <div class="content" v-else-if="planForm.stas == 'Y'">已受理</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="150" />
        <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="delvPric" width="150" />
        <el-table-column label="采购金额" prop="delvAmt" width="150" />
        <el-table-column label="验收数量" prop="shppCnt" width="150" />
        <el-table-column label="可退数量" prop="toRetnCnt" width="150" />
        <el-table-column label="退货数量" prop="retnCnt" width="150" />
        <el-table-column label="退货金额" prop="retnAmt" width="150" />
        <el-table-column label="退货原因" prop="retnRea" width="150" />
        <el-table-column label="状态" prop="stas" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.stas == 'B'">已提交</span>
            <span v-if="scope.row.stas == 'R'">已驳回</span>
            <span v-if="scope.row.stas == 'Y'">已受理</span>
          </template>
        </el-table-column>
        <el-table-column label="驳回原因" prop="rejtRea" width="150" />
      </el-table>
    </div>
    <div class="foot-button">
      <el-button type="info" @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import { getRetnOrdDetlList } from "@/api/purchasing-management/return-record.js";
export default {
  components: { ylStep },
  data() {
    return {
      listLoading: false,
      list: [],
      planForm: {
        id: this.$route.query.id,
        purcOrdId: this.$route.query.purcOrdId,
        splerName: this.$route.query.splerName,
        conerName: this.$route.query.conerName,
        amt: this.$route.query.amt,
        docmker: this.$route.query.docmker,
        docmkDate: this.$route.query.docmkDate,
        planType: this.$route.query.planType,
        deltCnt: this.$route.query.deltCnt,
        stas: this.$route.query.stas
      }
    };
  },

  created() {
    this.getData();
  },

  methods: {
    goback() {
      this.$router.go(-1);
    },

    //获取列表数据
    getData() {
      this.listLoading = true;

      getRetnOrdDetlList({ id: this.$route.query.id })
        .then((response) => {
          this.list = response.data;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    }
  }
};
</script>

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