<template>
  <div class="app-container">
    <page-search
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
    />
    <page-content
      ref="pageContentRef"
      :contentTableConfig="contentTableConfig"
      pageName="/sms/template"
      :isExport="false"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
    >
      <template #templateStatus="{ row }">
        <el-tag :type="row.status === '0' ? 'error' : 'success'">{{ row.status === '0' ? '禁用' : '启用' }}</el-tag>
      </template>
      <template #handlerOther="{ row }">
        <el-button type="primary" v-if="row.status=='1'" link @click="handleEdit(row)">编辑</el-button>
        <el-button type="primary" v-if="row.status=='1'" link @click="handleDelete(row)">删除</el-button>
        <el-button type="primary" v-if="row.status=='1'" link @click="handleEnable(row)">禁用</el-button>
        <el-button type="primary" v-if="row.status=='0'" link @click="handleEnable(row)">启用</el-button>
        <el-button type="primary" v-if="row.status=='1'" link @click="handleTest(row)">测试</el-button>
      </template>
    </page-content>
    <page-modal
      :defaultInfo="defaultInfo"
      ref="pageModalRef"
      pageName="/sms/template"
      :modalConfig="modalConfigRef"
    ></page-modal>
    <el-dialog
    v-model="dialogVisible"
    title="测试"
    width="500"
    :before-close="handleClose"
  >
    <el-form label-width="auto">
      <el-form-item label="手机号">
        <el-input v-model="templateForm.tel" />
      </el-form-item>
      <el-form-item label="短信内容">
        <el-input v-model="templateForm.content" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSend">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import { defineComponent,onMounted } from 'vue'

import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'

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

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'

import { editPageData, deletePageData } from '@/api/main/system/system';

export default defineComponent({
  name: 'MsgTemplate',
  components: {
    PageSearch,
    PageContent,
    PageModal
  },
  setup() {
    const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
    const { proxy } = getCurrentInstance();
    const dialogVisible = ref(false)
    const templateForm = ref({})
    function handleSend() {
      console.log(templateForm.value)
    }
    function handleEnable(data) {

      const params ={
        templateId:data.templateId,
        content:data.content,
        templateCode:data.templateCode,
        templateName:data.templateName,
        status:data.status ==='1'?'0':'1'
      }
      editPageData('/sms/template', params).then((data) => {
          proxy.$modal.msgSuccess(data.status ==='1'?'禁用成功':'启用成功');
          pageContentRef.value.getPageData()
        });
    }
    function handleTest(data) {
      console.log(data)
      templateForm.value.content = data.content
      dialogVisible.value = true
    }
    // 1.处理逻辑
    const newCallback = () => {}
    const editCallback = () => {
      console.log(defaultInfo.value)
    }
    function handleEdit(item) {
      console.log(item)
      defaultInfo.value = item
      pageModalRef.value.dialogVisible = true
    }
    function handleDelete(item) {
      console.log(item)
      pageContentRef.value.handleDeleteClick(item)
    }
    // 2.动态添加部门和角色列表
    const modalConfigRef = computed(() => {
      return modalConfig
    })

    // 3.调用hook获取公共变量和函数
    const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
      usePageModal(newCallback, editCallback)
    return {
      handleEdit,
      handleDelete,
      handleSend,
      templateForm,
      dialogVisible,
      proxy,
      handleTest,
      handleEnable,
      searchFormConfig,
      contentTableConfig,
      pageContentRef,
      handleResetClick,
      handleQueryClick,
      modalConfigRef,
      pageModalRef,
      defaultInfo,
      handleNewData,
      handleEditData
    }
  }
})
</script>
