<template>
  <!-- 耗材退货管理————待确认 -->
  <div>
    <!-- <div class="right-button"> -->
    <!-- <el-button type="primary" @click="handleConfirm" :loading="sureLoading"
        >确 认</el-button
      > -->
    <!-- <el-button type="danger" @click="handleRefuse" :loading="refuseLoading"
        >拒 绝</el-button
      > -->
    <!-- </div> -->
    <div class="common-card">
      <h3>基本信息</h3>
      <el-form
        :model="listForm"
        ref="listform"
        label-width="237px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="退货单号" prop="id">
              <div class="content">
                {{ listForm.id }}
              </div>
            </el-form-item>
            <el-form-item label="退货品种" prop="detlCnt">
              <div class="content">
                {{ listForm.detlCnt }}
              </div>
            </el-form-item>
            <el-form-item label="退货总数" prop="retnCnt">
              <div class="content">
                {{ listForm.retnCnt }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="退货金额" prop="retnAmt">
              <div class="content">
                {{ listForm.retnAmt }}
              </div>
            </el-form-item>
            <el-form-item label="发起人" prop="docmker">
              <div class="content">
                {{ listForm.docmker }}
              </div>
            </el-form-item>
            <el-form-item label="发起时间" prop="docmkDate">
              <div class="content">
                {{ listForm.docmkDate }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="当前状态" prop="stas">
              <div class="content">
                {{ listForm.stas }}
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="common-card">
      <h3>退货明细</h3>
      <el-form :model="list" ref="listRef">
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          fit
          stripe
          border
          height="500"
          @selection-change="handleSelectionChange"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <!-- <el-table-column type="selection" width="60" /> -->
          <el-table-column fixed type="index" label="序号" width="60" />
          <el-table-column label="医保编码" prop="hiCode" />
          <el-table-column label="耗材编码" prop="prodCode" />
          <el-table-column label="耗材信息" prop="prodName" width="300">
            <template slot-scope="scope">
              <mcs-info :info="scope.row"></mcs-info>
            </template>
          </el-table-column>
          <el-table-column label="规格" prop="spec" />
          <el-table-column label="型号" prop="mol" />
          <el-table-column label="材质" prop="matl" />
          <el-table-column label="是否集采" prop="isFas">
            <template #default="{ row }">
              <span v-if="row.isFas == '0'">否</span>
              <span v-if="row.isFas == '1'">是</span>
            </template>
          </el-table-column>
          <el-table-column label="包装" prop="convrat">
            <template #default="{ row }">
              <span
                >{{ row.purcUnt }} ({{ row.convrat }}{{ row.prcUnt }}/{{
                  row.purcUnt
                }})</span
              >
            </template>
          </el-table-column>
          <!-- <el-table-column label="采购数量" prop="purcCnt" /> -->
          <el-table-column label="单价" prop="purcPric">
            <template #default="{ row }">
              <span>{{ row.retnPric }}元/{{ row.prcUnt }}</span>
            </template>
          </el-table-column>
          <el-table-column label="退货数量" prop="retnCnt" />
          <el-table-column label="退货金额" prop="retnAmt" />
          <el-table-column label="退货原因" prop="rejtRea" />
        </el-table>
        <!-- <p class="price-css">合计数量：{{}} <span></span>合计金额： {{}}</p> -->
      </el-form>
    </div>
    <!--分页-->
    <yl-pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getData"
    />
    <!-- <div class="common-card">
      <h3>退货原因</h3>
      <el-form
        :model="listForm"
        ref="listform"
        label-width="237px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="退货原因" prop="rejtRea">
              <el-input v-model="listForm.rejtRea" readonly></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div> -->
    <div class="foot-button">
      <el-button type="primary" @click="handleConfirm" :loading="sureLoading"
        >确 认</el-button
      >
      <el-button type="info" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylPagination from "@/components/yl-pagination";
import mcsInfo from "@/views/components/mcs-info.vue";
import {
  selectRetnDetl,
  acpRetnOrd
} from "@/api/productreturnmanage-sup/returnList";

export default {
  components: {
    ylStep,
    ylPagination,
    mcsInfo
  },
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10
      },
      total: 0,
      listForm: {
        id: "",
        detlCnt: "",
        retnCnt: "",
        retnAmt: "",
        branchName: "",
        docmker: "",
        docmkDate: "",
        stas: "",
        rejtRea: ""
      },
      stasOptions: [
        { value: "A", lable: "待确认" },
        { value: "B", lable: "已确认" },
        { value: "R", lable: "已拒绝" }
      ],
      listLoading: false,
      list: [],
      //   isShow: false,
      sureLoading: false,
      refuseLoading: false
    };
  },
  created() {
    if (this.$route.query.stas == "A") {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    this.listForm.id = this.$route.query.id;
    this.listForm.detlCnt = this.$route.query.detlCnt;
    this.listForm.retnCnt = this.$route.query.retnCnt;
    this.listForm.retnAmt = this.$route.query.retnAmt;
    this.listForm.branchName = this.$route.query.branchName;
    this.listForm.docmker = this.$route.query.docmker;
    this.listForm.docmkDate = this.$route.query.docmkDate;
    this.listForm.rejtRea = this.$route.query.rejtRea;
    this.stasOptions.forEach(i => {
      if (i.value == this.$route.query.stas) {
        this.listForm.stas = i.lable;
      }
    });
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.listLoading = true;
      selectRetnDetl({ id: this.$route.query.id, ...this.listQuery })
        .then(res => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 确认退货
    handleConfirm() {
      // if(this.listForm.rejtRea==""){
      //     this.$message({
      //     message: "填写退货原因",
      //     type: "warning",
      //   });
      //   throw new Error("填写退货原因");
      // }
      this.$confirm("确认退货", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.sureLoading = true;
        let data = {
          id: this.$route.query.id,
          spdId: this.$route.query.spdId,
          stas: "B",
          rejtRea: ""
        };
        acpRetnOrd(data)
          .then(res => {
            if (res.success == true) {
              this.sureLoading = false;
              this.$message.success("操作成功");
              this.$router.push({
                name: "returnOrderAccept",
                query: { spdId: this.$route.query.spdId }
              });
            } else {
              this.sureLoading = false;
              this.$message.error("确认失败");
            }
          })
          .catch(err => {
            this.sureLoading = false;
          });
      });
    },
    // 拒绝退货
    handleRefuse() {
      this.$confirm("确认退货", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.refuseLoading = true;
        let data = {
          id: this.$route.query.id,
          spdId: this.$route.query.spdId,
          stas: "R",
          rejtRea: this.listForm.rejtRea
        };
        acpRetnOrd(data)
          .then(res => {
            if (res.success == true) {
              this.refuseLoading = false;
              this.$router.push({
                name: "returnOrderAccept",
                query: { spdId: this.$route.query.spdId }
              });
            } else {
              this.refuseLoading = false;
              this.$message.error("拒绝失败");
            }
          })
          .catch(err => {
            this.refuseLoading = false;
          });
      });
    },

    // 是否驳回开关
    handleSwitch(index, row) {
      if (row.flag == false) {
        row.rejtRea = "";
      }
    },
    // 驳回
    handleReject(row) {
      this.$refs.listRef.validate(valid => {
        if (valid) {
        }
      });
    },
    // 取消驳回
    handleNoReject(row) {},
    // 多选
    handleSelectionChange(e) {
      this.selectData = e;
    },
    handleBack() {
      this.$router.push({
        name: "returnOrderAccept",
        query: {
          spdId: this.$route.query.spdId
        }
      });
    }
  }
};
</script>

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