<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <!-- 组织机构信息 -->

      <div class="right">
        <!-- 表格 -->

        <div class="searchBox" ref="searchBox">
          <div class="title">
            法律法规和相关要求管理

            <div class="righbth">
              <el-input v-model="listQuery.zrsmc" clearable placeholder="请输入责任书名称进行查询" style="width: 400x"></el-input>
              <el-button type="primary" @click="handleFilter(listQuery)">查询</el-button>
              <el-button type="primary" @click="addwq"><el-icon>
                  <CirclePlus />
                </el-icon>
                <span>新增</span></el-button>
              <el-button type="primary" @click="addxx"><el-icon>
                  <CirclePlus />
                </el-icon>
                <span>精确查询</span></el-button>
              <el-button type="primary" @click="onloadExcel" v-loading="loadingShow">导出Excel</el-button>
            </div>
          </div>

        </div>
        <div class="tabBox">
          <el-table ref="multipleTableRef" stripe :data="tableData" v-loading="tableloading"
            element-loading-text="数据加载中..." style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column label="法律名称" property="zrsmc"></el-table-column>
            <el-table-column label="文件编号" property="zrsmc"></el-table-column>
            <el-table-column label="法律类别" property="zrslx">
              <template #default="{ row }">
                <dict-tag :options="D_TB_ZRSLX" :value="row.zrslx" :tag="false" />
              </template>
            </el-table-column>
            <el-table-column label="专业类型" property="zrslx">
              <template #default="{ row }">
                <dict-tag :options="D_TB_ZRSLX" :value="row.zrslx" :tag="false" />
              </template>
            </el-table-column>
            <el-table-column label="颁发单位" property="fqbmmc"></el-table-column>
            <el-table-column label="颁发时间" property="xtCjsj"></el-table-column>
            <el-table-column label="实施时间" property="xtCjsj"></el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <span class="operate" style="color: yellowgreen" @click="registration(row)">查看进度</span>
                <span class="operate" v-if="row.signtype == '2'" style="color: yellowgreen"
                  @click="lookfile(row)">查看</span>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="handledelete(row)">
                  <template #reference>
                    <span class="operate" style="color: yellowgreen" size="small">删除</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>
    </div>
    <!-- 新增弹出框 -->
    <Addwqzrs v-model="addDiaShow" :title="title" :xqId="xqId" @changeAddVi="changeAddVi" :rowdata="seeData" />
    <!-- 查看线下签 -->
    <el-dialog title='责任书查看' width="84%" v-model="lookfileshow" :before-close="closeDialog">

      <div style="display:flex;justify-content:space-between">
        <el-button @click="onloadImg">导出</el-button>
        <el-button @click="closeDialog">返回</el-button>
      </div>

      <div>
        <MOSTY.Upload width="800px" :limit="1" :ShowfileList='false' :nopicer="true" :showbut="false" :isImg="false"
        :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']"  v-model="uploadList" :delrow="delrow" @filehandleChange="changeFile"></MOSTY.Upload>
      </div>
      <div v-if="fjtableData[0]">
        <div style="text-align: center;font-size: 26px;">{{ fjtableData[0].name }}</div>
        <div class="bigimgbox">
          <img :src="fjtableData[0].url" class="imglook" id="loadImg" />
        </div>

      </div>

    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, defineEmits, reactive, watch, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { exportXlsx, downloadImg } from "@/excel/Export2Excel.js";
import fs from 'file-saver';
import * as XLSX from 'xlsx'

const { proxy } = getCurrentInstance();
const { D_TB_ZRSLX, D_TB_ZRSQDFS, D_TB_ZRSQDZT } = proxy.$dict("D_TB_ZRSLX", "D_TB_ZRSQDFS", "D_TB_ZRSQDZT");
// 数据
const tableloading = ref(false)
const xqId = ref('')
const total = ref(0);
const seeData = ref({});
const fjtableData = ref([]);
const uploadList = ref([]);
const urlImg = ref('');
const addDiaShow = ref(false);//新增弹窗
const lookfileshow = ref(false);//查看弹窗
const bigHeight = ref(); //整个高度
const title = ref('')
const emits = defineEmits(["close"]);
const tableData = ref([]);
const loadingShow = ref(false);
const registration = (row) => {

  xqId.value = row.id
  title.value = "责任书查看";
  addDiaShow.value = true;

};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  fqbmid: '',
  zrsmc: '',
  year: new Date().getFullYear()
});
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");


// 方法
//列表查询
watch(
  () => listQuery.year,
  (val) => {
    getDataList();
  }
);
//查询
function handleFilter(val) {
  getDataList();
  listQuery.zrsmc = ''
  listQuery.year = new Date().getFullYear()
}
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
//获取列表数据
function getDataList() {
  // tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/zrs/getPageList').then((res) => {
    // if (res.records) {
    //     tableloading.value = false;
    //     tableData.value = res.records;
    //     total.value = res.total;
    // }
  }).catch((err) => {
    tableData.value = []
    tableloading.value = false;
  })
}
//网签新增
function addwq() {
  seeData.value = {};
  title.value = "网签责任书新增";
  addDiaShow.value = true;
}
//线下签新增
function addxx() {
  seeData.value = {};
  title.value = "线下签订责任书新增";
  addDiaShow.value = true;
}
// 控制新增弹出框的展示
const changeAddVi = (val) => {
  // addDiaShow.value = val;
  getDataList();
};

const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
  } else {
    lfBoxWid.value = "40px";
  }
};
//删除
function handledelete(row) {
  let id = { ids: [row.id] }
  deleteApi(id, `/mosty-jcgl/zrs/delBatchs`).then((res) => {
    ElMessage.success("删除成功");
    getDataList();
  })
}
//导出Excel
function onloadExcel() {
  loadingShow.value = true
  let title = {
    zrsmc: '责任书名称',
    zrslxmc: '责任书类型',
    fqxgsmc: '发起单位',
    fqbmmc: '发起部门',
    fqbmmc: '被签订单位/部门',
    ldxm: '审批人',
    qdsj: '下发时间',
    signtypemc: '签订方式',
    ryxm: '签订人',
    qdztmc: '签订状态',
  }
  let obj = {
    pageCurrent: 1,
    pageSize: 100000,
    year: listQuery.year
  }
  getApi(obj, '/mosty-jcgl/zrs/getPageList').then((res) => {
    if (res.records) {
      let data = res.records
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].zrslxmc = proxy.$getDictVal(data[i].zrslx, D_TB_ZRSLX);
          data[i].signtypemc = proxy.$getDictVal(data[i].signtype, D_TB_ZRSQDFS);
          data[i].qdztmc = proxy.$getDictVal(data[i].qdzt, D_TB_ZRSQDZT);
        }
        let tablename = '责任书.xlsx'
        exportXlsx(title, data, '责任书', tablename);

      }
    }

  }).finally(() => {
    loadingShow.value = false
  })
}
//查看线下签责任书
function lookfile(row) {
  if (row.files) {
    //判断附件是数组还是字符串
    if (row.files.indexOf("[") != -1) {
      uploadList.value = JSON.parse(row.files)
    } else {
      uploadList.value = row.files.split(',')
    }
  } else (
    uploadList.value = []
  )
  lookfileshow.value = true
}
// 新的文件上传返回
const changeFile = (data) => {
  fjtableData.value = data
  urlImg.value = data.url

};
//导出图片
function onloadImg() {
  let url = fjtableData.value[0].url;
  let name = fjtableData.value[0].name;
  downloadImg(url, name)
}
// 关闭×
const closeDialog = () => {
  fjtableData.value = []
  uploadList.value = []
  lookfileshow.value = false;

};

onMounted(() => {
  getDataList()
  bigHeightFn();
});
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped>
.searchBox {
  padding: 2px 13px 0 15px !important;
}

.title {
  display: flex;
  border: none !important;
  justify-content: space-between;
}

.righbth {
  display: flex;
}

.bigBox {
  display: flex;

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

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    // width: 300px;
    padding: 0 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);
    background: #40976c;

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

  .right {
    width: 100%;
    padding: 0 10px;

    .perNum {
      height: 400px;
    }

    // width: calc(100% - 300px);
    .head {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px dashed green;
      height: 60px;

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

    .el-form {
      width: 100%;

      div {
        width: 100%;
        margin-top: 7px;
      }

      .el-form-item {
        display: flex;
        align-items: center;
      }

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

        div {
          width: 45%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          // .el-form-item {
          //   width: 100%;

          //   .el-input {
          //     width: 90%;
          //   }
          // }
        }
      }
    }

    .detail {
      border-top: 1px dashed green;
      padding: 15px 100px;
      display: flex;
      justify-content: space-between;

      div {
        width: 300px;
        height: 150px;
        text-align: center;

        span {
          font-size: 18px;
          display: block;
          width: 300px;
          height: 30px;
          line-height: 30px;
          padding: 0;
          margin: 0;
          background-color: orange;
        }

        h2 {
          font-size: 50px;
          background-color: skyblue;
          width: 300px;
          height: 120px;
          line-height: 120px;
          padding: 0;
          margin: 0;
        }
      }
    }

    .title {
      border-top: 1px solid green;
    }
  }
}

.tabBox {
  height: calc(100% - 70px);

  .el-table {
    height: 90%;

    overflow: auto;
  }

  .fenye {
    top: 90%;
  }
}

.imglook {
  width: 100%;
  height: 100%;
}

.bigimgbox {
  height: 76vh;
  overflow: auto;
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 25px;
}
</style>