<template>
  <div style="overflow-y: auto;">
    <div class="common-card">
      <h3>审批进度</h3>
      <yl-step></yl-step>
    </div>
    <div class="common-card">
      <h3>申领明细</h3>
      <el-form :model="tableData" ref="tabledata">
        <el-table
          v-loading="tableLoading"
          element-loading-text="加载中"
          :data="tableData"
          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 label="药品编码" prop="drugListId" />
          <el-table-column label="耗材名称" prop="" width="300">
            <template slot-scope="scope">
              <div class="drug-name">
                <el-tag>{{ scope.row.drugName }}</el-tag
                >{{ "【" + scope.row.dosformName + "】" }}
                <el-tag>{{ 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="appyCnt" width="120">
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                class="item"
                :prop="scope.$index + '.appyCnt'"
                :rules="[
                  {
                    required: true,
                    pattern: /^[1-9]\d*$/,
                    message: '请输入正整数',
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  placeholder="请输入"
                  v-model="scope.row.appyCnt"
                  maxlength="10"
                  :readonly="!isShow"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column label="采购价" prop="" />
                <el-table-column label="采购金额" prop="" /> -->
          <el-table-column label="当前库存" prop="invCnt" />
          <el-table-column label="最低库存" prop="lowInv" />
          <el-table-column label="最高库存" prop="highInv" />
        </el-table>
        <p class="price-css">合计数量：{{ amount.num }}</p>
      </el-form>
      <div class="foot-button" style="margin:30px 0 20px;" v-if="isShow">
        <el-button type="primary" @click="handlePass" :loading="ppLoad"
          >通过</el-button
        >
        <el-button type="danger" @click="handleNoPass" :loading="nnLoad"
          >驳回</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import { getDetlList } from "@/api/applyManage/index";
import { apprAppy } from "@/api/approve/index";
import { countNumPrice } from "@/utils/utils";
export default {
  components: {
    ylStep
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      ppLoad: false,
      nnLoad: false,
      isShow: false,
      amount: {
        num: 0
      },
      reason: "",
      essdrugOptions: ["非基药", "基药"]
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    // applySum: function () {
    //     return this.tableData
    //         .map((row) => row.bb)
    //         .reduce((acc, cur) => parseFloat(acc) + parseFloat(cur), 0);
    // },
  },
  created() {
    if (this.$route.query.stas == "待审核") {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  },
  methods: {
    getData() {
      // this.tableData = [{aa:"11",bb:"32",a:"注射用比阿培南",b:"注射剂-冻干粉针剂",c:"基药",d:"国药长治",e:"0.3g1支/支*10瓶/盒"},
      // {aa:"22",bb:"34",a:"注射用比阿培南",b:"注射剂-冻干粉针剂",c:"基药",d:"国药长治",e:"0.3g1支/支*10瓶/盒"}]
      this.tableLoading = true;
      getDetlList({ id: this.$route.query.sourceId })
        .then(res => {
          this.tableData = res.data;
          this.tableData.forEach(i => {
            i.essdrugType = this.essdrugOptions[i.essdrugType * 1];
          });
          this.tableLoading = false;
          this.amount = countNumPrice(this.tableData, "appyCnt");
        })
        .catch(err => {
          this.tableLoading = false;
        });
    },
    // 申请数量书写完毕后计算合计数量
    handleInput() {
      this.amount = countNumPrice(this.list, "appyCnt");
    },
    // 通过
    handlePass() {
      this.$refs.tabledata.validate(valid => {
        if (valid) {
          this.$confirm("确认通过", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.ppLoad = true;
            console.log(this.tableData, "tableData");
            let data = {
              apprStas: "Y",
              id: this.$route.query.sourceId,
              drugAppyOrdDetlDReqDTOS: []
            };
            data.drugAppyOrdDetlDReqDTOS = this.tableData.map(i => {
              return { id: i.id, appyCnt: i.appyCnt, drugListId: i.drugListId };
            });
            apprAppy(data)
              .then(res => {
                this.ppLoad = false;
                this.$router.push("approveA");
              })
              .catch(err => {
                this.ppLoad = false;
              });
          });
        } else {
          this.$message({
            type: "warning",
            message: "请填写必填项信息"
          });
        }
      });
    },
    // 驳回
    handleNoPass() {
      this.$prompt("请输入驳回原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        inputValidator: value => {
          if (!value) {
            return "驳回原因不能为空";
          } else {
            this.reason = value;
          }
        }
      }).then(() => {
        this.nnLoad = true;
        let data = {
          apprStas: "R",
          id: this.$route.query.sourceId,
          drugAppyOrdDetlDReqDTOS: [],
          reason: this.reason
        };
        data.drugAppyOrdDetlDReqDTOS = this.tableData.map(i => {
          return { id: i.id, appyCnt: i.appyCnt, drugListId: i.drugListId };
        });
        apprAppy(data)
          .then(res => {
            this.nnLoad = false;
            this.$router.push("approveA");
          })
          .catch(err => {
            this.nnLoad = false;
          });
      });
    }
  }
};
</script>

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