<template>
  <div>
    <!-- 采购订单受理已确认 -->
    <!-- <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="150px"
        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="qtySum">
              <div class="content">
                {{ listForm.qtySum }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="总金额" prop="purcAmt">
              <div class="content">
                {{ listForm.purcAmt }}
              </div>
            </el-form-item>
            <el-form-item label="来源部门" prop="deptName">
              <div class="content">
                {{ listForm.deptName }}
              </div>
            </el-form-item>
            <el-form-item label="客户名称" prop="branchName">
              <div class="content">
                {{ listForm.branchName }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="采购时间" prop="docmkDate">
              <div class="content">
                {{ listForm.docmkDate }}
              </div>
            </el-form-item>
            <el-form-item label="当前状态" prop="stas">
              <div class="content">
                {{ listForm.stas }}
              </div>
            </el-form-item>
            <el-form-item label="  " prop="">
              <div class="content">
                <!-- {{ listForm.branchName }} -->
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="common-card" v-show="cShow">
      <h3>手术信息</h3>
      <el-form
        :model="listForm"
        ref="listform"
        label-width="150px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="手术名称" prop="oprn">
              <div class="content">
                {{ listForm.oprn }}
              </div>
            </el-form-item>
            <el-form-item label="手术间" prop="oprtRoom">
              <div class="content">
                {{ listForm.oprtRoom }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="主治医生" prop="atddr">
              <div class="content">
                {{ listForm.atddr }}
              </div>
            </el-form-item>
            <el-form-item label="手术日期" prop="oprtTime">
              <div class="content">
                {{ listForm.oprtTime }}
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="common-card">
      <h3>耗材明细</h3>
      <el-form
        :model="listQuery"
        ref="listQuery"
        :inline="true"
        label-width="90px"
      >
        <el-form-item size="mini" label="生产企业" prop="prodEntp" class="long">
          <el-input
            v-model="listQuery.prodEntp"
            placeholder="请输入生产企业"
          ></el-input>
        </el-form-item>

        <el-form-item size="mini" label="是否集采" prop="isFas" class="long">
          <el-select
            v-model="listQuery.isFas"
            placeholder="请选择是否集采"
            clearable
          >
            <el-option
              v-for="item in isFasData"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          size="mini"
          label="注册证号"
          prop="regcertno"
          class="long"
        >
          <el-input
            v-model="listQuery.regcertno"
            placeholder="请输入注册证号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData()">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form :model="list">
        <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 label="耗材编码" prop="prodCode" />
          <el-table-column label="医保编码" prop="hiCode" />
          <el-table-column label="耗材信息" 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" width="120px">
            <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.purcPric }}元/{{ row.prcUnt }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总金额" prop="purcAmt" />

          <el-table-column label="备注" prop="memo" />
          <!-- <el-table-column label="驳回原因" prop="memo" width="200">
                      <template slot-scope="scope">
                          <el-form-item
                              label-width="0"
                              class="item"
                              :prop="scope.$index + '.memo'"
                          >
                              <el-input placeholder="请输入" v-model="scope.row.memo" :readonly="!returnInfo"></el-input>
                          </el-form-item>
                      </template>
                  </el-table-column> -->
          <!-- <el-table-column label="是否驳回" width="100">
                      <template slot-scope="scope">
                          <el-switch v-model="scope.row.flag" @change="handleSwitch(scope.$index,scope.row)" :disabled="!isShow"></el-switch>
                      </template>
                  </el-table-column> -->
        </el-table>
      </el-form>

      <div class="foot-button">
        <el-button type="info" @click="handleBack">返 回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import mcsInfo from "@/views/components/mcs-info.vue";
import ylPagination from "@/components/yl-pagination";
import { getMcsDetlList, acpMcsOrd } from "@/api/orderManage-sup/index";
export default {
  components: {
    ylStep,
    ylPagination,
    mcsInfo
  },
  data() {
    return {
      cShow: false,
      listForm: {
        id: "",
        detlCnt: "",
        qtySum: "",
        purcAmt: "",
        docmker: "",
        docmkDate: "",
        stas: "",
        deptName: ""
      },
      listLoading: false,
      list: [],
      aaLoad: false,
      isShow: false,
      returnInfo: false,
      stasOptions: [
        { value: "A", lable: "未受理" },
        { value: "B", lable: "已受理" },
        { value: "R", lable: "被驳回" },
        { value: "C", lable: "已出库" },
        { value: "D", lable: "部分出库" },
        { value: "Y", lable: "已入库" },
        { value: "P", lable: "部分入库" }
      ],
      essdrugOptions: ["非基药", "基药"],
      listQuery: {
        prodEntp: "",
        isFas: "",
        regcertno: ""
      },
      isFasData: [{ value: "1", name: "是" }, { value: "0", name: "否" }]
    };
  },
  created() {
    if (this.$route.query.stas == "A") {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    if (this.$route.query.purcType == "2") {
      this.cShow = true;
    } else {
      this.cShow = false;
    }
    this.listForm.id = this.$route.query.id;
    this.listForm.detlCnt = this.$route.query.detlCnt;
    this.listForm.purcAmt = this.$route.query.purcAmt;
    this.listForm.qtySum = this.$route.query.qtySum;
    this.listForm.docmker = this.$route.query.docmker;
    this.listForm.docmkDate = this.$route.query.docmkDate;
    this.listForm.branchName = this.$route.query.branchName;
    this.listForm.deptName = this.$route.query.deptName;
    this.stasOptions.forEach(i => {
      this.listForm.oprn = this.$route.query.oprn;
      this.listForm.oprtRoom = this.$route.query.oprtRoom;
      this.listForm.oprtTime = this.$route.query.oprtTime;
      this.listForm.atddr = this.$route.query.atddr;
      if (i.value == this.$route.query.stas) {
        this.listForm.stas = i.lable;
      }
    });
    this.getData();
  },
  methods: {
    getData() {
      this.listLoading = true;
      getMcsDetlList({
        id: this.$route.query.id,
        spdId: this.$route.query.spdId,
        prodEntp: this.listQuery.prodEntp,
        isFas: this.listQuery.isFas,
        regcertno: this.listQuery.regcertno
      })
        .then(res => {
          this.list = res.data;
          this.list.forEach(i => {
            if (i.memo) {
              i.flag = true;
            }
            i.essdrugType = this.essdrugOptions[i.essdrugType * 1];
            // if(i.purcAmt){
            //   i.purcAmt = i.purcAmt.toFixed(4)
            // }
            // if(i.purcPric){
            //   i.purcPric = i.purcPric.toFixed(4)
            // }
          });
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 是否驳回开关
    handleSwitch(index, row) {
      // console.log(row);
      if (row.flag == false) {
        row.memo = "";
        this.returnInfo = false;
      } else {
        this.returnInfo = true;
      }
    },
    // 驳回
    handleReject(row) {
      this.$refs.listRef.validate(valid => {
        if (valid) {
        }
      });
    },
    // 取消驳回
    handleNoReject(row) {},
    // 受理
    handleAccept() {
      this.list.forEach(e => {
        if (e.flag == true && !e.memo) {
          this.$message({
            message: "选择是否驳回后请填写驳回原因",
            type: "warning"
          });
          throw new Error("选择是否驳回后请填写驳回原因");
        }
      });
      this.$confirm("确认受理", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = this.list.filter(i => {
          if (i.flag == true) {
            return i;
          }
        });
        let data2 = data.map(i => {
          return { id: i.id, memo: i.memo };
        });
        let data3 = {
          id: this.$route.query.id,
          rejtList: data2
        };
        this.aaLoad = true;
        acpMcsOrd(data3)
          .then(res => {
            this.aaLoad = false;
            this.$router.push("purOrderConfirmed");
          })
          .catch(err => {
            this.aaLoad = false;
          });
      });
    },
    // 返回
    handleBack() {
      this.$router.push({
        name: "purOrderAccept",
        query: {
          spdId: this.$route.query.spdId,
          activeName: this.$route.query.activeName
        }
      });
    },
    // 重置
    reset() {
      this.$refs.listQuery.resetFields();
      this.getData();
    }
  }
};
</script>

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