<template>
  <!-- 采购订单待确认 -->
  <div style="display: flex">
    <el-card style="width: 18%; margin-right: 18px; border-radius: 6px">
      <el-tabs v-model="activeNametree" type="card" @tab-click="tabClick" stretch>
        <!-- <el-tab-pane label="按分类" name="grp"></el-tab-pane> -->
        <el-tab-pane label="按机构" name="org"></el-tab-pane>
      </el-tabs>
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="spdId"
        @node-click="handleNodeClick"
        default-expand-all="true"
        style="margin-top: 10px"
      ></el-tree>
    </el-card>
    <div class="right-common-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待确认" name="first">
          <el-form :model="listQuery" ref="queryForm" :inline="true">
            <el-form-item label="采购单号" prop="id">
              <el-input v-model="listQuery.id" placeholder="请输入申领单号"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="deptName">
              <el-input
                v-model="listQuery.deptName"
                placeholder="请输入客户名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="手术名称" prop="deptName">
              <el-input
                v-model="listQuery.deptName"
                placeholder="请输入手术名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="提交时间" prop="docmkDate">
              <el-date-picker
                v-model="listQuery.docmkDate"
                type="daterange"
                range-separator="至"
                :editable="false"
                value-format="yyyy-MM-dd"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 230px"
              />
            </el-form-item>
            <el-form-item label="当前状态" prop="stas">
                <el-select
                    v-model="listQuery.stas"
                    placeholder="请选择"
                    clearable
                >
                    <el-option
                        v-for="item in stasOptions"
                        :key="item.value"
                        :label="item.lable"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getorderData('search')">查询 </el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            height="500px"
            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="id" />
            <el-table-column label="手术名称" prop="detlCnt" />
            <el-table-column label="手术间" prop="qtySum" />
            <el-table-column label="主治医生" prop="purcAmt" />
            <el-table-column label="手术日期" prop="deptName" />
            <el-table-column label="品总数" prop="docmker" />
            <el-table-column label="采购总数" prop="docmker" />
            <el-table-column label="采购金额" prop="docmker" />
            <el-table-column label="客户名称" prop="docmker" />
            <el-table-column label="科室" prop="docmker" />
            <el-table-column label="采购员" prop="docmker" />
            <el-table-column label="采购时间" prop="docmkDate" />
            <el-table-column label="当前状态" prop="stas">
              <template #default="{ row }">
                <span v-if="row.stas == 'A'">待确认</span>
                <span v-if="row.stas == 'B'">已确认</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <yl-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getorderData"
          />
        </el-tab-pane>
        <el-tab-pane label="已确认" name="second">
          <el-form :model="listQueryC" ref="queryForm" :inline="true">
            <el-form-item label="采购单号" prop="id">
              <el-input v-model="listQueryC.id" placeholder="请输入申领单号"></el-input>
            </el-form-item>
            <el-form-item label="供应商" prop="deptName">
              <el-input
                v-model="listQueryC.deptName"
                placeholder="请输入供应商"
              ></el-input>
            </el-form-item>
            <el-form-item label="采购时间" prop="docmkDate">
              <el-date-picker
                v-model="listQueryC.docmkDate"
                type="daterange"
                range-separator="至"
                :editable="false"
                value-format="yyyy-MM-dd"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 230px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getData('search')">查询 </el-button>
              <el-button @click="resetC">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            height="500px"
            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="id" />
            <el-table-column label="订单种类" prop="detlCnt" />
            <el-table-column label="订单总数量" prop="qtySum" />
            <el-table-column label="出库数量" prop="delvCnt" />
            <el-table-column label="订单总金额" prop="purcAmt" />
            <el-table-column label="客户名称" prop="deptName" />
            <el-table-column label="发起时间" prop="docmker" />
            <el-table-column label="发起人" prop="docmkDate" />
            <el-table-column label="状态" prop="stas">
              <template #default="{ row }">
                <span v-if="row.stas == 'A'">未受理</span>
                <span v-if="row.stas == 'B'">已受理</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <yl-pagination
            v-show="totalC > 0"
            :total="totalC"
            :page.sync="listQueryC.current"
            :limit.sync="listQueryC.size"
            @pagination="getDataC"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import {
  getMcsOrdPageSpler,
  getALLOrgTree,
  getMcsOrdPageYqrSpler,
  selectSplerMcsList,
  selectSpdList
} from "@/api/orderManage-sup/orthopedics";
export default {
  components: {
    ylPagination,
  },
  data() {
    return {
      activeNametree:"org",
      activeName: "first",
      defaultProps: {
        children: "children",
        label: "spdName",
      },
      listQuery: {
        current: 1,
        size: 10,
        id: "",
        deptName: "",
        docmkDateStart: "",
        docmkDateEnd: "",
        docmkDate: [],
        stas: "",
      },
      listQueryC: {
        current: 1,
        size: 10,
        id: "",
        deptName: "",
        docmkDateStart: "",
        docmkDateEnd: "",
        docmkDate: [],
        stas: "",
      },
      stasOptions: [
        { value: "A", lable: "未受理" },
        { value: "B", lable: "已受理" },
        { value: "R", lable: "被驳回" },
        { value: "C", lable: "已出库" },
        { value: "D", lable: "部分出库" },
        { value: "Y", lable: "已入库" },
        { value: "P", lable: "部分入库" },
      ],
      options: [],
      listLoading: false,
      list: [],
      total: 0,
      totalC: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    tabClick(tab) {
      if (tab.label == "按机构") {
        this.defaultProps.label = "spdName";
      }
      // else if(tab.label == "按分类"){
      //     // this.getData4();
      //     // this.defaultProps.label = 'orgGrpName'
      //     // this.listQuery.type = 'grp';
      // }
    },
    // 获取医院列表
    getData(type) {
      this.data = [];
      this.listLoading = true;
      selectSpdList()
        .then((res) => {
          this.listQuery.spdId = res.data[0].spdId;
          this.data = res.data;
          console.log(this.data, "dadad");
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },
    // 点击获取医院药品列表
    handleNodeClick(data) {
      console.log(data, "data");
      this.listLoading = true;
      this.listQuery.docmkDateStart = this.listQuery.docmkDate[0];
      this.listQuery.docmkDateEnd = this.listQuery.docmkDate[1];
      this.spdId = data.spdId;
      this.listQuery.spdId = this.spdId;
      getMcsOrdPageSpler(this.listQuery)
        .then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
          console.log(res, "医院目录");
          this.btnShow = true;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },
    handleClick(tab) {
      console.log(tab.name, "name");
      if (tab.name == "first") {
        this.getorderData();
      } else {
        this.getDataC();
      }
    },
    
    getorderData(type) {
      if (type == "search") {
        this.listQuery.current = 1;
      }
      this.listLoading = true;
      this.listQuery.docmkDateStart = this.listQuery.docmkDate[0];
      this.listQuery.docmkDateEnd = this.listQuery.docmkDate[1];
      getMcsOrdPageSpler(this.listQuery)
        .then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
      // getMcsOrdPageSpler().then(res =>{
      // this.options = res.data
      // })
    },
    
    reset() {
      this.$refs.queryForm.resetFields();
      this.getorderData();
    },
    // 详情
    handleDetail(row) {
      if(row.stas=="A"){
        this.$router.push({
          path: "orthacceptDetail",
          query: {
            id: row.id,
            detlCnt: row.detlCnt,
            qtySum: row.qtySum,
            purcAmt: row.purcAmt,
            docmker: row.docmker,
            docmkDate: row.docmkDate,
            stas: row.stas,
          },
        });
      }else if(row.stas=="B"){
        this.$router.push({
        name: "confirmDetail",
        query: {
          id: row.id,
          detlCnt: row.detlCnt,
          qtySum: row.qtySum,
          purcAmt: row.purcAmt,
          docmker: row.docmker,
          docmkDate: row.docmkDate,
          stas: row.stas,
        },
      });
      }
    },
    getDataC(type) {
      if (type == "search") {
        this.listQueryC.current = 1;
      }
      this.listLoading = true;
      this.listQueryC.docmkDateStart = this.listQuery.docmkDate[0];
      this.listQueryC.docmkDateEnd = this.listQuery.docmkDate[1];
      getMcsOrdPageYqrSpler(this.listQuery)
        .then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
      // getMcsOrdPageYqrSpler().then(res =>{
      // this.options = res.data
      // })
    },
    resetC() {
      this.$refs.queryForm.resetFields();
      this.getDataC();
    },
  },
};
</script>

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