<template>
  <MOSTY.PageTree :pageTitle="props.type == '01' ? '承诺书签订情况' : '承诺书列表'" :searchType="'03'" @getDeptId="getDeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <div class="btnBox">
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <Back />
          </el-icon>
          <span>返回</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" @SortChange="SortChange" style="width: 100%;" :actionsW="400">
          <template #qdlx="{ row }">
            <span v-if="row.qdlx == '1'">全员签订</span>
            <span v-if="row.qdlx == '2'">部分人员签订</span>
          </template>
          <template #status="{ row }">
            <span v-if="row.status == '1'">未下发</span>
            <span v-if="row.status == '2'">已下发</span>
          </template>
          <template #ylbtn="{ row }">
            <span class="operesee" @click="handledlon(row.file)"> <el-icon>
                <Download />
              </el-icon>下载</span>
            <span class="operesee" @click="showKKfile(row.file)"> <el-icon>
                <View />
              </el-icon>预览</span>

          </template>

          <template #actions="{ row }">
            <el-popconfirm v-if="row.status == '1' && props.type != '01'" 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="operedit" @click="bjInfo(row)" v-if="row.status == '1' && props.type != '01'">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <span class="operesee" @click="seeInfo(row)"> <el-icon>
                <View />
              </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 v-if="row.status == '1' && props.type != '01'" 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" />

      </div>
    </template>

  </MOSTY.PageTree>
  <!-- 新增 -->
  <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 v-if="dialogVisible" class="dialog-box">
    <Kkfile :files="fileId" @changedialog="changedialog" />
  </div>
</template>

<script setup>
// 引入
import { onMounted, reactive, ref, watch, defineProps } 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 * as MOSTY from "@/components/MyComponents/index";
import Kkfile from "@/components/MyComponents/kkfile/index.vue";
import { createAndClickLink } from "@/utils/tools.js";
import Conclude from "./commponents/Conclude.vue";
import cnstj from "./commponents/cnstj.vue";
import { useRouter } from 'vue-router';
import { useStore } from "vuex";

const dialogVisible = ref(false)
const fileId = ref(null)
const router = useRouter()
const store = useStore();
const props = defineProps({
  type: {
    type: String,
    default: '00'
  },
  orgcode: {
    type: String,
    default: ''
  }
});
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear(),
    options: filterYear(7),
  },
  {
    showType: "input",
    prop: "cnsmc",
    width: '250px',
    placeholder: '请输入承诺书名称进行查询'
  }
]);
const emits = defineEmits(["close"]);
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 tableColumn = ref([
  {
    title: "承诺书名称",
    prop: "cnsmc",
    sortable: true
  },
  {
    title: "承诺书内容",
    prop: "cnsnrTxt",
    sortable: true
  },
  {
    title: "承诺书类型",
    prop: "qdlx",
    slot: true,
    sortable: true
  },
  {
    title: "是否下发",
    prop: "status",
    slot: true,
    sortable: true
  },
  {
    title: "承诺书",
    prop: "ylbtn",
    slot: true,
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
//选择右侧部门
const getDeptId = (val) => {
  if (props.type == '01') {
    listQuery.orgcode = props.orgcode
  } else {
    listQuery.orgcode = val.id;
  }

  listQuery.pageCurrent = 1;
  getListData();
};
//查询
const onSearch = (obj) => {
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.year = obj.year;
  listQuery.cnsmc = obj.cnsmc;
  getListData();
};
onMounted(() => {

  getListData();
});
const tableloading = ref(false);
watch(
  () => listQuery.year,
  (val) => {
    getListData()
  }
);
// 富文本转普通文本
const filterHtml = (html) => {
  if (html) {
    const div = document.createElement("div");
    div.innerHTML = html;
    return div.innerText;
  } else {
    return html;
  }
};
// 方法
//获取列表信息
function getListData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/cns/getPageList`).then((res) => {

    if (res.records) {
      tableloading.value = false;
      res.records = Array.isArray(res.records) ? res.records : [];
      tableData.value = res.records.map(record => ({
        ...record,
        cnsnrTxt: filterHtml(record.cnsnr) // 转换富文本为普通文本
      }));
      pageConfiger.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
}

const saveBtnShow = ref(true);
const title = ref(""); //弹窗标题
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 CloseEvent = () => {
  if (props.type == '01') {
    emits("close");
  } else {
    let arr = store.getters.tagsViewList;
    for (let i = 0; i < arr.length; i++) {
      const e = arr[i];
      if (e.path == '/jgryandzz/Cnsqdqk') {
        arr.splice(i, 1);
      }
    }
    router.push("/dutyBook/jgryandzz/cns");
  }

};
//下载
const handledlon = (id) => {
  if (id) {
    getApi({}, `/mosty-base/minio/file/download/${id}`).then((res) => {
      if (res) {
        createAndClickLink(res.url, res.originalName);
      }
    });
  }
};
//预览
function showKKfile(id) {
  fileId.value = id
  dialogVisible.value = true
}
function changedialog() {
  fileId.value = null
  dialogVisible.value = false
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};

</script>

<style lang="scss" scoped>
.bigBox {}

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

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



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