<template>
  <!--   药品目录映射  -->
  <div class="drugmap flex flex-col-top flex-row-left">
    <div class="drug-map-top flex-vertical-center-l">
      <div class="left">
        <div class="header flex-vertical-between">
          <div class="header-left flex-vertical-center-l">
            <span>平台药品：</span>
            <!-- <div class="flex-center">选择药品</div> -->
            <!--  : 是否保留最后一次搜索关键字 -->
            <div>
              <el-select
                size="mini"
                v-model="myVal"
                filterable
                remote
                placeholder="请输入关键词"
                :remote-method="remoteMethod1"
                :loading="loading1"
                @change="myChange"
                reserve-keyword
              >
                <el-option
                  v-for="item in myOptions"
                  :key="item.drugId"
                  :label="item.name"
                  :value="item.drugId"
                ></el-option>
              </el-select>
            </div>
          </div>
          <span class="clear" @click="clearMine">全部清除</span>
        </div>

        <div class="footer">
          <div class="flex-vertical-between item" v-for="(item,index) in myChoose" :key="index">
            <div>{{item.name}}/{{item.dw}}</div>
            <div class="clear" @click="deleteMine()">+</div>
          </div>
        </div>
      </div>
      <div class="left">
        <div class="header flex-vertical-between">
          <div class="header-left flex-vertical-center-l">
            <span>第三方药品：</span>
            <!-- <div class="flex-center">选择药品</div> -->
            <div>
               <el-select size="small" v-model="hisVal" multiple filterable remote placeholder="请输入关键词"
                          :remote-method="remoteMethod2" :loading="loading2" @change="hisChange"
                          reserve-keyword collapse-tags
               >
                <el-option v-for="item in hisOptions" :key="item.drugId" :label="item.name"
                    :value="item.drugId">
                </el-option>
              </el-select>
              <!--<el-autocomplete
                size="mini"
                class="inline-input"
                v-model="hisVal"
                :fetch-suggestions="remoteMethod2"
                placeholder="请输入关键词"
                value-key="showName"
                :trigger-on-focus="true"
                @select="handleHisSelect"
              ></el-autocomplete>-->
            </div>
          </div>
          <span class="clear" @click="clearHis">全部清除</span>
        </div>

        <div class="footer">
          <div class="flex-vertical-between item row-old" v-for="(item,index) in hisChoose" :key="item.drugId">
            <div>{{item.name}}/{{item.gg}}/{{item.dw}}</div>
            <div class="clear" @click="deleteHis(index)">+</div>
          </div>
          <div class="flex-vertical-between item row-new" v-for="(item,index) in hisChooseNew" :key="item.drugId">
            <div>{{item.name}}/{{item.gg}}/{{item.dw}}</div>
            <div class="clear" @click="deleteHisNew(index)">+</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom flex-vertical-center-l">
      <el-button size="mini" type="primary" @click="submit(1)" v-if="!$route.query.id">保存并继续</el-button>
      <el-button size="mini" type="warning" @click="submit(2)">保存</el-button>
      <el-button size="mini" type @click="$router.back()">取消</el-button>
      <!-- <div class="flex-center bg-yellow" @click="submit(2)">保存</div>
            <div class="flex-center bg-prime" @click="$router.back()">取消</div>
      <div class="flex-center" @click="submit(1)" v-if="!$route.query.id">保存并继续</div>-->
    </div>
  </div>
</template>
<script>
import {
  searchMyDrug,
  searchHisDrug,
  addOrUpdateDrug,
  getDrugMapList1
} from "@/api/business.js";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      // 平台药品相关信息
      myVal: "",
      myOptions: [],
      myChoose: [],
      loading1: false,
      // his 药品相关信息
      loading2: false,
      hisVal: [],
      hisOptions: [],
      hisChooseNew: [],
      hisChoose: []
    };
  },
  created() {
    // console.log(this.getuserinfo)
    if (this.$route.query.id) {
      this.getDrugMapList1();
    }
  },
  methods: {
    // 平台药品选择
    myChange(e) {
      console.log(e, "change");
      this.myChoose = this.myOptions.filter(item => {
        return item.drugId == e;
      });
    },
    // his 药品选择
    hisChange(e) {
      this.hisChooseNew = e.map(id => this.hisOptions.find(item => item.drugId === id)).filter(Boolean);
    },
    // 第三方药品选中
    handleHisSelect(e) {
      // console.log(e, '第三方药品选中')
      this.hisChooseNew.push(e);
      this.hisVal = "";
    },
    // 平台药品搜索
    remoteMethod1(e) {
      this.searchMyDrug(e);
    },
    // 平台药品删除
    deleteMine() {
      this.myVal = "";
      this.myChoose = [];
      this.myOptions = [];
      this.searchHisDrug("");
    },
    // his 药品搜索
    remoteMethod2(e, cb) {
      console.log(e, "his");
      if (e instanceof Array && e.length == 0) {
        this.searchHisDrug("", cb);
      } else {
        this.searchHisDrug(e, cb);
      }
    },
    // 清空平台药品
    clearMine() {
      this.myVal = "";
      this.myChoose = [];
      this.myOptions = [];
      this.searchHisDrug("");
    },

    // 清空his 药品
    clearHis() {
      this.hisVal = [];
      this.hisChooseNew = [];
      this.hisChoose = [];
      this.hisOptions = [];
      this.searchHisDrug("");
    },
    // HIs 药品删除
    deleteHis(index) {
      this.hisChoose.splice(index, 1);
      // this.hisVal.splice(index, 1);
    },
    deleteHisNew(index) {
      this.hisChooseNew.splice(index, 1);
      this.hisVal.splice(index, 1);
    },

    // 提交
    submit(type) {
      // type == 1 保存并继续 // type == 2 保存按钮点击
      if (this.myChoose.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择平台药品",
          showClose: true
        });
        return;
      }
      const hisChoose = [...this.hisChoose, ...this.hisChooseNew];
      if (hisChoose.length == 0) {
        this.$message({
          type: "warning",
          message: "请至少选择一种HIS药品",
          showClose: true
        });
        return;
      }

      this.addOrUpdateDrug(type, hisChoose.map(item => item.drugId));
    },

    /// 新增或修改药品映射
    async addOrUpdateDrug(type, jgDrugId) {
      let params = [
        {
          // orgId: this.getuserinfo.organizationid,
          isMapping: +this.$route.query.isMapping,
          orgId: this.$route.query.pid,
          matDrugId: this.myChoose[0].drugId,
          jgDrugId,
          matDrugName: this.myChoose[0].name
        }
      ];
      const loading = this.$loading({
        lock: true,
        text: "正在映射",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await addOrUpdateDrug(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          message: "保存成功",
          showClose: true
        });
        if (type == 1) {
          this.clearMine();
          this.clearHis();
        } else {
          setTimeout(() => {
            this.$router.back();
          }, 2000);
        }
      }
    },
    // 平台搜索药品
    async searchMyDrug(name) {
      let res = await searchMyDrug({
        name: name
      });
      if (res.ResultCode == 0) {
        this.loading1 = false;
        this.myOptions = res.Data;
      }
    },
    // his 搜索药品
    async searchHisDrug(name, cb) {
      let res = await searchHisDrug({
        name: name,
        organizationid: this.$route.query.pid
      });
      if (res.ResultCode == 0) {
        this.loading2 = false;
        res.Data.forEach(item => {
          item.showName = item.name + "/" + item.gg + "/" + item.dw;
        });
        this.hisOptions = res.Data;
        if (cb) {
          cb(this.hisOptions);
        }
      }
    },
    // 获取药品映射详情
    async getDrugMapList1() {
      let params = {
        // orgId: this.getuserinfo.organizationid,
        orgId: this.$route.query.pid,
        matId: this.$route.query.id,
        page: 1,
        limit: 10
      };
      let res = await getDrugMapList1(params);
      if (res.ResultCode == 0) {
        this.myVal = res.Data[0].matDrugId;
        let obj = {
          drugId: res.Data[0].matDrugId,
          dw: res.Data[0].dw,
          gg: null,
          name: res.Data[0].name
        };
        this.myChoose.push(obj);
        this.searchMyDrug("");

        // res.Data[0].orgDrugs.forEach(item => {
        //     this.hisVal.push(item.drugId)
        // })
        this.hisChoose = res.Data[0].orgDrugs;

        this.searchHisDrug(res.Data[0].name);
      }
    }
  },
  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.drugmap {
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;
  height: 82vh;
  overflow: auto;
  box-sizing: border-box;

  .drug-map-top {
    .left {
      margin-right: 30px;
      width: 300px;

      .header {
        margin-bottom: 20px;
        width: 100%;
        cursor: pointer;

        .clear {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ff3a3a;
          width: 70px;
          margin-left: 5px;
        }

        .header-left {
          span {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-right: 5px;
            display: inline-block;
            width: 84px;
          }

          div {
            // width: 80px;
            // width: 200px;
            flex: 1;
            // height: 24px;
            background: #5386f6;
            border-radius: 4px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }

      .footer {
        width: 100%;
        height: 400px;
        // height: 40%;
        border: 2px solid #d8d8d8;
        cursor: pointer;
        overflow: auto;

        .item {
          padding: 5px 10px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          border-bottom: 2px solid #d8d8d8;

          .clear {
            transform: rotate(45deg);
            font-size: 28px;
          }
        }
      }
    }
  }

  .bottom {
    margin-top: 10px;

    div {
      width: 90px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin-right: 10px;
    }

    .bg-prime {
      border: 2px solid #d8d8d8;
      width: 74px;
      background: #fff;
      box-sizing: border-box;
      color: #333;
    }

    .bg-yellow {
      background: #ffae45;
      width: 74px;
    }
  }
}

.left ::v-deep .el-select__input {
  // margin-top: 7px;
  // background: red;
}

.left ::v-deep.el-select--small {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 24px;
  // height: 0px;
}

.row {
  &-old {}
  &-new {}
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .drugmap {
    height: 88vh;

    .drug-map-top {
      .left {
        width: 500px;

        .footer {
          height: 750px;
        }
      }
    }
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .drugmap {
    height: 88vh;

    .drug-map-top {
      .left {
        width: 500px;

        .footer {
          height: 720px;
        }
      }
    }
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .drugmap {
    height: 83vh;

    .drug-map-top {
      .left {
        width: 350px;

        .footer {
          height: 450px;
        }
      }
    }
  }
}

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

    .drug-map-top {
      .left {
        width: 360px;

        .footer {
          height: 450px;
        }
      }
    }
  }
}
</style>