<template>
  <div>

    <MOSTY.PageTree :pageTitle="'宣传与活动信息列表'" :searchType="'03'" @getDeptId="getDeptId">
      <template #titleright>
        <div class="toggle" :class="{ active: isOpen }" @click="isOpen = !isOpen">
          <span>统计</span>
          <el-icon>
            <DArrowLeft />
          </el-icon>
        </div>
      </template>
      <template #serach>
        <section v-show='isOpen' ref="getHeight">
          <section class="box-sjtj">
            <section class="flex">
              <section class="left-tj">
                <Sjtj :info="countlist" :isShowTip="false" :isShowBottom="false" :width="280" mb="6px" />
              </section>
            </section>
          </section>
        </section>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="addInfo">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <section :style="{ 'height': totalHeights }">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_XCYHDLB" :value="row.type" :tag="false" />
            </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="handledelete(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="listQuery" @changeSize="changeSize" @changeNo="changeNo" />

        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 宣传与活动新增 -->
    <div v-if="addplanShow" class="dialog-box">
      <xcyhdinfo @close="close" :saveBtnShow="saveBtnShow" :zdlist='zdlist' :rowId="rowId" :title="title" />
    </div>
  </div>
</template>

<script setup>
import { getApi, postApi } from "@/api/tobAcco_api.js";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import xcyhdinfo from "./commponents/xcyhdinfo.vue";
import { ref, reactive, onMounted, getCurrentInstance, watch, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_XCYHDLB } = proxy.$dict("D_BZ_XCYHDLB");
const zdlist = reactive({ D_BZ_XCYHDLB })

const searchArr = reactive([
  {
    showType: "input",
    prop: "anyName",
    width: '250px',
    placeholder: '请输入活动名称或活动地点查询'
  }
]);
const isOpen = ref(false)
const countlist = ref([
  { title: '班组活动', num: 0, dm: '1', icon: 'ccss/icon_02.png' },
  { title: '车间活动', num: 0, dm: '2', icon: 'ccss/icon_03.png' },
  { title: '安康杯活动', num: 0, dm: '3', icon: 'ccss/icon_04.png' },
  { title: '其他活动', num: 0, dm: '4', icon: 'ccss/icon_05.png' },
])

const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  type: ''
});
const tableColumn = ref([
  {
    title: "活动名称",
    prop: "activitiesname",
    sortable: true
  },
  {
    title: "活动类别",
    prop: "type",
    slot: true,
    sortable: true
  },
  {
    title: "活动地点",
    prop: "activitiesaddress",
    sortable: true
  },
  {
    title: "所属单位",
    prop: "orgname",
    sortable: true
  },
  {
    title: "登记人",
    prop: "registername",
    sortable: true
  },
  {
    title: "登记时间",
    prop: "registertime",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])


const rowId = ref(null)
const tableData = ref([]);
const title = ref("");
const saveBtnShow = ref("");
const addplanShow = ref(false);
// 柱状图数据
const barShow = ref(false);
const totalHeights = ref(null)
const getHeight = ref(null)
watch(() => isOpen.value, (val) => {
  nextTick(() => {
    if (val) {
      totalHeights.value = `calc(100vh - ${383 + getHeight.value.offsetHeight}px)`
    } else {
      totalHeights.value = `calc(100vh - 383px)`
    }
  })
}, {
  deep: true,
  immediate: true
})
onMounted(() => {
  totalHeights.value = `calc(100vh - 383px)`
  getcount();
  barShow.value = true;

});
const close = () => {
  rowId.value = null
  addplanShow.value = false;
  getListData();
  getcount();
  // getdata();
};
//获取部门参数
const getDeptId = (val) => {
  listQuery.ssdwid = val.id;
  listQuery.pageCurrent = 1
  getListData();
}
//	统计--发布数量--根据类型
function getcount() {
  getApi({}, '/mosty-jcgl/publicityActivities/statistics').then(res => {
    if (res.length > 0) {
      for (let i = 0; i < countlist.value.length; i++) {
        const el = countlist.value[i];
        el.num = 0
        for (let j = 0; j < res.length; j++) {
          const li = res[j];
          if (li.type == el.dm) {
            el.num = li.count
          }
        }
      }
    }
  })
}
function onSearch(obj) {
  listQuery.anyName = obj.anyName
  getListData();
}

//新增
const addInfo = () => {
  title.value = "宣传与活动新增";
  tableloading.value = false;
  addplanShow.value = true;
  rowId.value = null
  saveBtnShow.value = true;
};

//修改
const editInfo = (row) => {
  title.value = "宣传与活动编辑";
  rowId.value = row.id
  addplanShow.value = true;
  saveBtnShow.value = true;
};
//删除
const handledelete = (row) => {
  postApi(
    {},
    `/mosty-jcgl/publicityActivities/del/${row.id}`
  ).then((res) => {
    ElMessage.success("删除成功");
    getListData();
    getcount()
  });
};
const seeInfo = (row) => {
  title.value = "宣传与活动详情";
  rowId.value = row.id
  addplanShow.value = true;
  saveBtnShow.value = false;
};
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  postApi(
    listQuery,
    `/mosty-jcgl/publicityActivities/getPageList`
  ).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      listQuery.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}

//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getListData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getListData();
};


</script>

<style lang="scss" scoped>
.bigBox {
  // background: #fff;

  .titleBox {
    display: flex;
    justify-content: space-between;
  }

  .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);
      }
    }
  }
}


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


.chartBox {
  height: 350px;
}
</style>