<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
    </div>

    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="主诉">
          <div>
            <div class="filter-container">
              <el-button
                class="filter-item"
                style="margin-left: 10px;margin-right: 10px"
                @click="handleCreateTemplate"
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >新 增
              </el-button>
            </div>
            <el-table
              :data="tabledata"
              border
              fit
              :row-style="{ color: '#303133' }"
              :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
              @cell-mouse-leave="cellMouseLeave"
              @cell-mouse-enter="cellMouseEnter"
              :row-class-name="tableRowClassNames"
              :span-method="merge"
              style="width: 100%;min-height:500px;"
            >
              <el-table-column
                prop="id"
                label="标题"
                align="center"
               >
                <template slot-scope="scope">
                   {{scope.row.title}}
                </template>
              </el-table-column>


              <el-table-column
                prop="amount1"
                align="center"
                label="内容"
               >
                <template slot-scope="scope">
                  {{scope.row.content}}
                </template>
              </el-table-column>
             
              <el-table-column
                prop="amount1"
                align="center"
                label="备注"
               >
                <template slot-scope="scope">
                  {{scope.row.remark}}
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="操作"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-edit-outline"
                      @click="edit(scope.row.id)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteMainTemplate(scope.row.id,scope.$index)" 
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>

            </el-table>
          
          </div>
        </el-tab-pane>
         <el-tab-pane label="现病史">
          <div>
            <div class="filter-container">
              <el-button
                class="filter-item"
                style="margin-left: 10px;margin-right: 10px"
                @click="handleCreateTemplate"
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >新 增
              </el-button>
            </div>
             <el-table
              :data="tabledataOne"
              border
              fit
              :row-style="{ color: '#303133' }"
              :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
              @cell-mouse-leave="cellMouseLeave"
              @cell-mouse-enter="cellMouseEnter"
              :row-class-name="tableRowClassNames"
              :span-method="merge"
              style="width: 100%;min-height:500px;"
            >
              <el-table-column
                prop="id"
                label="标题"
                align="center"
               >
                <template slot-scope="scope">
                   {{scope.row.title}}
                </template>
              </el-table-column>


              <el-table-column
                prop="amount1"
                align="center"
                label="内容"
               >
                <template slot-scope="scope">
                  {{scope.row.content}}
                </template>
              </el-table-column>
             
              <el-table-column
                prop="amount1"
                align="center"
                label="备注"
               >
                <template slot-scope="scope">
                  {{scope.row.remark}}
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="操作"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-edit-outline"
                      @click="edit(scope.row.id)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteMainTemplate(scope.row.id,scope.$index)" 
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>

            </el-table>
          
          </div>
        </el-tab-pane>
         <el-tab-pane label="既往史">
          <div>
            <div class="filter-container">
              <el-button
                class="filter-item"
                style="margin-left: 10px;margin-right: 10px"
                @click="handleCreateTemplate"
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >新 增
              </el-button>
            </div>
            <el-table
              :data="tabledataTwo"
              border
              fit
              :row-style="{ color: '#303133' }"
              :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
              @cell-mouse-leave="cellMouseLeave"
              @cell-mouse-enter="cellMouseEnter"
              :row-class-name="tableRowClassNames"
              :span-method="merge"
              style="width: 100%;min-height:500px;"
            >
              <el-table-column
                prop="id"
                label="标题"
                align="center"
               >
                <template slot-scope="scope">
                   {{scope.row.title}}
                </template>
              </el-table-column>


              <el-table-column
                prop="amount1"
                align="center"
                label="内容"
               >
                <template slot-scope="scope">
                  {{scope.row.content}}
                </template>
              </el-table-column>
             
              <el-table-column
                prop="amount1"
                align="center"
                label="备注"
               >
                <template slot-scope="scope">
                  {{scope.row.remark}}
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="操作"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-edit-outline"
                      @click="edit(scope.row.id)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteMainTemplate(scope.row.id,scope.$index)" 
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>

            </el-table>
          
          </div>
        </el-tab-pane>
        <el-tab-pane label="个人史">
          <div>
            <div class="filter-container">
              <el-button
                class="filter-item"
                style="margin-left: 10px;margin-right: 10px"
                @click="handleCreateTemplate"
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >新 增
              </el-button>
            </div>
            <el-table
              :data="tabledataThree"
              border
              fit
              :row-style="{ color: '#303133' }"
              :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
              @cell-mouse-leave="cellMouseLeave"
              @cell-mouse-enter="cellMouseEnter"
              :row-class-name="tableRowClassNames"
              :span-method="merge"
              style="width: 100%;min-height:500px;"
            >
              <el-table-column
                prop="id"
                label="标题"
                align="center"
               >
                <template slot-scope="scope">
                   {{scope.row.title}}
                </template>
              </el-table-column>


              <el-table-column
                prop="amount1"
                align="center"
                label="内容"
               >
                <template slot-scope="scope">
                  {{scope.row.content}}
                </template>
              </el-table-column>
             
              <el-table-column
                prop="amount1"
                align="center"
                label="备注"
               >
                <template slot-scope="scope">
                  {{scope.row.remark}}
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="操作"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-edit-outline"
                      @click="edit(scope.row.id)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteMainTemplate(scope.row.id,scope.$index)" 
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>

            </el-table>
          
          </div>
        </el-tab-pane>
       
        <el-tab-pane label="家族史">
          <div>
            <div class="filter-container">
              <el-button
                class="filter-item"
                style="margin-left: 10px;margin-right: 10px"
                @click="handleCreateTemplate"
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >新 增
              </el-button>
            </div>
            <el-table
              :data="tabledataFour"
              border
              fit
              :row-style="{ color: '#303133' }"
              :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
              @cell-mouse-leave="cellMouseLeave"
              @cell-mouse-enter="cellMouseEnter"
              :row-class-name="tableRowClassNames"
              :span-method="merge"
              style="width: 100%;min-height:500px;"
            >
              <el-table-column
                prop="id"
                label="标题"
                align="center"
               >
                <template slot-scope="scope">
                   {{scope.row.title}}
                </template>
              </el-table-column>


              <el-table-column
                prop="amount1"
                align="center"
                label="内容"
               >
                <template slot-scope="scope">
                  {{scope.row.content}}
                </template>
              </el-table-column>
             
              <el-table-column
                prop="amount1"
                align="center"
                label="备注"
               >
                <template slot-scope="scope">
                  {{scope.row.remark}}
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="操作"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-edit-outline"
                      @click="edit(scope.row.id)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteMainTemplate(scope.row.id,scope.$index)" 
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>

            </el-table>
          
          </div>
        </el-tab-pane>
         <el-tab-pane label="诊断信息">
          <div>
            <div class="filter-container">
              <el-button
                class="filter-item"
                style="margin-left: 10px;margin-right: 10px"
                @click="handleCreateTemplate"
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >新 增
              </el-button>
            </div>
            <el-table
              :data="tabledataFive"
              border
              fit
              :row-style="{ color: '#303133' }"
              :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
              @cell-mouse-leave="cellMouseLeave"
              @cell-mouse-enter="cellMouseEnter"
              :row-class-name="tableRowClassNames"
              :span-method="merge"
              style="width: 100%;min-height:500px;"
            >
              <el-table-column
                prop="id"
                label="标题"
                align="center"
               >
                <template slot-scope="scope">
                   {{scope.row.title}}
                </template>
              </el-table-column>


              <el-table-column
                prop="amount1"
                align="center"
                label="内容"
               >
                <template slot-scope="scope">
                  {{scope.row.content}}
                </template>
              </el-table-column>
             
              <el-table-column
                prop="amount1"
                align="center"
                label="备注"
               >
                <template slot-scope="scope">
                  {{scope.row.remark}}
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="操作"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-edit-outline"
                      @click="edit(scope.row.id)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteMainTemplate(scope.row.id,scope.$index)" 
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>

            </el-table>
          
          </div>
        </el-tab-pane>
          <el-tab-pane label="医嘱">
          <div>
            <div class="filter-container">
              <el-button
                class="filter-item"
                style="margin-left: 10px;margin-right: 10px"
                @click="handleCreateTemplate"
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
              >新 增
              </el-button>
            </div>
             <el-table
              :data="tabledataSix"
              border
              fit
              :row-style="{ color: '#303133' }"
              :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
              @cell-mouse-leave="cellMouseLeave"
              @cell-mouse-enter="cellMouseEnter"
              :row-class-name="tableRowClassNames"
              :span-method="merge"
              style="width: 100%;min-height:500px;"
            >
              <el-table-column
                prop="id"
                label="标题"
                align="center"
               >
                <template slot-scope="scope">
                   {{scope.row.title}}
                </template>
              </el-table-column>


              <el-table-column
                prop="amount1"
                align="center"
                label="内容"
               >
                <template slot-scope="scope">
                  {{scope.row.content}}
                </template>
              </el-table-column>
             
              <el-table-column
                prop="amount1"
                align="center"
                label="备注"
               >
                <template slot-scope="scope">
                  {{scope.row.remark}}
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                label="操作"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-edit-outline"
                      @click="edit(scope.row.id)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-delete"
                      @click="deleteMainTemplate(scope.row.id,scope.$index)" 
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>

            </el-table>
          
          </div>
        </el-tab-pane>
     
      </el-tabs>

       <el-dialog
        title="新增"
        width="50%"
        :visible.sync="dialogVisible"
       >
        <div>
            <el-form :model="form" ref="form" label-width="100px" label-position="right" :rules="rules">
                <el-form-item label="标题:" prop="title" required>
                    <el-input v-model="form.title" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="内容 : " prop="content" required>
                    <el-input  type="textarea" v-model="form.content" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="备注 : " prop="remark">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"  @click="submitAction('form')">保 存</el-button>
        </div>
    </el-dialog>   


    <el-dialog
        title="编辑"
        width="50%"
        :visible.sync="editDialogVisible"
       >
        <div>
            <el-form :model="form" ref="form" label-width="100px" label-position="right" :rules="rules">
                <el-form-item label="标题:" prop="title" required>
                    <el-input v-model="form.title" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="内容 : " prop="content" required>
                    <el-input  type="textarea" v-model="form.content" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="备注 : " prop="remark">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary"  @click="UpdateMainTemplate('form')">保 存</el-button>
        </div>
    </el-dialog>          
    </div>
  </div>

</template>


<style>
  @import "../../../static/css/table_row.css";

  .filter-item {
    float: right;
  }
</style>

<script>
 
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import { saveMainTemplate,getMedicalTemplateList,getMainTemplateById,UpdateMainTemplate,deleteMainTemplate} from "@/api/project/project"
  export default {
    name: 'hisTemplate',
    components: { BreadCrumb },
    data() {
      return {
        crumbs: [
          { path: false, name: '模版管理' },
          { path: '', name: '医嘱模版' }
        ],
        rowIndex: -1,
        current_template_id: 0,
        currentObject: {},
        tempArr: [],
        sameRowArr: [],
        dialogVisible:false,
        form:{
          id:0,
          title:"",
          content:"",
          remark:""  
        },
        rules: {
            title: [{ required: true, message: "请输入标题"}],
            content: [{ required: true, message: "请输入内容"}]
        },
        tabledata:[],
        tabledataOne:[],
        tabledataTwo:[],
        tabledataThree:[],
        tabledataFour:[],
        tabledataFive:[],
        tabledataSix:[],
        tabledataSeven:[],
        editDialogVisible:false,
        activeName:0
      }
    },
    created() {
       this.getlist()
    },
    methods:{
        handleCreateTemplate(){
       
        this.dialogVisible = true
      },
      submitAction(formName){

            var template_id = 1
                if(this.activeName == 0){
                   template_id = 1
                }
                if(this.activeName == 1){
                   template_id = 2
                }
                if(this.activeName == 2){
                   template_id = 3
                }

                if(this.activeName == 3){
                   template_id = 4
                }

                if(this.activeName == 4){
                   template_id = 5
                }

                if(this.activeName == 5){
                   template_id = 6
                }

                if(this.activeName == 6){
                   template_id = 7
                }

                if(this.activeName == 7){
                   template_id = 8
                }

                const params = {
                   title:this.form.title,
                   content:this.form.content,
                   remark:this.form.remark,
                   template_id:template_id,
                }
               console.log("params",params)
         this.$refs[formName].validate(valid=>{
            if(valid){
             saveMainTemplate(params).then(response=>{
                  if(response.data.state == 1){
                     var template =  response.data.data.template
                     this.$message.success("保存成功")
                     this.dialogVisible = false
                     this.getlist()
                     this.form.title = ""
                     this.form.content = ""
                     this.form.remark = ""
                  }
               }) 
            }
         })
      },

      getlist(){
        getMedicalTemplateList().then(response=>{
           if(response.data.state == 1){
             var list =  response.data.data.list
             console.log("list",list)
             this.tabledata = list
             this.tabledataOne =  response.data.data.listOne
             this.tabledataTwo = response.data.data.listTwo
             this.tabledataThree = response.data.data.listThree
             this.tabledataFour =  response.data.data.listFour
             this.tabledataFive = response.data.data.listFive
             this.tabledataSix = response.data.data.listSix
             this.tabledataSeven =  response.data.data.listSeven
           }
        })   
      },

      edit(id){
        this.editDialogVisible = true
        getMainTemplateById(id).then(response=>{
           if(response.data.state == 1){
             var template =  response.data.data.template
             this.form.title = template.title 
             this.form.content =  template.content
             this.form.remark = template.remark
             this.form.id = template.id
           }
        })
      },

      UpdateMainTemplate(formName){
          const params = {
                  title:this.form.title,
                  content:this.form.content,
                  remark:this.form.remark,
                  id:this.form.id,  
           }
         this.$refs[formName].validate(valid=>{
             if(valid){   
             
              UpdateMainTemplate(params).then(response=>{
                 if(response.data.state == 1){
                   var template =  response.data.data.template
                   this.$message.success("保存成功")
                   this.editDialogVisible = false
                   this.getlist()
                 }
              })
             }
         })
      },

      deleteMainTemplate(id,index){
          this.$confirm('确认删除吗?', '删除', {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
            type: 'warning'
         }).then(() => {
             
            deleteMainTemplate(id).then(response => {
              if (response.data.state == 1) {
                  var msg = response.data.data.msg
                  this.tabledata.splice(index, 1);
                  this.$message.success("删除成功")
              } else {
                  this.$message.error("药品已经出库不能删除")
              }
            })
          })
          .catch(() => {
          }) 
      }
    }
  }
</script>
<style>
  .center th .cell {
    text-align: center !important;
  }

  .templateadvicenamedisplay .cell {
    float: left;
    text-align: left;
  }
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #d0d3da;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #d0d3da;
  }
</style>

