<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"
      >
        <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
          <div>{{ node.label }}</div>
          <div class="redTit">{{ data.wqrnum }}</div>
        </span> -->
      </el-tree>
    </el-card>
    <div class="right-common-box">
      <el-form :model="listQuery" ref="queryForm" :inline="true">
        <el-form-item label="模板名称" prop="tmplName">
          <el-input
            v-model="listQuery.tmplName"
            placeholder="请输入模板名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="适用手术" prop="oprn">
          <el-select
            v-model="listQuery.oprn"
            placeholder="请选择适用手术"
            clearable
            filterable
            remote
          >
            <el-option
              v-for="item in oprnOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用科室" prop="dept">
          <el-select
            v-model="listQuery.dept"
            placeholder="请选择适用科室"
            clearable
            filterable
            remote
          >
            <el-option
              v-for="item in deptOptions"
              :key="item.id"
              :label="item.deptName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制作时间" prop="lstUpdUsrName">
          <el-date-picker
            v-model="listQuery.lstUpdUsrName"
            type="daterange"
            range-separator="至"
            :editable="false"
            value-format="yyyy-MM-dd"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </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>
      <div class="right-button" v-if="btnShow">
        <el-button type="primary" @click="handleAdd">新增模板</el-button>
      </div>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="list"
        fit
        stripe
        height="500"
        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="tmplName" />
        <!-- <el-table-column label="模板类型" prop="detlCnt" /> -->
        <el-table-column label="适用手术" prop="oprn" />
        <el-table-column label="适用科室" prop="deptName">
          <!-- <template #default="{ row }">
            <span v-for="item in deptOptions" :key="item.id">{{item.deptName}} </span>
          </template> -->
        </el-table-column>
        <el-table-column label="供应商" prop="crteUsrName" />
        <el-table-column label="制作人" prop="crteUsrName" />
        <el-table-column label="制作时间" prop="crteTime" />
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="handleDel(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"
      />
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import { selectSpdList } from "@/api/orderManage-sup/index";
import {
  getBoneTemplatePage,
  updateBoneTemplate,
  selectDeptList
} from "@/api/mainrTenance-sup/index";
export default {
  components: {
    ylPagination
  },
  data() {
    return {
      btnShow: false,
      activeNametree: "org",
      data: [],
      spdId: null,
      defaultProps: {
        children: "children",
        label: "spdName"
      },
      listQuery: {
        current: 1,
        size: 10,
        tmplName: "",
        oprn: "",
        dept: "",
        lstUpdUsrName: [],
        dateStart: "",
        dateEnd: "",
        spdId: ""
      },
      stasOptions: [
        { value: "A", lable: "待确认" },
        { value: "B", lable: "已确认" }
      ],
      listLoading: false,
      list: [],
      total: 0,
      oprnOptions: [
        { value: "头部手术", label: "头部手术" },
        { value: "颈部手术", label: "颈部手术" },
        { value: "骨科手术", label: "骨科手术" }
      ],
      deptOptions: [],
      routespdId: ""
    };
  },
  mounted() {
    this.getData();
    if (this.$route.query.spdId) {
      this.listQuery.spdId = this.$route.query.spdId;
      this.getorderData();
      this.btnShow = true;

      // getBoneTemplatePage(this.listQuery)
      //   .then((res) => {
      //     this.list = res.data.records;
      //     this.total = res.data.total;
      //     this.listLoading = false;
      //   })
      //   .catch((err) => {
      //     this.listLoading = false;
      //   });
    }
    selectDeptList({ deptName: "" }).then(res => {
      this.deptOptions = res.data;
    });
  },
  methods: {
    tabClick(tab) {
      if (tab.label == "按机构") {
        this.defaultProps.label = "spdName";
      }
      // else if(tab.label == "按分类"){
      //     // this.getData4();
      //     // this.defaultProps.label = 'orgGrpName'
      //     // this.listQuery.type = 'grp';
      // }
    },
    // 点击获取耗材列表
    handleNodeClick(data) {
      this.listLoading = true;
      this.spdId = data.spdId;
      this.listQuery.spdId = this.spdId;
      getBoneTemplatePage(this.listQuery)
        .then(res => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
          this.btnShow = true;
          this.list.forEach(v => {
            this.deptOptions.forEach(i => {
              if (v.dept == i.id) {
                v.dept = i.deptName;
              }
            });
          });
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 获取医院列表
    getData(type) {
      this.data = [];
      selectSpdList()
        .then(res => {
          this.listQuery.spdId = res.data[0].spdId;
          this.data = res.data;
        })
        .catch(err => {});
    },
    getorderData(type) {
      if (type == "search") {
        this.listQuery.current = 1;
      }
      this.listQuery.dateStart = this.listQuery.lstUpdUsrName[0];
      this.listQuery.dateEnd = this.listQuery.lstUpdUsrName[1];
      this.listLoading = true;
      getBoneTemplatePage(this.listQuery)
        .then(res => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
          // this.list.forEach(v => {
          //   this.deptOptions.forEach(i => {
          //     if (v.dept == i.id) {
          //       v.dept = i.deptName;
          //     }
          //   });
          // });
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    reset() {
      this.$refs.queryForm.resetFields();
      this.getorderData();
    },
    // 详情
    handleDetail(row) {
      if (this.spdId) {
        this.routespdId = this.spdId;
      } else {
        this.routespdId = this.$route.query.spdId;
      }
      this.$router.push({
        name: "editbag",
        query: {
          tmplNo: row.tmplNo,
          // spdId: this.$route.query.spdId,
          spdId: this.routespdId,
          tmplName: row.tmplName,
          oprn: row.oprn,
          dept: row.dept,
          id: row.id,
          crteUsrName: row.crteUsrName,
          tmplNo: row.tmplNo
        }
      });
    },
    handleAdd() {
      if (this.spdId) {
        this.routespdId = this.spdId;
      } else {
        this.routespdId = this.$route.query.spdId;
      }
      this.$router.push({
        name: "indexDetail",
        query: {
          spdId: this.routespdId
        }
      });
    },
    // 删除
    handleDel(row) {
      this.$confirm("确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          updateBoneTemplate({ tmplNo: row.tmplNo, splerId: row.splerId })
            .then(response => {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getorderData();
            })
            .catch(err => {});
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.custom-tree-node ::v-deep .redTit {
  min-width: 30px;
  background-color: #f56c6c;
  min-height: 1px;
  border-radius: 10px;
  text-align: center;
  margin-left: 10px;
  padding: 1px;
  color: #fff;
}
</style>
