<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="activeNameTab" @tab-click="handleClick">
        <el-tab-pane label="待确认" name="first">
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            height="500"
            stripe
            border
            @selection-change="handleSelectionChange"
          >
            <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="stmtNo"> </el-table-column>
            <el-table-column label="客户名称" prop="branchName" />
            <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="amt" />
            <el-table-column label="对账周期" prop="stmtPrd" />
            <el-table-column label="状态" prop="stas" width="80" fixed="right">
              <template #default="{ row }">
                <span v-if="row.stas == 'A'">待确认</span>
                <span v-if="row.stas == 'B'">已确认</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" @click="handleDetails(scope.row)"
                    >详情</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <yl-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getList"
          />
        </el-tab-pane>
        <el-tab-pane label="已确认" name="second">
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="listC"
            fit
            height="500"
            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="stmtNo"> </el-table-column>
            <el-table-column label="客户名称" prop="branchName" />
            <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="amt" />
            <el-table-column label="对账周期" prop="stmtPrd" />
            <el-table-column label="状态" prop="stas" width="80" fixed="right">
              <template #default="{ row }">
                <span v-if="row.stas == 'A'">待确认</span>
                <span v-if="row.stas == 'B'">已确认</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" @click="handleDetails(scope.row)"
                    >详情</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <yl-pagination
            v-show="totalC > 0"
            :total="totalC"
            :page.sync="listQueryC.current"
            :limit.sync="listQueryC.size"
            @pagination="getlistCom"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import mcsInfo from "@/views/components/mcs-info.vue";
import { selectSpdList } from "@/api/consumCataManage-sup/index";
import { selectSetlStmtD } from "@/api/procurement-settlement/index";
import ylUpload from "@/components/yl-upload";
export default {
  components: {
    ylPagination,
    ylUpload,
    mcsInfo
  },
  data() {
    return {
      activeNameTab: "first",
      spdId: null,
      data: [],
      defaultProps: {
        children: "children",
        label: "spdName"
      },
      listQuery: {
        current: 1,
        size: 10,
        stas: "A"
      },
      listQueryC: {
        current: 1,
        size: 10,
        stas: "B"
      },
      listLoading: false,
      list: [],
      listC: [],
      total: 0,
      totalC: 0,
      // tree
      activeNametree: "org",
      routespdId: ""
    };
  },
  methods: {
    tabClick(tab) {
      if (tab.label == "按机构") {
        this.defaultProps.label = "spdName";
      }
      // else if(tab.label == "按分类"){
      //     // this.getData4();
      //     // this.defaultProps.label = 'orgGrpName'
      //     // this.listQuery.type = 'grp';
      // }
    },
    // 搜索获取医院列表
    getList(type) {
      this.listLoading = true;
      // this.spdId = this.$route.query.spdId;
      this.listQuery.spdId = this.spdId;
      selectSetlStmtD(this.listQuery)
        .then(res => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    getlistCom(type) {
      this.listLoading = true;
      // this.spdId = this.$route.query.spdId;
      this.listQueryC.spdId = this.spdId;
      selectSetlStmtD(this.listQueryC)
        .then(res => {
          this.listC = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 点击获取医院药品列表
    handleNodeClick(data) {
      console.log(data, "data");
      this.listLoading = true;
      this.spdId = data.spdId;
      this.listQuery.spdId = this.spdId;
      this.listQueryC.spdId = this.spdId;
      if (this.activeNameTab == "first") {
        selectSetlStmtD(this.listQuery)
          .then(res => {
            this.list = res.data.records;
            this.total = res.data.total;
            this.listLoading = false;
          })
          .catch(err => {
            this.listLoading = false;
          });
      } else {
        selectSetlStmtD(this.listQueryC)
          .then(res => {
            this.listC = res.data.records;
            this.totalC = res.data.total;
            this.listLoading = false;
          })
          .catch(err => {
            this.listLoading = false;
          });
      }
    },
    // 获取医院列表
    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;
        });
    },
    // 多选
    handleSelectionChange(e) {
      console.log(this.spdId, "sodpdp");
      this.insertMcsList = e;
      newArr = this.insertMcsList.push({ spdId: this.spdId });
      // console.log(e, "ee");
    },
    // 多选后选过的禁用
    selected(row, index) {
      if (
        this.list.some(el => {
          return el.hiCode === row.hiCode;
        })
      ) {
        return false;
      } else {
        return true;
      }
    },
    handleClick(tab) {
      console.log(tab.name, "name");
      if (tab.name == "first") {
        this.getList();
      } else if (tab.name == "second") {
        this.getlistCom();
      }
    },
    // 详情
    handleDetails(row) {
      if (this.spdId) {
        this.routespdId = this.spdId;
      } else {
        this.routespdId = this.$route.query.spdId;
      }
      this.$router.push({
        name: "supplierDetail",
        query: {
          branchName: row.branchName,
          stmtNo: row.stmtNo,
          branchName: row.branchName,
          isFas: row.isFas,
          amt: row.amt,
          stmtPrd: row.stmtPrd,
          stas: row.stas,
          spdId: this.routespdId,
          activeNameTab: this.activeNameTab,
          detlCnt: row.detlCnt
        }
      });
    }
  },
  mounted() {
    this.getData();
    if (this.$route.query.spdId && this.$route.query.activeNameTab == "first") {
      this.listQuery.spdId = this.$route.query.spdId;
      this.activeNameTab = "first";
      selectSetlStmtD(this.listQuery)
        .then(res => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    } else if (
      this.$route.query.spdId &&
      this.$route.query.activeNameTab == "second"
    ) {
      this.activeNameTab = "second";
      this.listQueryC.spdId = this.$route.query.spdId;
      selectSetlStmtD(this.listQueryC)
        .then(res => {
          this.listC = res.data.records;
          this.totalC = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    }
    if (this.$route.query.msgRouteUni && this.$route.query.spdId) {
      this.listQuery.spdId = this.$route.query.spdId;
      this.listQuery.stmtNo = this.$route.query.msgRouteUni;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 12px;
}
::v-deep .el-tree-node__content {
  height: 35px;
}
::v-deep .el-input__suffix {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
}
::v-deep .long .el-form-item__content {
  width: 220px;
}
::v-deep .long .el-input__inner {
  width: 199px;
}
</style>
