<template>
  <div class="emr-tem">
    <header class="flex flex-row-left flex-col-center">
      <div class="icon">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div class="filter-item flex flex-row-left flex-col-center">
        <div class="name">模板名称：</div>
        <div class="zybm">
          <el-select
            size="mini"
            v-model="form.zybm"
            filterable
            remote
            placeholder="中医病名"
            :filter-method="filterMethod"
            @change="zybmChange"
          >
            <el-option
              :label="item.disname"
              :value="item.disname"
              v-for="(item,index) in cDiseaseNameL"
              :key="index"
            ></el-option>
          </el-select>
        </div>
        <div class="mbmc">
          <el-input size="mini" v-model="form.name" placeholder="请输入模板名称"></el-input>
        </div>
      </div>
      <div class="filter-item flex flex-row-left flex-col-center">
        <div class="name">模板类型：</div>
        <div class="mblx">
          <el-select size="mini" v-model="form.type" placeholder="类型">
            <el-option value="0" label="通用"></el-option>
            <el-option value="1" label="专病"></el-option>
          </el-select>
        </div>
      </div>
      <div class="filter-item flex flex-row-left flex-col-center">
        <div class="name">共享至：</div>
        <div class="mblx" style="width:90px">
          <el-select size="mini" v-model="form.share" placeholder="共享">
            <el-option value="0" label="医共体"></el-option>
            <el-option value="1" label="全院"></el-option>
            <el-option value="2" label="科室"></el-option>
            <el-option value="3" label="个人"></el-option>
          </el-select>
        </div>
      </div>
      <div class="filter-item flex flex-row-left flex-col-center">
        <div class="name">启用状态：</div>
        <div class="mblx">
          <el-select size="mini" v-model="form.state" placeholder="状态">
            <el-option value="0" label="开启"></el-option>
            <el-option value="1" label="关闭"></el-option>
          </el-select>
        </div>
      </div>
      <div class="filter-item flex flex-row-left flex-col-center">
        <el-checkbox v-model="form.isDefault">默认</el-checkbox>
      </div>
      <div class="flex flex-row-right btn" style="flex:1;">
        <el-button size="small" @click="backPage">返回</el-button>
        <!-- <el-button size="mini" type="primary">导入模板</el-button> -->
        <el-dropdown trigger="click" type="primary" @click="handleClick">
          <el-button size="mini" type="primary">导入模板</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item disabled>
              <div class="flex flex-row-left flex-col-center">
                <li class="droupName">模板名称</li>
                <li class="droupName">共享至</li>
                <li class="droupName">模板类型</li>
              </div>
            </el-dropdown-item>
            <el-dropdown-item v-for="(item,index) in temList" :key="index">
              <div class="flex flex-row-left flex-col-center" @click="chooseTem(item)">
                <li class="droup-td ellipsis-line1">{{item.templateName}}</li>
                <li class="droup-td ellipsis-line1">{{item.shareTo |formatShare}}</li>
                <li class="droup-td ellipsis-line1">{{item.templateType |formatType}}</li>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
    <div class="emr-body">
      <div class="tem-body">
        <edit ref="edit"></edit>
      </div>
      <div class="flex flex-row-center">
        <el-button size="small" type="primary" @click="save">保存</el-button>
        <el-button size="small" type="warning" @click="priview">预览</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import edit from "./components/Edit.vue";
import { getCDiseaseName } from "@/api/knowledge.js";
import { getTemplateList } from "@/api/emr";
import {
  addEmrTemplate,
  editEmrTemplate,
  getTemplateDetail
} from "@/api/emr.js";
export default {
  components: {
    edit
  },
  data() {
    return {
      form: {
        zybm: "", //中医病名
        name: "", // 模板名称
        type: "", // 模板类型
        share: "", // 共享
        state: "", // 启用状态
        isDefault: false // 是否默认
      },
      cDiseaseNameL: [], // 中医病名
      pid: "",
      temList: []
    };
  },
  created() {
    if (this.$route.query.pid) {
      this.pid = this.$route.query.pid;
      this._getTemplateDetail();
    }
    this._getTemplateList();
  },
  filters: {
    formatShare(type) {
      if (type == 0) {
        return "医共体";
      }
      if (type == 1) {
        return "全院";
      }
      if (type == 2) {
        return "科室";
      }
      if (type == 3) {
        return "个人";
      }
    },
    formatType(type) {
      if (type == -1) {
        return "基础模板";
      }
      if (type == 0) {
        return "通用";
      }
      if (type == 1) {
        return "装病";
      }
    }
  },
  methods: {
    // 选中模板
    chooseTem(item) {
      this.$confirm("导入该模板会清空当前设置的模板,是否继续", "提示", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.form.name = item.templateName;
          this.form.type = item.templateType;
          this.form.share = item.shareTo;
          this.form.state = item.enabledState;
          this.form.isDefault = item.isDefault == 0 ? true : false;

          this.$refs.edit.editListInit = JSON.parse(item.templateContent);
          this.$refs.edit.editList = JSON.parse(item.templateContent);
        })
        .catch(() => {});
    },
    // 返回
    backPage() {
      this.$router.back();
    },
    // 中医病名改变
    zybmChange(e) {
      // console.log(e, '中医病名改变')
      this.form.name = e;
    },
    // 保存
    save() {
      // if (this.form.zybm === "") {
      //     this.$message.error("请输入中医病名");
      //     return;
      // }
      if (this.form.name === "") {
        this.$message.error("请输入模板名称");
        return;
      }
      if (this.form.state === "") {
        this.$message.error("请选择启用状态");
        return;
      }

      if (this.form.share === "") {
        this.$message.error("请选择共享");
        return;
      }
      // this.$refs.edit.saveAll()
      if (!this.pid) {
        this._addEmrTemplate();
      } else {
        this._editEmrTemplate();
      }
    },
    // 预览
    priview() {
      this.$refs.edit.seeAll();
    },
    // 中医病名
    filterMethod(e) {
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(e)) {
        this.getCDiseaseName(e, "1");
      } else {
        this.getCDiseaseName(e, "");
      }
    },
    // 获取模板列表
    async _getTemplateList() {
      let res = await getTemplateList();
      if (res.ResultCode == 0) {
        let list1 = res.Data.currency; // 医共体
        let list2 = res.Data.theWholeHospital; // 全院
        let list3 = res.Data.department; // 科室
        let list4 = res.Data.personal; // 个人

        this.temList = [...list1, ...list2, ...list3, ...list4];
        this.temList.forEach((item, index) => {
          if (item.templateType == -1) {
            this.temList.splice(index, 1);
          }
        });
      }
    },
    // 获取中医病名数据
    async getCDiseaseName(key, serchtype = "") {
      let params = {
        pageid: 1,
        pagesize: 9999,
        serchtype,
        keyword: key
      };
      let res = await getCDiseaseName(params);
      if (res.code == 0) {
        this.cDiseaseNameL = res.data.diseases;
      }
    },
    // 添加电子病历模板
    async _addEmrTemplate() {
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = {
        diseaseName: this.form.zybm,
        templateName: this.form.name,
        templateType: this.form.type,
        isDefault: this.form.isDefault ? 0 : 1,
        enabledState: this.form.state,
        shareTo: this.form.share,
        templateContent: JSON.stringify(this.$refs.edit.editListInit)
      };
      let res = await addEmrTemplate(params);
      if (res.ResultCode == 0) {
        loading.close();
        this.$message.success("提交成功");
        this.$router.back();
      } else {
        this.$message.error(res.ResultInfo);
      }
    },
    // 修改电子病历模板
    async _editEmrTemplate() {
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = {
        diseaseName: this.form.zybm,
        templateName: this.form.name,
        templateType: this.form.type,
        isDefault: this.form.isDefault ? 0 : 1,
        enabledState: this.form.state,
        shareTo: this.form.share,
        templateContent: JSON.stringify(this.$refs.edit.editListInit),
        pid: this.pid
      };

      let res = await editEmrTemplate(params);
      if (res.ResultCode == 0) {
        loading.close();
        this.$message.success("提交成功");
        this.$router.back();
      } else {
        this.$message.error(res.ResultInfo);
      }
    },
    // 获取电子病历模板详情
    async _getTemplateDetail() {
      let res = await getTemplateDetail({
        pid: this.pid
      });
      if (res.ResultCode == 0) {
        this.form.zybm = res.Data.diseaseName;
        this.form.name = res.Data.templateName;
        this.form.type = res.Data.templateType;
        this.form.share = res.Data.shareTo;
        this.form.state = res.Data.enabledState;
        this.form.isDefault = res.Data.isDefault;

        this.$refs.edit.editListInit = JSON.parse(res.Data.templateContent);
        this.$refs.edit.editList = JSON.parse(res.Data.templateContent);
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../style/common.scss";
body {
  background: red;
}
.el-dropdown-menu {
  height: 200px;
  overflow: auto;
}
// @import '../../style/base.scss';
.droupName {
  font-size: 15px;
  color: #5386f6;
  text-align: center;
  width: 100px;
  font-weight: 600;
}

.droup-td {
  font-size: 14px;
  text-align: center;
  width: 100px;
}
.emr-tem {
  header {
    padding: 10px;
    background: #fff;

    .icon {
      width: 30px;

      img {
        width: 100%;
      }
    }

    .filter-item {
      // flex: 1;
      font-size: 16px;
      margin-right: 10px;

      .name {
        max-width: 90px;
      }

      .name::before {
        content: "*";
        color: red;
        margin-top: 10px;
      }

      .zybm {
        width: 110px;
      }

      .mbmc {
        width: 180px;
      }

      .mblx {
        width: 75px;
      }
    }
  }

  .emr-body {
    height: 72vh;
    padding: 10px;
    box-sizing: border-box;
    // background: red;
    overflow: auto;
    margin-top: 5px;
    box-sizing: border-box;
    background: #fff;

    .tem-body {
      margin-bottom: 10px;
      max-height: 89%;
      overflow: auto;
      // background: red;
      // overflow: auto;
    }
  }
}

.btn ::v-deep .el-dropdown .el-button {
  padding: 9px 15px;
  margin-left: 10px;
}
</style>

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

      .tem-body {
        margin-bottom: 10px;
        max-height: 94%;
        overflow: auto;
        // background: red;
        // overflow: auto;
      }
    }
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .emr-tem {
    .emr-body {
      height: 82vh;
      .tem-body {
        margin-bottom: 10px;
        max-height: 94%;
        overflow: auto;
        // background: red;
        // overflow: auto;
      }
    }
  }
}

@media screen and (min-width: 1360px) and (max-width: 1600px) {
  .emr-tem {
    .emr-body {
      height: 74vh;
      .tem-body {
        margin-bottom: 10px;
        max-height: 90%;
        overflow: auto;
        // background: red;
        // overflow: auto;
      }
    }
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .emr-tem {
    .emr-body {
      height: 74vh;
      .tem-body {
        margin-bottom: 10px;
        max-height: 90%;
        overflow: auto;
        // background: red;
        // overflow: auto;
      }
    }
  }
}
</style>