<template>
  <div class="druglist">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>医共体名称：</span>
          <div class="input">
            <el-select
              size="mini"
              v-model="doctorBody"
              placeholder="请选择"
              @change="getMedSelect(doctorBody,0)"
            >
              <el-option
                :label="item.name"
                :value="item.pid"
                v-for="(item,index) in doctorBodyList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>医疗机构名称：</span>
          <div class="input">
            <el-select size="mini" v-model="medName" placeholder="请选择">
              <el-option
                :label="item.name"
                :value="item.pid"
                v-for="(item,index) in medSelectList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>科室名称：</span>
          <div class="input">
            <el-input size="mini" v-model="departName" placeholder="请输入"></el-input>
          </div>
        </div>

        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="$router.push({path:'/index/pharmacyd'})"
          v-if="showAdd"
        >新增</el-button>
      </div>
    </div>

    <!-- 底部表格数据 -->
    <div class="today-data">
      <div class="today-table">
        <el-table :data="tableData" stripe style="width: 100%" height="100%" border>
          <el-table-column prop="displayName" label="显示名称" align="center" width="100"></el-table-column>
          <el-table-column prop="dosageForms" label="药品剂型" align="center"></el-table-column>
          <el-table-column prop="defaultUsage" label="默认用法" align="center" width="80"></el-table-column>
          <el-table-column prop="usableRangeName" label="医共体" align="center" width="150"></el-table-column>
          <el-table-column prop="stitutionsName" label="医疗机构" align="center" width="150"></el-table-column>
          <el-table-column prop="departmentidSelsourceName" label="科室名称" align="center" width="300">
            <template slot-scope="{row}">
              <div
                class="departmentidSelsourceName"
                :title="row.departmentidSelsourceName"
              >{{ row.departmentidSelsourceName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="pharmacyName" label="药房名称" align="center" width="100"></el-table-column>
          <el-table-column prop="areaCode" label="地址编码" align="center" width="80"></el-table-column>
          <el-table-column prop="seqn" label="排序号" align="center" width="80"></el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <div class="flex-center operation">
                <div
                  class="flex-center"
                  v-if="showEdit"
                  @click="$router.push({path:`/index/pharmacyd?pid=${scope.row.pid}&type=edit`})"
                >编辑</div>
                <div class="flex-center bg-yellow" v-if="showDelete" @click="deleteData(scope)">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-vertical-center-r today-page">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getDoctorBodySelect, getMedSelect } from "@/api/system.js";
import {
  getPharmacyList,
  deletePharmac,
  getPharmacyBR
} from "@/api/business.js";
export default {
  data() {
    return {
      showAdd: true,
      showEdit: true,
      showDelete: true,
      medSelectList: [],
      doctorBodyList: [],

      tableData: [],

      page: 1,
      limit: 10,
      total: 0,
      departName: "", // 科室
      doctorBody: "", // 医共体
      medName: "" // 医疗机构
    };
  },
  created() {
    this.getDoctorBodySelect();
    this.getMedSelect("", 0);
    this.getPharmacyList();

    this.getPharmacyBR();
  },
  methods: {
    search() {
      this.page = 1;
      this.getPharmacyList();
    },
    clearFilter() {
      this.departName = "";
      this.doctorBody = "";
      this.medName = "";

      this.getPharmacyList();
    },
    deleteData(scope) {
      this.$confirm("确定要删除当前数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deletePharmac(scope.row.pid);
        })
        .catch(() => {});
    },

    sizeC(e) {
      // console.log(e, '1')
      this.page = e;
      this.getPharmacyList();
    },
    // 获取医共体选择器数据
    async getDoctorBodySelect() {
      let res = await getDoctorBodySelect();
      if (res.ResultCode == 0) {
        this.doctorBodyList = res.Data;
      }
    },
    // 获取医疗机构选择器
    async getMedSelect(id, type) {
      let params = {
        organizationId: id
      };
      let res = await getMedSelect(params);
      if (res.ResultCode == 0) {
        if (type == 0) {
          this.medSelectList = res.Data;
        } else {
          this.medSelectList1 = res.Data;

          this.doctorBodyList.forEach(item => {
            if (item.pid == id) {
              this.diaform.code = item.code;
            }
          });
        }
      }
    },
    // 获取药房列表
    async getPharmacyList() {
      let params = {
        page: this.page,
        limit: this.limit,
        departmentidSelsourceName: this.departName,
        organizationId: this.doctorBody,
        stitutionsId: this.medName
      };
      let res = await getPharmacyList(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;

        this.showEdit = res.Data.ButtonRight.indexOf("edit") != -1;
        this.showDelete = res.Data.ButtonRight.indexOf("del") != -1;
      }
    },
    // 删除数据
    async deletePharmac(id) {
      let arr = [];

      arr.push(id);

      let params = {
        ids: arr.length == 1 ? arr[0] + "," : arr.join(",")
      };
      const loading = this.$loading({
        lock: true,
        text: "正在删除...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await deletePharmac(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();

        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success"
        });

        this.getPharmacyList();
        this.showDialog = false;
      }
    },
    // 获取药房权限按钮
    async getPharmacyBR() {
      let res = await getPharmacyBR();
      if (res.ResultCode == 0) {
        this.showAdd = res.Data.indexOf("add") != -1;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.today-data {
  margin-top: 5px;
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;
  height: 71vh;

  .add {
    width: 74px;
    height: 36px;
    background: #5386f6;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .today-table {
    height: 89%;

    .enable,
    .disable {
      width: 60px;
      height: 24px;
      background: #ff6245;
      border-radius: 2px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin: 0 auto;
    }

    .disable {
      background: #68a8ff !important;
    }

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .bg-yellow {
        background: #ffae45;
        margin-left: 15px;
      }

      .bg-default {
        width: 80px;
        margin-left: 15px;
      }
    }
  }
}

.table-body::v-deep .el-table .cell {
  text-align: center;
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .today-data {
    height: 82vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .today-data {
    height: 81vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 20px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .today-data {
    height: 73vh;
    padding: 10px;
    // background: red;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 10px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 14px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .today-data {
    height: 73vh;
    padding: 5px;
    // background: red;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

.departmentidSelsourceName {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>