<template>
  <div>
    <PageTitle title="岗位责任清单">
      <el-button @click="black">关闭</el-button>
    </PageTitle>
    <div class="box">
      <div class="main">
        <div class="header">岗位隐患排查工作任务清单</div>
        <div class="table">
          <table align="center" cellspacing="0" cellpadding="0" border="1">
            <tr align="center" height="50px">
              <td width="25%" align="center">岗位名称</td>
              <td width="25%" align="center" class="red">{{ entity.stationName }}</td>
              <td width="25%" align="center">责任人员</td>
              <td width="25%" align="center" class="red">{{ entity.username }}</td>
            </tr>
            <tr align="center" height="50px">
              <td width="25%" align="center">责任范围</td>
              <td width="75%" colspan="3" align="center">责任内容
              </td>
            </tr>
            <tr align="center" height="50px" v-for="(item, index) in nList" :key="index">
              <td width="25%" align="center">{{ item.objname }}</td>
              <td v-if="item.checkrate == 'none'" width="75%" colspan="3" align="left">{{ index + 1 }}、未配置检查周期</td>
              <td v-if="item.checkrate == 'day' && item.checkratecount == '1'" width="75%" colspan="3" align="left">{{
                index
                + 1 }}、每天一次检查</td>
              <td v-if="item.checkrate == 'day' && item.checkratecount == '3'" width="75%" colspan="3" align="left">{{
                index
                + 1 }}、每天三次检查</td>
              <td v-if="item.checkrate == 'month'" width="75%" colspan="3" align="left">{{ index + 1
              }}、每月一次检查</td>
              <td v-if="item.checkrate == 'week'" width="75%" colspan="3" align="left">{{ index + 1
              }}、每周一次检查</td>
            </tr>
            <tr align="center" height="50px" v-for="(item, index) in rList" :key="index">
              <td width="25%" align="center">{{ item.name }}</td>
              <td width="75%" colspan="3" align="left">
                <div class="list" v-for="(it, ind) in item.appraiseContents" :key="ind">{{ (ind + 1) + "、" + it }}</div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { watchEffect, ref } from "vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import { getApi } from "@/api/tobAcco_api.js";
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const emit = defineEmits("changePage");
const entity = ref({})
const nList = ref([])
const rList = ref([])
// 获取人员的责任清单
const getUserDuty = (userid) => {
  getApi({}, `/mosty-jcgl/dutyList/getUserDuty?userid=` + userid).then((res) => {
    entity.value = res.entity
    nList.value = res.nlist
    rList.value = res.rlist
  });
}
const black = () => {
  emit("changePage", "Main");
};
watchEffect(() => {
  if (props.editObj) {
    // 获取人员的责任清单
    getUserDuty(props.editObj.userid);
  }
});
</script>

<style lang = "scss" scoped>
td {
  padding: 0 20px;
}

.box {
  color: #000;

  .list {
    line-height: 30px;
  }

  .main {
    .red {
      color: blue;
    }

    .table {
      max-height: calc(100vh - 350px);
      overflow: auto;
    }

    >table {
      width: 800px;
      border-color: green;
    }

    .header {
      font-size: 25px;
      font-weight: 600;
      text-align: center;
      height: 100px;
      line-height: 100px;
    }

    width: 830px;
    margin: 0 auto;
    margin-top: 15px;
    border: 3px green solid;
    padding-bottom: 15px
  }
}
</style>
