<template>
  <div v-loading="loading" class="ecrf-wrapper">
     <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
        评估说明
      </h4>
    <el-form
      ref="questions"
      size="small"
      :model="questionForm"
    >
      <el-form-item
        label="访视点备注" 
        prop="note"
        :rules="[
          { required: true,
            message:$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
        ]"
      >
        <el-input
          v-model="questionForm.note"
          :disabled="readingTaskState >= 2"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          maxlength="500"
        />
      </el-form-item>
      <el-form-item v-if="readingTaskState < 2">
        <div style="text-align:right">
          <el-button size="mini" @click="handleSave">{{ $t('common:button:save') }}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>

import { mapGetters } from 'vuex'

export default {
  name: 'ECRF',
  data() {
    return {
      loading: false,
      questionForm: {
        note: ''
      },
      readingTaskState: 1,
      isBaseLineTask: false,
      visitTaskId: ''
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.visitTaskId = this.$route.query.visitTaskId
  },
  beforeDestroy() {
  },
  methods: {
    handleSave() {
      this.$refs['questions'].validate((valid) => {
        if (!valid) return
        
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .ecrf-wrapper{

    ::v-deep .el-form-item__label{
      color: #c3c3c3;
      text-align: left;
    }
    ::v-deep .el-input__inner{
      background-color: transparent;
      color: #ddd;
      border: 1px solid #5e5e5e;
    }
    ::v-deep .el-textarea__inner{
      background-color: transparent;
      color: #ddd;
      border: 1px solid #5e5e5e;
    }
    ::v-deep .el-form-item{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    ::v-deep .el-form-item__content{
      flex: 1;
    }
    ::v-deep .el-button--mini, .el-button--mini.is-round {
    padding: 7px 10px;
  }
    .el-form-item__content
    .el-select{
      width: 100%;
    }
  }

  </style>

