<template>
  <div class="app-container">
    <page-search :searchFormConfig="searchFormConfig" @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick" />
    <page-content ref="pageContentRef" :contentTableConfig="contentTableConfig" pageName="/patient/patient"
      :isExport="false" :isCreate="false">
      
      <template #otherHandler>
        <el-button type="primary" @click="batchLabels(1)">新建</el-button>
      </template>

      <template #patientId="{ row }">
        <el-button type="primary" link @click="buttonHandle(row.patientId)">{{ row.name || '未知' }}</el-button>
      </template>
      <template #phoneNumber="{ row }">
        {{ row.phoneNumber && userDecryptToAsterisk(row.phoneNumber) }}
      </template>
      <template #patientStatus="{ row }">
        <el-tag v-if="row.patientStatus && statusMap[row.patientStatus]" :type="statusMap[row.patientStatus].color">{{
          statusMap[row.patientStatus].title }}</el-tag>
      </template>
      <template #patientSource="{ row }">
        <el-tag v-if="row.source && sourceMap[row.source]" :type="sourceMap[row.source].color">
          {{ sourceMap[row.source].title }}
        </el-tag>
      </template>
      <template #phoneStatus="{ row }">
        <el-tag v-if="row.phoneStatus && phoneStatusMap[row.phoneStatus]"
          :type="phoneStatusMap[row.phoneStatus].color">{{ phoneStatusMap[row.phoneStatus].title }}</el-tag>
      </template>

      <template #sex="{ row }">
        {{ sexMap[row.sex] ? sexMap[row.sex].title : '' }}
      </template>
      <template #labellist="{ row }">
        <el-tag type="info" style="margin-left: 1px" v-if="row.labellist && row.labellist.length > 0" :key="index"
          v-for="(item, index) in row.labellist">{{ item.labelName }}</el-tag>
      </template>
    </page-content>
    <el-drawer
      v-model="drawer"
      title="添加规则"
      :direction="direction"
      :close-on-click-modal="false"
      size="50%"
      >
      <add-rule></add-rule>
      <!-- <project-details  ref="projectAdd" :isdetil="2" @closeDrawerPlan="getCloseDrawer"></project-details> -->
      <template #footer>
          <div class="box-btns" style="flex: auto">
          <el-button @click="cancelClick" style="margin-right: 30px;">取消</el-button>
          <el-button type="primary" @click="confirmClick" style="margin-right: 30px;">确定</el-button>
          </div>
      </template>
      </el-drawer>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router';
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import addRule from './cpns/addRule/addRule';


import { userDecryptToAsterisk } from '@/utils/aes'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'

import { areaTrees } from "@/utils/area.js";
import { nations, patientStatus, sex, patientSource, phoneStatus } from "@/utils/commonDic.js";
import { ArrayToMap } from '@/utils/tools'

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
  name: 'Rule',
  components: {
    PageSearch,
    PageContent,
    addRule
  },
  setup() {
    const router = useRouter();
    const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
    const activeNames = ref(['1'])
    const input2 = ref('')
    const iconFlag = ref(true)
    const drawer = ref(false)
    const direction = ref('rtl')
    const form = ref({
      name: '',
      date1: '',
      date2: '',
      delivery: '',
      resource: '',
    })
    function buttonHandle(id) {
      console.log(id);
      router.push({
        path: '/patientFile/patientDetail',
        query: {
          id,
        }
      });
    }
    function iconHandle() {
      iconFlag.value = !iconFlag.value
    }
    function batchLabels() {
      console.log('新增规则')
      drawer.value = true
    }
    function cancelClick() {
      drawer.value = false
    }
    function confirmClick() {
      drawer.value = false
    }
    return {
      drawer,
      direction,
      cancelClick,
      confirmClick,
      userDecryptToAsterisk,
      handleQueryClick,
      handleResetClick,
      batchLabels,
      statusMap: ArrayToMap(patientStatus, 'value'),
      sourceMap: ArrayToMap(patientSource, 'value'),
      sexMap: ArrayToMap(sex, 'value'),
      phoneStatusMap: ArrayToMap(phoneStatus, 'value'),
      buttonHandle,
      iconFlag,
      input2,
      activeNames,
      form,
      iconHandle,
      searchFormConfig,
      contentTableConfig,
      pageContentRef,
      userDecryptToAsterisk
    }
  }
})
</script>
<style lang="scss" scoped>
.page-search {
  width: 100%;
  position: relative;
  padding: 15px;

  .pos-icon {
    position: absolute;
    right: 15px;
    top: 20px;
    z-index: 11;
  }

  .search-header {
    .search-title {
      text-align: left;
      width: 100px;
      font-size: 18px;
      font-weight: bold;
    }

    .search-form {
      width: calc(100% - 100px);
      text-align: right;
    }
  }

  .serach-bottom {
    margin-top: 30px;
  }

  .btn-handle {}
}
</style>
