<template>
  <div>
    <MOSTY.PageTree pageTitle="安全生产人才列表" :searchType="'02'" @getDeptId="getdeptData" :isShowOrgTree="isShowLeftTree">
      <template #titleright>
        <div class="toggle" :class="{ active: isOpen }" @click="openClick">
          <span>统计</span>
          <el-icon>
            <DArrowLeft />
          </el-icon>
        </div>
      </template>
      <template #serach>
        <section v-show='isOpen' ref="sjtjComRef">
          <section class="box-sjtj">
            <MOSTY.Assort title="专业领域" style="padding: 0;" />
            <section class="flex">
              <section class="left-tj">
                <Sjtj :info="zyCountList" :isShowTip="false" :isShowBottom="false" :width="347" mb="6px" />
              </section>
            </section>
            <MOSTY.Assort title="工作经验" style="padding: 0;" />
            <section class="flex">
              <section class="left-tj">
                <Sjtj :info="gzjyCountList" :isShowTip="false" :isShowBottom="false" :width="347" mb="6px" />
              </section>
            </section>
          </section>
        </section>
        <el-divider></el-divider>
        <div class="btnBox">
          <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 D_BZ_CJLX" :key="i" />
            </el-tabs>
          </div>
          <el-button type="primary" @click="addUserHander">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
          <!-- <el-button type="primary" :loading="loadingshow" @click="onloadExcel">
						<el-icon>
							<Download />
						</el-icon>
						<span>导出</span>
					</el-button> -->
        </div>
        <div class="header-divider"></div>
        <div v-if="isShowBottom" class="box">
          <div class="flxbox">
            <div>
              <el-input v-model="listQuery.userName" clearable placeholder="请输入人员姓名" style='width: 250px;'
                class="mr20" />
            </div>
          </div>
          <div class="butBox">
            <el-button icon="search" type="primary" @click="onSearch">查询</el-button>
            <el-button icon="Refresh" @click="reset">重置</el-button>
          </div>
        </div>
      </template>
      <template v-if="isShowBottom" #table>
        <section :style="`height:calc(100vh - 369px - ${totalCountHeight}px);`">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="false" @SortChange="SortChange" style="width: 100%;">
            <template #professionalField="{ row }">
              <dict-tag :options="D_BZ_AQRYSCLY"
                :value="row.professionalField ? row.professionalField.split(',') : undefined" :tag="true" />
            </template>
            <!-- 操作 -->
            <template #actions="{ row }">
              <span class="operedit" @click="clickEdit(row)">
                <el-icon>
                  <EditPen />
                </el-icon>编辑
              </span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="deldete(row)">
                <template #reference>
                  <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">
          </MOSTY.Pages>
        </div>
      </template>
    </MOSTY.PageTree>
    <AddEdit ref="addEditRef" :dic="{ D_BZ_CJLX, D_BZ_AQRYSCLY }" v-if="dialogVisible" @ok="addEditOk"
      @close="dialogVisible = false"></AddEdit>
  </div>
</template>

<script setup>
// import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import * as MOSTY from "@/components/MyComponents/index";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import { getApi, postApi, deleteApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { disablednowDate1 } from "@/utils/tools.js";
import AddEdit from "./addEdit.vue"
import {
  ref,
  onMounted,
  getCurrentInstance,
  reactive,
  computed,
  nextTick
} from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_CJLX, D_BZ_AQRYSCLY } = proxy.$dict("D_BZ_CJLX", "D_BZ_AQRYSCLY")
const loadingshow = ref(false);

const tableColumn = ref([
  { title: "人员", prop: "userName" },
  { title: "工作经验", prop: "workExperience" },
  { title: "专业领域", prop: "professionalField", slot: true },
  // { title: "发文资料", prop: "informationFile", },
  // { title: "其他资料", prop: "otherFile", },
  { title: "备注", prop: "bz", },
  { title: "操作", prop: "actions", slot: true }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})

/** [工作经验]统计数据 */
const gzjyCountList = reactive([
  { title: '3年(不含)以下', num: 0, dm: 'three', icon: 'aqss/icon_05.png' },
  { title: '3-5年', num: 0, dm: 'four', icon: 'aqss/icon_06.png' },
  { title: '5年(不含)以上', num: 0, dm: 'five', icon: 'aqss/icon_07.png' },
])
/** [专业领域]统计数据 */
const zyCountList = computed(() => {
  if (!Array.isArray(D_BZ_AQRYSCLY.value)) return [];
  if (!totalObj.value) return [];
  let iconObj = {
    "0": 'aqss/icon_07.png',
    "1": 'aqss/icon_01.png',
    "2": 'aqss/icon_02.png',
    "3": 'aqss/icon_03.png',
    "4": 'aqss/icon_04.png',
    "5": 'aqss/icon_05.png',
    "6": 'aqss/icon_06.png',
    "7": 'aqss/icon_07.png',
    "8": 'aqss/icon_08.png',
    "9": 'aqss/icon_09.png',
    "10": 'aqss/icon_10.png',
    "11": 'aqss/icon_11.png',
  }
  return D_BZ_AQRYSCLY.value.map((item, i) => {
    return { title: item.label, num: totalObj.value[item.value], icon: iconObj[i] }
  })
})
/*** 展示底部 */
const isShowBottom = ref(true)

/*** 统计是否打开 */
const isOpen = ref(false)
/*** 统计Ref */
const sjtjComRef = ref();
/*** 统计后端数据 */
const totalObj = ref();
/** 统计高度 */
const totalCountHeight = ref(0)

const dialogVisible = ref(false)
/** 新增编辑ref */
const addEditRef = ref()
const tableLoading = ref(false)

const activeTab = ref('01')
const SortChange = () => { }

//查询参数
const total = ref(0);
const listQuery = ref({
  levelType: '01',
  pageCurrent: 1,
  pageSize: 10,
});
const pageData = reactive({
  fromObj: {
    userId: "",
    //人才类型
    list: [{
      type: "",
      level: "",
      files: ""
    }],
  },

})
// 数据相关
const tableData = ref([]);
// tableloading
const tableloading = ref(false);
onMounted(() => {
});
/*** 展示左侧部门数 */
const isShowLeftTree = ref(false)
/** 获取统计 */
const getTotalCount = () => {
  // /talentPool/countTalentPool
  let params = { ...listQuery.value }
  postApi(params, "/mosty-jcgl/talentPool/countTalentPool").then(res => {
    if (res) {
      gzjyCountList.forEach(item => {
        item.num = res[item.dm] || 0
      })
      totalObj.value = res;
    }
  })
}
//选择右侧部门
function getdeptData(val) {

  listQuery.value.orgId = val.id;
  listQuery.value.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;

  getListData();
  getTotalCount();
}
const openClick = () => {
  isOpen.value = !isOpen.value
  nextTick(() => {
    let height = sjtjComRef.value ? sjtjComRef.value.offsetHeight : 0
    height = height > 0 ? height : 0
    totalCountHeight.value = height
  })
}

/**
 * 新增或者编辑成功
 */
const addEditOk = () => {
  dialogVisible.value = false
  getListData()
  getTotalCount();
}

// 获取数据的方法
const getListData = async () => {
  tableLoading.value = true
  let params = { ...listQuery.value }
  params.levelType = activeTab.value
  postApi(params, "/mosty-jcgl/talentPool/queryTalentPoolPage").then(res => {
    if (res) {
      total.value = res.total;

      tableData.value = res.records;
      pageConfiger.total = res.total;
    }
  }).finally(() => {
    tableLoading.value = false
  })
};
//

const onTabClick = (tab) => {

  listQuery.value.levelType = activeTab.value;
  listQuery.value.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.value.userName = ""
  isShowBottom.value = false;
  tableData.value = []
  setTimeout(() => {
    isShowBottom.value = true
  }, 40);
  getListData();
  getTotalCount();
  isShowLeftTree.value = ['02', '04'].includes(activeTab.value)

};
/**查询 */
const onSearch = (obj) => {
  listQuery.value.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData();
  getTotalCount();
};
const reset = (obj) => {
  listQuery.value.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.value.userName = '';
  listQuery.value.orgName = '';
  // listQuery.value.level = null;
  getListData();
  getTotalCount();
};
/**分页数 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};

const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
/** 新增人才库 */
const addUserHander = (row) => {
  dialogVisible.value = true;
  nextTick(() => {
    addEditRef.value.init({ levelType: activeTab.value })
  })
};


/**
 * 编辑
 * @param row 行
 */
const clickEdit = (row) => {
  dialogVisible.value = true;
  nextTick(() => {
    addEditRef.value.init(row)
  })

}
const deldete = (row) => {
  postApi([row.id], `/mosty-jcgl/talentPool/delTalentPool`).then(res => {
    proxy.$message.success("成功")
    getListData();
    getTotalCount();
  })
};

// //导出Excel
// function onloadExcel() {
// 	loadingshow.value = true
// 	let title = {
// 		orgName: "所属单位",
// 		deptName: "所属部门",
// 		userName: "人员姓名",
// 		type: "人才类型",
// 	};

// 	getApi(listQuery.value, "/mosty-jcgl/talents/exportData").then(async (res) => {
// 		if (res) {
// 			let data = res;
// 			if (data) {
// 				for (let i = 0; i < data.length; i++) {

// 					data[i].type = data[i].type.split(",").map(el => {
// 						return proxy.$getDictVal(el, D_BZ_RCLX);
// 					}).toString()

// 				}
// 				let tablename = "人才库管理列表.xlsx";
// 				exportXlsx(title, data, '人才库管理列表', tablename);
// 			}
// 		}
// 	}).finally(() => {
// 		loadingshow.value = false
// 	});
// }

</script>

<style lang="scss" scoped>
@import "./tabContainer.scss";

// 统计 start ======
.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}

// 统计 end ======
.dialog-footer {
  display: flex;
  justify-content: center;
  text-align: center;
}

.treeBox {
  overflow: auto;
}

::v-deep .el-form {
  flex-wrap: wrap;
}

::v-deep .el-input-group__append {
  background: var(--el-color-primary);
  color: #fff;
}

::v-deep .el-form-item__content {
  display: flex;
  justify-content: space-between;
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 12px;
}

.header-divider {
  width: calc(100% + 20px);
  height: 10px;
  background-color: #efefef;
  margin-left: -10px;
}

.box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-top: 10px;
  // flex-wrap: wrap;

  .flxbox {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    display: flex;
    margin-right: 20px;
    margin-bottom: 10px;
  }

  .label {
    margin: auto;
    margin-right: 5px;
    text-wrap: nowrap;
  }
}

.butBox {
  flex: 1;
  width: 200px;
  display: flex;
  justify-content: flex-end;
}
</style>