<template>
  <div>
    <div class="bg-white rounded-md mt-4 px-23px py-16px">
      <div class="flex justify-between pb-4 btn">
        <div>
          <el-button type="primary" @click="exportAll">导出</el-button>
        </div>
        <div class="flex content-center">
          <el-input
            v-model="form_query.tjg_mc"
            class="w-40 mx-2"
            size="small"
            placeholder="请输搜索关键词"
            :suffix-icon="Search"
          />
          <el-button type="primary" @click="initData">搜索</el-button>
        </div>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column
          label="序号"
          width="300"
          type="index"
        ></el-table-column>
        <el-table-column
          prop="tjg_mc"
          label="积分名"
          width="300"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="tjg_fyjfz"
          label="赋予积分值"
          width="300"
        ></el-table-column>

        <el-table-column label="操作" width="auto">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(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"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          :prev-icon="PrevIcon"
          :next-icon="NextIcon"
          @current-change="initData"
          :hide-on-single-page="false"
        />
      </div>
      <el-dialog
        v-model="dialogVisible"
        title="编辑"
        width="381"
        :close-on-click-modal="false"
      >
        <el-form
          ref="ruleFormRef"
          :rules="rules"
          :inline="true"
          :model="ruleForm"
          label-position="left"
          label-width="140px"
          size="small"
          class="pl-40px"
        >
          <el-form-item
            label="积分名:"
            prop="ttt_cymc"
            style="borderbottom: 1px solid #f3f3f3"
          >
            <div class="w-140px pb-3px">{{ scoreName }}</div>
          </el-form-item>

          <el-form-item label="赋予积分值:">
            <el-input v-model="ruleForm.tjg_fyjfz" type="number"></el-input>
          </el-form-item>
        </el-form>
        <div class="mt-5 text-center">
          <el-button plain @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit(ruleFormRef)"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { user } from "@/store/index";
import { gzsz_list, gzsz_edit } from "./api";
const route = useRoute();
const ruleFormRef = ref(null);
const router = useRouter();
//学校列表

let total = $ref(10);
let form_query = $ref({
  page: 1,
  limit: 6,
  tjg_mc: "",
});

let tableData = $ref([]);
function initData() {
  const data = {
    ...form_query,
  };
  gzsz_list(data).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();

let ruleForm = $ref({
  tjg_fyjfz: "",
});

let dialogVisible = $ref(false);
let scoreName = $ref("");

const tjg_id = $ref("");
function handleEdit(val) {
  scoreName = val.tjg_mc;
  dialogVisible = true;
  tjg_id = val.tjg_id;
  ruleForm.tjg_fyjfz = val.tjg_fyjfz;
  console.log(tjg_id, 66666);
}

const handleSubmit = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = {
        tjg_id: tjg_id,
        txwx_jffl_gzsz: {
          tjg_fyjfz: ruleForm.tjg_fyjfz,
        },
      };
      console.log(data, 123);
      gzsz_edit(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            message: "编辑成功",
            type: "success",
          });
          dialogVisible = false;
          initData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    }
  });
};
let multipleSelection = $ref([]);
let handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.tjg_id);
  });
};

function exportAll() {
  let obj = {
    limit: "99999",
    tjg_id: multipleSelection.join(","),
  };
  download("/txwx/jffl_gzsz/index", obj);
}
</script>

<style lang="scss" scoped>
.search {
  height: 72px;
  line-height: 85px;
  padding: 0 29px;
}
.btn {
  border-bottom: 1px solid #e3e3e3;
}
</style>