<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      v-show="showSearch"
      :inline="true"
    >
      <el-form-item label="活动名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入活动名称"
          clearable
          size="default"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属站点" prop="tenantId">
        <el-select
          v-model="queryParams.tenantId"
          placeholder="请选择，支持搜索"
          size="default"
          filterable
          clearable
        >
          <el-option
            v-for="item in siteList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请人" prop="contact">
        <el-input
          v-model="queryParams.contact"
          placeholder="请输入申请人"
          clearable
          size="default"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="contactMobile">
        <el-input
          v-model="queryParams.contactMobile"
          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 :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="plus"
          size="default"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="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="title"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column label="联系人" prop="contact" align="center" />
      <el-table-column label="手机号" prop="contactMobile" align="center" />
      <!-- <el-table-column label="用户分类" prop="notify_crowd" align="center">
        <template #default="{ row }">
          <div>{{ handleIdentity(row.identity) }}</div>
        </template>
      </el-table-column> -->
      <el-table-column label="活动时间" align="center">
        <template #default="{ row }">
          <span>{{ row.beginTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="站点" align="center">
        <template #default="{ row }">
          {{
            siteList.find((el) => el.id === row.tenantId)?.name || "无"
          }}</template
        >
      </el-table-column>
      <el-table-column label="备注" prop="handleRemark" align="center" />
      <el-table-column label="备注处理人" prop="handleRemark" align="center" />
      <el-table-column label="申请时间" align="center" width="100">
        <template #default="{ row }">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="{ row }">
          <el-button
            size="small"
            type="text"
            icon="view"
            @click="handleSee(row)"
            >查看</el-button
          >
          <el-button
            size="small"
            type="text"
            icon="edit"
            @click="handleUpdate(row)"
            v-if="row.status == 0"
            >处理</el-button
          >
        </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="35%">
      <el-form ref="formRef" :model="form" disabled label-width="120px">
        <el-form-item label="活动名称:" prop="title">
          <el-input v-model="form.title" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="联系人:" prop="contact">
          <el-input v-model="form.contact" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="手机号码:" prop="contactMobile">
          <el-input
            v-model="form.contactMobile"
            placeholder="请输入手机号码"
            maxlength="11"
          />
        </el-form-item>
        <el-form-item label="开始时间:" prop="begin_at">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.begin_at"
            type="datetime"
            placeholder="选择开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" prop="finish_at">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.finish_at"
            type="datetime"
            placeholder="选择结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动地点:" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="报名人数上限:" prop="max_number">
          <el-input
            v-model.number="form.max_number"
            placeholder="请输入报名人数"
          />
        </el-form-item>
        <el-form-item label="邀请对象:" prop="notify_crowd">
          <el-select v-model="form.notify_crowd" multiple placeholder="请选择">
            <el-option
              v-for="(key, value) in identityList"
              :key="value"
              :label="key"
              :value="value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动介绍:" prop="content">
          <WangEditor
            v-model="form.content"
            minHeight="150px"
            :readonly="true"
          />
        </el-form-item>
        <el-form-item label="宣传图:" prop="image">
          <ImageUpload v-model="form.image" :isShowTip="false" :limit="1" />
        </el-form-item>
        <el-form-item label="报名费用:" prop="amount">
          <el-input v-model.number="form.amount">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="Apply">
import {
  applyList,
  activityAdd,
  applyDetail,
  activityEdit,
  applyDelete,
  applyHandle,
} from "@/api/website/activity";
import { reactive, ref, toRefs } from "vue";
import WangEditor from "../../../../components/WangEditor/index.vue";
const queryFormRef = ref(null);
const dataList = ref([]);
const loading = ref(true);
const showEditDialog = ref(false);
const formRef = ref(null);
const siteList = ref([]); // 站点列表
const showSearch = ref(true);
const title = ref("");
const total = ref(0);

const data = reactive({
  queryParams: {
    title: undefined,
    tenantId: undefined,
    contact: undefined,
    contactMobile: undefined,
    pageNum: 1,
    pageSize: 10,
  },
  form: {},
});
const { queryParams, form } = toRefs(data);
const resetQuery = () => {
  if (queryFormRef.value) {
    queryFormRef.value.resetFields();
  }
  handleQuery();
};
const handleQuery = () => {
  queryForm.value.pageNum = 1;
  getList();
};
const getList = async () => {
  loading.value = true;
  const resp = await applyList(queryParams.value);
  dataList.value = resp.rows;
  total.value = resp.total;
  loading.value = false;
};

// 获取站点列表
const getSiteList = async () => {
  const resp = await tenantSelect();
  siteList.value = resp.rows;
};
// 取消按钮
const cancel = () => {
  showEditDialog.value = false;
  // memberOpen = false;
  reset();
};
const handleIdentity = (identity) => {
  let arr = [];
  for (const key in this.identityList) {
    if (Object.hasOwnProperty.call(this.identityList, key)) {
      if (((key - 0) & identity) > 0) {
        arr.push(this.identityList[key]);
      }
    }
  }
  return arr.join(",");
};
// 查看按钮
const handleSee = async (row) => {
  const resp = await applyDetail(row.id);
  const formData = resp.data;
  let arr = [];
  for (const key in identityList.value) {
    if (Object.hasOwnProperty.call(identityList.value, key)) {
      if (((key - 0) & formData.notify_crowd) > 0) {
        arr.push(key);
      }
    }
  }
  formData.notify_crowd = arr;
  form.value = formData;
  showEditDialog.value = true;
  title.value = "修改";
};
const handleUpdate = (row) => {
  this.$prompt('请输入数据编号为"' + row.id + '"的处理结果', "处理", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    closeOnClickModal: false,
    inputType: "textarea",
    // inputPattern: /^.{5,20}$/,
    // inputErrorMessage: "长度必须介于 5 和 20 之间",
  })
    .then(({ value }) => {
      applyHandle({ id: row.id, remark: value }).then((response) => {
        this.getList();
        this.$modal.msgSuccess("处理成功");
      });
    })
    .catch(() => {});
};
getList();
</script>
<!-- <script>
import {
  applyList,
  activityAdd,
  applyDetail,
  activityEdit,
  applyDelete,
  applyHandle,
} from "@/api/website/activity";
import { areaList, industry, identity } from "@/api/config";
export default {
  data() {
    return {
      is_super: this.$store.getters.is_super,
      loading: true,
      showSearch: true,
      queryParams: {
        title: undefined,
        tenantId: undefined,
        contact: undefined,
        contactMobile: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dataList: [],
      // 是否显示弹出层
      open: false,
      // 人群类型
      identityList: [],
      // 表单参数
      form: {},
    };
  },
  methods: {},
  created() {
    this.getList();
    identity().then((res) => {
      this.identityList = res.data;
    });
  },
};
</script> -->
