<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      v-show="showSearch"
      :inline="true"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入姓名"
          clearable
          size="default"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="处理状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="用户状态"
          clearable
          size="default"
          style="width: 240px"
          @clear="delete queryParams.status"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="需求内容" prop="content">
        <el-input
          v-model="queryParams.content"
          placeholder="请输入需求内容"
          clearable
          size="default"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="search"
          size="default"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="refresh" size="default" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row justify="end" style="margin-bottom: 10px">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="数据编号" prop="id" align="center" />
      <el-table-column
        label="需求内容"
        prop="content"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column label="姓名" prop="name" align="center" />
      <el-table-column label="单位" prop="company" align="center" />
      <el-table-column label="联系方式" prop="mobile" align="center" />
      <el-table-column label="邮箱" prop="email" align="center" />
      <el-table-column label="提交网页地址" prop="area_domain" align="center" />
      <el-table-column label="处理状态" prop="status" align="center">
        <template #default="props">
          {{
            statusOptions.find((item) => item.value == props.row.status).label
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="处理结果"
        prop="handleContent"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column label="处理时间" prop="createTime" align="center">
        <!-- <template #default="props">
          <span>{{ formatTime(props.row.createTime) }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="120"
        class-name="small-padding fixed-width"
      >
        <template #default="props">
          <template v-if="props.row.roleId !== 1">
            <el-button
              size="small"
              type="text"
              icon="el-icon-view"
              @click="(form = props.row), (showEditDialog = true)"
              >查看</el-button
            >
            <el-button
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(props.row)"
              >删除</el-button
            >
            <el-button
              v-if="props.row.status != 2"
              size="small"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(props.row)"
              >处理</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="查看" v-model="showEditDialog" width="500px">
      <el-form ref="form" :model="form" label-width="100px" disabled>
        <el-form-item label="姓名:">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="单位:">
          <el-input v-model="form.company" />
        </el-form-item>
        <el-form-item label="联系方式:">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="网页地址:">
          <el-input v-model="form.areaDomain" />
        </el-form-item>
        <el-form-item label="需求内容:">
          <el-input
            v-model="form.content"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="处理状态:">
          <el-select v-model="form.status">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理结果:">
          <el-input
            v-model="form.handleContent"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, toRefs } from "vue";
// import RightToolBar from "@/components/RightToolbar";
import {
  listMessage,
  messageDelete,
  messageHandle,
} from "@/api/website/message";

// import { formatTime } from "@/utils/index.js";
const showEditDialog = ref(false);
const queryFormRef = ref(null); // 搜索表单ref
const loading = ref(true); // 是否正在加载
const dataList = ref([]); // 数据列表
const total = ref(0); //总数
const showSearch = ref(true);
const statusOptions = ref([
  {
    label: "未处理",
    value: 1,
  },
  {
    label: "已处理",
    value: 2,
  },
]);
const data = reactive({
  queryParams: {},
});

const { queryParams } = toRefs(data);

// 重置搜索表单
const resetQuery = () => {
  if (queryFormRef.value) {
    queryFormRef.value.resetFields();
  }
  handleQuery();
};

// 处理搜索点击
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
// 获取列表
const getList = async () => {
  loading.value = true;
  const resp = await listMessage(queryParams.value);
  dataList.value = resp.rows;
  total.value = resp.total;
  loading.value = false;
};
// 处理修改
const handleUpdate = (row) => {
  ElMessageBox.prompt(`请输入数据编号为${row.id}的处理结果`, "处理", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    closeOnClickModal: false,
    inputType: "textarea",
  })
    .then(({ value }) => {
      messageHandle({ id: row.id, content: value }).then((response) => {
        getList();
        ElMessage.success("处理成功");
      });
    })
    .catch(() => {});
};
/** 删除按钮操作 */
const handleDelete = (row) => {
  ElMessageBox.confirm(`是否确认删除编号为${row.id}的数据项？`)
    .then(() => {
      return messageDelete(row.id);
    })
    .then(() => {
      getList();
      ElMessage.success("删除成功");
    })
    .catch(() => {});
};
getList();
</script>
