<template>
  <div class="applyTable">
    <div style="text-align: center;"><h3>石家庄柏坡正元化肥有限公司</h3></div>
    <div style="text-align: center;"><h3>变更申请审批/验收表</h3></div>
    <table>
      <tr>
        <td colspan="2">变更单位</td>
        <td colspan="2"><input v-model="applyData.changeUnit" :disabled="readOnly" class="editInput"/></td>
        <td>变更项目名称</td>
        <td colspan="2"><input v-model="applyData.changeProjectName" :disabled="readOnly" class="editInput"/></td>
      </tr>

      <tr>
        <td colspan="2">变更类型</td>
        <td colspan="5">
          <input v-model="applyData.changeType.technology" :disabled="readOnly" type="checkbox"/>工艺、技术、设计变更；       <input v-model="applyData.changeType.deviceMaterial" :disabled="readOnly" type="checkbox"/>设备设施材料变更；
          <input v-model="applyData.changeType.person" :disabled="readOnly" type="checkbox"/>人员变更；   <input v-model="applyData.changeType.manager" :disabled="readOnly" type="checkbox"/>管理变更；      <input v-model="applyData.changeType.other" :disabled="readOnly" type="checkbox"/>其他变更(<input v-model="applyData.changeType.otherDetail" :disabled="readOnly" class="editInput" style="width: 50px;height: 20px"/>)
        </td>
      </tr>

      <tr>
        <td colspan="2">申请部门</td>
        <td><input v-model="applyData.applyDept" :disabled="readOnly" class="editInput"/></td>
        <td>申请人</td>
        <td><input v-model="applyData.apply" :disabled="readOnly" class="editInput"/></td>
        <td>申请日期</td>
        <td><input v-model="applyData.applyDate" :disabled="readOnly" class="editInput"/></td>
      </tr>

      <tr>
        <td rowspan="5">变更申请</td>
        <td style="height: 150px">变更原因</td>
        <td><textarea v-model="applyData.approval.changeReason" :disabled="readOnly" style="height: 99%"/></td>
        <td>变更依据和内容</td>
        <td colspan="3"><textarea v-model="applyData.approval.changeContent" :disabled="readOnly" style="height: 99%"/></td>
      </tr>

      <tr>
        <td>危险有害因素</td>
        <td>触发事件</td>
        <td>后果</td>
        <td>风险等级</td>
        <td>预防和控制措施</td>
        <td>是否需要变更操作规程</td>
      </tr>

      <tr>
        <td style="height: 100px"><textarea v-model="applyData.approval.dangerous" :disabled="readOnly" style="height: 99%"/></td>
        <td><textarea v-model="applyData.approval.event" :disabled="readOnly" style="height: 99%"/></td>
        <td><textarea v-model="applyData.approval.result" :disabled="readOnly" style="height: 99%"/></td>
        <td><textarea v-model="applyData.approval.dangerousLevel" :disabled="readOnly" style="height: 99%"/></td>
        <td><textarea v-model="applyData.approval.measure" :disabled="readOnly" style="height: 99%"/></td>
        <td><textarea v-model="applyData.approval.operator" :disabled="readOnly" style="height: 99%"/></td>
      </tr>

      <tr>
        <td>风险分析人</td>
        <td colspan="5">
          <div style="display: flex;flex-direction: row"><span style="width: 50px">签字:</span><input v-model="applyData.approval.analyse.sign" :disabled="readOnly" class="editInput"/></div>
          <div style="float: right;margin-right: 20px"><input v-model="applyData.approval.analyse.year" :disabled="readOnly" class="editInput" style="width: 50px"/>年 <input v-model="applyData.approval.analyse.month" :disabled="readOnly" class="editInput" style="width: 30px"/>月<input v-model="applyData.approval.analyse.day" :disabled="readOnly" class="editInput" style="width: 30px"/>日</div>
        </td>
      </tr>

      <tr>
        <td>申请部门负责人意见</td>
        <td colspan="5">
          <div style="display: flex;flex-direction: row"><span style="width: 50px">签字:</span><input v-model="applyData.approval.applyDeptSuggstion.sign" :disabled="readOnly" class="editInput"/></div>
          <div style="float: right;margin-right: 20px"><input v-model="applyData.approval.applyDeptSuggstion.year" :disabled="readOnly" class="editInput" style="width: 50px"/>年 <input v-model="applyData.approval.applyDeptSuggstion.month" :disabled="readOnly" class="editInput" style="width: 30px"/>月<input v-model="applyData.approval.applyDeptSuggstion.day" :disabled="readOnly" class="editInput" style="width: 30px"/>日</div>
        </td>
      </tr>

      <tr>
        <td rowspan="2">变更审批</td>
        <td>主管部门意见</td>
        <td colspan="5">
          <div style="display: flex;flex-direction: row;">
            <div style="display: flex;flex-direction: row"><span style="width: 50px">设备:</span><input v-model="applyData.approver.masterSuggstion.device" :disabled="readOnly" class="editInput"/></div>
            <div style="display: flex;flex-direction: row"><span style="width: 50px">生产:</span><input v-model="applyData.approver.masterSuggstion.produce" :disabled="readOnly" class="editInput"/></div>
            <div style="display: flex;flex-direction: row"><span style="width: 50px">安全:</span><input v-model="applyData.approver.masterSuggstion.safe" :disabled="readOnly" class="editInput"/></div>
          </div>
          <div style="float: right;margin-right: 20px"><input v-model="applyData.approver.masterSuggstion.year" :disabled="readOnly" class="editInput" style="width: 50px"/>年 <input v-model="applyData.approver.masterSuggstion.month" :disabled="readOnly" class="editInput" style="width: 30px"/>月<input v-model="applyData.approver.masterSuggstion.day" :disabled="readOnly" class="editInput" style="width: 30px"/>日</div>
        </td>
      </tr>

      <tr>
        <td>公司分管领导意见</td>
        <td colspan="3"><input v-model="applyData.approver.cantonalLeaders.suggstion" :disabled="readOnly" class="editInput"/></td>
        <td colspan="2">
          <div style="display: flex;flex-direction: row">
            <span style="width: 50px">签字:</span>
            <input v-model="applyData.approver.cantonalLeaders.sign" :disabled="readOnly" class="editInput"/>
          </div>
          <div style="float: right;margin-right: 20px"><input v-model="applyData.approver.cantonalLeaders.year" :disabled="readOnly" class="editInput" style="width: 50px"/>年 <input v-model="applyData.approver.cantonalLeaders.month" :disabled="readOnly" class="editInput" style="width: 30px"/>月<input v-model="applyData.approver.cantonalLeaders.day" :disabled="readOnly" class="editInput" style="width: 30px"/>日</div>
        </td>
      </tr>
      <tr>
        <td rowspan="2">变更实施</td>
        <td>实施部门</td>
        <td colspan="2"><input v-model="applyData.changeMeasure.measureDept" :disabled="readOnly" class="editInput"/></td>
        <td>实施责任人</td>
        <td colspan="2"><input v-model="applyData.changeMeasure.measureResponsible" :disabled="readOnly" class="editInput"/></td>
      </tr>

      <tr>
        <td>实施结果</td>
        <td colspan="2"><input v-model="applyData.changeMeasure.measureResult" :disabled="readOnly" class="editInput"/></td>
        <td>实施时间</td>
        <td colspan="2"><input v-model="applyData.changeMeasure.year" :disabled="readOnly" class="editInput" style="width: 50px"/>年 <input v-model="applyData.changeMeasure.month" :disabled="readOnly" class="editInput" style="width: 30px"/>月<input v-model="applyData.changeMeasure.day" :disabled="readOnly" class="editInput" style="width: 30px"/>日</td>
      </tr>

      <tr>
        <td rowspan="3">变更验收</td>
        <td>验收部门</td>
        <td><input v-model="applyData.changeCheck.checkDept" :disabled="readOnly" class="editInput"/></td>
        <td>组织人</td>
        <td><input v-model="applyData.changeCheck.organizer" :disabled="readOnly" class="editInput"/></td>
        <td>验收日期</td>
        <td><input v-model="applyData.changeCheck.year" :disabled="readOnly" class="editInput" style="width: 40px"/>年 <input v-model="applyData.changeCheck.month" :disabled="readOnly" class="editInput" style="width: 20px"/>月<input v-model="applyData.changeCheck.day" :disabled="readOnly" class="editInput" style="width: 20px"/>日</td>
      </tr>

      <tr>
        <td>验收结论</td>
        <td colspan="5"><input v-model="applyData.changeCheck.checkResult" :disabled="readOnly" class="editInput"/></td>
      </tr>

      <tr>
        <td>验收人员签名</td>
        <td colspan="5"><input v-model="applyData.changeCheck.checkPersonSign" :disabled="readOnly" class="editInput"/></td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "apply-table",
    props:{
        applyData:{
          type: Object,
          default: () => {
            return {
              changeUnit:"",
              changeProjectName:"",
              changeType:{
                technology: false,
                deviceMaterial: false,
                person: false,
                manager: false,
                other: false,
                otherDetail: ""
              },
              applyDept: "",
              apply: "",
              applyDate: "",
              approval:{
                changeReason: "",
                changeContent: "",
                dangerous: "",
                event: "",
                result: "",
                dangerousLevel: "",
                measure: "",
                operator: "",
                analyse: {
                  sign: "",
                  year: "",
                  month: "",
                  day: ""
                },
                applyDeptSuggstion: {
                  sign: "",
                  year: "",
                  month: "",
                  day: ""
                }
              },
              approver: {
                masterSuggstion: {
                  device: "",
                  produce: "",
                  safe: "",
                  year: "",
                  month: "",
                  day: ""
                },
                cantonalLeaders: {
                  suggstion: "",
                  sign: "",
                  year: "",
                  month: "",
                  day: ""
                }
              },
              changeMeasure: {
                measureDept: "",
                measureResponsible: "",
                measureResult: "",
                year: "",
                month: "",
                day: ""
              },
              changeCheck: {
                checkDept: "",
                organizer: "",
                year: "",
                month: "",
                day: "",
                checkResult: "",
                checkPersonSign: ""
              }
            };
          }
        },
        readOnly:{
          type: Boolean,
          default: false
        }
    },

  }
</script>

<style scoped lang="scss">
  table{
    border-collapse: collapse;
    table-layout: fixed;
    text-align: center;
    width: 100%;
  }
  table td, table th{
    border: 1px solid;
    height: 30px;
  }

  .editInput{
    border: none;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .editInput:focus{
    outline: none;
  }

  .editLine{
    border-bottom: 1px solid;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: center;
  }

  .editLine:focus{
    outline: none;
  }


  textarea{
    height: 100%;
    width: 100%;
    border: none;
    resize:none;
  }

  textarea:focus{
    outline: none;
  }

  .applyTable{
    height: 400px;
    overflow-y: scroll;
  }

  .applyTable::-webkit-scrollbar {
    width: 4px;
  }
  .applyTable::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
  }
  .applyTable::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }

</style>
