<template>
  <div>
    <MOSTY.PageTree :pageTitle="'安全责任清单列表'" :searchType="'01'" @getDeptId="getdeptId">
      <template #table>
        <section class="eltab3">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :actionsW="250"
            :isSelect="false" :isSort="false" @SortChange="SortChange" style="width: 100%;">
            <template #actions="{ row }">
              <span class="operedit" @click="handout(row)"><el-icon>
                  <Download />
                </el-icon>导出</span>
              <span class="operesee" @click="See(row)">
                <el-icon>
                  <Compass />
                </el-icon>责任清单查看</span>
              <span class="operedit" @click="edit(row)"><el-icon>
                  <EditPen />
                </el-icon>修改</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 修改 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <AqzrqdEdit @close="closeedit" :userid="userid" @edit="edit" />
    </div>
    <div v-if="comprehenShow" class="dialog-box">
      <zrqd @close="comprehenShow = false" :rowData="rowData" />
    </div>
    <!-- 导出表格样式可以不隐藏，放在地下也看不到 -->
    <div class="loadbox">
      <div class="box_cont" id="downloadform">
        <div class="searchBox" ref="searchBox">
          <h3 align="center" style="font-size:40px;color: black;">安全责任清单</h3>
          <table align="center" cellspacing="0" cellpadding="0" border="1" style="width:600px;">
            <tr align="center" height="40px">
              <td width="25%" align="center" style="font-size:19px;">岗位名称</td>
              <td width="25%" align="center" style="font-size:19px;">
                <span v-if="dctableData.stationName == '01'">决策岗位</span>
                <span v-if="dctableData.stationName == '02'">管理岗位</span>
                <span v-if="dctableData.stationName == '03'">作业岗位</span>
              </td>
              <td width="15%" align="center" style="font-size:19px;">责任人员</td>
              <td width="10%" align="center" colspan="2" style="font-size:19px;">
                {{ dctableData.user ? dctableData.user.userName : '' }}</td>
            </tr>
            <tr align="center" height="40px">
              <td width="20%" align="center" style="font-size:19px;">责任范围</td>
              <td width="40%" colspan="1" align="center" style="font-size:19px;">
                责任要素
              </td>
              <td width="40%" colspan="3" align="center" style="font-size:19px;">
                责任内容
              </td>
            </tr>
            <tr align="center" height="40px" v-for="items in dctableData.dutyList" :key="items">
              <td width="20%" align="left" style="font-size:16px;">{{ items.scope }}</td>
              <td width="40%" colspan="1" align="left" style="font-size:16px;">
                <div v-for="item in dctableData.listItem" :key="item">
                  <div width="40%" colspan="1" align="left" style="font-size:16px;text-indent: 2em;"
                    v-if="items.id == item.dutyListId">
                    {{ item.dutyFactor }}</div>
                </div>
              </td>
              <td width="40%" colspan="3" align="left" style="font-size:16px;">
                <div v-for="it in dctableData.listItem" :key="it">
                  <div width="40%" colspan="1" align="left" style="font-size:16px;text-indent: 2em;"
                    v-if="items.id == it.dutyListId">{{
                      it.dutyDesc }}</div>
                </div>
              </td>
            </tr>
            <tr align="center" height="40px" v-for="its in dctableData.flhList" :key="its">
              <td width="25%" align="left" style="font-size:16px;">{{ its.scopeLiability }}</td>
              <td width="75%" colspan="2" align="left" style="font-size:16px;">{{ its.dutiesPerformance }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, ref, watch } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import AqzrqdEdit from "./commponents/aqzrqdEdit.vue";
import zrqd from "./commponents/zrqd.vue";
import { exportwordFn } from "@/excel/Export2Excel.js";
import { getApi } from "@/api/tobAcco_api.js";
const comprehensiveShow = ref(false);
const comprehenShow = ref(false);
const download = ref(false);
const tableData = ref([]);
const dctableData = ref({});
const rowData = ref({});
const userid = ref(null);
const username = ref("");
const tableloading = ref(false);
const listQuery = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
});
const tableColumn = ref([
  {
    title: "所属单位",
    prop: "orgname"
  },
  {
    title: "所属部门",
    prop: "deptname"
  },
  {
    title: "姓名",
    prop: "username"
  },
  {
    title: "责任数",
    prop: "count",
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
//选择右侧部门
const getdeptId = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1
  getdata();
};
function getdata() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/dutyList/getUserList`).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      listQuery.total = res.total
    } else {
      tableData.value = [];
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
watch(
  () => dctableData.value,
  (val) => {
  },
  {
    deep: true
  }
);
//导出
const handout = async (row) => {
  username.value = row.username;
  gtxqData(row.userid)
  download.value = true;

};
//查看
const See = (row) => {
  getApi({ userid: row.userid }, "/mosty-jcgl/dutyList/queryZrsDetail").then((res) => {
    if (res) {
      rowData.value = res;
      comprehenShow.value = true;
    }
  });
  download.value = false;
};
//关闭
function closeedit() {
  comprehensiveShow.value = false;
  userid.value = null;
  getdata()
}
//修改

const edit = (row) => {
  download.value = false;
  comprehensiveShow.value = true;
  userid.value = row.userid;
};
//详情
function gtxqData(userid) {
  getApi({ userid: userid }, "/mosty-jcgl/dutyList/queryZrsDetail").then((res) => {
    if (res) {
      dctableData.value = res
      setTimeout(() => {
        exportwordFn("downloadform", "安全责任清单");
      }, 2000);
    }
  });
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getdata();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getdata();
};
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 236px);
}





.loadbox {
  .box_cont {
    width: 100%;
    height: calc(100vh - 20vh);
    overflow-y: scroll;
  }

  .searchBox {
    width: 800px;
    margin: 20px auto;
  }

  .headBox {
    height: 60px;
    display: flex;
  }

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

    .tablebottom {
      color: black;
      width: calc(100% / 3);
      border: 1px solid black;
    }

    .text {
      height: 100%;
      font-size: 20px;
      line-height: 40px;
      margin-top: 10px;
      margin-left: 10px;
      display: flex;
      align-items: center;
    }

    .list {
      margin-top: 15px;
      font-size: 20px;
      margin-left: 10px;
      padding-bottom: 15px;
    }

    .listli {
      margin-top: 10px;
      font-size: 20px;
    }
  }
}
</style>
