<template>
  <MOSTY.PageTree :pageTitle="'风险评估模型'" :isShowLeftTree="false">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </MOSTY.Search>
    </template>
    <template #table>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="false" :isSort="true" :tableConfiger="data.tableConfiger" :actionsW="300" style="width: 100%;">
          <template #grade="{ row }">
            <dict-tag v-if="row.grade" :options="KHLX" :value="row.grade" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #assignLv="{ row }">
            <dict-tag v-if="row.assignLv" :options="GWSYFY" :value="row.assignLv" :tag="false" />
            <span v-else>无</span>
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(row)"
              v-if="row.xtCityCode == ssdept.ssdwid.substring(0, 4)"><el-icon>
                <Setting />
              </el-icon>设置考核模型</span>
            <span class="operesee" @click="showInfo(row)"><el-icon>
                <Compass />
              </el-icon>查看</span>
            <el-popconfirm v-if="row.xtCityCode == ssdept.ssdwid.substring(0, 4)" confirm-button-text="是"
              cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="handledelete(row)">
              <template #reference>
                <span span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>
  <el-dialog v-model="dialogVisible" title="添加岗位配置" width="900px" :before-close="handleClose">
    <el-form class="mosty-from-wrap" ref="elform" label-width="130px" :model="fromObj" :inline="true" :rules="rules">
      <el-form-item label="岗位名称:">
        <el-input v-model="fromObj.name" clearable style="width: 250px" />
      </el-form-item>
      <el-form-item label="适用范围:">
        <el-select style="width: 250px" v-model="fromObj.assignLv" placeholder="请选择适用范围">
          <el-option v-for="item in GWSYFY" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="submitry"> <el-icon>
            <DocumentChecked />
          </el-icon>保存 </el-button>
        <el-button @click="handleClose"><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const emit = defineEmits("changePage", "getobj");
const ssdept = getItem("deptId");
const { proxy } = getCurrentInstance();
const { KHLX, GWSYFY } = proxy.$dict("KHLX", "GWSYFY");
// 树的展开与折叠
const searchArr = reactive([
  {
    showType: "select",
    prop: "grade",
    options: KHLX,
    placeholder: "请选择岗位类型"
  }
]);
const dialogVisible = ref(false);
const fromObj = ref({});
const tableloading = ref(false);
const totalHeight = ref()
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  grade: ''
});
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "评估项目名称",
      prop: "name"
    },
    {
      title: "预警要素",
      prop: "grade",
      width: '150',
      slot: true
    },
    {
      title: "指标描述",
      prop: "assignLv",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      width: '250',
      slot: true
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false
  },
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
});
const rgBoxWid = ref("calc(100% )");
// 查询数据
const onSearch = (obj) => {
  listQuery.grade = obj.grade;
  listQuery.year = obj.year;
  listQuery.pageCurrent = 1;
  getTableData();
};
function getTableData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/station/queryStationByGrade`).then((res) => {
    if (res) {
      data.tableData = res;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
function handleClose(params) {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogVisible.value = true;
    })
    .catch(() => {
      // catch error
    })
}
//新增
const addInfo = () => {
  fromObj.value = {};
  dialogVisible.value = true;
};
const submitry = () => {
  let params = {
    assignLv: fromObj.value.assignLv,
    grade: listQuery.grade,
    name: fromObj.value.name
  };
  postApi(params, "/mosty-jcgl/station/addStationOne")
    .then(() => {
      ElMessage.success("新增成功");
      dialogVisible.value = false;
      getTableData();
    })
    .catch((err) => {

    });
};
// 查看考核模型
const showInfo = (row) => {
  let arr = {
    title: "查看考核模型",
    saveBtnShow: false,
    id: row.id ? row.id : null
  };
  emit("changePage", "Khmx", arr);
}
// 设置考核模型
const editInfo = (row) => {
  let arr = {
    title: "设置考核模型",
    saveBtnShow: true,
    id: row.id ? row.id : null
  };
  emit("changePage", "Khmx", arr);
};
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/station/del/" + row.id
  ).then(() => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
onMounted(() => {
  totalHeight.value = `calc(100vh - 330px)`
  getTableData();
});
</script>

<style lang="scss" scoped></style>