<template>
  <div>
    <div class="search flex justify-between bg-white rounded-md">
      <el-form :inline="true" class="demo-form-inline" size="default">
        <el-form-item>
          <el-date-picker v-model="tmjh_start_datetime" type="date" placeholder="开始时间" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-select clearable @clear="initData" v-model="tmjh_cjr_user_id" placeholder="全部创建人">
            <el-option v-for="c in cjrList" :key="c.tmjh_cjr_user_id" :label="c.tmjh_cjr"
              :value="c.tmjh_cjr_user_id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="success" @click="clearData"> 清空 </el-button>
        <el-button type="primary" @click="initData"> 查询 </el-button>
      </div>
    </div>
    <div class="bg-white rounded-md mt-4 px-23px py-16px">
      <div class="flex justify-between">
        <div>
          <el-button type="primary" @click="addData">新增</el-button>
          <el-button type="primary" @click="exportData">导出</el-button>
          <import-button url="/txwx/msgzs_jyhd" @success="initData">
            <template #text>批量导入</template>
          </import-button>
          <el-button type="danger" @click="deleteMul" :disabled="multipleSelection.length == 0">删除</el-button>
        </div>
        <div class="flex content-center">
          <el-input v-model="keyword" class="w-40 mx-2" size="small" placeholder="请输搜索关键词" :suffix-icon="Search" clearable
            @clear="initData" />
          <el-button type="primary" @click="initData">查询</el-button>
        </div>
      </div>
      <el-divider />
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="tmjh_id" label="活动序号" width="100"></el-table-column>
        <el-table-column prop="tmjh_name" label="活动名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tmjh_cjr" label="创建人" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tmjh_start_datetime" label="开始时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tmjh_end_datetime" label="结束时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="text" @click="detailData(scope.row)">详情</el-button><el-divider direction="vertical" />
            <el-button type="text" @click="editData(scope.row)">编辑</el-button><el-divider direction="vertical" />
            <el-button type="text" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end my-10">
        <el-pagination v-model:current-page="form_query.page" v-model:page-size="form_query.limit"
          :page-sizes="[6, 12, 18, 50]" :pager-count="5" :small="true" layout="total,sizes, prev, pager, next, jumper"
          :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="importVisible" title="批量导入" width="520px" class="min-h-280px">
      <div class="px-15">
        <div class="absolute right-20">
          <span class="text-blue-500 font-medium cursor-pointer" @click="exportOne">下载模板</span>
        </div>
        <file-upload-progress :limit="1" v-model:full="importfile" class="w-full"></file-upload-progress>
      </div>
      <div class="center mt-25">
        <el-button type="primary" @click="importData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  Search,
  Delete,
  Download,
  Plus,
  ZoomIn,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { indexOf } from "lodash";
import { useRouter } from "vue-router";
const router = useRouter();
let tmjh_start_datetime = $ref("");
let tmjh_cjr_user_id = $ref('');
let keyword = $ref("");
let tableData = $ref([]);
let multipleSelection = $ref([]);
let importVisible = $ref(false);
const handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.tmjh_id);
  });
};
function handleSizeChange(val) {
  form_query.limit = val;
  form_query.page = 1;
  initData();
}
function handleCurrentChange(val) {
  form_query.page = val;
  initData();
}
let total = $ref(10);
const form_query = $ref({
  page: 1,
  limit: 6,
});

let cjrList = $ref([]);
initData();
function initData() {
  let data = {
    ...form_query,
    tmjh_start_datetime,
    tmjh_name: keyword,
    tmjh_cjr_user_id,
  };
  request({
    url: "/txwx/msgzs_jyhd/index",
    data,
  }).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
      total = Number(res.data.total_rows);
      res.data.page_data.forEach(item => {
        cjrList.push({
          tmjh_cjr_user_id: item.tmjh_cjr_user_id,
          tmjh_cjr: item.tmjh_cjr
        })
      })
      cjrList = cjrList.filter((el, index, self) => {
        let idslist = [];
        cjrList.forEach((item, i) => {
          idslist.push(item.tmjh_cjr_user_id)
        })
        return idslist.indexOf(el.tmjh_cjr_user_id) == index
      })
    }
  });
}
// 清空筛选
function clearData() {
  tmjh_start_datetime = '';
  tmjh_cjr_user_id = '';
  initData();
}
let ruleForm = $ref({
  gzs_name: "",
  img: "",
  rank: "",
  subject: "",
  grade: "",
});
let memberData = $ref([
  {
    name: "",
    account: "",
    id: "",
    brief: "",
  },
]);
let dialogVisible = $ref(false);
let title = $ref("");
let isEdit = $ref(false);
// 新增
function addData() {
  router.push({ name: "jyhd_add" });
}
// 编辑
function editData(val) {
  router.push({
    name: "jyhd_edit",
    params: {
      id: val.tmjh_id,
    },
  });
}
function detailData(item) {
  router.push({
    name: "jyhd_detail",
    params: {
      id: item.tmjh_id,
    },
  });
}
let isButton = $ref(false);

// 批量删除
function deleteMul() {
  ElMessageBox.confirm("确认删除这些数据?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request({
        url: "/txwx/msgzs_jyhd/delete",
        data: {
          tmjh_id: multipleSelection,
        },
      }).then((res) => {
        if (res.code == "1") {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          initData();
        } else {
          ElMessage({
            type: "success",
            message: res.msg,
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}
// 单个删除
function deleteItem(item) {
  ElMessageBox.confirm("确认删除?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request({
        url: "/txwx/msgzs_jyhd/delete",
        data: {
          tmjh_id: item.tmjh_id,
        },
      }).then((res) => {
        if (res.code == "1") {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          initData();
        } else {
          ElMessage({
            type: "success",
            message: res.msg,
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}
// 导出
function exportData() {
  let data = {
    tmjh_id: multipleSelection,
  };
  download("/txwx/msgzs_jyhd/index", data);
}
// 下载模板
function exportOne() {
  let data = {
    limit: 1,
    page: 1
  }
  download('txwx/msgzs_jyhd/index', data)
}
// 批量导入
let importfile = $ref('');
function importData() {
  console.log(importfile);
  if (!importfile) {
    return ElMessage({
      type: "warning",
      message: "请上传文件",
    });
  }
  request['import']({
    url: 'txwx/msgzs_jyhd/import',
    data: { file: importfile }
  });
}
</script>
<style lang="scss" scoped>
@use "~/styles/table.scss";
@use "~/styles/pagination.scss";

.center {
  text-align: center;
}

.search {
  height: 72px;
  line-height: 85px;
  padding: 0 29px;
}

.el-input.rank {
  width: 200px;
}

.total {
  span {
    width: 80px;
  }
}

.member {
  margin: 5px 0;

  .el-input {
    width: 200px;
  }
}

.detail_dialog {
  width: 420px;
  margin: 0 auto;

  >div {
    width: 100%;
    margin: 15px 0;
    color: #000;
  }

  .span_label {
    text-align: right;
    display: inline-block;
    width: 90px;
  }
}
</style>