<template>
  <div v-loading="loading">
    <div style="padding: 0 20px;">
      <div class="info-content" v-html="crcMessageInfo.TalkContent" />
    </div>
    <div>
      <div style="padding: 10px;background: #f3f3f3;border-radius: 10px;margin-top: 10px">
        <div style="display:flex;margin-bottom: 10px;justify-content: space-between;align-items: center">
          <div>
            <!-- 请准确核实后录入当前访视的实际影像检查记录： -->
            {{ $t('trials:consistencyCheck:title:message20') }}
          </div>
          <!-- 添加 -->
          <el-button type="primary" size="mini" @click="addMsg">{{ $t('trials:consistencyCheck:title:add') }}</el-button>
        </div>
        <el-table
          :data="msgList"
        >
          <el-table-column type="index" width="40" />
          <!-- 检查日期 -->
          <el-table-column
            prop=""
            :label="$t('trials:consistencyCheck:title:studyDate')"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.StudyDate }}
            </template>
          </el-table-column>
          <!-- 检查类型 -->
          <el-table-column
            prop=""
            :label="$t('trials:consistencyCheck:title:studyModality')"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.Modality }}
            </template>
          </el-table-column>
          <!-- 已提交 -->
          <el-table-column
            prop=""
            :label="$t('trials:consistencyCheck:title:submitted')"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ $fd('YesOrNo', scope.row.IsJoin) }}
            </template>
          </el-table-column>
          <!-- 实际存在 -->
          <el-table-column
            prop=""
            :label="$t('trials:consistencyCheck:title:existed')"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.IsCheck"
                :disabled="!scope.row.IsJoin"
                @change="compareStudy"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            width="100px"
            :label="$t('common:action:action')"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- 删除 -->
              <el-button
                :disabled="scope.row.IsJoin"
                size="small"
                type="text"
                @click="moveMsg(scope.$index)"
              >
                {{ $t('trials:consistencyCheck:title:delete') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form
          ref="revenusForm"
          size="small"
          label-width="400px"
          :label-position="'top'"
          :rules="rules"
          :model="form"
        >
          <!-- IRC与实际情况影像检查不一致的原因为： -->
          <el-form-item v-if="isLackOf" :label="$t('trials:consistencyCheck:title:title1')" prop="reason">
            <el-checkbox-group v-model="form.reason" 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>
    <!-- 添加检查 -->
    <el-dialog
      v-if="studyVisible"
      v-dialogDrag
      :visible.sync="studyVisible"
      :close-on-click-modal="false"
      append-to-body
      custom-class="base-dialog-wrapper"
      :width="'500px'"
      :title="$t('trials:consistencyCheck:title:addStudy')"
    >
      <el-form>
        <div class="base-dialog-body">
          <!-- 检查日期 -->
          <el-form-item label-width="80px" :label="$t('trials:consistencyCheck:title:studyDate')">
            <el-date-picker
              v-model="typeInfo.StudyDate"
              style="width: 100%"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <!-- 检查类型 -->
          <el-form-item label-width="80px" :label="$t('trials:consistencyCheck:title:studyModality')">
            <el-select
              v-model="typeInfo.Modality"
              style="width: 100%"
            >
              <el-option v-for="item of $d.Modality" :label="item.raw.Value" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
          <el-form-item style="text-align:right;">
            <el-button size="small" type="primary" @click="handleCancel"> {{ $t('common:button:cancel') }}</el-button>
            <el-button size="small" type="primary" @click="handleSave">
              {{ $t('common:button:save') }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'CrcSendMessage',
  props: {
    crcMessageInfo: {
      type: Object,
      default() {
        return {
          TalkContent: null
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      msgList: [],
      studyVisible: false,
      typeInfo: {
        StudyDate: null,
        Modality: null,
        IsJoin: false,
        IsCheck: true
      },
      isLackOf: false,
      EDCList: [],
      IRCList: [],
      form: {
        reason: []
      },
      rules: {
        reason: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
      }
    }
  },
  mounted() {
    this.crcMessageInfo.ParamInfoList.forEach(v => {
      this.msgList.push({ ...v, IsJoin: true, Ischeck: false })
    })
    this.compareStudy()
  },
  methods: {
    compareStudy() {
      var isLackOf = false
      this.IRCList = []
      this.msgList.forEach(v => {
        if (v.IsJoin !== v.IsCheck) {
          isLackOf = true
          this.IRCList.push(v)
        }
      })
      this.isLackOf = isLackOf
    },
    handleCancel() {
      this.studyVisible = false
      this.typeInfo = {
        StudyDate: null,
        Modality: null
      }
    },
    handleSave() {
      if (!this.typeInfo.StudyDate || !this.typeInfo.Modality) {
        this.$message.error(this.$t('trials:consistencyCheck:title:title2'))// '请选择检查日期和检查类型'
        return
      }
      this.msgList.push({ ...this.typeInfo })
      this.compareStudy()
      this.studyVisible = false
      this.typeInfo = {
        StudyDate: null,
        Modality: null,
        IsJoin: false,
        IsCheck: true
      }
    },
    closeLoading() {
      this.loading = false
    },
    addMsg() {
      this.studyVisible = true
    },
    moveMsg(index) {
      // '确定删除该条检查记录？'
      this.$confirm(this.$t('trials:consistencyCheck:title:title3')).then(res => {
        this.msgList.splice(index, 1)
        this.compareStudy()
      })
    },
    handleReply() {
      if (this.msgList.length === 0) {
        // '请录入真实的检查情况'
        this.$message.error(this.$t('trials:consistencyCheck:title:title4'))
        return
      }
      this.$refs.revenusForm.validate((valid) => {
        if (!valid) return
        var TalkContent = ''
        // '经核实，该受试者当前访视的实际影像检查如下：<br>'
        TalkContent += `${this.$t('trials:consistencyCheck:title:title5')}<br>`
        this.msgList.forEach((v, i) => {
          // `${i + 1}.${v.StudyDate}的${v.Modality}影像检查<br>`
          let msg = this.$t('trials:consistencyCheck:title:title6').replace('yyyy', v.StudyDate)
          msg = msg.replace('xxx', v.Modality)
          TalkContent += `${i + 1}. ${msg}<br>`
        })
        if (this.isLackOf) {
          TalkContent += '<br>'
          // 'IRC与实际情况不一致影像检查如下：<br>'
          TalkContent += `${this.$t('trials:consistencyCheck:title:title7')}<br>`
          this.IRCList.forEach((v, i) => {
            let msg = this.$t('trials:consistencyCheck:title:title6').replace('yyyy', v.StudyDate)
            msg = msg.replace('xxx', v.Modality)
            TalkContent += `${i + 1}.${msg}（${v.IsJoin && !v.IsCheck ? this.$t('trials:consistencyCheck:title:title8') : this.$t('trials:consistencyCheck:title:title9')}）<br>`
          })
          if (this.form.reason.length > 0) {
            TalkContent += '<br>'
            // 'IRC与实际情况影像检查不一致的原因为：<br>'
            TalkContent += `${this.$t('trials:consistencyCheck:title:title10')}<br>`

            this.form.reason.forEach((v, i) => {
              TalkContent += `${i + 1}.${v}<br>`
            })
          }
        } else {
          // `<br>IRC与实际情况影像检查一致`
          TalkContent += `<br>${this.$t('trials:consistencyCheck:title:title11')}`
        }
        console.log(TalkContent)
        this.$emit('sendMessage', TalkContent, this.closeLoading)
      })
    }
  }
}
</script>

<style scoped>
.function{
  margin-top: 10px;
  text-align: right;
}
>>>.el-form--label-top .el-form-item__label{
  padding-bottom: 0;
  padding-top: 20px;
}
</style>
