<template>
  <!--批量删除-->
  <div class="main-contain">
    <div class="app-container">
    <div class="bannar_list">
      <div class="banner_left">
        <div>
          透析模式:
          <el-select
            v-model="modeOptions_value"
            placeholder="请选择"
            @change="getUsername"
          >
            <el-option
              v-for="item in modeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          删除类型:
          <el-select
            v-model="new_type"
            placeholder="请选择"
            @change="changetype"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div v-if="new_type == 1">
          请输入需要删除的药品:
          <el-select
            filterable
            v-model="id"
            placeholder="请选择"
            @change="getUsername"
          >
            <el-option
              v-for="item in druglist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div v-if="new_type == 2">
          请输入需要删除的项目:
          <el-select
            filterable
            v-model="id"
            placeholder="请选择"
            @change="getUsername"
          >
            <el-option
              v-for="item in projectlist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <!--        <button @click="lili">调试</button>-->
      <el-button type="primary" @click="save">保存</el-button>
    </div>

    <el-container>
      <div class="left_table" style="width: 211px;height: 70vh;border: 1px solid #DCDFE6;box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);">
        <el-table
          border
          height="70vh"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
          @current-change="test"
          :row-style="{ color: '#303133' }"
          :header-cell-style="{
            backgroundColor: 'rgb(245, 247, 250)',
            color: '#606266',
          }"
        >
          <el-table-column type="selection" width="55" align="center"> </el-table-column>
          <el-table-column label="患者姓名" width="155" align="center">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
        </el-table>
      </div>

      <el-main>
        <el-tabs type="border-card" v-if="isshow == 1 && list.length > 0" style="min-height: 70vh;">
        <el-tab-pane
          v-for="(item, index) in list"
          :key="index"
          :label="'处方' + (index + 1)"
          :name="index"
        >
          <el-table
            v-if="item.advices.length > 0"
            :data="item.advices"
            style="width: 100%"
            max-height="250"
            border
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266',
            }"
          >
            <el-table-column fixed label="药品名称" width="230" align="center">
              <template slot-scope="scope">
                {{ scope.row.advice_name }}
              </template>
            </el-table-column>
            <el-table-column label="单次用量" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.single_dose }}{{ scope.row.single_dose_unit }}
              </template>
            </el-table-column>
            <el-table-column label="用法" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.delivery_way }}
              </template>
            </el-table-column>
            <el-table-column label="频率" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.execution_frequency }}
              </template>
            </el-table-column>
            <el-table-column label="天数" width="110" align="center">
              <template slot-scope="scope"> {{ scope.row.day }}天 </template>
            </el-table-column>
            <el-table-column label="总量" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.prescribing_number
                }}{{ scope.row.prescribing_number_unit }}
              </template>
            </el-table-column>
            <el-table-column label="单价" width="120" align="center">
              <template slot-scope="scope"> {{ scope.row.price }}元 </template>
            </el-table-column>
            <el-table-column label="备注" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.remark }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="delects(scope.$index, scope, item)"
                  type="danger"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-table
            v-if="item.project.length > 0"
            :data="item.project"
            style="width: 100%"
            max-height="250"
            border
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266',
            }"
          >
            <el-table-column fixed label="项目名称" width="230" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.type == 2">
                  {{ scope.row.project.project_name }}
                </div>
                <div v-if="scope.row.type == 3">
                  {{ scope.row.good_info.good_name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="组" width="120" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.type == 2">
                  {{ scope.row.project.translate }}
                </div>
                <div v-if="scope.row.type == 3">
                  {{ scope.row.good_info.translate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单次用量" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.single_dose }}
                {{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="用法" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.delivery_way }}
              </template>
            </el-table-column>
            <el-table-column label="频率" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.execution_frequency }}
              </template>
            </el-table-column>
            <el-table-column label="天数" width="110" align="center">
              <template slot-scope="scope"> {{ scope.row.day }}天 </template>
            </el-table-column>
            <el-table-column label="总量" width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.count }}
                {{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="单价" width="120" align="center">
              <template slot-scope="scope"> {{ scope.row.price }}元 </template>
            </el-table-column>
            <el-table-column label="备注" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.remark }}
              </template>
            </el-table-column>
            <el-table-column label="推送频率" width="120" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.frequency_type == 1">
                  {{ "每次必推" }}
                </div>
                <div v-if="scope.row.frequency_type == 2">
                  {{ scope.row.day_count }}天/次
                </div>
                <div v-if="scope.row.frequency_type == 3">
                  {{ scope.row.week_days }}
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="102" align="center">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="delects(scope.$index, scope, item)"
                  type="danger"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      </el-main>
      
    </el-container>
  
  </div>
  </div>
</template>
<script>
import { gethisusertoalive } from "@/api/deposit";
import {
  getdrugsinformation,
  replacepeoplename,
  replaceconfig,
  deletedrugsbatch,
  batchdeleteitems,
  getmodeconfigs,
  ptemplateinformation,
  deleteone,
} from "@/api/batch/batch";

export default {
  data() {
    return {
      dialogVisible: false,
      tableList: [],
      editableTabsValue: "1",
      modeOptions: {},
      tableDatas: [
        {
          id: "",
          drug_name: "",
          single_dose: "",
          single_dose_unit: "",
          delivery_way: "",
          execution_frequency: "",
          day: "",
          prescribing_number: "",
          prescribing_number_unit: "",
          price: "",
          remark: "",
        },
      ], //药品
      project: [
        {
          id: "",
          drug_name: "",
          translate: "",
          single_dose: "",
          unit: "",
          delivery_way: "",
          execution_frequency: "",
          day: "",
          prescribing_number: "",
          price: "",
          remark: "",
          frequency_type: 1,
          day_count: "",
          week_days: "",
        },
      ], //项目
      tabIndex: 2,
      modeOptions_value: 1, //透析模式
      multipleSelection: [], //选中的患者
      tableData: [],
      options: [
        { id: 1, name: "药品" },
        { id: 2, name: "项目" },
      ],
      options_patient: [
        { id: 1, name: "是" },
        { id: 2, name: "否" },
      ],
      options_2: [
        { id: 1, name: "普通门诊" },
        { id: 2, name: "门诊特殊病" },
      ],
      new_type: 1, //新增类型
      druglist: [], //药品列表
      projectlist: [], //项目列表
      id: "", //药品、项目、耗材
      tmplist: [], //临时
      unit: [
        { id: 1, name: "g" },
        { id: 2, name: "mg" },
        { id: 3, name: "u" },
        { id: 4, name: "ml" },
        { id: 5, name: "万U" },
        { id: 6, name: "枚" },
        { id: 7, name: "粒" },
        { id: 8, name: "片" },
        { id: 9, name: "支" },
        { id: 10, name: "μg" },
        { id: 11, name: "iu" },
        { id: 12, name: "包" },
        { id: 13, name: "袋" },
        { id: 14, name: "万" },
        { id: 15, name: "万iu" },
        { id: 16, name: "丸" },
        { id: 17, name: "盒" },
        { id: 18, name: "瓶" },
        { id: 19, name: "瓶（袋）" },
        { id: 20, name: "次" },
      ],
      usage: [], //用法
      frequency: [], //频率
      frequency_type: "", //周期提醒
      day_count: "", //周期提醒天
      week_days: [], //周期提醒星期
      tabhang: 0, //tab的下标
      hang: 0, //行数
      list: [],
      isshow: 0, //是否显示处方
      tmpid: 0,
    };
  },
  created() {
    // console.log("this.$store.getters.treatment_mode",this.$store.getters.treatment_mode)
    for (let key in this.$store.getters.treatment_mode) {
      this.modeOptions[key] = this.$store.getters.treatment_mode[key];
    }
    // console.log("this.modeOptions",this.modeOptions)
    this.getdrugconfigs();
    this.isshow = 0;
    this.tmpid = 0;
  },
  methods: {
    save() {
      var tmp = this.modeOptions[this.modeOptions_value].name;
      var tmp2 = "";
      if (this.druglist != null) {
        for (let i = 0; i < this.druglist.length; i++) {
          if (this.id == this.druglist[i].id) {
            tmp2 = this.druglist[i].name;
          }
        }
      }
      if (this.projectlist != null) {
        for (let j = 0; j < this.projectlist.length; j++) {
          if (this.id == this.projectlist[j].id) {
            tmp2 = this.projectlist[j].name;
          }
        }
      }
      this.$confirm(
        "请确定是否删除?", //注：该操作将会把所选患者的"+tmp+"透析模式中的"+tmp2+"进行删除，
        "",
        {
          confirmButtonText: "确 定",
          cancelButtonText: "取 消",
          type: "warning",
        }
      ).then(() => {
        if (this.multipleSelection.length == 0) {
          this.$message.error("没有选中有效信息");
          return;
        }
        let st = "";
        for (let i = 0; i < this.multipleSelection.length; i++) {
          st = st + this.multipleSelection[i].id + ",";
        }
        console.log("string", st);
        let params = {
          mode_id: this.modeOptions_value,
          patient_id: st,
          type: this.new_type,
          replaced: this.id,
        };
        if (this.new_type == 1) {
          deletedrugsbatch(params).then((res) => {
            if (res.data.state == 1) {
              this.$message.success("删除成功");
              this.getUsername();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          batchdeleteitems(params).then((res) => {
            if (res.data.state == 1) {
              this.$message.success("删除成功");
              this.getUsername();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    test(val) {
      console.log("val?:", val);
      this.tmpid = val.id;
      var params = {
        mode_id: this.modeOptions_value,
        patient_id: val.id,
      };
      ptemplateinformation(params).then((res) => {
        if (res.data.state == 1) {
          this.list = res.data.data.list;
          this.isshow = 1;
        }
      });
    },
    lili() {
      console.log("this.list", this.list);
      console.log("this.multipleSelection", this.multipleSelection);
      // console.log("this.mode",this.modeOptions_value)
      // console.log("this.projectlist2",this.projectlist2)
      // console.log("patient_value",this.patient_value)
    },
    delects(hang, sc, item) {
      this.$confirm("删除后不可恢复，是否确认删除?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = {
            type: item.type, //1药品2项目
            id: sc.row.id,
          };
          var params2 = {
            mode_id: this.modeOptions_value,
            patient_id: this.tmpid,
          };
          deleteone(params).then((res) => {
            if (res.data.state == 1) {
              this.$message.success("删除成功");
              ptemplateinformation(params2).then((res) => {
                if (res.data.state == 1) {
                  this.list = res.data.data.list;
                  this.isshow = 1;
                }
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'success',
            message: "已取消删除",
          });
        });
      // console.log("hang",hang)
      // console.log("sc",sc)
      // console.log("item",item)
    },
    changetype() {
      console.log(">>>>>>>", this.new_type);
      this.id = "";
      this.tableData = [];
    },
    changeid(item, index) {
      item.id = item.drug_name;
      var params = {
        id: item.id,
      };
      getdrugsinformation(params).then((res) => {
        if (res.data.state == 1) {
          console.log("res??", res);
          this.tableDatas[0].single_dose = res.data.data.list[0].single_dose;
          this.tableDatas[0].single_dose_unit =
            res.data.data.list[0].single_dose_unit;
          this.tableDatas[0].delivery_way = res.data.data.list[0].delivery_way;
          this.tableDatas[0].execution_frequency =
            res.data.data.list[0].execution_frequency;
          this.tableDatas[0].day = res.data.data.list[0].drug_day;
          this.tableDatas[0].prescribing_number =
            res.data.data.list[0].prescribing_number;
          this.tableDatas[0].prescribing_number_unit =
            res.data.data.list[0].prescribing_number_unit;
          this.tableDatas[0].price = res.data.data.list[0].retail_price;
          this.tableDatas[0].remark = res.data.data.list[0].remark;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changeid2(item, index) {
      item.id = item.drug_name;
      var params = {
        id: item.id,
      };
      getdrugsinformation(params).then((res) => {
        if (res.data.state == 1) {
          console.log("res??", res);
          this.project[0].single_dose = res.data.data.list[0].single_dose;
          this.project[0].translate = res.data.data.list[0].translate;
          this.project[0].delivery_way = res.data.data.list[0].delivery_way;
          this.project[0].execution_frequency =
            res.data.data.list[0].execution_frequency;
          this.project[0].day = res.data.data.list[0].day;
          this.project[0].prescribing_number =
            res.data.data.list[0].prescribing_number;
          this.project[0].unit = res.data.data.list[0].unit;
          this.project[0].price = res.data.data.list[0].retail_price;
          this.project[0].remark = res.data.data.list[0].remark;
        }
      });
    },
    //获取配置
    getdrugconfigs() {
      var params = {};
      replaceconfig(params).then((res) => {
        if (res.data.state == 1) {
          this.druglist = res.data.data.list;
          this.projectlist = res.data.data.list2;
        }
      });
      getmodeconfigs(params).then((res) => {
        if (res.data.state == 1) {
          this.frequency = res.data.data.efs;
          this.usage = res.data.data.drugways;
        }
      });
    },
    getUsername() {
      var params = {
        id: this.id,
        mode: this.modeOptions_value,
      };
      replacepeoplename(params).then((res) => {
        if (res.data.state == 1) {
          this.tableData = res.data.data.list;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>



<style lang="scss" scoped>
::v-deep .el-tabs__content {
  padding: 8px;
}

/deep/ .el-table__fixed {
  bottom: 0px !important;
}
.app-container {
  padding: 10px;
  background: #f6f8f9;
}
::v-deep .el-table__body-wrapper {
  height: 500px;
  overflow-y: scroll;

}
.bannar_list {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  .banner_left {
    width: 960px;
    display: flex;
    justify-content: space-around;
    div {
      white-space: nowrap;
      font-size: 14px;
      color: #606266;
    }
  }
}
.left_table{
  /deep/ .el-table{
    .el-table__body-wrapper{
      overflow-x: hidden;
    }
  }
}
.frequence {
  text-align: center;
}
/deep/ .el-button--small {
  padding: 9px 6px;
}
.zone {
  //  margin-left: 30px;
  //  text-align: left;
  width: 70px;
  display: inline-block;
  color: #606266;
}
.disinfect {
  position: relative;
  .newButton {
    // position: absolute;
    // right: 2%;
    // top:4px;
    // z-index: 9;
    margin-bottom: 10px;
    margin-left: 90%;
  }
}
.disinfectOne {
  position: relative;
  .newButtonOne {
    position: absolute;
    right: 0;
    top: -10;
    z-index: 18;
  }
}
.but {
  width: 200px;
  height: 50px;
  // border: solid 1px red;
  margin-left: 77%;
}
.clearn {
  width: 460px;
  height: 50px;
  // border:solid 1px red;
  margin-left: 650px;
}

.zClass {
  width: 200px;
  height: 200px;
  // border:solid 1px red;
  margin-left: 450px;
  margin-top: 200px;
}
.warn {
  color: red;
  font-size: 14px;
  width: 100%;
  display: inline-block;
  margin-left: 96px;
}

.userbutton {
  margin-bottom: 10px;
  margin-left: 82%;
}
</style>
<style lang="scss" >
.a {
  margin-bottom: 10px;
  margin-top: 6px;
}

.b {
  .el-button {
    margin-left: 90%;
    margin-bottom: 10px;
  }
}

.stoppage {
  .el-form-item__label {
    width: 190px;
  }
}
.st {
  .el-form-item__label {
    width: -10px;
  }
}
.main {
  position: relative;
  .newButtonOne {
    position: absolute;
    right: 0;
    z-index: 2;
  }
}

.elbutton {
  // border: solid 1px red;
  height: 50px;
  width: 400px;
  margin-left: 650px;
}
// .el-form-item__label {
//   width: 130px;
//   font-size: 14px;
// }
.el-form-item__error {
  margin-left: 130px;
}

.el-upload-list__item-name {
  color: #606266;
  display: block;
  margin-right: 40px;
  overflow: hidden;
  padding-left: 4px;
  text-overflow: ellipsis;
  transition: color 0.3s;
  white-space: nowrap;
}
.el-main {
  padding-top: 0px;
  padding-left: 18px;
  padding-right: 0px;
  .el-tabs{
    .el-tabs__content{
      padding: 12px;
      .el-table .el-table__header-wrapper table{
        width: 100% !important;
      }
      .el-table .el-table__body-wrapper table{
        width: 100% !important;
      }
    }
  }
}

.newMain {
  .el-form-item__label {
    width: 104px;
  }
}
.newDisinfectOne {
  .el-input--prefix .el-input__inner {
    // padding-left: 15px;
    padding-right: 0px !important;
  }
}
.stoppage {
  .el-form-item__label {
    width: 18%;
  }
}
.newItem {
  .el-form-item__label {
    width: 130px;
  }
}
.formItem {
  .el-form-item__label {
    width: 104px;
    line-height: 30px;
  }
}
.newname {
  .el-form-item__label {
    width: 60px;
  }
}
::-webkit-scrollbar {
  height: 20px;
}

.el-table td .cell {
  padding: 0 5px !important;
}
.addTab {
  position: absolute;
  right: 8px;
  top: 3px;
  z-index: 20;
}
</style>
