<template>
  <BaseContainer>
    <el-tabs v-model="TrialReadingCriterionId" type="border-card">
      <el-tab-pane
        v-for="criterion of trialCriterionList"
        :key="criterion.TrialReadingCriterionId"
        :label="criterion.TrialReadingCriterionName"
        :name="criterion.TrialReadingCriterionId"
      >
        <div
          v-if="TrialReadingCriterionId === criterion.TrialReadingCriterionId"
        >
          <div slot="search-container">
            <el-form :inline="true">
              <el-form-item :label="$t('trials:subject:table:site')">
                <el-select
                  v-model="searchData.TrialSiteCode"
                  clearable
                  filterable
                  style="width: 130px"
                >
                  <el-option
                    v-for="(item, index) of siteOptions"
                    :key="index"
                    :label="item.TrialSiteCode"
                    :value="item.TrialSiteCode"
                  />
                </el-select>
              </el-form-item>
              <!-- Subject ID -->
              <el-form-item :label="$t('trials:subject:table:subjectId')">
                <el-input
                  v-model="searchData.SubjectCode"
                  style="width: 130px"
                />
              </el-form-item>
              <!-- Status -->
              <el-form-item :label="$t('trials:subject:table:status')">
                <el-select
                  v-model="searchData.SubjectStatus"
                  clearable
                  style="width: 130px"
                >
                  <el-option
                    v-for="item of $d.Subject_Visit_Status"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                :label="$t('trials:trials-panel:form:ParticipateEvaluation')"
              >
                <el-select
                  v-model="searchData.IsJoinEvaluation"
                  clearable
                  style="width: 130px"
                >
                  <el-option
                    v-for="item of $d.YesOrNo"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('trials:subject:form:ImageSelect')">
                <el-select
                  v-model="searchData.IsImageFiltering"
                  clearable
                  style="width: 130px"
                >
                  <el-option
                    v-for="item of $d.YesOrNo"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleSearch"
                >
                  {{ $t('common:button:search') }}
                </el-button>
                <el-button
                  type="primary"
                  icon="el-icon-refresh-left"
                  @click="handleReset"
                >
                  {{ $t('common:button:reset') }}
                </el-button>
                <el-button type="primary" @click="handleSelect()">
                  {{ $t('trials:subject:action:BatchImageSelect') }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div slot="main-container">
            <el-table
              ref="myTable"
              v-adaptive="{ bottomOffset: 75 }"
              v-loading="loading"
              :data="list"
              stripe
              height="100"
              @sort-change="handleSortChange"
              @selection-change="handleSelectChange"
            >
              <el-table-column
                type="selection"
                width="50"
                :selectable="handleSelectTable"
              />
              <el-table-column type="index" width="40" />
              <!-- 中心编号 -->
              <el-table-column
                prop="TrialSiteCode"
                :label="$t('trials:readingPeriod:table:siteCode')"
                min-width="110"
                sortable="custom"
                show-overflow-tooltip
              />
              <!-- 受试者编号 -->
              <el-table-column
                prop="SubjectCode"
                :label="$t('trials:readingPeriod:table:subjectCode')"
                min-width="120"
                sortable="custom"
                show-overflow-tooltip
              />
              <el-table-column
                prop="SubjectStatus"
                :label="$t('trials:subject:table:status')"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.SubjectStatus === 1" type="primary">{{
                    $fd('Subject_Visit_Status', scope.row.SubjectStatus)
                  }}</el-tag>
                  <el-tag v-if="scope.row.SubjectStatus === 2" type="danger">{{
                    $fd('Subject_Visit_Status', scope.row.SubjectStatus)
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                :prop="item.QuestionId"
                v-for="(item, index) of OtherInfo"
                :label="
                  $i18n.locale === 'zh'
                    ? item.QuestionName
                    : item.QuestionEnName
                "
                show-overflow-tooltip
                :key="item.QuestionId"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      getReadingEvaluationList(
                        item.QuestionId,
                        scope.row.ReadingEvaluationList
                      )
                    "
                    placement="top"
                  >
                    <span>{{
                      $fd(
                        scope.row.FinalEvaluationList[index]
                          .FinalTranslateDictionaryCode,
                        parseInt(scope.row.FinalEvaluationList[index].Answer)
                      )
                    }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <!-- 受试者编号 -->
              <el-table-column
                prop="IsJoinEvaluation"
                :label="$t('trials:trials-panel:table:ParticipateEvaluation')"
                min-width="120"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.IsJoinEvaluation" type="primary">{{
                    $fd('YesOrNo', scope.row.IsJoinEvaluation)
                  }}</el-tag>
                  <el-tag
                    v-if="scope.row.IsJoinEvaluation === false"
                    type="danger"
                    >{{ $fd('YesOrNo', scope.row.IsJoinEvaluation) }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="IsImageFiltering"
                :label="$t('trials:subject:table:ImageSelect')"
                min-width="120"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.IsImageFiltering" type="primary">{{
                    $fd('YesOrNo', scope.row.IsImageFiltering)
                  }}</el-tag>
                  <el-tag
                    v-if="scope.row.IsImageFiltering === false"
                    type="danger"
                    >{{ $fd('YesOrNo', scope.row.IsImageFiltering) }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('common:action:action')"
                width="120"
                v-if="
                  hasPermi(['trials:trials-panel:subject:brainMetastasis:Edit'])
                "
              >
                <template slot-scope="scope">
                  <!-- 选择受试者 -->
                  <el-button
                    circle
                    :title="$t('trials:subject:action:Select')"
                    :disabled="scope.row.IsJoinEvaluation"
                    icon="el-icon-s-custom"
                    @click="handleSelect(scope.row)"
                  />
                  <!-- 选择受试者 -->
                  <el-button
                    circle
                    :disabled="!scope.row.IsJoinEvaluation"
                    :title="$t('trials:subject:action:ImageSelect')"
                    icon="el-icon-picture-outline"
                    @click="handleSelectSubjectImage(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <pagination
              class="page"
              :total="total"
              :page.sync="searchData.PageIndex"
              :limit.sync="searchData.PageSize"
              @pagination="getList"
            />
            <!-- 添加受试者阅片期 -->
            <el-dialog
              v-if="selectSubject.visible"
              :title="selectSubject.title"
              :visible.sync="selectSubject.visible"
              width="500px"
              custom-class="base-dialog-wrapper"
              :close-on-click-modal="false"
            >
              <select-subject
                v-if="!isBatch"
                :data="rowData"
                @close="selectSubject.visible = false"
                @getList="getList"
              ></select-subject>
              <batch-select-subject
                v-else
                :select-list="selectList"
                @close="selectSubject.visible = false"
                @getList="getList"
              ></batch-select-subject>
            </el-dialog>
            <el-dialog
              v-if="selectSubjectImage.visible"
              :title="selectSubjectImage.title"
              :visible.sync="selectSubjectImage.visible"
              width="1000px"
              custom-class="base-dialog-wrapper"
              :close-on-click-modal="false"
            >
              <select-subject-image
                :data="rowData"
                @close="selectSubjectImage.visible = false"
                @getList="getList"
              ></select-subject-image>
            </el-dialog>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </BaseContainer>
</template>
<script>
import { getTrialCriterionList2, getTrialSiteSelect } from '@/api/trials'
import {
  getSubjectCriteriaEvaluationList,
  batchAddOrUpdateSubjectCriteriaEvaluation,
  getSubjectCriteriaEvaluationVisitFilterList,
  getHaveGeneratedTaskList,
  batchGenerateTask,
  getVisitStudyAndSeriesList,
  batchAddSubjectCriteriaEvaluationVisitStudyFilter,
} from '@/api/trials/subject'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import batchSelectSubject from './components/batchSelectSubject'
import selectSubject from './components/selectSubject'
import selectSubjectImage from './components/selectSubjectImage'
const searchDataDefault = () => {
  return {
    SubjectCode: null,
    TrialSiteCode: null,
    SubjectStatus: null,
    IsImageFiltering: null,
    IsJoinEvaluation: null,
    Asc: true,
    SortField: null,
    PageIndex: 1,
    PageSize: 20,
  }
}
const MinPlanCount = 10
export default {
  components: {
    BaseContainer,
    Pagination,
    selectSubject,
    batchSelectSubject,
    selectSubjectImage,
  },
  data() {
    return {
      OtherInfo: [],
      loading: false,
      searchData: searchDataDefault(),
      TrialReadingCriterionId: '0',
      trialCriterionList: [],
      siteOptions: [],
      trialId: this.$route.query.trialId,
      list: [],
      selectSubject: {
        visible: false,
        title: this.$t('trials:subject:dialogTitle:SubjectsSelect'),
      },
      selectList: [],
      total: 0,
      rowData: null,
      isBatch: false,
      selectSubjectImage: {
        visible: false,
        title: this.$t('trials:subject:action:ImageSelect'),
      },
    }
  },
  name: 'TrialsNotice',
  watch: {
    TrialReadingCriterionId(v) {
      if (v) {
        this.getList()
      }
    },
  },
  mounted() {
    this.getSite()
    this.getTrialCriterionList()
  },
  methods: {
    handleSelectTable(row) {
      return !row.IsJoinEvaluation
    },
    handleSelectSubjectImage(row) {
      this.rowData = { ...row }
      this.selectSubjectImage.visible = true
      this.selectSubjectImage.title = `${this.$t(
        'trials:subject:action:ImageSelect'
      )}(${row.SubjectCode})`
    },
    handleSelectChange(e) {
      this.selectList = e
    },
    handleSelect(row) {
      this.isBatch = true
      if (row) {
        this.rowData = { ...row }
        this.isBatch = false
      } else {
        if (this.selectList.length === 0) {
          this.$alert(this.$t('trials:subject:message:SubjectsSelect'))
          return
        }
      }
      this.selectSubject.visible = true
    },
    // 排序
    handleSortChange(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.searchData.PageIndex = 1
      this.getList()
    },
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    getReadingEvaluationList(QuestionId, list) {
      var arr = list.filter((v) => {
        return v.QuestionId === QuestionId
      })
      var text = ''
      arr.forEach((v) => {
        text +=
          ' ' +
          this.$fd('ArmEnum', v.ArmEnum) +
          ':' +
          this.$fd(v.FinalTranslateDictionaryCode, parseInt(v.Answer))
      })
      return text
    },
    getList() {
      getSubjectCriteriaEvaluationList({
        ...this.searchData,
        TrialId: this.trialId,
        TrialReadingCriterionId: this.TrialReadingCriterionId,
      }).then((res) => {
        this.list = res.Result.CurrentPageData
        this.OtherInfo = res.OtherInfo
        this.total = res.Result.TotalCount
      })
    },
    getTrialCriterionList() {
      getTrialCriterionList2(this.trialId, false)
        .then((res) => {
          this.trialCriterionList = res.Result
          this.TrialReadingCriterionId =
            this.trialCriterionList[0].TrialReadingCriterionId
        })
        .catch(() => {})
    },
    // 获取site下拉框数据
    getSite() {
      getTrialSiteSelect(this.trialId).then((res) => {
        this.siteOptions = res.Result
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .hidden-row {
  display: none;
}
::v-deep .el-dialog__body {
  padding: 0px 20px;
}
::v-deep .el-dialog__header {
  padding: 10px 20px;
}

::v-deep .el-tag--danger.el-tag--dark {
  // background-color: #f56c6c!important;
  border-color: none !important;
  // color: #fff!important;
}
</style>
