<template>
  <page-layer>
    <template #header>
      类别：
      <el-select style="width: 80px" v-model="searchParam.tableName">
        <el-option label="检查" value="jc_zd_item"></el-option>
        <el-option label="检验" value="jy_zd_item"></el-option>
      </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp;查找方式：
      <el-select style="width: 80px" v-model="searchParam.searchMethod">
        <el-option label="拼音" value="py_code"></el-option>
        <el-option label="编码" value="code"></el-option>
        <el-option label="名称" value="name"></el-option>
        <el-option label="五笔" value="d_code"></el-option>
      </el-select>
      <el-input v-model="searchParam.searchContent" style="width: 160px" :placeholder="filterPlaceHolder"
                clearable></el-input>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="Search" @click="fetchData">检索</el-button>
    </template>
    <template #main>
      <el-table :data="data.list" :height="tableHeight" stripe highlight-current-row>
        <el-table-column prop="code" label="编码" width="70"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="execUnitName" label="执行科室" width="120"></el-table-column>
        <el-table-column prop="pyCode" label="拼音码" width="100"></el-table-column>
        <el-table-column prop="wbCode" label="五笔码" width="100"></el-table-column>
        <el-table-column label="服务号可预约" width="120">
          <template #default="scope">
            <span v-html="wxBookable(scope.row.wxBookableFlag)"></span>
          </template>
        </el-table-column>
        <el-table-column label="预约提示内容">
          <template #default="scope">
            <div class="ellipsis-text" :title="scope.row.bookTip">{{ scope.row.bookTip }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="success" icon="Edit" @click="editExamItem(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParam.currentPage"
          :page-sizes="[15, 30, 45, 70, 100]"
          :page-size="searchParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.totalSize"
          style="margin-top: 5px"
      ></el-pagination>
      <el-dialog v-model="showEditExamItem" title="检查/检验项目编辑" width="30%" :show-close="false">
        <div style="height: 8px"></div>
        <el-input v-model="currentExamItem.code" disabled>
          <template #prepend>项目编码</template>
        </el-input>
        <div style="height: 8px"></div>
        <el-input v-model="currentExamItem.name" disabled>
          <template #prepend>项目名称</template>
        </el-input>
        <div style="height: 8px"></div>
        <el-input v-model="currentExamItem.execUnitName" disabled>
          <template #prepend>执行科室</template>
        </el-input>
        <el-divider></el-divider>
        服务号可预约：
        <el-radio-group v-model="currentExamItem.wxBookableFlag">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
        <div style="height: 8px"></div>
        预约提示：
        <el-input v-model="currentExamItem.bookTip" type="textarea" rows="5"></el-input>
        <el-divider></el-divider>
        <div style="width: 100%; text-align: right">
          <el-button type="info" plain icon="Close" @click="showEditExamItem = false">取消</el-button>
          <el-button type="primary" icon="Check" @click="saveEditExamItem">保存</el-button>
        </div>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import {computed, reactive, ref} from 'vue'
import store from '@/store'
import {searchItems, updateWxBookableFlag} from '@/api/inspections'
import {ElMessage} from 'element-plus'
import {clone} from '@/utils/clone'
import PageLayer from "@/layout/PageLayer";

export default {
  components: {PageLayer},
  setup() {
    const searchParam = reactive({
      tableName: 'jc_zd_item',
      searchMethod: 'py_code',
      searchContent: '',
      pageSize: 30,
      currentPage: 1,
    })
    const filterPlaceHolder = computed(() => {
      switch (searchParam.searchMethod) {
        case 'alpha':
          return '请输入项目首拼'
        case 'code':
          return '请输入项目编码'
        case 'name':
          return '请输入项目名称'
      }
    })
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 80
    const data = reactive({
      list: [],
      totalSize: 0,
    })
    const handleSizeChange = (val) => {
      searchParam.pageSize = val
      fetchData()
    }
    const handleCurrentChange = (val) => {
      searchParam.currentPage = val
      fetchData()
    }
    const fetchData = () => {
      searchItems(searchParam).then((res) => {
        data.list = res.list
        data.totalSize = res.totalSize
      })
    }
    const wxBookable = (flag) => {
      if (flag === 0) {
        return '<span style="color: red">不可预约</span>'
      }
      return '<span style="color: green">可预约</span>'
    }

    const currentExamItem = ref({})
    const showEditExamItem = ref(false)
    const editExamItem = (row) => {
      currentExamItem.value = clone(row)
      showEditExamItem.value = true
    }
    const saveEditExamItem = () => {
      currentExamItem.value.tableName = searchParam.tableName
      updateWxBookableFlag(currentExamItem.value).then(() => {
        ElMessage({
          type: 'success',
          message: '保存成功。',
          duration: 2000,
          showClose: true,
        })
        showEditExamItem.value = false
        fetchData()
      })
    }
    return {
      searchParam,
      filterPlaceHolder,
      tableHeight,
      data,
      handleSizeChange,
      handleCurrentChange,
      fetchData,
      wxBookable,
      currentExamItem,
      editExamItem,
      showEditExamItem,
      saveEditExamItem,
    }
  },
}
</script>
