<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <div class="title">
        <span> 责任书签订详情</span>
      </div>
      <el-divider />
      <div class="btnBox">
        <el-button type="primary" @click="download" v-loading="exportLoading" style="margin-left: 10px;">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button>
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          <span>返回</span>
        </el-button>
      </div>
      <div>
        <section class="eltab8">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #qdzt="{ row }">
              <span v-if="row.qdzt == '未制定'" style="color: red  !important" size="small">未制定</span>
              <dict-tag v-else :options="D_TB_ZRSQDZT" :value="row.qdzt" :tag="false" />
            </template>
            <template #actions="{ row }">
              <span class="operesee" @click="registration(row.zrs)" v-if="row.zrs">
                <el-icon>
                  <Compass />
                </el-icon>详情</span>
              <span v-else>--</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />

        </div>

      </div>
    </div>
  </div>
  <!-- 网签 -->
  <div v-if="addDiaShow" class="dialog-box">
    <AddWq v-if="addDiaShow" :title="title" :xqId="xqId" :isdisabled='isdisabled' @changeAddVi="changeAddVi" />
  </div>
  <!-- 线下签 -->
  <div v-if="addDiaShowxxq" class="dialog-box">
    <AddXxq v-if="addDiaShowxxq" :title="title" :xqId="xqId" :isdisabled='isdisabled' @changeAddVi="changeAddVi" />
  </div>
</template>

<script setup>
// 引入
import { onMounted, defineProps, ref, defineEmits, reactive, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import AddWq from "./addWq.vue";
import AddXxq from "./addXxq.vue";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const { D_TB_ZRSQDZT } = proxy.$dict("D_TB_ZRSQDZT");
const exportLoading = ref(false)
// 数据
const bigHeight = ref(); //整个高度
const emits = defineEmits(["close"]);
const tableData = ref([]);
const xqId = ref('')
const title = ref('')
const addDiaShow = ref(false)
const isdisabled = ref(false)
const addDiaShowxxq = ref(false)
const tableloading = ref(false);
import { ElMessage } from "element-plus";
const props = defineProps({
  orgId: String,
  year: String
});
const tableColumn = ref([
  {
    title: "所属部门",
    prop: "qddw",
    sortable: true
  },
  {
    title: "签订人员",
    prop: "qdrxm",
    sortable: true
  },
  {
    title: "签订时间",
    prop: "qdsj",
    sortable: true
  },
  {
    title: "签订状态",
    prop: "qdzt",
    sortable: true,
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total:0,
  year: new Date().getFullYear()
});
// 初始化
onMounted(() => {
  listQuery.ssbmid = props.orgId;
  listQuery.year = props.year;
  getDataList()
  bigHeightFn();
});
//统计台账下载
function download() {
  exportLoading.value = true
  let title = {
    qddw: '所属部门',
    qdrxm: '签订人员',
    qdsj: '签订时间',
    qdzt: '签订状态'
  }
  getApi(listQuery, '/mosty-jcgl/zrs/exportDataByDeptid').then((res) => {
    if (res) {
      let tablename = '责任书签订情况台账.xlsx'
      for (let i = 0; i < res.length; i++) {
        res[i].qdzt = res[i].qdzt == '未制定' ? '未制定' : (res[i].qdzt ? proxy.$getDictVal(res[i].qdzt, D_TB_ZRSQDZT) : '--');
      }
      exportXlsx(title, res, '责任书签订情况台账', tablename);
      exportLoading.value = false;
    } else {
      ElMessage.warning('暂无数据。')
      exportLoading.value = false;
    }
  }).catch(() => {
    exportLoading.value = false;
  })
}
// 控制新增弹出框的展示
const changeAddVi = () => {
  xqId.value = null
  addDiaShow.value = false;
  addDiaShowxxq.value = false;
  isdisabled.value = false
};
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
const registration = (row) => {
  if (row.signtype == '1') {
    xqId.value = row.id;
    title.value = "网签责任书查看";
    addDiaShow.value = true;
    isdisabled.value = true
  } else {
    xqId.value = row.id;
    title.value = "线下签订责任书查看";
    addDiaShowxxq.value = true;
    isdisabled.value = true
  }
};
//获取列表数据
function getDataList() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/zrs/getListByDeptid').then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      listQuery.total = res.total;
    }
  }).catch(() => {
    tableData.value = []
    tableloading.value = false;
  })
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
function CloseEvent() {
  emits("close");
}
</script>

<style lang="scss" scoped>
.bigBox {
  padding: 0 14px;

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

.title {
  height: 39px;
  line-height: 39px;
  font-size: 18px;
  color: #0f3916;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>