<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-select
            v-model="form_query.ttt_cydwmc"
            filterable
            clearable
            placeholder="全部所属机构"
            @change="initData"
          >
            <el-option
              v-for="(item, index) in tableSchoolData"
              :key="index"
              :label="item.sm_name"
              :value="item.sm_name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <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 pb-4 btn">
        <div>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="primary" @click="exportAll">导出</el-button>
          <import-button url="/txwx/tskc_td" @success="initData">
            <template #text>批量导入</template>
          </import-button>
          <el-button
            type="danger"
            @click="handleMulDelete"
            :disabled="multipleSelection.length == 0"
            >删除</el-button
          >
        </div>
        <div class="flex content-center">
          <el-input
            v-model="form_query.ttt_cymc"
            class="w-40 mx-2"
            size="small"
            placeholder="请输搜索关键词"
            :suffix-icon="Search"
            clearable
          />
          <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 prop="ttt_id" label="ID" width="100"></el-table-column>
        <el-table-column
          prop="ttt_cymc"
          label="成员名称"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="ttt_cydwmc"
          label="成员单位名称"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="ttt_xkzy"
          label="学科"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="ttt_sort"
          label="排序 "
          width="auto"
        ></el-table-column>

        <el-table-column label="操作" width="245">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑 |</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row.ttt_id)"
              >删除</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="title"
        width="700"
        :close-on-click-modal="false"
      >
        <el-form
          ref="ruleFormRef"
          :rules="rules"
          :inline="true"
          :model="ruleForm"
          label-position="right"
          label-width="120px"
          size="small"
          class="demo-ruleForm grid grid-cols-2 pr-30px"
        >
          <!-- <el-form-item label="成员名称:" prop="ttt_cymc">
            <remote-user-select
              class="w-full"
              size="small"
              v-model="ruleForm.ttt_cyid"
              v-model:model-real-name="ruleForm.ttt_cymc"
              v-model:model-name="ruleForm.ttt_cyzh"
              :d="{ user_role_id: '75' }"
              :change="initCreateName"
              allow-create
            ></remote-user-select>
          </el-form-item> -->
          <el-form-item label="成员账号:">
            <remote-user-select
              class="w-full"
              size="small"
              v-model="ruleForm.ttt_cyid"
              v-model:model-real-name="ruleForm.ttt_cymc"
              v-model:model-name="ruleForm.ttt_cyzh"
              :d="{ user_role_id: '75' }"
              :change="initCreateName"
              allow-create
              showKey="user_name"
            ></remote-user-select>
          </el-form-item>
          <el-form-item label="成员名称:">
            <el-input v-model="ruleForm.ttt_cymc"></el-input>
          </el-form-item>
          <el-form-item label="成员单位名称:" prop="ttt_cydwmc">
            <remote-select
              v-model="ruleForm.ttt_cydw_id"
              v-model:model-name="ruleForm.ttt_cydwmc"
              url="/school/main/index"
              :fields="['id', 'sm_name']"
            ></remote-select>
          </el-form-item>
          <el-form-item label="学科/专业:">
            <remote-select
              v-model="ruleForm.ttt_xkzy_id"
              v-model:model-name="ruleForm.ttt_xkzy"
              to="jcxxgl_zyflgl_xk"
              :fields="['tjzx_id', 'tjzx_xkmc']"
            ></remote-select>
          </el-form-item>
          <el-form-item label="成员排序:">
            <el-input
              v-model="ruleForm.ttt_sort"
              placeholder="数值小展示靠前"
              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 {
  school_list,
  tskc_td_list,
  tskc_td_del,
  tskc_td_add,
  tskc_td_edit,
} from "./api";
const route = useRoute();
const ruleFormRef = ref(null);
const router = useRouter();
//学校列表
let tableSchoolData = $ref([]);
function initSchoolData() {
  school_list({ limit: 100 }).then((res) => {
    if (res.code === "1") {
      tableSchoolData = res.data.page_data;
    }
  });
}
initSchoolData();
let total = $ref(10);
let form_query = $ref({
  page: 1,
  limit: 6,
  ttt_cydwmc: "",
  // ttt_keyword: "",
  ttt_cymc:""
});

let tableData = $ref([]);
function initData() {
  const data = {
    ...form_query,
    ttk_id: parentId,
  };
  tskc_td_list(data).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
let rules = $ref({
  ttt_cymc: [{ required: true, message: "请输入成员名称", trigger: "submit" }],
  ttt_cydw_id: [
    { required: true, message: "请选择成员单位", trigger: "submit" },
  ],
});
const parentId = router.currentRoute.value.params.id;
if (parentId) {
  initData();
}
let ruleForm = $ref({
  ttt_cymc: "",
  ttt_cyid: "",
  ttt_cyzh: "",
  ttt_cydwmc: "",
  ttt_sort: "",
  ttt_xkzy: "",
  ttt_xkzy_id: "",
  ttt_cydw_id: "",
  ttk_id: parentId,
});
function initCreateName(data) {
  console.log(data, typeof data, 444444444444444);
  if (typeof data == "string") {
    ruleForm.ttt_cymc = data;
  }
}
const isEdit = ref(false);
let dialogVisible = $ref(false);
let title = $ref("");

function handleAdd() {
  dialogVisible = true;
  title = "新增";
  isEdit.value = false;
  ruleForm = {
    ttt_cymc: "",
    ttt_cyid: "",
    ttt_cyzh: "",
    ttt_cydwmc: "",
    ttt_sort: "",
    ttt_xkzy: "",
    ttt_xkzy_id: "",
    ttt_cydw_id: "",
    ttk_id: parentId,
  };
  // Object.keys(ruleForm).find((item) => {
  //   ruleForm[item] = "";
  // });
}
const currentId = $ref("");
// 编辑
function handleEdit(row) {
  dialogVisible = true;
  title = "编辑";
  isEdit.value = true;
  currentId = row.ttt_id;
  ruleForm.ttt_cymc = row.ttt_cymc;
  ruleForm.ttt_cyid = row.ttt_cyid;
  ruleForm.ttt_cyzh = row.ttt_cyzh;
  ruleForm.ttt_sort = row.ttt_sort;
  ruleForm.ttt_xkzy = row.ttt_xkzy;
  ruleForm.ttt_xkzy_id = row.ttt_xkzy_id;
  ruleForm.ttt_cydwmc = row.ttt_cydwmc;
  ruleForm.ttt_cydw_id = row.ttt_cydw_id;
}
const handleSubmit = async (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      let obj = {};
      Object.keys(ruleForm).find((item) => {
        obj[item] = ruleForm[item];
      });
      const data = {
        txwx_tskc_td: obj,
      };
      if (!isEdit.value) {
        tskc_td_add(data).then((res) => {
          if (res.code == 1) {
            ElMessage({
              message: "添加成功",
              type: "success",
            });
            dialogVisible = false;
            initData();
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        data.ttt_id = currentId;
        tskc_td_edit(data).then((res) => {
          if (res.code == 1) {
            ElMessage({
              message: "编辑成功",
              type: "success",
            });
            dialogVisible = false;
            initData();
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

let multipleSelection = $ref([]);
let handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.ttt_id);
  });
};
// 批量删除
function handleMulDelete() {
  ElMessageBox.confirm("确认删除这些数据?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let data = { ttt_id: multipleSelection };
      tskc_td_del(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          initData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    })
    .catch(() => {});
}
//单个删除
function handleDelete(id) {
  ElMessageBox.confirm("确认删除?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let data = { ttt_id: id };
      tskc_td_del(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          initData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    })
    .catch(() => {});
}
function exportAll() {
  let obj = {
    limit: "99999",
    ttt_id: multipleSelection.join(","),
  };
  download("/txwx/tskc_td/index", obj);
}
</script>

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