<template>
  <div v-loading="loading">
    <div style="padding: 0 20px;">
      <!-- 经系统核实 -->
      <div style="font-size: 16px;margin-bottom: 10px;">{{ $t('trials:consistencyCheck:title:message1') }}</div>
      <!-- 该受试者本访视在IRC中已提交的影像检查情况如下，如果下列影像中存在多余影像，请勾选： -->
      <div style="font-size: 16px;margin-bottom: 10px;">{{ $t('trials:consistencyCheck:title:message2') }}</div>
      <div style="padding-left: 10px;">
        <el-checkbox-group v-model="checkedOne" style="display: flex;flex-direction: column">
          <el-checkbox v-for="(item, index) of crcMessageInfo.arrayOnelist" style="margin-bottom: 10px" :label="index"><span v-html="item">{{ item }}</span></el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 20px;color:#F56C6C">
        <div v-if="checkedOne.length > 0" style="margin-bottom: 10px;">
          <!-- 您确认该访视上传了多余的影像检查，请说明原因。如需要删除影像，请申请回退，谢谢配合！ -->
          {{ $t('trials:consistencyCheck:title:message3') }}
        </div>
      </div>
      <div v-if="checkedOne.length > 0">
        <el-form>
          <!-- IRC多余影像原因 -->
          <el-form-item label-width="130px" :label="$t('trials:consistencyCheck:title:message4')">
            <el-input :maxLength="$inputMax"
              v-model="reasonOne"
              type="textarea"
              :rows="2"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>
      <div v-if="crcMessageInfo.arrayTwolist.length > 0" style="font-size: 16px;margin-bottom: 10px;margin-top: 20px;">
        <!-- IRC和EDC中不一致的影像检查如下，如果情况属实，请勾选： -->
        {{ $t('trials:consistencyCheck:title:message5') }}
      </div>
      <div v-else style="font-size: 16px;margin-bottom: 10px;margin-top: 20px;">
        <!-- IRC和EDC中不一致的影像检查如下，如果情况属实，请勾选：:无 -->
        {{ $t('trials:consistencyCheck:title:message6') }}
      </div>
      <div style="padding-left: 10px;">
        <el-checkbox-group v-model="checkedTwo" style="display: flex;flex-direction: column">
          <el-checkbox v-for="(item, index) of crcMessageInfo.arrayTwolist" style="margin-bottom: 10px" :label="index"><span v-html="item">{{ item }}</span></el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="margin-top: 20px;color:#F56C6C">
        <div v-if="checkedTwo.length > 0" style="margin-bottom: 10px;">
          <!-- 您确认当前访视有遗漏影像检查，请选择原因。如需要补充上传影像，请申请回退，谢谢配合！ -->
          {{ $t('trials:consistencyCheck:title:message7') }}
        </div>
      </div>
      <div v-if="checkedTwo.length > 0">
        <el-form>
          <!-- IRC缺失影像原因 -->
          <el-form-item label-width="130px" :label="$t('trials:consistencyCheck:title:message8')">
            <el-checkbox-group v-model="reasonTwo" style="display: flex;flex-direction: column">
              <el-checkbox style="display: block" label="EDC按疗效评估数据记录影像检查信息;">
                {{ $t('trials:consistencyCheck:title:message9') }}
              </el-checkbox>
              <el-checkbox style="display: block" label="EDC录入错误;">
                {{ $t('trials:consistencyCheck:title:message10') }}
              </el-checkbox>
              <el-checkbox style="display: block" label="IRC数据上传错误，申请回退并重新上传;">
                {{ $t('trials:consistencyCheck:title:message11') }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="function">
      <!-- 发送 -->
      <el-button
        type="primary"
        @click="handleReply"
      >
        {{ $t('trials:consistencyCheck:button:sendMessage') }}
      </el-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'CrcSendMessage',
  props: {
    crcMessageInfo: {
      type: Object,
      default() {
        return {
          arrayOnelist: [],
          arrayTwolist: []
        }
      }
    }
  },
  data() {
    return {
      checkedOne: [],
      checkedTwo: [],
      reasonTwo: [],
      reasonOne: null,
      loading: false
    }
  },
  mounted() {
    console.log(this.crcMessageInfo)
  },
  methods: {
    closeLoading() {
      this.loading = false
    },
    handleReply() {
      this.loading = true
      var TalkContent = ''
      // '经核实，该受试者本访视存在，并且已在IRC系统中已提交的影像检查如下：<br>'
      TalkContent += `${$t('trials:consistencyCheck:title:message12')}<br>`
      this.crcMessageInfo.arrayOnelist.forEach((v, i) => {
        if (this.checkedOne.indexOf(i) > -1) {
          // '无<br>'
          TalkContent += `${$t('trials:consistencyCheck:title:none')}<br>`
        } else {
          TalkContent += this.crcMessageInfo.arrayOnelist[i] + '<br>'
        }
      })
      // this.checkedOne.forEach(v => {
      //   console.log(v)
      // })
      console.log(TalkContent)
      TalkContent += '<br>'
      if (this.checkedTwo.length > 0) {
        // '本访视存在，但是在IRC和EDC中不一致的影像检查如下：<br>'
        TalkContent += `${$t(' trials:consistencyCheck:title:message13')}<br>`
        this.checkedTwo.forEach(v => {
          TalkContent += this.crcMessageInfo.arrayTwolist[v] + '<br>'
        })
        TalkContent += '<br>'
      } else {
        // '本访视存在，但是在IRC和EDC中不一致的影像检查如下：无<br><br>'
        TalkContent += `${$t(' trials:consistencyCheck:title:message14')}<br><br>`
      }
      // '问题原因如下：<br>'
      TalkContent += `${$t(' trials:consistencyCheck:title:message15')}<br>`
      if (this.checkedOne.length > 0) {
        // '1.IRC多余影像原因：'
        TalkContent += `${$t(' trials:consistencyCheck:title:message16')}`
        TalkContent += this.reasonOne
        TalkContent += '<br>'
        if (!this.reasonOne) {
          this.loading = false
          this.$message.error(this.$t('trials:consistencyCheck:title:message17'))// '请填写IRC多余影像原因!'
          return
        }
      }
      if (this.checkedTwo.length > 0) {
        // 2.IRC缺失影像原因：
        TalkContent += `${$t(' trials:consistencyCheck:title:message18')}`
        this.reasonTwo.forEach(v => { TalkContent += v })
        if (!this.reasonTwo.length) {
          this.$message.error(this.$t('trials:consistencyCheck:title:message19'))// '请选择IRC缺失影像原因!'
          this.loading = false
          return
        }
      }
      // console.log(TalkContent)
      this.$emit('sendMessage', TalkContent, this.closeLoading)
    }
  }
}
</script>

<style scoped>
.function{
  margin-top: 10px;
  text-align: right;
}
</style>
