<template>
  <div>
    <div class="bigBox">
      <div class="zy-right">
        <div class="headBox">
          <div class="title">承诺书签订情况</div>
        </div>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="CloseEvent">返回 </el-button>
        </div>
        <section class="eltab9">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #qdsj="{ row }">
              <el-tag type="danger" v-if="!row.qdsj">未签订</el-tag>
              <span v-if="row.qdsj">已签订</span>
            </template>
            <template #actions="{ row }">
              <!-- v-if="row.operesee" -->
              <span class="operesee" @click="registration(row)">
                <el-icon>
                  <Compass />
                </el-icon>查看</span>
              <el-popconfirm v-if="row.qdsj" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                title="是否重新签订?" @confirm="registr(row)">
                <template #reference>
                  <span class="operedit" style="color: yellowgreen" size="small"><el-icon>
                      <EditPen />
                    </el-icon>重新签订</span>
                </template>
              </el-popconfirm>
              <span v-else style="color: rgb(204, 20, 20) !important;margin-left: 10px;">待签定</span>

            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />

        </div>

      </div>
    </div>
    <!--  承诺书签订详情 -->
    <div v-if="xqShow" class="dialog-box">
      <cnsmain @close="xqShow = false" v-if="xqShow" :cnsId="cnsId" :ryid="ryid" />
    </div>
  </div>
</template>

<script setup>
// 引入
import cnsmain from "./cnsmain.vue";
import { reactive, onMounted, ref, defineProps, watch } from "vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const searchArr = reactive([
  {
    showType: "input",
    prop: "ryXm",
    width: '250px',
    placeholder: '请输入签订人员姓名进行查询'
  }
]);
const xqShow = ref(false)
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  cnsId: String
});
const tableData = ref([]);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  ryXm: ""
});
const tableColumn = ref([
  {
    title: "签订人员",
    prop: "ryXm",
    sortable: true
  },
  {
    title: "是否签订",
    prop: "qdsj",
    slot: true,
    sortable: true
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
// 查询
const onSearch = (obj) => {
  listQuery.value.ryXm = obj.ryXm
  listQuery.value.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getPcData();
};

onMounted(() => {
  getPcData();
});

const CloseEvent = () => {
  emits("close");
};
//获取列表数据
const tableloading = ref(false);
function getPcData() {
  tableloading.value = true;
  listQuery.value.cnsId = props.cnsId;
  getApi(listQuery.value, "/mosty-jcgl/cns/getQdqkList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      pageConfiger.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
}
//详情
const cnsId = ref('')
const ryid = ref('')
const registration = (row) => {
  ryid.value = row.ryId
  cnsId.value = listQuery.value.cnsId
  xqShow.value = true
}
const registr = (row) => {
  let params = {
    ryid: row.ryId,
    cnsId: listQuery.value.cnsId
  }
  postApi(params, "/mosty-jcgl/cns/reSign").then((res) => {
    ElMessage.success("签订成功");
    getPcData()
  });
}

//分页
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getPcData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getPcData();
};
</script>

<style lang="scss" scoped>
.el-form {
  .el-form-item {
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
  }
}

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