<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="活动列表" name="first">
        <div class="flex shadow-md">
          <el-form :inline="true">
            <el-form-item prop="" label="活动名称: ">
              <el-input
                placeholder="请输入活动名称"
                v-model="searchData.keyword"
                clearable
                @clear="getListData"
              ></el-input>
            </el-form-item>
            <el-form-item prop="" label="时间">
              <el-date-picker
                v-model="searchData.time"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
                type="datetime"
                @change="timeClear"
                placeholder="请选择时间"
              />
            </el-form-item>
          </el-form>
          <el-button type="primary" style="padding-bottom" @click="searchList"
            >搜索</el-button
          >
          <el-button type="warning" @click="clearData">清空</el-button>
        </div>
        <div class="flex justify-between items-center border-bottom mt-4">
          <div>
            <el-button @click="exportData" type="success">导出</el-button>
            <el-button @click="initiateData" type="primary">发起活动</el-button>
            <el-button
              type="danger"
              @click="delData"
              :disabled="multipleSelection?.length == 0"
              >删除</el-button
            >
          </div>
          <div class="print flex items-center">
            <img
              class="w-20px h-20px cursor-pointer"
              src="/images/print.png"
              alt=""
            />
          </div>
        </div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          class="mt-4"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column label="活动名称">
            <template #default="scope">
              <div>
                {{ scope.row.yz_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="活动类型" prop="yz_cate"></el-table-column>
          <el-table-column label="活动级别" prop="yz_hdjb"></el-table-column>
          <el-table-column label="活动时间" prop="yz_time"></el-table-column>
          <el-table-column label="操作" align="left" width="120">
            <template #default="scope">
              <span
                class="mr-5px blue cursor-pointer"
                type="text"
                @click="editData(scope.row)"
                >编辑</span
              >
              |
              <span
                v-if="scope.row.yz_status_option_k == '2'"
                class="blue cursor-pointer"
                type="text"
                >已下达</span
              >
              <span
                v-else
                class="blue cursor-pointer"
                type="text"
                @click="issuedData(scope.row)"
                >下达</span
              >
            </template>
          </el-table-column>
        </el-table>
        <footer
          class="flex-item-none"
          style="display: flex; justify-content: flex-end; margin-top: 30px"
        >
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="limit"
            :currentPage="currentPage"
          ></el-pagination>
        </footer>
      </el-tab-pane>
      <el-tab-pane label="已下达" name="second">
        <div class="flex shadow-md">
          <el-form :inline="true">
            <el-form-item prop="" label="活动名称: ">
              <el-input
                placeholder="请输入活动名称"
                v-model="searchData.keyword"
                clearable
                @clear="getListData"
              ></el-input>
            </el-form-item>
            <el-form-item prop="" label="时间">
              <el-date-picker
                v-model="searchData.time"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
                type="datetime"
                @change="timeClear"
                placeholder="请选择时间"
              />
            </el-form-item>
          </el-form>
          <el-button type="primary" style="padding-bottom" @click="searchList"
            >搜索</el-button
          >
          <el-button type="warning" @click="clearData">清空</el-button>
        </div>
        <div class="flex justify-between items-center border-bottom mt-4">
          <div>
            <el-button @click="exportData" type="success">导出</el-button>
            <el-button @click="initiateData" type="primary">发起活动</el-button>
            <el-button
              type="danger"
              @click="delData"
              :disabled="multipleSelection?.length == 0"
              >删除</el-button
            >
          </div>
          <div class="print flex items-center">
            <img
              class="w-20px h-20px cursor-pointer"
              src="/images/print.png"
              alt=""
            />
          </div>
        </div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          class="mt-4"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column label="活动名称">
            <template #default="scope">
              <div>
                {{ scope.row.yz_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="活动类型" prop="yz_cate"></el-table-column>
          <el-table-column label="活动级别" prop="yz_hdjb"></el-table-column>
          <el-table-column label="活动时间" prop="yz_time"></el-table-column>
          <el-table-column label="操作" align="left" width="120">
            <template #default="scope">
              <span class="mr-5px blue" type="text" @click="editData(scope.row)"
                >编辑</span
              >
            </template>
          </el-table-column>
        </el-table>
        <footer
          class="flex-item-none"
          style="display: flex; justify-content: flex-end; margin-top: 30px"
        >
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="limit"
            :currentPage="currentPage"
          ></el-pagination>
        </footer>
      </el-tab-pane>
      <el-tab-pane label="未下达" name="third">
        <div class="flex shadow-md">
          <el-form :inline="true">
            <el-form-item prop="" label="活动名称: ">
              <el-input
                placeholder="请输入活动名称"
                v-model="searchData.keyword"
                clearable
                @clear="getListData"
              ></el-input>
            </el-form-item>
            <el-form-item prop="" label="时间">
              <el-date-picker
                v-model="searchData.time"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
                type="datetime"
                @change="timeClear"
                placeholder="请选择时间"
              />
            </el-form-item>
          </el-form>
          <el-button type="primary" style="padding-bottom" @click="searchList"
            >搜索</el-button
          >
          <el-button type="warning" @click="clearData">清空</el-button>
        </div>
        <div class="flex justify-between items-center border-bottom mt-4">
          <div>
            <el-button @click="exportData" type="success">导出</el-button>
            <el-button @click="initiateData" type="primary">发起活动</el-button>
            <el-button
              type="danger"
              @click="delData"
              :disabled="multipleSelection?.length == 0"
              >删除</el-button
            >
          </div>
          <div class="print flex items-center">
            <img
              class="w-20px h-20px cursor-pointer"
              src="/images/print.png"
              alt=""
            />
          </div>
        </div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          class="mt-4"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column label="活动名称">
            <template #default="scope">
              <div @click="handleLink(scope.row)" class="cursor-pointer">
                {{ scope.row.yz_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="活动类型" prop="yz_cate"></el-table-column>
          <el-table-column label="活动级别" prop="yz_hdjb"></el-table-column>
          <el-table-column label="活动时间" prop="yz_time"></el-table-column>
          <el-table-column label="操作" align="left" width="120">
            <template #default="scope">
              <span class="mr-5px blue" type="text" @click="editData(scope.row)"
                >编辑</span
              >
              |
              <span class="blue" type="text" @click="issuedData(scope.row)"
                >下达</span
              >
            </template>
          </el-table-column>
        </el-table>
        <footer
          class="flex-item-none"
          style="display: flex; justify-content: flex-end; margin-top: 30px"
        >
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="limit"
            :currentPage="currentPage"
          ></el-pagination>
        </footer>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="dialogVisible" :title="title" width="950px">
      <el-form
        :model="form"
        :label-width="formLabelWidth"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="活动封面图" prop="yz_img">
          <file-upload-progress
            v-model:part="form.yz_img"
            :limit="1"
            list-type="picture-card"
            accept=".jpg,.png,.jpeg"
            :size-limit="200"
          >
            <template #default>
              <i-akar-icons:plus class="text-4xl" />
            </template>
            <template #tip>
              <div class="mt-2">
                支持格式：jpg,png,jpeg（200kb以内） 建议尺寸600x320
              </div>
            </template>
          </file-upload-progress>
        </el-form-item>
        <div class="flex">
          <el-form-item label="活动名称" prop="yz_name">
            <el-input v-model="form.yz_name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="活动类型" prop="yz_cate">
            <el-select v-model="form.yz_cate" placeholder="">
              <el-option
                v-for="t in typeList"
                :key="t.v"
                :label="t.n"
                :value="t.v"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="活动级别" prop="yz_hdjb">
            <el-select v-model="form.yz_hdjb" placeholder="">
              <el-option
                v-for="l in levelList"
                :key="l.v"
                :label="l.n"
                :value="l.v"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" prop="time">
            <el-date-picker
              style="width: 180px"
              v-model="form.time"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </div>
        <el-form-item label="活动内容" prop="yz_content">
          <TinymceVue
            style="width: 540px"
            v-model="form.yz_content"
          ></TinymceVue>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer w-180px">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addAcivty">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { hdgl_list, hdgl_add, hd_edit, hd_del } from "./api";
import { download } from "~/utils/request";
// import TinymceVue from "~/components/TinymceVue/index.vue";
// #region 搜索
let searchData = $ref({
  keyword: "",
  time: "",
});
function searchList() {
  const { keyword, time } = searchData;
  Object.assign(hdData, {
    keyword: keyword,
    create_dateline: time,
  });
  getList();
}
function timeClear(time) {
  if (!time) {
    time = "";
    searchList();
  }
}
function getListData() {
  searchList();
}
// 清空
function clearData() {
  searchData = {
    keyword: "",
    time: "",
  };
  searchList();
}

// #endregion
let total = $ref(0);
const limit = $ref("10");
let currentPage = $ref("1");
let loading = $ref(false);
let tableData = $ref([]);
let typeList = $ref([]);
let levelList = $ref([]);
let hdData = {
  site: "tyyx",
  admin: "1",
  limit,
  page: currentPage,
  yz_status: "0",
};

// 初始化
function getList() {
  loading = true;
  hdgl_list(hdData).then((res) => {
    if (res.code === "1") {
      res.data.page_data.forEach((item) => {
        item.yz_time =
          item.yz_start_datetime.split(" ")[0] +
          "--" +
          item.yz_end_datetime.split(" ")[0];
      });
      tableData = res.data.page_data;
      typeList = res.data.table_structure.field.yz_cate.option;
      levelList = res.data.table_structure.field.yz_hdjb.option;
      total = parseInt(res.data.total_rows);
      loading = false;
    }
  });
}
getList();
// 切换tab
const activeName = $ref("first");
const handleClick = (tab, event) => {
  if (event.target.id === "tab-first") {
    hdData.yz_status = "0";
    getList();
  } else if (event.target.id === "tab-second") {
    hdData.yz_status = "2";
    getList();
  } else {
    hdData.yz_status = "1";
    getList();
  }
};
// 选中表格数据
let multipleSelection = $ref([]);
const handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((item) => {
    multipleSelection.push(item.yz_id);
  });
};
// 导出
function exportData() {
  const { keyword, time } = searchData;
  let data = {
    admin: "1",
    site: "tyyx",
    keyword,
    yz_status: hdData.yz_status,
    create_dateline: time,
    yz_id: multipleSelection,
  };
  download("/ysgc/ztyshd/index", data);
}
// 删除活动
function delData() {
  let data = {
    yz_id: multipleSelection,
  };
  ElMessageBox.confirm("确认删除?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      hd_del(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          getList();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作失败",
      });
    });
}
let title = $ref("");
// 添加活动
let form = $ref({
  yz_cate: "",
  yz_name: "",
  yz_content: "",
  yz_hdjb: "",
  yz_img: "",
  time: undefined,
});
const rules = {
  yz_img: [{ required: true, message: "请上传活动封面图", trigger: "submit" }],
  yz_name: [{ required: true, message: "请输入活动名称", trigger: "submit" }],
  yz_cate: [{ required: true, message: "请选择活动类型", trigger: "submit" }],
  time: [{ required: true, message: "请选择时间", trigger: "submit" }],
  yz_content: [
    { required: true, message: "请输入作品内容", trigger: "submit" },
  ],
  yz_hdjb: [{ required: true, message: "请选择活动级别", trigger: "submit" }],
};
const formLabelWidth = "180px";
let dialogVisible = $ref(false);
let isEdit = $ref(false);
function initiateData(item) {
  form.yz_content = "";
  Object.keys(form).forEach((key) => {
    form[key] = "";
  });
  isEdit = false;
  title = "发起活动";
  dialogVisible = true;
}
let yz_id;
let formRef = $ref();
function addAcivty() {
  let { yz_cate, yz_name, yz_content, yz_hdjb, time, yz_img } = form;
  formRef.validate().then((res) => {
    if (res === true) {
      if (isEdit === false) {
        let data = {
          ysgc_ztyshd: {
            yz_name: yz_name,
            yz_cate: yz_cate,
            yz_img: yz_img,
            yz_hdjb: yz_hdjb,
            yz_start_datetime: time[0],
            yz_end_datetime: time[1],
            yz_status: "1",
          },
        };
        ElMessageBox.confirm("确认发起?", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            hdgl_add(data).then((res) => {
              if (res.code == 1) {
                ElMessage({
                  type: "success",
                  message: "操作成功",
                });
                getList();
                dialogVisible = false;
              }
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "操作失败",
            });
          });
      } else {
        let data = {
          yz_id,
          ysgc_ztyshd: {
            yz_name,
            yz_cate,
            yz_content,
            yz_hdjb,
            yz_img,
            yz_start_datetime: time[0],
            yz_end_datetime: time[1],
          },
        };
        ElMessageBox.confirm("确认编辑?", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            hd_edit(data).then((res) => {
              if (res.code == 1) {
                ElMessage({
                  type: "success",
                  message: "操作成功",
                });
                getList();
                dialogVisible = false;
              }
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "操作失败",
            });
          });
      }
    } else {
    }
  });
}
// 编辑
function editData(item) {
  isEdit = true;
  yz_id = item.yz_id;
  Object.keys(form).forEach((key) => {
    dialogVisible = true;
    form[key] = item[key];
    form.yz_cate = item.yz_cate_option_k;
    form.yz_hdjb = item.yz_hdjb_option_k;
    form.ya_img = item.yz_img;
    form.time = [item.yz_start_datetime, item.yz_end_datetime];
  });
}
// 下达
function issuedData(item) {
  let data = {
    yz_id: item.yz_id,
    ysgc_ztyshd: {
      yz_status: "2",
    },
  };
  ElMessageBox.confirm("确认下达?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      hd_edit(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          getList();
          dialogVisible = false;
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作失败",
      });
    });
}
</script>

<style scoped>
.blue {
  color: #00a3ee;
}
.el-input,
.el-select {
  width: 180px;
}
.dialog-footer {
  margin: 0 auto;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>