<template>
  <MOSTY.PageTree :pageTitle="'培训问题列表'" :searchType="'01'" :isShowLeftTree="false">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <!-- <el-divider />
      <section class="button">
        <el-button type="primary" @click="handleAdd">
          <el-icon>
            <Plus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </section> -->
    </template>
    <template #table>
      <div class="eltab7">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" style="width: 100%;">
          <template #ctype="{ row }">
            <span>{{ row.ctype == "1" ? "培训" : "应急演练" }}</span>
          </template>
          <template #actions="{ row }">
            <!-- v-if="isAqbm" -->
            <span class="operedit" @click="handlexz(row)"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handledelete(row)">
              <!-- v-if="isAqbm" -->
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <!-- <span v-if="!isAqbm">-- </span> -->
          </template>
        </MOSTY.Table>
      </div>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="searchobj" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>

  <el-dialog v-model="dialogVisible" title="评价问题修改" :before-close="closeDialog">
    <el-form :model="addobj" :rules="rules" ref="frombt" style="display: block;">
      <el-row>
        <el-col :span="24">
          <el-form-item label="问题类型" :label-width="formLabelWidth" prop="ctype" style="width: 100%">
            <el-radio-group v-model="addobj.ctype">
              <el-radio label="1">培训</el-radio>
              <el-radio label="2">应急演练</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="问题描述" :label-width="formLabelWidth" prop="tquestion" style="width: 100%">
            <el-input v-model="addobj.tquestion" autocomplete="off" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="searchfrom(frombt)"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="closeDialog"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
// 引入

import { ref, onMounted, watch, reactive, getCurrentInstance, computed } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi, deleteApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
import { filterqx } from "@/utils/auth.js"
const { proxy } = getCurrentInstance();
const fileEdit = ref(true);
const total = ref(30);
const searchobj = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
});
const ctypelist = ref([
  { label: "培训 ", value: "1" },
  { label: "应急演练 ", value: "2" }
]);
const isAqbm = computed(() => {
  return filterqx("isaqbm") == "1"
})
const tableloading = ref(false);
const loading = ref(false); //新增保存按钮截流
const frombt = ref();
const title = ref("");
const dialogVisible = ref(false);
const tableColumn = ref([
  { title: "描述", prop: "tquestion", showOverflowTooltip: true },
  { title: "题目类型", prop: "ctype", showOverflowTooltip: true, slot: true },
  { title: "操作", prop: "actions", slot: true },
])
const searchArr = reactive([
  {
    showType: "select",
    prop: "ctype",
    width: '250px',
    options: ctypelist.value,
  },
  {
    showType: "input",
    prop: "tquestion",
    width: '250px',
    placeholder: '请输入描述查询'
  }
]);
//查询
function onSearch(obj) {
  searchobj.value.ctype = obj.ctype;
  searchobj.value.tquestion = obj.tquestion;
  searchobj.value.pageCurrent = 1;
  getTableData();
}
const closeDialog = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogVisible.value = false
    })
    .catch(() => {
      // catch error
    })


};
const addobj = ref({
  xtCityName: getItem("deptId").sssgsmc,
  xtCjbmmc: getItem("deptId").ssbmmc
});
// 数据
const tableData = ref([]); //表格数据
//规则校验
const rules = reactive({
  xtCityName: [{ required: true, message: "所属单位不能为空", trigger: "blur" }],
  xtCjbmmc: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
  tquestion: [{ required: true, message: "问题描述不能为空", trigger: "blur" }],
  ctype: [{ required: true, message: "问题类型不能为空", trigger: "blur" }]
});
const totalHeights = ref(null)
const isOpen = ref(false);
//查询
function addUserHander() {
  getTableData();
}
watch(
  () => searchobj.value.ctype,
  (val) => {
    getTableData();
  },
  { deep: true, immediate: true }
);
onMounted(() => {
  getTableData();
});
//获取评价问题分页列表查询
function getTableData() {
  getApi(searchobj.value, "/mosty-jcgl/questions/getPageList").then((res) => {
    total.value = res.total;
    searchobj.value.total = res.total;
    if (res.records) {
      tableData.value = res.records;
    }
  });
}
//新增
function handleAdd() {
  addobj.value = {};
  title.value = "培训问题新增";
  addobj.value.xtCityName = getItem("deptId").ssdwmc;
  addobj.value.xtCjbmmc = getItem("deptId").ssbmmc;
  dialogVisible.value = true;
}
//修改
function handlexz(row) {
  getktkxq(row.id);
  title.value = "培训问题修改";
  dialogVisible.value = true;
}
function getktkxq(id) {
  getApi({}, `/mosty-jcgl/questions/getQuestionsById/${id}`).then((res) => {
    addobj.value = res;
  });
}
//保存
const searchfrom = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      if (addobj.value.id) {
        postApi(addobj.value, '/mosty-jcgl/questions/editQuestion').then((res) => {
          ElMessage.success('修改成功');
          loading.value = false;
          dialogVisible.value = false;
          getTableData()

        })

      } else {
        postApi(addobj.value, '/mosty-jcgl/questions/addQuestion').then((res) => {
          ElMessage.success('新增成功');
          loading.value = false;
          dialogVisible.value = false;
          getTableData()

        })
      }
    } else {
      ElMessage.warning("请输入必填项");
    }
  })

}
//删除数据
const handledelete = (row) => {
  postApi({}, `/mosty-jcgl/questions/delQuestion/${row.id}`).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
//页码发生变化
const handleCurrentChange = (val) => {
  searchobj.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  searchobj.value.pageSize = val;
  getTableData();
};
</script>

<style lang="scss" scoped>
.chartsBox {
  height: 500px;
  display: flex;
  justify-content: space-between;

  div {
    width: 50%;
  }
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}
</style>
