<template>
  <el-dialog v-model="dialog" destroy-on-close title="说明模板">
    <el-container>
      <el-aside>
        <el-radio-group v-model="leiXing" @change="huoQuShuoMingMuBan(0)">
          <el-radio-button :label="1">个人</el-radio-button>
          <el-radio-button :label="2">科室</el-radio-button>
          <el-radio-button :label="3">全院</el-radio-button>
        </el-radio-group>
        <el-divider></el-divider>
        <el-input v-model="name" style="width: 120px" @keyup.enter="huoQuShuoMingMuBan(0)"></el-input>
        <el-button @click="huoQuShuoMingMuBan(0)">查询</el-button>
        <el-button @click="xinZengMuBan">新建</el-button>
        <el-table :data="shuoMingMuBan.data" :height="windowSize.h / 2">
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-dropdown size="small" split-button type="primary" @click="handleClick('查看', scope.row)">
                查看
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item icon="Edit" @click="handleClick('修改', scope.row)">修改</el-dropdown-item>
                    <br />
                    <el-dropdown-item icon="Delete" @click="handleClick('删除', scope.row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="shuoMingMuBan.currentPage"
          :page-size="20"
          :pager-count="7"
          :total="shuoMingMuBan.total"
          layout="total,  prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-aside>
      <el-main>
        <div v-for="item in jcText" v-if="jsonType">
          <div class="jc-header">
            {{ item.header }}:
            <el-button circle class="iconfont icon-fuzhi" @click="fuZhi(item.content)"></el-button>
          </div>
          <div class="jc-content">
            <span>{{ item.content }}</span>
          </div>
          <br /><br />
        </div>

        <div v-else>
          <el-input v-model="stringJcText" :rows="20" type="textarea"></el-input>
        </div>
      </el-main>
    </el-container>
  </el-dialog>

  <el-dialog v-model="bianJiMuBan.dialog" title="编辑说明模板">
    <el-form ref="bianJiBiaoGeRef" :label-width="80" :model="bianJiMuBan.data" :rules="bianJiRules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="模板类型" prop="whFlag">
            <el-radio-group v-model="bianJiMuBan.data.whFlag" :disabled="bianJiMuBan.leiXing === '修改'">
              <el-radio-button :label="1">个人</el-radio-button>
              <el-radio-button :label="2">科室</el-radio-button>
              <el-radio-button :label="3">全院</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="名称：" prop="name">
            <el-input v-model="bianJiMuBan.data.name" maxlength="20" show-word-limit @blur="bianJiMuBan.data.name = $event.target.value.trim()"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容：" prop="jcText">
            <el-table :data="bianJiMuBan.data.jcText">
              <el-table-column label="标题" prop="header" width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.header"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="内容" prop="content">
                <template #default="scope">
                  <el-input v-model="scope.row.content" :rows="2" type="textarea"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" prop="content" width="80">
                <template #default="scope">
                  <el-button circle icon="Plus" @click="tianJiaMuBanNeiRong"></el-button>
                  <el-button circle icon="Delete" @click="bianJiMuBan.data.jcText.splice(scope.$index, 1)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="提交：">
            <el-button @click="queDingBiaoGeShuJu(bianJiBiaoGeRef)">确认</el-button>
            <el-button @click="bianJiMuBan.dialog = false">关闭</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { computed, ref } from 'vue'
import { huoMuShuoMingMuBan, shouMingMuBanChaoZuo } from '@/api/zhu-yuan-yi-sheng/jian-yan-jian-cha-shen-qing'
import store from '@/store'
import { clone } from '@/utils/clone'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  props: {
    title: {
      type: String,
      default: '获取说明模板',
    },
  },
  emits: ['huo-qu-xuan-zhong-shu-ju'],
  name: 'ShuoMingMuBan',
  setup(props, ctx) {
    const windowSize = computed(() => {
      return store.state.app.windowSize
    })

    const jsonType = ref(false)

    const dialog = ref(false)
    const leiXing = ref(3)
    const name = ref('')

    const jcText = ref([])
    const stringJcText = ref('')

    const bianJiMuBan = ref({
      dialog: false,
      data: {
        jcText: [],
        name: '',
      },
      leiXing: '修改',
    })

    const shuoMingMuBan = ref({
      data: [],
      currentPage: 1,
      total: 0,
    })

    const huoQuShuoMingMuBan = (total) => {
      dialog.value = true
      if (total === 0) {
        shuoMingMuBan.value.currentPage = 1
      }
      huoMuShuoMingMuBan(name.value, leiXing.value, shuoMingMuBan.value.total, shuoMingMuBan.value.currentPage).then((res) => {
        if (total === 0) {
          shuoMingMuBan.value.total = res.total
        }
        shuoMingMuBan.value.data = res.records
      })
    }

    const handleCurrentChange = (val) => {
      shuoMingMuBan.value.currentPage = val
      huoQuShuoMingMuBan(shuoMingMuBan.value.total)
    }

    const handleClick = (chaoZuo, row) => {
      switch (chaoZuo) {
        case '查看':
          try {
            jsonType.value = true
            jcText.value = JSON.parse(row.jcText)
          } catch (e) {
            jsonType.value = false
            stringJcText.value = row.jcText
          }
          break
        case '修改':
          bianJiMuBan.value.dialog = true
          bianJiMuBan.value.leiXing = '修改'
          bianJiMuBan.value.data = clone(row)
          try {
            bianJiMuBan.value.data.jcText = JSON.parse(row.jcText)
          } catch (e) {
            bianJiMuBan.value.dialog = false
            ElMessage.error('老系统数据无法修改')
          }
          break
        case '删除':
          ElMessageBox.confirm('您确定要删除该模板吗？', '提示', {
            type: 'warning',
          })
            .then(() => {
              row.leiXing = '删除'
              shouMingMuBanChaoZuo(row)
            })
            .catch(() => {})
          break
      }
    }

    const fuZhi = (val) => {
      ctx.emit('huo-qu-xuan-zhong-shu-ju', val)
    }

    const bianJiBiaoGeRef = ref()

    const bianJiRules = ref({
      name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    })

    const queDingBiaoGeShuJu = async (form) => {
      if (!form) return
      try {
        await form.validate()
        await ElMessageBox.confirm(`您确定要${bianJiMuBan.value.leiXing}该模板吗？`, '提示', {
          type: 'warning',
        })
          .then(() => {
            let data = clone(bianJiMuBan.value.data)
            data.userDeptCode = store.state.user.info.deptCode
            data.leiXing = bianJiMuBan.value.leiXing
            data.jcText = JSON.stringify(bianJiMuBan.value.data.jcText)
            shouMingMuBanChaoZuo(data).then((res) => {
              huoQuShuoMingMuBan(0)
            })
          })
          .catch((e) => {})
      } catch (e) {}
    }

    const tianJiaMuBanNeiRong = () => {
      bianJiMuBan.value.data.jcText.push({ header: '标题', content: '内容' })
    }

    const xinZengMuBan = () => {
      bianJiMuBan.value.leiXing = '新增'
      bianJiMuBan.value.dialog = true
      bianJiMuBan.value.data = {
        jcText: [],
        name: '',
      }
      bianJiMuBan.value.data.jcText.push({ header: '标题', content: '内容' })
      bianJiMuBan.value.data.whFlag = 1
    }

    return {
      dialog,
      name,
      leiXing,
      shuoMingMuBan,
      huoQuShuoMingMuBan,
      windowSize,
      handleCurrentChange,
      handleClick,
      bianJiMuBan,
      bianJiRules,
      bianJiBiaoGeRef,
      queDingBiaoGeShuJu,
      xinZengMuBan,
      jcText,
      fuZhi,
      tianJiaMuBanNeiRong,
      jsonType,
      stringJcText,
    }
  },
}
</script>

<style scoped>
:deep(.el-table .children-row) {
  background: rgba(145, 247, 145, 0.5);
}

:deep(.el-table) {
  --el-table-row-hover-background-color: #85dbfd7a;
}

.jc-header {
  font-size: 16px;
  font-weight: bold;
  color: red;
}

.jc-content span {
  font-size: 14px;
  margin-left: 20px;
}
</style>
