<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <Minheader
        :is-auth="true"
        :is-statuser="true"
        powerData="adding_message_template"
        @addForm="addDialogShow"
      >
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">消息模板</div>
          </div>
        </template>
      </Minheader>
      <div class="app-containers">
        <DataTable
          :tableHeader="tableColumns"
          :tableData="tableData"
          :tableBtnGroup="tableBtnGroup"
          @btnClick="btnClick"
        />
      </div>
      <Dialog
        :flag="dialogFlag"
        :type="dialogType"
        :msgTitle="msgTitle"
        :del-name="delName"
        @resetForm="resetForm"
        @delRest="delRest"
        @submitForm="submitForm"
        @delRemove="delRemove"
      >
        <div class="diacont">
          <el-form
            :model="messageForm"
            :rules="formRules"
            ref="messageTemplateForm"
          >
            <el-row :gutter="24">
              <el-col>
                <el-form-item
                  label="消息标题"
                  size="default"
                  prop="newsTitle"
                  :rules="formRules.isNotNull"
                >
                  <el-input
                    v-model="messageForm.newsTitle"
                    placeholder="请输入名称"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item
                  label="消息内容"
                  size="default"
                  prop="newContent"
                  :rules="formRules.isNotNull"
                >
                  <el-input
                    type="textarea"
                    v-model="messageForm.newContent"
                    placeholder="请输入消息内容"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </Dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Minheader from "@/components/minheader/index.vue";
import Dialog from "@/components/dialog/index.vue";
import { Query, GeneralDataReception } from "@/api/webApi";
import { ElMessage } from "element-plus";
import { CommonData, CommonTableColumn } from "~/common";

const tableColumns = ref<CommonTableColumn[]>([]); // 表头数据
const tableData = ref<any[]>([]); // 表格数据
const page = ref(0); // 分页参数
const noMore = ref(false);
const rowTitle = ref("");
const serviceId = ref<number>();
const dialogFlag = ref(false); // 弹窗开关
const dialogType = ref(""); // 判断是否删除
const formRules = useElement().formRules;
const msgTitle = ref("新增消息模板"); // 弹窗标题
const delName = ref("");
const messageForm = reactive<CommonData>({
  newsId: null,
  newsTitle: null,
  newContent: null,
  event: null,
}); //弹窗内容
const tableBtnGroup = ref([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
    is: "message_template_editing",
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
    is: "message_template_deletion",
  },
]);
//新增
const addDialogShow = () => {
  msgTitle.value = "新增消息模板";
  dialogFlag.value = true;
  messageForm.event = 1;
  dialogType.value = "";
};
//取消
const resetForm = () => {
  dialogFlag.value = false;
  Object.keys(messageForm).forEach((key) => {
    messageForm.newsId = "";
    messageForm.newsTitle = "";
    messageForm.newContent = "";
  });
};
const btnClick = (rowIndex: number, row: any, param: number) => {
  if (param === 2) {
    msgTitle.value = "编辑消息模板";
    dialogFlag.value = true;
    dialogType.value = "";
    messageForm.event = 2;
    messageForm.newsId = row.newsId;
    messageForm.newsTitle = row.newsTitle;
    messageForm.newContent = row.newContent;
  } else if (param === 3) {
    msgTitle.value = "删除消息模板";
    dialogFlag.value = true;
    dialogType.value = "del";
    messageForm.event = 3;
    messageForm.newsId = row.newsId;
  }
};
const delRemove = () => {
  messageForm.event = 3;
  generalDataReception(messageForm);
};
//删除
const delRest = () => {
  dialogFlag.value = false;
};
//获取表格数据
const getTableData = async () => {
  try {
    const {
      code,
      returnData: { columnSet, listValues, submitID },
    } = await Query({
      id: DATACONTENT_ID.messageQueryTabId,
      needPage: ++page.value,
      dataContent: [],
    });
    if (Number(code) === 0) {
      if (listValues.length === 0) {
        page.value--;
        noMore.value = true;
      }
      const titleColumn = columnSet.find((item) => item.needShow === 1);
      if (titleColumn) {
        rowTitle.value = titleColumn.columnName;
      }
      tableData.value.push(...listValues);
      tableColumns.value = columnSet;
      serviceId.value = submitID;
    } else {
      throw new Error("查询失败");
    }
  } catch (error: any) {
    ElMessage.error(error.message);
    page.value--;
  }
};
//确认提交
const messageTemplateForm: any = ref(null);
const submitForm = () => {
  messageTemplateForm.value.validate((valid: any) => {
    if (valid) {
      generalDataReception(messageForm);
    } else {
      return false;
    }
  });
};
const resetTable = () => {
  page.value = 0;
  noMore.value = false;
  tableData.value = [];
};
//新增-编辑-删除
const generalDataReception = async (formData) => {
  try {
    console.log(serviceId);
    const { code } = await GeneralDataReception({
      serviceId: serviceId.value,
      dataContent: JSON.stringify(formData),
    });
    if (code == 0) {
      ElMessage.success(`操作成功`);
      resetTable();
      getTableData();
      resetForm();
      dialogFlag.value = false;
    } else {
      throw new Error("操作失败");
    }
  } catch (error: any) {
    ElMessage.error(error.message);
    dialogFlag.value = false;
    resetForm();
  }
};
onMounted(() => {
  getTableData();
});
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 80px;
}
.app-containers {
  height: calc(100vh - 180px);
}
</style>
