<template>
  <div class="equipment-wrapper">
    <div class="header-wrapper">
      <!-- 新增 -->
      <el-button
        v-if="((state === 0 && userTypeEnumInt === 0 && !isHistory) || isPM) && EquipmentControlFieldList.length > 0"
        size="small" type="primary" @click="handleAdd">
        {{ $t('common:button:add') }}
      </el-button>
    </div>
    <el-table v-loading="loading" :data="list" border style="width: 100%">
      <!-- 扫描设备 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('EquipmentTypeEnum')" prop="EquipmentTypeEnum"
        :label="$t('trials:equiptResearch:form:equipment')" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.OtherEquipmentType ? scope.row.OtherEquipmentType :
            $fd('SiteSurvey_ScanEquipmentType', scope.row.EquipmentTypeEnum) }}
        </template>
      </el-table-column>
      <!-- 扫描参数 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('Parameters')" prop="Parameters"
        :label="$t('trials:equiptResearch:form:param')" min-width="100" show-overflow-tooltip />
      <!-- 扫描仪器制造商名称 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('ManufacturerType')" min-width="120"
        prop="ManufacturerType" :label="$t('trials:equiptResearch:form:manufacturer')" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.ManufacturerName ? scope.row.ManufacturerName : $fd('ManufacturerType',
            scope.row.ManufacturerType) }}
        </template>
      </el-table-column>
      <!-- 扫描仪型号 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('ScannerType')" min-width="120" prop="ScannerType"
        :label="$t('trials:equiptResearch:form:model')" show-overflow-tooltip />
      <!-- 磁场强度 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('MagneticFieldStrengthType')" min-width="120"
        prop="MagneticFieldStrengthType" :label="$t('trials:equiptResearch:form:MagneticFieldStrengthType')"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $fd('MagneticFieldStrengthType', scope.row.MagneticFieldStrengthType) }}
        </template>
      </el-table-column>
      <!-- 体部线圈通道数 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('BodyCoilChannelCount')" min-width="120"
        prop="BodyCoilChannelCount" :label="$t('trials:equiptResearch:form:BodyCoilChannelCount')"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $fd('BodyCoilChannelCount', scope.row.BodyCoilChannelCount) }}
        </template>
      </el-table-column>
      <!-- 是否具备专用的PDFF脂肪定量序列（CSE-MRI序列） -->
      <el-table-column v-if="EquipmentControlFieldList.includes('HasDedicatedPdfFatQuantificationSequence')"
        min-width="120" prop="HasDedicatedPdfFatQuantificationSequence"
        :label="$t('trials:equiptResearch:form:HasDedicatedPdfFatQuantificationSequence')" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $fd('YesOrNo', scope.row.HasDedicatedPdfFatQuantificationSequence) }}
        </template>
      </el-table-column>
      <!-- 专用的PDFF脂肪定量序列类型 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('PdfFatQuantificationSequenceType')" min-width="120"
        prop="PdfFatQuantificationSequenceType"
        :label="$t('trials:equiptResearch:form:PdfFatQuantificationSequenceType')" show-overflow-tooltip><template
          slot-scope="scope">
          {{ scope.row.OtherSequenceSpecification ? scope.row.OtherSequenceSpecification :
            $fd('PdfFatQuantificationSequenceType', scope.row.PdfFatQuantificationSequenceType) }}
        </template>
      </el-table-column>
      <!-- 是否包含 T2/R2 校正（用于铁沉积校正） -->
      <el-table-column v-if="EquipmentControlFieldList.includes('HasT2R2Correction')" min-width="120"
        prop="HasT2R2Correction" :label="$t('trials:equiptResearch:form:HasT2R2Correction')" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $fd('YesOrNo', scope.row.HasT2R2Correction) }}
        </template>
      </el-table-column>
      <!-- 是否可完整导出 PDFF 参数图及全部原始 DICOM 数据 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('CanFullyExportPdfParameterMapsAndRawDicom')"
        prop="CanFullyExportPdfParameterMapsAndRawDicom"
        :label="$t('trials:equiptResearch:form:CanFullyExportPdfParameterMapsAndRawDicom')" min-width="120"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $fd('YesOrNo', scope.row.CanFullyExportPdfParameterMapsAndRawDicom) }}
        </template>
      </el-table-column>
      <!-- 备注 -->
      <el-table-column v-if="EquipmentControlFieldList.includes('Note')" min-width="120" prop="Note"
        :label="$t('trials:equiptResearch:form:precautions')" show-overflow-tooltip />
      <el-table-column v-if="(state === 0 && userTypeEnumInt === 0 && !isHistory) || isPM" fixed="right"
        :label="$t('common:action:action')" width="100">
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-button type="text" size="small" @click="handleEdit(scope.row)">
            {{ $t('common:button:edit') }}
          </el-button>
          <!-- 删除 -->
          <el-button type="text" size="small" @click="handleDelete(scope.row)">
            {{ $t('common:button:delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑人员信息 -->
    <el-dialog v-if="editVisible" :visible.sync="editVisible" :close-on-click-modal="false" :title="title" width="800px"
      custom-class="base-dialog-wrapper" :append-to-body="userTypeEnumInt !== 0">
      <EquipmentForm :data="rowData" :trial-site-survey-equipment-type="trialSiteSurveyEquipmentType"
        :EquipmentControlFieldList="EquipmentControlFieldList" @getList="getList" @close="closeDialog" />
    </el-dialog>

  </div>
</template>
<script>
import { getTrialSiteEquipmentSurveyList, deleteTrialSiteEquipmentSurvey } from '@/api/research'
import EquipmentForm from './EquipmentForm'
import { getQueryString } from '@/utils/history.js'
export default {
  name: 'ResearchEquipmentList',
  components: { EquipmentForm },
  props: {
    trialSiteSurveyEquipmentType: {
      type: String,
      default: ''
    },
    isHistory: {
      type: Boolean,
      default: false
    },
    isPM: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      list: [],
      editVisible: false,
      title: '',
      loading: false,
      rowData: {},
      userTypeEnumInt: 0,
      state: null,
      trialSiteSurveyId: '',
      trialId: '',
      EquipmentControlFieldList: []
    }
  },
  mounted() {
    if (zzSessionStorage.getItem('userTypeEnumInt')) {
      this.userTypeEnumInt = zzSessionStorage.getItem('userTypeEnumInt') * 1
    }
    this.trialSiteSurveyId = getQueryString('trialSiteSurveyId')
    this.trialId = getQueryString('trialId')
  },
  methods: {
    // 获取列表数据
    getList() {
      this.loading = true
      getTrialSiteEquipmentSurveyList(this.trialSiteSurveyId).then(res => {
        this.loading = false
        this.list = res.Result
      }).catch(() => { this.loading = false })
    },
    // 打开新窗口
    handleAdd() {
      this.rowData = {}
      this.title = this.$t('trials:equiptResearch:dialogTitle:add')
      this.editVisible = true
    },
    // 打开编辑窗口
    handleEdit(row) {
      this.rowData = { ...row }
      this.title = this.$t('trials:equiptResearch:dialogTitle:edit')
      this.editVisible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm(this.$t('trials:equiptResearch:message:confirmDel'), {
        type: 'warning',
        distinguishCancelAndClose: true
      }).then(() => {
        this.loading = true
        deleteTrialSiteEquipmentSurvey(row.Id, this.trialId).then((res) => {
          this.loading = false
          if (res.IsSuccess) {
            this.list.splice(this.list.findIndex((item) => item.Id === row.Id), 1)
            this.$message.success(this.$t('trials:equiptResearch:message:delSuccessfully'))
          }
        }).catch(() => { this.loading = false })
      }).catch(() => { })
    },
    initList(TrialSiteEquipmentSurveyList, trialSiteSurvey, EquipmentControlFieldList) {
      this.EquipmentControlFieldList = []
      EquipmentControlFieldList.forEach(item => {
        this.EquipmentControlFieldList.push(item.FiledName)
      })
      this.list = TrialSiteEquipmentSurveyList
      this.state = trialSiteSurvey.State
      this.$forceUpdate()
    },
    // 关闭窗口
    closeDialog() {
      this.editVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.equipment-wrapper {
  .header-wrapper {
    text-align: right;
    margin-bottom: 10px;
  }
}
</style>
