<template>
  <MOSTY.PageTree pageTitle="重点人员安全培训列表" :searchType="'03'" @getDeptId="getdeptId">

    <template #serach>
      <div class="tab-container">
        <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
          <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabList" :key="i" />
        </el-tabs>
      </div>
      <div style="border-top: 1px solid #dcdfe6;margin-bottom: 10px;width: 100%;"></div>
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">

      </MOSTY.Search>
      <el-divider />
      <div class="add-and-download">
        <el-button type="primary" @click="addUserHander">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab3">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <template v-if="activeTab == 0" #type="{ row }">
            <dict-tag v-if="row.type" :options="D_BZ_ZDRYLX" :value="row.type" :tag="true" />
          </template>
          <template v-if="activeTab == 1" #type="{ row }">
            <dict-tag v-if="row.type" :options="D_TB_ZDPXLX" :value="row.type" :tag="true" />
          </template>
          <template v-if="activeTab == 1" #trainingUser="{ row }">
            {{ row.trainingUser && row.trainingUser.split(',').length }}
          </template>

          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(row)">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="deleteInfo(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="seeInfo(row)">
              <el-icon>
                <View />
              </el-icon>详情</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />
      </div>
    </template>
  </MOSTY.PageTree>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { postApi, getApi } from "@/api/tobAcco_api.js";
import { reactive, onMounted, ref, getCurrentInstance, defineProps } from "vue";
import { ElMessage } from "element-plus";
const emit = defineEmits("changePage");
import { filterYear } from "@/utils/auth.js";
const { proxy } = getCurrentInstance();
const { D_BZ_ZDRYLX, D_TB_ZDPXLX } = proxy.$dict("D_BZ_ZDRYLX", "D_TB_ZDPXLX");
const props = defineProps({
  tabTitle: {
    type: String,
    default: '管理层'
  }
})
const searchArr = reactive([
  {
    showType: "input",
    prop: "keywords",
    width: '250px',
    placeholder: "关键字搜索"
  },
  {
    showType: "select",
    prop: "year",
    // defaultVal: new Date().getFullYear(),
    width: '250px',
    options: filterYear(5),
  },

])


/** 管理层 column */
const tableColumn1 = [
  {
    title: "姓名",
    prop: "userName"
  },
  {
    title: "岗位类别",
    prop: "type",
    slot: true
  },
  {
    title: "年份",
    prop: "year",
  },
  {
    title: "授课次数",
    prop: "mainHeadTeachingQty" // 下划线转驼峰
  },
  {
    title: "年度总学时",
    prop: "neAnnualTotalHour" // 下划线转驼峰
  },
  {
    title: "所属单位",
    prop: "orgName",
  },
  {
    title: "所属部门名称",
    prop: "deptName",
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
]
/** 员工层 column */
const tableColumn2 = [
  {
    title: "培训项目名称",
    prop: "name"
  },
  {
    title: "培训地点",
    prop: "trainingLocation"
  },

  {
    title: "培训类型",
    prop: "type",
    slot: true
  },
  {
    title: "培训学时",
    prop: "totalHour",
  },
  {
    title: "开始时间",
    prop: "startTime",
  },
  {
    title: "结束时间",
    prop: "endTime",
  },
  {
    title: "主办部门",
    prop: "deptName",
  },
  {
    title: "培训人数",
    prop: "trainingUser",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
]
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  orgId: JSON.parse(window.localStorage.getItem("deptId")).ssbmid, // 默认当前登录人所在单位
  // keywords:
});
/**当前激活项 */
const activeTab = ref(props.tabTitle == '管理层' ? 0 : 1);
const data = reactive({
  searchObj: {},
  tableData: [],
  formData: {},
  tableColumn: activeTab.value == 0 ? tableColumn1 : tableColumn2,
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
});

const tabList = ref([
  { label: '管理层', value: 0 },
  { label: '员工层', value: 1 },
])
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  data.pageConfiger.pageSize = val
  getTableData();
};
const addUserHander = () => {
  /** 要展示的编辑/新增页面 0 员工层 1 管理层 */
  let showPage = activeTab.value == 0 ? 'ManagerDetails' : 'Details'
  const title = activeTab.value == 0 ? '管理层新增' : '员工层新增'
  emit("changePage", showPage, { saveBtnShow: true, title })
}

const onTabClick = (tab) => {

  data.tableData = []
  listQuery.pageCurrent = 1;

  data.tableColumn = activeTab.value == 0 ? tableColumn1 : tableColumn2
  getTableData();
}


//获取部门数据
const getdeptId = (val) => {
  listQuery.orgId = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};
//查询
const onSearch = (obj) => {
  listQuery.year = obj.year
  // listQuery.userName = obj.userName
  listQuery.keywords = obj.keywords
  listQuery.pageCurrent = 1;
  getTableData();
}

const tableloading = ref(false)
function getTableData() {

  tableloading.value = true;
  const urlArr = ['/mosty-jcgl/training/manageTrainingInfo/queryManageTrainingInfoPage',
    '/mosty-jcgl/training/staffTrainingInfo/queryStaffTrainingInfoPage']
  postApi(listQuery, urlArr[activeTab.value]).then(
    (res) => {
      if (res.records) {
        data.tableData = res.records;
        tableloading.value = false;
        data.pageConfiger.total = res.total;
      } else {
        data.tableData = [];
        tableloading.value = false;
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}


//查看
const seeInfo = (row) => {
  let urlArr = ['/mosty-jcgl/training/manageTrainingInfo/selectOne',
    '/mosty-jcgl/training/staffTrainingInfo/selectOne'
  ]
  getApi({ id: row.id }, urlArr[activeTab.value]).then(res => {
    let row = res
    row.saveBtnShow = false
    /** 要展示的编辑/新增页面  0 管理层 1 员工层*/
    let showPage = activeTab.value == 0 ? 'ManagerDetails' : 'Details'
    row.title = activeTab.value == 0 ? '管理层修改' : '员工层修改'
    if (row) emit("changePage", showPage, row);
  })
};
const editInfo = (row) => {
  let urlArr = [
    '/mosty-jcgl/training/manageTrainingInfo/selectOne',
    '/mosty-jcgl/training/staffTrainingInfo/selectOne']
  getApi({ id: row.id }, urlArr[activeTab.value]).then(res => {
    let row = res
    row.saveBtnShow = true
    /** 要展示的编辑/新增页面  0 管理层 1 员工层*/
    let showPage = activeTab.value == 0 ? 'ManagerDetails' : 'Details'
    row.title = activeTab.value == 0 ? '管理层修改' : '员工层修改'
    if (row) emit("changePage", showPage, row);
  })
}
const deleteInfo = (row) => {
  let urlArr = [
    '/mosty-jcgl/training/manageTrainingInfo/delManageTrainingInfo',
    '/mosty-jcgl/training/staffTrainingInfo/delStaffTrainingInfo']
  postApi([row.id], urlArr[activeTab.value]).then(res => {
    ElMessage.success('删除成功')
    getTableData()
  })
}
onMounted(() => {

});
</script>

<style lang="scss" scoped>
@import "@/views/dutyBook/jgryandzz/talentPool/tabContainer.scss";

.eltab3 {
  height: calc(100vh - 400px);
  margin-top: 10px;
  border: 1px solid #ccc;
}


.add-and-download {
  display: flex;
  justify-content: flex-end;
}
</style>
