<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="'安全责任清单'" @closeDialog="CloseEvent">
        <template #content>
          <div class="boxfrom">
            <h3 align="center" style="font-size:40px;color: black;">安全责任清单</h3>
            <table align="center" cellspacing="0" cellpadding="0" border="1" style="width:1200px;">
              <tr align="center" height="40px">
                <td width="25%" align="center">岗位名称</td>
                <td width="25%" align="center">
                  <span>{{fromObj.stationName}}</span>

<!--                  <span v-if="fromObj.stationName == '01'">决策岗位</span>-->
<!--                  <span v-if="fromObj.stationName == '02'">管理岗位</span>-->
<!--                  <span v-if="fromObj.stationName == '03'">作业岗位</span>-->
                </td>
                <td width="25%" align="center">责任人员</td>
                <td width="25%" align="center">
                  {{ fromObj.user.userName }}</td>
              </tr>
              <tr align="center" height="40px">
                <td width="20%" align="center">责任范围</td>
                <td width="40%" colspan="1" align="center">
                  责任要素
                </td>
                <td width="40%" colspan="3" align="center">
                  责任内容
                </td>
              </tr>
              <tr align="center" height="40px" v-for="items in fromObj.dutyList" :key="items">
                <td width="20%" align="center" style="color: #767272;">{{ items.scope }}</td>
                <td width="40%" colspan="1" align="center" style="color: #767272;">
                  <div v-for="item in fromObj.listItem" :key="item">
                    <div width="40%" align="left" style="color: #767272;  text-indent: 2em;"
                      v-if="items.id == item.dutyListId">
                      {{ item.dutyFactor }}</div>
                  </div>

                </td>
                <td width="40%" colspan="3" align="center" style="color: #767272;">
                  <div v-for="it in fromObj.listItem" :key="it">
                    <div width="40%" align="left" style="color: #767272;text-indent: 2em;"
                      v-if="items.id == it.dutyListId">
                      {{
                        it.dutyDesc }}</div>
                  </div>
                </td>
              </tr>
              <tr align="center" height="40px" v-for="its in fromObj.flhList" :key="it">
                <td width="25%" align="center" style="color: #767272;">{{ its.scopeLiability }}</td>
                <td width="75%" colspan="2" align="center" style="color: #767272;">{{ its.dutiesPerformance }}</td>
              </tr>
            </table>
          </div>

        </template>
        <template #footer>
          <el-button type="primary" @click="CloseEvent">返回 </el-button>
          <el-button type="primary" @click="handout">导出 </el-button>
        </template>
      </MOSTY.FromPage>
      <!-- 导出表格样式可以不隐藏，放在地下也看不到 -->
      <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="fromObj.stationName == '01'">决策岗位</span>
                  <span v-if="fromObj.stationName == '02'">管理岗位</span>
                  <span v-if="fromObj.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;">
                  {{ fromObj.user ? fromObj.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 fromObj.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 fromObj.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 fromObj.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 fromObj.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>
  </div>
</template>

<script setup>
// 引入
import {
  reactive,
  onMounted,
  watch,
  ref,
  getCurrentInstance,
  isShallow
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { exportwordFn } from "@/excel/Export2Excel.js";
const emits = defineEmits(["close"]);
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  rowData: {
    default: {},
    type: Object
  }
});
const fromObj = ref({})
watch(
  () => props.rowData,
  (val) => {
    fromObj.value = val
    console.log('111111111', val)
  },
  { deep: true, immediate: true }
);
//关闭综合配置表
const CloseEvent = () => {
  emits("close");
};

//获取列表数据
onMounted(() => {

  // getListData()
});
function handout() {
  // setTimeout(() => {

  // }, 2000);
  exportwordFn("downloadform", "安全责任清单");
}

</script>

<style lang="scss" scoped>
td {
  font-size: 19px;
  text-align: center;
  color: black;
}

.bigBox {
  .title {
    margin-top: 10px;
    font-size: 35px;
    font-weight: 700;
    color: #0f3916;
    display: flex;
    margin-left: 45%;
    justify-content: center;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .right {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

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

  .boxfrom {
    width: 1200px;
    margin: 20px auto;
    height: calc(100vh - 25vh);
    overflow-y: scroll;
  }
}

.tablehead {
  display: flex;
  margin-top: 20px;

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

    .text {
      font-size: 25px;
      font-weight: 600;
      line-height: 40px;
      display: flex;
      justify-content: center;
    }
  }

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

    .text {
      font-size: 25px;
      font-weight: 600;
      line-height: 40px;
      display: flex;
      justify-content: center;
    }
  }
}

.tablemiddle {
  display: flex;

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

    .text {
      font-size: 25px;
      font-weight: 600;
      line-height: 40px;
      display: flex;
      justify-content: center;
    }
  }
}

.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;
  }
}

.dialog-box {
  z-index: 3 !important;
}

.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>
