<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.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.detlCnt }}</div>
            </el-form-item>
            <el-form-item label="金额">
              <div class="content">{{ planForm.amt }}</div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="采购计划">
              <div class="content">{{ planForm.purcPlanId }}</div>
            </el-form-item>

            <el-form-item label="供应商">
              <div class="content">{{ planForm.splerName }}</div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="业务员">
              <div class="content">{{ planForm.conerName }}</div>
            </el-form-item>

            <el-form-item label="制单人">
              <div class="content">{{ planForm.docmker }}</div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="制单时间">
              <div class="content">{{ planForm.docmkDate }}</div>
            </el-form-item>
            <!-- <el-form-item label="当前状态">
              <div class="content" v-if="planForm.purcOrdStas == 'B'">
                已提交
              </div>
              <div class="content" v-else-if="planForm.purcOrdStas == 'Y'">
                已受理
              </div>
            </el-form-item> -->
          </div>
        </div>
      </el-form>
    </div>
    <!--列表-->
    <div class="common-card">
      <h3>订单明细</h3>
      <el-form :model="returnForm" ref="returnForm" class="grid-form-class">
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="returnForm.detlList"
          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="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
            prop="retnCnt"
            width="150"
            fixed="right"
            v-if="$route.query.flag == 1"
          >
            <template #header>
              <span style="color: red; margin-right: 4px">*</span>
              <span>退货数量</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                :prop="'detlList.' + scope.$index + '.retnCnt'"
                :rules="rules.natureNum"
              >
                <el-input
                  v-model="scope.row.retnCnt"
                  placeholder="请输入"
                  @blur="numChange(scope.row)"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="退货金额"
            prop="returnPrice"
            width="150"
            fixed="right"
            v-if="$route.query.flag == 1"
          >
          </el-table-column>
          <el-table-column
            prop="retnRea"
            width="150"
            fixed="right"
            v-if="$route.query.flag == 1"
          >
            <template #header>
              <span style="color: red; margin-right: 4px">*</span>
              <span>退货原因</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                :prop="'detlList.' + scope.$index + '.retnRea'"
                :rules="rules.required"
              >
                <el-input
                  v-model="scope.row.retnRea"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>

    <div class="foot-button" v-if="$route.query.flag == 1">
      <el-button type="info" @click="goback">返回</el-button>
      <el-button type="danger" @click="applyReturn()">申请退货 </el-button>
    </div>
    <div class="foot-button" v-else>
      <el-button type="info" @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import {
  getDetlListWithRetnCnt,
  saveRetnOrd
} from "@/api/purchasing-management/return-report.js";
import rules from "@/utils/rules";
import { getTotalAmount } from "@/utils/utils";
export default {
  components: { ylStep },
  data() {
    return {
      rules,
      returnForm: { detlList: [] },
      listLoading: false,
      planForm: {
        delvOrdId: this.$route.query.delvOrdId,
        purcOrdId: this.$route.query.purcOrdId,
        detlCnt: this.$route.query.detlCnt,
        amt: this.$route.query.amt,
        splerName: this.$route.query.splerName,
        conerName: this.$route.query.conerName,
        docmker: this.$route.query.docmker,
        docmkDate: this.$route.query.docmkDate,
        delvOrdStas: this.$route.query.delvOrdStas,
        // purcOrdStas: this.$route.query.purcOrdStas,
        purcPlanId: this.$route.query.purcPlanId,
        planType: this.$route.query.planType
      }
    };
  },
  created() {
    this.getData();
  },

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

    // 计算退货价格
    numChange(row) {
      this.$set(row, "returnPrice", getTotalAmount(row.retnCnt, row.delvPric));
      if (row.retnCnt > row.toRetnCnt) {
        this.$message({
          message: "库存不足，无法退货",
          type: "warning"
        });
        return false;
      }
    },

    //获取列表数据
    getData() {
      this.listLoading = true;
      getDetlListWithRetnCnt({
        delvOrdId: this.$route.query.delvOrdId,
        purcOrdId: this.$route.query.purcOrdId
      })
        .then((response) => {
          this.returnForm.detlList = response.data;
          this.returnForm.detlList.forEach((item) => {
            item.retnCnt = "";
          });
          this.total = response.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },

    // 申请退货
    applyReturn() {
      let flag = true;
      this.returnForm.detlList.forEach((item) => {
        if (item.retnCnt > item.toRetnCnt) {
          flag = false;
          return false;
        }
      });
      if (!flag) {
        this.$message({
          message: "库存不足，无法退货",
          type: "warning"
        });
        return false;
      }
      this.$refs["returnForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认申请退货", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.returnForm.delvOrdId = this.$route.query.delvOrdId;
              saveRetnOrd(this.returnForm)
                .then((response) => {
                  this.$message({
                    message: "操作成功",
                    type: "success"
                  });
                  this.getData();
                })
                .catch((err) => {});
            })
            .catch(() => {});
        }
      });
    }
  }
};
</script>

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