<template>
  <div>
    <MOSTY.PageTree :pageTitle="''" :searchType="'01'" @getDeptId="getdeptId">
      <template #titleright>
        <div class="toggle" :class="{ active: isOpen }" @click="expandClick">
          <span>统计</span>
          <el-icon>
            <DArrowLeft />
          </el-icon>
        </div>
      </template>
      <template #serach>
        <div v-show="isOpen">
          <section class="flex" ref="getHeight">
            <section class="left-tj">
              <Sjtj :info="countlist" :isShowTip="false" :isShowBottom="false" :width="236" mb="6px" />
            </section>
          </section>
        </div>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <section class="button">
          <el-button type="primary" @click="addUserHander">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </section>
      </template>
      <template #table>
        <section ref="tableRef" :style="{ height: `calc(100vh - ${tableHeightOffset}px)` }">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" style="width: 100%;" actionsW="250">
            <template #studyType="{ row }">
              <dict-tag :options="D_BZ_AQXX_TYPE" :value="row.studyType" :tag="true" />
            </template>
            <template #actions="{ row }">
              <span class="operedit" @click="editClick(row)"><el-icon>
                  <EditPen />
                </el-icon>修改</span>
              <span class="operedit" @click="signInClick(row)"><el-icon>
                  <EditPen />
                </el-icon>签到</span>
              <span class="operesee" @click="seeClick(row)"><el-icon>
                  <View />
                </el-icon>查看</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="handledelete(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" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
          </MOSTY.Pages>
        </div>
      </template>
    </MOSTY.PageTree>

    <!-- 修改 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <EditLlxx @close="close" :title="title" :orgcode="listQuery.ssdwid" :rowId="rowId" :saveBtnShow="saveBtnShow" />
    </div>
    <!-- 签到 -->
    <SignInDialog v-if="signInDialog" :id="currId" @close="signInDialog = false" :isAuth="isAqbm" />
  </div>
</template>

<script setup>
// 引入
import { onMounted, reactive, ref, getCurrentInstance, computed, nextTick, watch } from "vue";
import { ElMessage } from "element-plus";
import EditLlxx from "./commponents/EditLlxx.vue";
import SignInDialog from './commponents/SignInDialog.vue'
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
const { proxy } = getCurrentInstance();
const { D_BZ_AQXX_TYPE } = proxy.$dict("D_BZ_AQXX_TYPE");
// 数据
const comprehensiveShow = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  theme: '',
  studyType: '',
  ssbmid: '',
  ssdwid: getItem("deptId").ssdwid
});
const tableData = ref([]);
const signInDialog = ref(false);
const currId = ref(null)
const getHeight = ref(null)
// const totalHeights = ref(null)
const isOpen = ref(false);
const rowId = ref(null);
const saveBtnShow = ref(true);
const title = ref("");
const tableRef = ref(null)
/** table偏移量 height:calc(100vh - [tableHeightOffset]px) */
const tableHeightOffset = ref(379)
const countlist = ref(
  [
    { title: '政治理论', num: 0, dm: 'ZZLLXX', icon: 'ccss/icon_01.png' },
    { title: '法律法规', num: 0, dm: 'FLFGXX', icon: 'ccss/icon_02.png' },
    { title: '会议精神', num: 0, dm: 'HUJSXX', icon: 'ccss/icon_03.png' },
    { title: '驾驶员', num: 0, dm: 'JSYXX', icon: 'ccss/icon_04.png' },
    { title: '其他', num: 0, dm: 'QTXX', icon: 'ccss/icon_05.png' },
  ]
)
const searchArr = reactive([
  {
    showType: "select",
    prop: "studyType",
    width: '250px',
    options: D_BZ_AQXX_TYPE,
    placeholder: '请选择学习类型'
  },
  {
    showType: "input",
    prop: "theme",
    width: '250px',
    placeholder: '请输入安全主题'
  }
]);
const tableColumn = ref([
  {
    title: "所属单位",
    prop: "ssdwmc",
    sortable: true
  },
  {
    title: "所属部门",
    prop: "ssbmmc",
    sortable: true
  },
  {
    title: "学习类型",
    prop: "studyType",
    slot: true,
    sortable: true
  },
  {
    title: "安全主题",
    prop: "theme",
    sortable: true
  },
  {
    title: "学习日期",
    prop: "studyTime",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const getscsbsscount = () => {
  getApi({}, '/mosty-jcgl/aqxx/getStatisticsCount').then(res => {
    if (res) {
      for (const key in res) {
        let _item = countlist.value.find(v => v.dm == key)
        if (_item) {
          _item.num = res[key] || 0
        }
      }
    }
  })
}

function onSearch(obj) {
  listQuery.studyType = obj.studyType
  listQuery.theme = obj.theme
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  getListData();
}

function close() {
  rowId.value = null
  comprehensiveShow.value = false
  getListData()
}
//获取列表数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/aqxx/getPageList`).then((res) => {
    if (res) {
      tableData.value = res.records
      tableData.value.forEach(item => {
        item.studyType = item.studyType.split(',')
      });
      pageConfiger.total = res.total
    }
  }).finally(() => {
    tableloading.value = false;
  })
}



//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
const expandClick = () => {
  isOpen.value = !isOpen.value
  nextTick(() => {
    if (tableRef.value) tableHeightOffset.value = 195 + tableRef.value.offsetTop
  })
}
//选择右侧部门
const getdeptId = (val) => {
  listQuery.ssbmid = val.id;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData();
};
// 方法

//新增
const addUserHander = () => {
  title.value = "政治理论学习新增";
  orgcode.value = listQuery.ssbmid
  comprehensiveShow.value = true;
  rowId.value = null;
  saveBtnShow.value = true;
};

// 编辑
const orgcode = ref("")
const editClick = (row) => {
  title.value = "政治理论学习修改";
  orgcode.value = listQuery.ssbmid
  comprehensiveShow.value = true;
  saveBtnShow.value = true;
  rowId.value = row.id
};
// 签到
const signInClick = (row) => {
  currId.value = row.id
  signInDialog.value = true
}
// 查看
const seeClick = (row) => {
  title.value = "政治理论学习详情";
  comprehensiveShow.value = true;
  rowId.value = row.id
  saveBtnShow.value = false;
};
//删除
const handledelete = (row) => {
  deleteApi({}, "/mosty-jcgl	/aqxx/del/" + row.id).then(() => {
    ElMessage.success("删除成功");
    getListData();
  }
  );
};


onMounted(() => {
  getscsbsscount()
  // nextTick(() => {
  //   if (isOpen.value) {
  //     totalHeights.value = `calc(100vh - ${350 + getHeight.value.offsetHeight}px)`
  //   } else {
  //     totalHeights.value = `calc(100vh - 350px)`
  //   }


  // })
});
</script>

<style lang="scss" scoped>
.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);
    }
  }
}

.flex {
  display: flex;
  align-items: center;

  .left-tj {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
  }
}

.query-flex {
  display: flex;
  justify-content: space-between;

  .query-section {

    width: 68%;
  }

  .query-btn {
    width: 360px;
    display: flex;
    justify-content: end;

    .toggle {
      height: 32px;
      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);
        }
      }
    }
  }
}

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