<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="listForm"
        ref="listform"
        label-width="237px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="计划单号" prop="aa">
              <div class="content">
                {{ listForm.aa }}
              </div>
            </el-form-item>
            <el-form-item label="单据状态" prop="bb">
              <div class="content">
                {{ listForm.bb }}
              </div>
            </el-form-item>
            <el-form-item label="订单类型" prop="cc">
              <div class="content">
                {{ listForm.cc }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="明细条数" prop="dd">
              <div class="content">
                {{ listForm.dd }}
              </div>
            </el-form-item>
            <el-form-item label="金额" prop="ee">
              <div class="content">
                {{ listForm.ee }}
              </div>
            </el-form-item>
            <el-form-item label="当前状态" prop="ff">
              <div class="content">
                {{ listForm.ff }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="制单人" prop="gg">
              <div class="content">
                {{ listForm.gg }}
              </div>
            </el-form-item>
            <el-form-item label="制单时间" prop="hh">
              <div class="content">
                {{ listForm.hh }}
              </div>
            </el-form-item>
            <el-form-item label="退货金额" prop="ii">
              <div class="content">
                {{ listForm.ii }}
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </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="specName" />
          <el-table-column label="包装单位" prop="pacUnt" />
          <el-table-column label="订货数量" prop="ordCnt" width="120">
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                class="item"
                :prop="scope.$index + '.ordCnt'"
                :rules="[
                  {
                    required: true,
                    pattern: /^[1-9]\d*$/,
                    message: '请输入正整数',
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  placeholder="请输入"
                  v-model="scope.row.ordCnt"
                  maxlength="10"
                  :readonly="!isShow"
                  @blur="numChange(scope.$index, scope.row)"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="采购价" prop="purcPric" />
          <el-table-column label="采购金额" prop="purcAmt" />
          <el-table-column label="生产厂商" prop="prodentpName" />
          <el-table-column label="当前库存" prop="invCnt" />
          <el-table-column label="最低库存" prop="lowInv" />
          <el-table-column label="最高库存" prop="highInv" />
          <el-table-column label="供应商" prop="splerName" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.splerName">
                <el-button
                  type="text"
                  @click.native="handleClick(scope.$index, scope.row)"
                  :disabled="!isShow"
                >
                  {{ scope.row.splerName }}
                </el-button>
              </div>
              <div v-else>
                <el-button
                  type="text"
                  @click.native="handleClick(scope.$index, scope.row)"
                  :disabled="!isShow"
                  >选择供应商</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </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>

    <!-- 选择供应商 -->
    <el-dialog title="供应商管理" :visible.sync="dialogSpler" width="50%">
      <div style="display: flex">
        <el-form :model="comList" :inline="true">
          <el-form-item label="机构名称">
            <el-input
              v-model="comList.splerName"
              placeholder="请输入机构名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="splerData('search')"
              >查询
            </el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中..."
          border
          fit
          highlight-current-row
        >
          <template slot="empty">
            <img src="../../../../assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column
            fixed
            align="center"
            type="index"
            label="序号"
            width="60"
          ></el-table-column>
          <el-table-column label="机构名称" prop="splerName" />
          <el-table-column label="价格" prop="pric" width="100" />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="handleRow(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <yl-pagination
        v-show="totalS > 0"
        :total="totalS"
        :page.sync="comList.current"
        :limit.sync="comList.size"
        @pagination="splerData"
      />
    </el-dialog>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylPagination from "@/components/yl-pagination";
import {
  getDetlList,
  getSetEdDrugSplerRlts
} from "@/api/purchasing-management/procurement-plan-management";
import { apprPlan } from "@/api/approve/index";
import { getDrugSplerRlts } from "@/api/drugCataManage/index";
import { getTotalAmount } from "@/utils/utils";
export default {
  components: {
    ylStep,
    ylPagination
  },
  data() {
    return {
      listForm: {
        aa: "信息",
        bb: "信息",
        cc: "信息",
        dd: "信息",
        ee: "信息",
        ff: "信息",
        gg: "信息",
        hh: "信息",
        ii: "信息"
      },
      tableLoading: false,
      tableData: [],
      ppLoad: false,
      nnLoad: false,
      dialogSpler: false,
      comList: {
        current: 1,
        size: 10,
        splerName: "",
        drugListId: ""
      },
      listLoading: false,
      list: [],
      totalS: 0,
      listvv: "",
      isShow: false,
      reason: ""
    };
  },
  created() {
    if (this.$route.query.stas == "待审核") {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.tableLoading = true;
      getDetlList({ id: this.$route.query.sourceId })
        .then(response => {
          this.tableData = response.data;
          this.tableLoading = false;
        })
        .catch(err => {
          this.tableLoading = false;
        });
    },
    splerData(type) {
      if (type == "search") {
        this.comList.current = 1;
      }
      this.listLoading = true;
      getSetEdDrugSplerRlts(this.comList)
        .then(res => {
          this.list = [];
          if (res.data.records.length > 0) {
            res.data.records.forEach(item => {
              if (item.invdFlag != 1) {
                this.list.push(item);
              }
            });
          }
          this.totalS = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    reset() {
      this.comList.splerName = "";
      this.splerData();
    },
    numChange(index, row) {
      if (row.highInv && row.invCnt && row.ordCnt > row.highInv - row.invCnt) {
        this.$message({
          message: "订货数量加当前库存不能超过最高库存",
          type: "error"
        });
        row.ordCnt = 1;
        this.numOrPriceChange(index, row);
        throw new Error("订货数量加当前库存不能超过最高库存");
      }
      this.numOrPriceChange(index, row);
    },
    numOrPriceChange(index, row) {
      this.$set(
        this.tableData[index],
        "purcAmt",
        getTotalAmount(row.ordCnt, row.purcPric)
      );
    },
    // 选择供应商
    handleClick(e, row) {
      this.listvv = e;
      this.comList.drugListId = row.drugListId;
      this.dialogSpler = true;
      this.splerData();
    },
    handleRow(row) {
      this.tableData[this.listvv].splerName = row.splerName;
      this.tableData[this.listvv].splerId = row.splerId;
      this.tableData[this.listvv].purcPric = row.pric;
      this.dialogSpler = false;
      // 计算采购金额
      this.numOrPriceChange(this.listvv, this.tableData[this.listvv]);
    },
    // 通过
    handlePass() {
      this.tableData.forEach(item => {
        if (!item.splerName) {
          this.$message({
            message: "请填写相应信息，并选择供应商",
            type: "info"
          });
          throw new Error("请填写相应信息，并选择供应商");
        }
      });
      this.$refs.tabledata.validate(valid => {
        if (valid) {
          this.$confirm("确认通过", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.ppLoad = true;
            let data = {
              apprStas: "Y",
              id: this.$route.query.sourceId,
              purcPlanDetlDReqDTOList: []
            };
            data.purcPlanDetlDReqDTOList = this.tableData.map(i => {
              return {
                id: i.id,
                ordCnt: i.ordCnt,
                drugListId: i.drugListId,
                splerId: i.splerId
              };
            });
            apprPlan(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,
          purcPlanDetlDReqDTOList: [],
          reason: this.reason
        };
        data.purcPlanDetlDReqDTOList = this.tableData.map(i => {
          return {
            id: i.id,
            ordCnt: i.ordCnt,
            drugListId: i.drugListId,
            splerId: i.splerId
          };
        });
        apprPlan(data)
          .then(res => {
            this.nnLoad = false;
            this.$router.push("approveA");
          })
          .catch(err => {
            this.nnLoad = false;
          });
      });
    }
  }
};
</script>

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