<template>
  <div class="tips-main">
    <div class="sidebar">
      <xc-table :local-data="tipsData"
                layout="total,prev, pager, next"
                @rowClick="rowClick"
                :height="150">
        <el-table-column label="关键词" prop="queryKey" width="100"/>
        <el-table-column label="内容" prop="content" show-overflow-tooltip/>
        <el-table-column label="类型" prop="typeName" width="40"/>
        <el-table-column fixed="right" width="60">
          <template #header>
            <el-button type="primary" icon="Plus" title="添加" @click="addEmrTipsClick"/>
          </template>
          <template #default="{row}">
            <el-popconfirm cancel-button-text="取消"
                           confirm-button-text="删除"
                           icon="Delete" iconColor="#F56C6C"
                           title="是否删除该数据"
                           @confirm="delClick(row.id)">
              <template #reference>
                <el-button icon="Delete"
                           type="danger"
                           @click.stop
                           title="删除"/>
              </template>
            </el-popconfirm>

          </template>
        </el-table-column>
      </xc-table>
    </div>
    <div class="main">
      <div style="height: 40px"/>

      <el-form label-width="80px"
               ref="formRef"
               :rules="rules"
               :model="formData">

        <el-form-item label="关键词：" prop="queryKey">
          <el-input v-model="formData.queryKey"
                    maxlength="20"
                    show-word-limit
                    placeholder="请设置检索关键词，建议关键词为小写英文或拼音。"/>
        </el-form-item>

        <el-form-item label="内容：" prop="content">
          <el-input v-model="formData.content"
                    placeholder="请写入内容"
                    rows="10"
                    @keydown.tab="tabInput"
                    type="textarea"/>
        </el-form-item>

        <el-form-item label="类型：" prop="typeCode">
          <el-select v-model="formData.typeCode">
            <el-option v-for="item in typeList"
                       :value="item.code"
                       :label="item.name"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
              v-if="formData.id === null"
              type="primary"
              @click="addPopupClick">
            提交
          </el-button>
          <el-button v-else type="primary"
                     @click="updatePopupClick">
            修改
          </el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>


</template>

<script setup name='MedicalHistoryPrompts'>
import {addEmrTips, deleteEmrTips, getEmrTips, updateEmrTips} from "@/api/zhu-yuan-yi-sheng/emr-patient";
import XcTable from "@/components/xiao-chan/xc-table/XcTable.vue";


const tipsData = ref([])
const formRef = ref()
const formData = ref({
  id: null,
  content: '',
  typeCode: '',
  queryKey: '',
})

const typeList = [
  {code: 1, name: '个人'},
  {code: 2, name: '科室'},
  {code: 3, name: '全院'},
]

const rules = ref({
  queryKey: [{required: true, message: '该项不能为空', trigger: 'blur'}],
  typeCode: [{required: true, message: '该项不能为空', trigger: 'blur'}],
  content: [{required: true, message: '该项不能为空', trigger: 'blur'}],
})
const queryData = () => {
  getEmrTips().then(res => {
    tipsData.value = res
  })
}

const tabInput = (e) => {
  e.returnValue = false
  const insertText = '\t'
  const elInput = e.target
  const startPos = elInput.selectionStart
  const endPos = elInput.selectionEnd
  if (startPos === undefined || endPos === undefined) return
  const txt = elInput.value
  elInput.value = txt.substring(0, startPos) + insertText + txt.substring(endPos)
  elInput.focus()
  elInput.selectionStart = startPos + insertText.length;
  elInput.selectionEnd = startPos + insertText.length;
  formData.value.content = elInput.value
}

const addPopupClick = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return
    }
    addEmrTips(formData.value).then(() => {
      queryData()
      empty()
    })
  })
}

const updatePopupClick = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return
    }
    updateEmrTips(formData.value).then(() => {
      queryData()
      empty()
    })

  })
}

const delClick = (id) => {
  deleteEmrTips(id).then(() => {
    queryData()
  })
}

const rowClick = (row) => {
  formData.value = row
}

const addEmrTipsClick = () => {
  empty()
}

const empty = () => {
  formData.value = {
    id: null,
    content: '',
    typeCode: '',
    queryKey: '',
  }
}

onMounted(() => {
  queryData()
})

</script>

<style scoped lang="scss">
.tips-main {
  display: flex;

  .sidebar {
    width: 600px;
  }

  .main {
    flex: 1;
    background-color: white;
  }
}
</style>
