<template>
  <div class="todayPatiens">
    <!-- 顶部筛选 -->
    <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-input size="mini" type="text" placeholder="请输入模板名称" v-model="form.name"></el-input>
          </div>
        </div>

        <div class="screening-item flex-vertical-center-l" style="min-width:0px;max-width:150px">
          <span>模板类型：</span>
          <div class="input">
            <el-select size="mini" placeholder="请选择" v-model="form.type">
              <el-option value="0" label="通用"></el-option>
              <el-option value="1" label="专病"></el-option>
            </el-select>
          </div>
        </div>
        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clear()">清空</el-button>
        <el-button type="primary" size="mini" @click="add()" v-if="showAdd">新增</el-button>
      </div>
    </div>
    <!-- 底部数据 -->
    <div class="today-data">
      <div class="today-table">
        <el-table :data="tableData" style="width: 100%" border height="100%">
          <el-table-column prop="id" width="50" label="序号"></el-table-column>
          <el-table-column prop="templateName" label="模板名称"></el-table-column>
          <el-table-column prop="templateType" label="模板类型" width="100"></el-table-column>
          <el-table-column prop="createUser" label="创建者" width="120"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="enabledState" label="启用状态" width="100"></el-table-column>
          <el-table-column prop="isDefault" label="默认" width="80"></el-table-column>
          <el-table-column prop="state" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" v-if="showFind" @click="priview(scope)">预览</el-button>
              <el-button
                size="mini"
                type="warning"
                v-if="showEdit && scope.row.templateType!='基础'"
                @click="edit(scope)"
              >修改</el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="showDel && scope.row.templateType!='基础'"
                @click="deleteItem(scope)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="today-page flex-center">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>

      <el-dialog
        top="5vh"
        title="病历模版"
        :visible.sync="dialogVisible"
        width="1000px"
        :before-close="handleClose"
      >
        <div class="priview-body">
          <priviewEdit :editListF="editList"></priviewEdit>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getEmrTemplateList,
  deleteEmrTemplate,
  getSystemBtn
} from "@/api/emr.js";
import priviewEdit from "./components/PriviewEdit.vue";
export default {
  components: {
    priviewEdit
  },
  data() {
    return {
      form: {
        name: "",
        type: ""
      },
      tableData: [],
      total: 0,
      limit: 10,
      page: 1,

      showAdd: true,
      showEdit: true,
      showDel: true,
      showFind: true,

      editList: [],
      dialogVisible: false
    };
  },
  created() {
    this._getEmrTemplateList();
    this._getSystemBtn();
  },

  methods: {
    sizeC(e) {
      this.page = e;
      this._getEmrTemplateList();
    },
    clear() {
      this.page = 1;
      this.form = {
        name: "",
        type: ""
      };
      this._getEmrTemplateList();
    },
    search() {
      this.page = 1;
      this._getEmrTemplateList();
    },
    add() {
      this.$router.push({
        path: "/index/emrTemEdit"
      });
    },
    // 修改模板
    edit(scope) {
      this.$router.push({
        path: "/index/emrTemEdit?pid=" + scope.row.pid
      });
    },
    // 预览模板
    priview(scope) {
      this.editList = JSON.parse(scope.row.templateContent);
      this.dialogVisible = true;
    },
    deleteItem(scope) {
      this.$confirm("此操作将删除该模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this._deleteEmrTemplate(scope.row.pid);
        })
        .catch(() => {});
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 获取列表
    async _getEmrTemplateList() {
      let params = {
        page: this.page,
        limit: this.limit,
        templateName: this.form.name,
        templateType: this.form.type
      };
      let res = await getEmrTemplateList(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;

        this.tableData.filter((item, index) => {
          return (item.id = index + 1);
        });

        this.showEdit = res.Data.ButtonRight.indexOf("edit") != -1;
        this.showDel = res.Data.ButtonRight.indexOf("del") != -1;
        this.showFind = res.Data.ButtonRight.indexOf("view") != -1;
      }
    },
    async _getSystemBtn() {
      let res = await getSystemBtn();
      if (res.ResultCode == 0) {
        this.showAdd = res.Data.indexOf("add") != -1;
      }
    },
    // 删除
    async _deleteEmrTemplate(ids) {
      let res = await deleteEmrTemplate({
        ids: ids
      });
      if (res.ResultCode == 0) {
        this.$message.success("删除成功");
        this._getEmrTemplateList();
      } else {
        this.$message.error(res.ResultInfo);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";
.priview-body {
}

.todayPatiens ::v-deep .el-dialog {
  margin: 0 auto;
  height: 90vh;
  overflow: auto;
}

.todayPatiens ::v-deep .el-dialog__header {
  padding: 10px;
}
.todayPatiens ::v-deep .el-dialog__body {
  padding: 10px 10px;

  height: 90%;
  overflow: auto;
  box-sizing: border-box;
}

.today-data {
  height: 73vh;
  padding: 5px 5px;
  background: #fff;
  border-radius: 5px;
  margin-top: 5px;

  .today-table {
    height: 90%;
  }

  .today-title {
    margin-bottom: 22px;

    span {
      display: inline-block;
      width: 3px;
      height: 14px;
      background: #5386f6;
      border-radius: 1px;
      margin-right: 14px;
    }

    div {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #5386f6;
    }
  }

  .today-center {
    margin-bottom: 5px;
    justify-content: space-between;

    .patiens-btn {
      cursor: pointer;
      width: 164px;
      height: 56px;
      background: url("../../assets/patiens-ku.png") no-repeat;
      background-size: 100%;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      padding: 0 15px;
      box-sizing: border-box;
      margin-right: 51px;
    }

    .today-accepts {
      // margin-right: 66px;
      margin-right: 30px;

      img {
        width: 36px;
        margin-right: 10px;
      }

      .today-ac-r {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;

        div:last-child {
          font-size: 16px;
          font-family: DIN Alternate;
          font-weight: bold;
          color: #333333;
          // margin-top: 12px;
          margin-left: 5px;
        }
      }
    }
  }

  .find-detail {
    width: 60px;
    height: 24px;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    cursor: pointer;
    margin: 0 auto;
  }

  .find-fill {
    background: #5386f6 !important;
    color: #fff !important;
    border: 1px solid #5386f6;
  }
}

.today-table::v-deep .el-table .cell {
  text-align: center;
}

.el-table .success-row {
  background: #f0f9eb;
}
</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: 80vh;
    padding: 10px;
    // background: red;

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

  .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: 72vh;
    padding: 10px;
    // background: red;

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

  .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: 72vh;
    padding: 10px;
    // background: red;

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

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

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