<template>
  <div class="equipment-wrapper">
    <div class="header-wrapper">
      <!-- 新增 -->
      <el-button
        v-if="state === 0 && userTypeEnumInt === 0 && !isHistory"
        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
        prop="EquipmentType"
        :label="$t('trials:equiptResearch:form:equipment')"
        width="180"
      />
      <!-- 扫描参数 -->
      <el-table-column
        prop="Parameters"
        :label="$t('trials:equiptResearch:form:param')"
        width="180"
      />
      <!-- 扫描仪器制造商名称 -->
      <el-table-column
        prop="ManufacturerName"
        :label="$t('trials:equiptResearch:form:manufacturer')"
      />
      <!-- 扫描仪型号 -->
      <el-table-column
        prop="ScannerType"
        :label="$t('trials:equiptResearch:form:model')"
      />
      <!-- 备注 -->
      <el-table-column
        prop="Note"
        :label="$t('trials:equiptResearch:form:precautions')"
      />
      <el-table-column
        v-if="state === 0 && userTypeEnumInt === 0 && !isHistory"
        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="600px"
      custom-class="base-dialog-wrapper"
      :append-to-body="userTypeEnumInt !== 0"
    >
      <EquipmentForm :data="rowData" :trial-site-survey-equipment-type="trialSiteSurveyEquipmentType" @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
    }
  },
  data() {
    return {
      list: [],
      editVisible: false,
      title: '',
      loading: false,
      rowData: {},
      userTypeEnumInt: 0,
      state: null,
      trialSiteSurveyId: '',
      trialId: ''
    }
  },
  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) {
      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>
