<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)"
            >
              <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="请选择"
              @change="getDepartSelect(medName)"
            >
              <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-select size="mini" v-model="departName" placeholder="请选择" clearable>
              <el-option
                :label="item.name"
                :value="item.pid"
                v-for="(item,index) in departSelect"
                :key="index"
              ></el-option>
            </el-select>
          </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="addData" v-if="showAdd">新增</el-button>
        <!-- <el-button type="danger" size="mini" v-if="showMapAuto" @click="autoMap(null)">自动映射</el-button> -->
      </div>
    </div>

    <!-- 底部表格数据 -->
    <div class="table">
      <div class="today-table">
        <div class="table-container">
          <el-table :data="tableData" stripe style="width: 100%" border height="100%">
            <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="name" width="200" label="药品目录名称" align="center"></el-table-column>
            <el-table-column prop="ygtName" width="200" label="医共体" align="center"></el-table-column>
            <el-table-column prop="stitutionsName" width="200" label="医疗机构" align="center"></el-table-column>
            <el-table-column prop="departmentidSelsourceName" width="200" label="科室" align="center"></el-table-column>
            <el-table-column prop="type" label="类型" width="100" align="center">
              <template slot-scope="scope">{{scope.row.type==0?'中心药房':'his'}}</template>
            </el-table-column>
            <el-table-column prop="describe" label="药品目录描述" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <div class="flex-center operation" slot-scope="scope">
                <!-- <div class="flex-center" style="margin-right:20px;" v-if="showAdd" @click="add(scope)">
                新增</div>-->
                <div class="flex-center" v-if="showEdit" @click="edit(scope)">修改</div>
                <div
                  class="flex-center bg-yellow"
                  v-if="showMap"
                  @click="$router.push({path:'/index/drugmaplist?id='+scope.row.ygtid})"
                >映射管理</div>
                <div class="flex-center bg-red" v-if="showMapAuto" @click="autoMap(scope)">自动映射</div>
                <div class="flex-center bg-yellow" v-if="showImport">
                  导入
                  <input
                    type="file"
                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    id="fileSelect"
                    runat="server"
                    @change="uploadXSL"
                  />
                </div>
              </div>
            </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>

    <popup
      distanceTop="5vh"
      :showDialog="showDialog"
      @cancle="showDialog=false"
      @confim="submit()"
      title="药品目录管理"
    >
      <div class="flex-center" slot="body">
        <div class="form">
          <div class="form-item flex flex-col-center">
            <span>*</span>
            <div class="name">医共体：</div>
            <div class="input">
              <el-select v-model="ygt" placeholder="请选择医共体" @change="getMedSelect1(ygt)">
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in list1"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <span style="opacity:0;">*</span>
            <div class="name">医疗机构：</div>
            <div class="input">
              <el-select
                clearable
                v-model="yljg"
                placeholder="请选择"
                @change="getDepartSelect1(yljg)"
              >
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in list2"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <span style="opacity:0;">*</span>
            <div class="name">科室：</div>
            <div class="input">
              <el-select clearable v-model="ks" placeholder="请选择">
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in list3"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <span>*</span>
            <div class="name">类型：</div>
            <div class="input">
              <el-select v-model="type" placeholder="请选择类型">
                <el-option label="中心药房" :value="0"></el-option>
                <el-option label="HIS" :value="1"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <span>*</span>
            <div class="name">药品目录名称：</div>
            <div class="input">
              <el-input v-model="name" placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form-item flex-plane-center-l">
            <span>*</span>
            <div class="name">药品目录描述：</div>
            <div class="input">
              <el-input type="textarea" v-model="desc" placeholder="请输入"></el-input>
            </div>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>
<script>
import popup from "@/components/Propup.vue";
import {
  getDrugList,
  getDrugBM,
  updateDrugDesc,
  autoMap,
  addDrugList
} from "@/api/business.js";

import { fileImport } from "@/api/upload.js";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { doctorBodySelect } from "@/api/city.js";
import {
  getDoctorBodySelect,
  getMedSelect,
  getDepartSelect
} from "@/api/system.js";
export default {
  components: {
    popup
  },
  data() {
    return {
      departName: "", // 科室
      doctorBody: "", // 医共体
      medName: "", // 医疗机构
      yigt: "", // 医工体
      medSelectList: [],
      doctorBodyList: [],
      departSelect: [],
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,

      // 新增 表单字段
      desc: "", // 药品目录描述
      ygt: "",
      name: "",
      type: "",
      yljg: "",
      ks: "",

      showAdd: true,
      showImport: true,
      showMapAuto: true,
      showEdit: true,
      showMap: true,
      showDialog: false,

      pid: "",
      nowPid: "",

      list1: [],
      list2: [],
      list3: []
    };
  },
  created() {
    this.getDoctorBodySelect();
    this.getDoctorBodySelect1();
    this.getDrugList();
    this.getDrugBM();
    this.nowPid = this.getuserinfo.organizationid;
  },
  methods: {
    addData() {
      this.desc = "";
      this.name = "";
      this.ygt = "";
      this.type = "";
      this.showDialog = true;
    },
    edit(scope) {
      this.pid = scope.row.pid;
      this.desc = scope.row.describe ? scope.row.describe : "";
      this.name = scope.row.name;
      this.type = Number(scope.row.type);
      this.ygt = scope.row.ygtid;
      this.showDialog = true;
      this.yljg = scope.row.stitutionsId;
      this.ks = scope.row.departmentidSelsource;

      this.getMedSelect1(this.ygt, "auto");
      this.getDepartSelect1(this.yljg, "auto");
    },
    add(scope) {
      this.$router.push({
        path: "/index/drugmaplist?id=" + scope.row.pid
      });
    },
    submit() {
      if (!this.pid) {
        this._addDrugList();
        return;
      }
      this.updateDrugDesc();
    },
    sizeC(e) {
      this.page = e;
      this.getDrugList();
    },
    search() {
      this.page = 1;
      this.getDrugList();
    },
    // 清空搜索条件
    clearFilter() {
      this.yigt = "";
      this.doctorBody = "";
      this.departName = "";
      this.medName = "";
      this.medSelectList = [];
      this.getDrugList();
    },
    doctorBodyC() {
      // this.page = 1
      // this.getDrugList()
    },
    uploadXSL(e) {
      console.log(e, "e");
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      this.fileImport(formData);
    },
    // 新增药品目录
    async _addDrugList() {
      let params = {
        describe: this.desc,
        name: this.name,
        type: this.type,
        ygtid: this.ygt,
        departmentidSelsource: this.ks,
        stitutionsId: this.yljg
      };
      let res = await addDrugList(params);
      if (res.ResultCode == 0) {
        this.$message.success("添加成功");
        this.showDialog = false;
        this.getDrugList();
      }
    },
    // 获取医共体选择器数据
    async getDoctorBodySelect() {
      let res = await getDoctorBodySelect();
      if (res.ResultCode == 0) {
        this.doctorBodyList = res.Data;
      }
    },
    // 获取医疗机构选择器
    async getMedSelect(id, type = "change") {
      let params = {
        organizationId: id
      };
      let res = await getMedSelect(params);
      if (res.ResultCode == 0) {
        this.medSelectList = res.Data;
        if (type == "change") {
          this.medName = "";
          this.departName = "";
        }
      }
    },
    // 获取科室选择器
    async getDepartSelect(id, type = "change") {
      let res = await getDepartSelect({
        // institutionId: this.getuserinfo.sititutionid
        institutionId: id
      });
      if (res.ResultCode == 0) {
        this.departSelect = res.Data;
        if (type == "change") {
          this.departName = "";
        }
      }
    },

    // 获取医共体选择器数据
    async getDoctorBodySelect1() {
      let res = await getDoctorBodySelect();
      if (res.ResultCode == 0) {
        this.list1 = res.Data;
      }
    },
    // 获取医疗机构选择器
    async getMedSelect1(id, type = "change") {
      let params = {
        organizationId: id
      };
      let res = await getMedSelect(params);
      if (res.ResultCode == 0) {
        this.list2 = res.Data;
        if (type == "change") {
          this.yljg = "";
          this.ks = "";
        }
      }
    },
    // 获取科室选择器
    async getDepartSelect1(id, type = "change") {
      let res = await getDepartSelect({
        // institutionId: this.getuserinfo.sititutionid
        institutionId: id
      });
      if (res.ResultCode == 0) {
        this.list3 = res.Data;
        if (type == "change") {
          this.ks = "";
        }
      }
    },
    // 获取医共体选择器数据
    async doctorBodySelect() {
      let res = await doctorBodySelect();
      if (res.ResultCode == 0) {
        this.doctorBody = res.Data;
      }
    },
    // 获取药品列表
    async getDrugList() {
      let params = {
        page: this.page,
        limit: this.limit,
        // jgmc: this.yigt
        // ygtid: this.yigt,

        departmentidSelsource: this.departName,
        ygtid: this.doctorBody,
        stitutionsId: this.medName
      };
      let res = await getDrugList(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;
        this.tableData.filter((item, index) => {
          item.id = index + 1;

          return item;
        });

        this.showEdit = res.Data.ButtonRight.indexOf("view") != -1;
        this.showMap = res.Data.ButtonRight.indexOf("mapping") != -1;
      }
    },
    async getDrugBM() {
      let res = await getDrugBM();

      this.showAdd = res.Data.indexOf("add") != -1;
      this.showImport = res.Data.indexOf("edit") != -1;
      this.showMapAuto = res.Data.indexOf("del") != -1;
    },

    /// 修改药品目录描述
    async updateDrugDesc() {
      let res = await updateDrugDesc({
        describe: this.desc,
        name: this.name,
        type: this.type,
        ygtid: this.ygt,
        pid: this.pid,
        departmentidSelsource: this.ks,
        stitutionsId: this.yljg
      });
      if (res.ResultCode == 0) {
        this.$message({
          type: "success",
          message: "操作成功",
          showClose: true
        });
        this.showDialog = false;
        this.getDrugList();
      }
    },
    // 自动映射
    async autoMap(scope) {
      // console.log(scope, '一共提')
      // return
      const loading = this.$loading({
        lock: true,
        text: "正在映射",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await autoMap({
        // orgId: this.getuserinfo.organizationid
        // orgId: scope ? scope.row.pid : this.getuserinfo.organizationid,
        orgId: scope.row.ygtid
      }).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.getDrugList();
        if (res.Data.length > 0) {
          this.$message({
            message: "映射成功," + res.Data.join("、") + "药品无法映射",
            type: "warning",
            showClose: true
          });
        } else {
          this.$message({
            message: "映射成功",
            type: "success",
            showClose: true
          });
        }
      }
    },
    // 导入
    async fileImport(data) {
      let res = await fileImport(data);
      if (res.ResultCode == 0) {
        this.$message({
          message: "导入成功",
          type: "success",
          showClose: true
        });
      }
    }
  },
  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.bg-yellow {
  background: #ffae45;
  position: relative;
  width: 56px;
  height: 28px;

  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-left: 10px;
  margin-right: 10px;

  input {
    width: 74px;
    height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
  }
}

.table {
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
  height: 70vh;

  .table-container {
    height: 90%;
  }

  .today-table {
    height: 100%;

    .operation {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
        margin: 5px 0;
      }

      .bg-yellow {
        width: 80px;
        height: 24px;
        background: #ffae45;
      }

      .bg-red {
        width: 80px;
        height: 24px;
        background: red;
      }
    }
  }
}

.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) {
  .table {
    height: 81vh;

    .table-container {
      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) {
  .table {
    height: 80vh;

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

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

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

  .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: 1361px) and (max-width: 1600px) {
  .table {
    height: 72vh;

    .table-container {
      height: 90%;
    }
  }

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

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

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .table {
    height: 72vh;

    .table-container {
      height: 90%;
    }
  }

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

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

.form {
  width: 50%;

  .form-item {
    margin-bottom: 10px;

    span {
      color: red;
    }

    .name {
      width: 100px;
    }

    .input {
      flex: 1;
    }
  }
}
</style>