<template>
  <div class="bigBox">
    <div class="titleBox">
      <div class="title">承诺书</div>
      <div class="btnBox">
        <el-select v-model="listQuery.year" style="width: 220px">
          <el-option v-for="item in filterYear(7)" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-input v-model="listQuery.cnsmc" placeholder="请输入承诺书名称进行查询" style="margin: 0 10px;"></el-input>
        <el-button type="primary" @click="addUserHander">
          <el-icon>
            <Search />
          </el-icon>
          <span>查询</span>
        </el-button>
        <el-button type="primary" @click="addInfo">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>

      </div>
    </div>

    <div class="tabBox">
      <el-table stripe ref="multipleTableRef" :data="tableData" style="width: 100%" height='72vh'
        v-loading="tableloading" @selection-change="handleSelectionChange" border>
        <el-table-column label="承诺书名称" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="cell-content">{{ row.cnsmc }}</div>
          </template>
        </el-table-column>
        <el-table-column label="承诺书内容" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="cell-content">{{ row.cnsnr }}</div>
          </template>
        </el-table-column>
        <el-table-column label="承诺书类型" property="qdlx">
          <template #default="{ row }">
            <span v-if="row.qdlx == '1'">全员签订</span>
            <span v-if="row.qdlx == '2'">部分人员签订</span>
          </template>
        </el-table-column>
        <el-table-column label="是否下发" property="status">
          <template #default="{ row }">
            <span v-if="row.status == '1'">未下发</span>
            <span v-if="row.status == '2'">已下发</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" property="name">
          <template #default="{ row }">
            <el-popconfirm v-if="row.status == '1'" confirm-button-text="是" cancel-button-text="否" icon-color="red"
              title="确定要下发?" @confirm="handlexf(row)">
              <template #reference>
                <span span class="operdel" size="small"><el-icon>
                    <Bottom />
                  </el-icon>下发</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="bjInfo(row)" v-if="row.status == '1'"> <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <span class="operesee" @click="seeInfo(row)"> <el-icon>
                <Compass />
              </el-icon>查看</span>
            <span class="opereqk" @click="qdqk(row)"><el-icon>
                <SetUp />
              </el-icon>签订情况</span>
            <span class="operedit" v-if="row.qdlx == 1" @click="qdtj(row)"><el-icon>
                <Eleme />
              </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>
        </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 v-if="addplanShow" class="dialog-box">
      <CnsInfo @close="closeadd" :saveBtnShow="saveBtnShow" :rowid="rowid" :title="title" />
    </div>
    <!-- 签订情况 -->
    <div v-if="qdDialogShow" class="dialog-box">
      <Conclude @close="qdDialogShow = false" :cnsId="cnsId" />
    </div>
    <div v-if="qdtjDialogShow" class="dialog-box">
      <cnstj @close="qdtjDialogShow = false" :saveBtnShow="saveBtnShow" :qdid="qdid" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { onMounted, reactive, ref, watch } from "vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { filterYear } from "@/utils/auth.js";
import CnsInfo from "./commponents/CnsInfo.vue";
import Conclude from "./commponents/Conclude.vue";
import cnstj from "./commponents/cnstj.vue";
// 数据
const total = ref(0);
const rowid = ref(null)
const addplanShow = ref(false);
const qdDialogShow = ref(false);
const qdtjDialogShow = ref(false);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear()
});
const tableData = ref([
]);
//查询
const addUserHander = () => {
  listQuery.pageCurrent = 1;
  getListData();
};
onMounted(() => {
  getListData();
});
const tableloading = ref(false);
watch(
  () => listQuery.year,
  (val) => {
    getListData()
  }
);
// 方法
//获取列表信息
function getListData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/cns/getPageList`).then((res) => {

    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}

const saveBtnShow = ref(true);
const title = ref(""); //弹窗标题
const addInfo = () => {
  tableloading.value = false;
  rowid.value = null
  title.value = "承诺书新增";
  addplanShow.value = true;
  saveBtnShow.value = true;
};
const seeInfo = (row) => {
  rowid.value = row.id
  title.value = "承诺书详情";
  addplanShow.value = true;
  saveBtnShow.value = false;
};
const bjInfo = (row) => {
  rowid.value = row.id
  title.value = "承诺书编辑";
  addplanShow.value = true;
  saveBtnShow.value = true;
};

//关闭弹窗
function closeadd() {
  addplanShow.value = false;
  rowid.value = null
  getListData();
}
//下发承诺书
function handlexf(row) {
  getApi({ id: row.id }, "/mosty-jcgl/cns/issue").then((res) => {

    ElMessage.success("下发成功");
    getListData();
  });
}
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/cns/delCns/" + row.id).then((res) => {

    ElMessage.success("删除成功");
    getListData();
  });
};
const cnsId = ref("")
//签订情况
const qdqk = (row) => {
  cnsId.value = row.id
  qdDialogShow.value = true
};
//签订统计
const qdid = ref("")
const qdtj = (row) => {
  qdid.value = row.id
  qdtjDialogShow.value = true
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};

</script>

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

.titleBox {
  padding: 0 10px;
  background: #fff;
  border: none !important;
  display: flex;
  justify-content: space-between;
}

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

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

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

  .fenye {
    top: 95%;
  }
}

.opereqk {
  cursor: pointer;
  color: #530780 !important;
  line-height: 23px;
  margin-left: 10px;
}
</style>