<template>
  <div>
    <div class="bigBox" style='height:85vh;'>
      <div class="right" style="width: 100%;">
        <div class="zl">
          <div class="headBox">
            <div class="title">会议</div>
            <div class="btnBox">
              <el-date-picker v-model="listQuery.year" type="year" format="YYYY" value-format="YYYY" placeholder="选择年份"
                style="width: 250px;margin-right: 10px;">
              </el-date-picker>
              <el-button type="primary" @click="addShow" v-if="filterqx('isaqbm') == '1'">
                <el-icon>
                  <CirclePlus />
                </el-icon>
                <span>新增</span>
              </el-button>
              <el-button type="primary" @click="CloseEvent">
                <el-icon>
                  <Back />
                </el-icon>
                <span>返回</span>
              </el-button>
            </div>
          </div>
          <div class="tabBox">
            <el-table ref="multipleTableRef" v-loading="tableloading" element-loading-text="加载中..." :data="tableData"
              stripe style="width: 100%" @selection-change="handleSelectionChange" border height='72vh'>
              <el-table-column label="会议标题" property="meetingname" show-overflow-tooltip />
              <el-table-column label="参会日期" property="time" show-overflow-tooltip />
              <el-table-column label="年度" property="year" show-overflow-tooltip />
              <el-table-column label="上/下半年" property="quarter">
                <template #default="{ row }">
                  <span>{{ formatQuarter(row.quarter) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="次数" property="quarter">
                <template #default="{ row }">
                  <span>第{{ row.frequency }}次会议</span>
                </template>
              </el-table-column>
              <el-table-column label="参会人员" property="username" show-overflow-tooltip />
              <el-table-column label="操作">
                <template #default="{ row }">
                  <span class="operedit" @click="handlexg(row)" v-if="filterqx('isaqbm') == '1'"><el-icon>
                      <EditPen />
                    </el-icon>修改</span>
                  <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                    v-if="filterqx('isaqbm') == '1'" @confirm="handledelete(row)">
                    <template #reference>
                      <span span class="operdel" size="small">
                        <el-icon>
                          <Delete />
                        </el-icon>删除</span>
                    </template>
                  </el-popconfirm>
                  <span class="operesee" @click="handlexq(row)">
                    <el-icon>
                      <Compass />
                    </el-icon>查看</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="fenye">
              <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
                layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加会议 -->
    <div v-if="data.comprehensiveShow" class="dialog-box">
      <AddMeeting @close="closeAdd" :rowData="rowData" :saveBtnShow="saveBtnShow" :dictList="{ D_BZ_QUARTER }"
        :orgcode="orgcode" :isEdit="isEdit" :ywid="ywid" :frequencyNum="frequencyNum" :isFirstAdd="isFirstAdd" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { ref, reactive, getCurrentInstance, watchEffect } from "vue";
import AddMeeting from "./Addmeeting.vue";
import { ElMessage } from "element-plus";
import { filterYear, filterqx } from "@/utils/auth.js";
const emits = defineEmits(["close"]);
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_QUARTER } = proxy.$dict("D_BZ_QUARTER");
const saveBtnShow = ref(true);
const rowData = ref({});
const isFirstAdd = ref(true)
const frequencyNum = ref(0)
const props = defineProps({
  dictList: Array,
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  rowData: {
    default: {},
    type: Object
  },
});
// 数据
const data = reactive({
  comprehensiveShow: false
});
const isEdit = ref(false)
const title = ref(""); //弹窗标题
const total = ref(0);
const tableData = ref([]);
const tableloading = ref(false);
const listQuery = reactive({
  orgid: "",
  type: "1",
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear()
});
const ywid = ref(null)
const orgcode = ref(null)
// 关闭
function closeAdd() {
  data.comprehensiveShow = false
  getListData()
}
//获取列表数据
function getListData() {
  tableloading.value = true;
  listQuery.ywid = ywid.value
  getApi(listQuery, `/mosty-jcgl/meeting/getMeetingPage`).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
}
// 上下半年解析
const formatQuarter = (quarter) => {
  const quarterMap = {
    '1': '上半年',
    '2': '下半年',
  };
  return quarterMap[quarter];
};
//新增
const addShow = () => {
  tableloading.value = false;
  rowData.value = null;
  isEdit.value = false;
  isFirstAdd.value = true
  data.comprehensiveShow = true;
  title.value = "添加会议";
  saveBtnShow.value = true;
};
//修改
const handlexg = (row) => {
  rowData.value = { ...row };
  isFirstAdd.value = false
  frequencyNum.value = row.frequency;
  isEdit.value = true;
  data.comprehensiveShow = true;
  saveBtnShow.value = true;
  title.value = "修改会议";
};
const handlexq = (row) => {
  rowData.value = { ...row };
  isFirstAdd.value = false
  frequencyNum.value = row.frequency;
  data.comprehensiveShow = true;
  saveBtnShow.value = false;
  title.value = "会议详情";
};
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/meeting/delMeeting/" + row.id).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};
const CloseEvent = () => {
  emits("close");
};

watchEffect(() => {
  if (props.rowData) {
    ywid.value = props.rowData.id;
    orgcode.value = props.rowData.orgid
    getListData()
  }
});
</script>
<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 20px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      margin-top: 15px;
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .wyh {
      border: 1px solid var(--el-color-primary);
      width: 100%;
      height: 33vh;
      overflow: auto;

      .head {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--el-color-primary);
        padding: 10px;
        box-sizing: border-box;
      }

      .el-form {
        width: 900px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing: border-box;

        .el-form-item {
          display: flex;
          margin: 10px 0px;
          align-items: center;
        }



        .content>div {
          margin: 10px 0;
        }

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

          .el-form-item {
            width: 100%;
            display: flex;
            align-items: center;

            .el-input {
              width: 98%;
            }
          }
        }

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

          div {
            width: 44%;
            display: flex;
            align-items: center;

            .el-form-item {
              width: 90%;
              display: flex;
              align-items: center;
              margin-right: 10px;

              .el-input {
                width: 88%;
              }
            }
          }
        }
      }
    }

    .tabBox {

      border-left: 0 !important;

      .el-table {
        height: 91%;
        border-bottom: 1px solid var(--el-color-primary);
      }

      .fenye {
        top: 95%;
      }
    }

    .zl {


      .headBox {
        height: 60px;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 2;

        .btnBox {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .el-select {
            width: 150px;
          }
        }
      }
    }
  }
}

.btn_box {
  float: right;
}

.el-form-item {
  margin-bottom: 0px !important;
}

.dialog-box {
  height: 100%;
  z-index: 3;
}

.from_box {
  width: 50%;
  margin: 10px auto;
}

.el-textarea__inner {
  width: 98% !important;
}
</style>