<template>
  <div class="approvalCheckDialog">
    <el-dialog 
      :title="checkId[2]"
      :visible.sync="dialogFormVisible" 
      :before-close="cancelRegister"
      top="5%"
      width="600px">

      <el-form :model="data" :inline="true">
        <el-form-item 
          v-for="item in dataFrom" 
          :label="item.label" 
          :key="item.key"
          :prop="item.key"
          :rules="item.rules">

          <el-input v-if="item.key === 'applystatus'" v-bind:value="data[item.key] === '1' ? '审批通过': data[item.key] === '-1' ? '审批不通过' : '未审批'" disabled></el-input>
          <el-input v-else v-bind:value="data[item.key]" disabled></el-input>          
        </el-form-item>
      </el-form>

      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRegister">取 消</el-button>
        <el-button type="primary" @click="dialogSure">确 定</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
  import Api from '@/api/index.js'

  export default { 
    props: { 
      checkId: {
        type: Array,
        default: () => []
      }
    },
    data () { 
      return { 
        isLoading: false,
        data: { 

        },
        dataFrom: [{
          label: '申请者',
          key: 'applypeoplename',
          value: ''
        }, {
          label: '应用服务名',
          key: 'applyname',
          value: ''
        }, {
          label: '应用服务地址',
          key: 'applySysUrl',
          value: ''
        }, {
          label: '申请时间',
          key: 'applytime',
          value: ''
        }, {
          label: '申请原因',
          key: 'applyreason',
          value: ''
        }, {
          label: '审批状态',
          key: 'applystatus',
          value: ''
        }, {
          label: '审批人',
          key: 'auditpeoplename',
          value: ''
        }, {
          label: '审批时间',
          key: 'audittime',
          value: ''
        }, {
          label: '审批意见',
          key: 'auditopinion',
          value: ''
        }, {
          label: '并发访问次数限制',
          key: 'concurrentlimit',
          value: ''
        }],
        dialogFormVisible: true
      }
    },
    mounted () {
      this.checkMoreInformation()
    },
    methods: { 
      /* init(){ 
        let data = {}
        this.dataFrom.forEach(item => {
          data[item.key] = item.value
        })
        this.data = data
      }, */
      // 查看详细信息
      checkMoreInformation () { 
        Api.getMoreInformation(this.checkId[0], this.checkId[1])
        .then(data => {
          this.data = data.data
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      },
      // 取消
      cancelRegister () { 
        this.$emit('dialog-cancel')
      }
    } 
  }
</script>

<style lang="scss">
  .approvalCheckDialog{ 
    .el-form-item{ 
      margin-bottom: 10px;
      //display: block;
      width: 100%;
    }
    .el-form-item__label{ 
      width: 125px;
    }
    .dialog-content{ 
      height: 450px;
    } 
    .el-form-item__content{ 
      width: 400px;
    }

    .el-input.is-disabled {
      .el-input__inner {
        color: #606266;
      }
    }
    .el-textarea.is-disabled {
      .el-textarea__inner {
        color: #606266;
      }
    }
  }
</style>
