<template>
  <div class="busywork_group">
    <div class="item-text">
        <div class="text">
          <span>作业单位</span>
          <span>{{ workData.workTicketCompany || "无" }}</span>
        </div>
      </div>
      <div class="start-title">
        作业负责人
      </div>
      <div class="item-text">
        <div class="text">
          <span>姓名</span>
          <span>{{ workData.workTicketDirectorId || "无" }}</span>
        </div>
      </div>
      <div class="start-title">
        作业监护人员
      </div>
      <div class="item-text">
        <div class="text">
          <span>姓名</span>
          <span>{{ workData.workTicketDirectorId || "无" }}</span>
        </div>
      </div>
      <div class="start-title">
        承包商监护人
      </div>
      <div class="item-text">
        <div class="text">
          <span>姓名</span>
          <span>{{ workData.workTicketDirectorId || "无" }}</span>
        </div>
      </div>
      <div class="start-title">
        承包商作业人员
      </div>
      <div class="item-text">
        <div class="text">
          <span>姓名</span>
          <span>{{ workData.workTicketDirectorId || "无" }}</span>
        </div>
      </div>
      <div class="start-title">
        内部作业人员
      </div>
      <div class="item-text">
        <div class="text">
          <span>姓名</span>
          <span>{{ workData.workTicketDirectorId || "无" }}</span>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'OperatingPersonnel',
  data () {
    return {
      search: {
        applicantUserId: '', // 申请人
        linkWorkTicketNo: '', // 关联作业票号
        workTicketAreaId: '', // 作业区域
        workTicketCompanyType: '10', // 作业单位类型
        workTicketPlace: '', // 作业地点
        workTicketContent: '', // 作业内容
        applicantDeptId: '', // 申请单位
        workPlanStartTime: '', // 开始时间
        workPlanEndTime: '' // 结束时间
      },
      // 承保商
      contractorData: {
        workTicketCompany: '', // 作业单位
        contractorUserIdList: [], // 承保商作业人员
        workTicketDirectorId: '', // 作业负责人
        workTicketGuardianUser: ''
      },
      // 内部
      interiorData: {
        workTicketCompany: '', // 作业单位
        executeUserIdList: [], // 内部作业人员
        workTicketDirectorId: '' // 作业负责人
      },
      workData: {}
    }
  },
  computed: {
    ...mapState('dangerList', [
      'workticketData'
    ])
  },
  methods: {
    getObj (obj, arrKey) {
      arrKey.forEach(k => {
        const jobKes = Object.keys(this[k])
        jobKes.forEach(key => {
          this[k] = {
            ...this[k],
            [key]: obj[key]
          }
        })
      })
    },
    getDetails () {
      this.workData = JSON.parse(JSON.stringify(this.workticketData))
      const KEY1 = ['search', 'contractorData', 'interiorData']
      this.workData.contractorUserIdList = this.userType(this.contractorUserList, this.workData.contractorUserIdList)
      this.workData.executeUserIdList = this.userType(this.getDeptUserTree, this.workData.executeUserIdList)
      this.getObj(this.workData, KEY1)
    }
  }
}
</script>

<style lang="less" scoped>
.busywork_group {
  padding: 16px 16px 16px 0px;
  .item-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    height: auto;
    .line {
      height: inherit;
      width: 2px;
      background: #eee;
    }
    .text {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: start;
      margin-left: 16px;
      span {
        text-align: left;
      }
      > :nth-child(1) {
        color: #969799;
        margin-bottom: 6px;
        font-size: 14px;
      }
    }
    .item-button {
      display: flex;
      justify-content: space-around;
      .van-button {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
  .start-title {
    height: 30px;
    line-height: 30px;
    text-align: left;
    font-weight: 600;
    color: #1c4990;
    border-bottom: solid 1px #eee;
    margin-bottom: 16px;
    margin-left: 16px;
  }

}

</style>
