<template>
  <BaseContainer>
    <!-- 搜索框 -->
    <template slot="search-container">
      <el-form :inline="true">
        <!-- Site -->
        <el-form-item label="host">
          <el-input v-model="searchData.host" style="width:130px;" />
        </el-form-item>
        <!-- Subject ID -->
        <el-form-item label="port">
          <el-input v-model="searchData.port" style="width:130px;" />
        </el-form-item>
        <!-- Status -->
        <el-form-item label="aet">
          <el-input v-model="searchData.aet" style="width:130px;" />
        </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-form-item>
      </el-form>
      <span style="margin-left:auto;">
        <el-button
            type="primary"
            icon="el-icon-plus"

            @click="handleAdd"
        >
          {{ $t('common:button:new') }}
        </el-button>
      </span>

    </template>

    <template slot="main-container">
      <!-- 受试者列表 -->
      <el-table
          ref="subjectList"
          v-loading="loading"
          v-adaptive="{bottomOffset:60}"
          :data="list"
          stripe
          height="100"
      >
        <el-table-column type="index" width="40" />
        <!-- Site -->
        <el-table-column
            prop="aet"
            label="AE Title"
            show-overflow-tooltip
            width="120"
        />
        <el-table-column
            prop="host"
            label="IP"
            show-overflow-tooltip
            width="120"
        />
        <el-table-column
            prop="port"
            label="Port"
            show-overflow-tooltip
            width="120"
        />
        <el-table-column
            prop="mode"
            label="Modality"
            show-overflow-tooltip
            width="120"
        />
        <el-table-column
            prop="description"
            label="Description"
            show-overflow-tooltip
            width="300"
        />
        <el-table-column
            :label="$t('common:action:action')"
            fixed="right"
        >
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
                circle
                :title="$t('trials:subject:action:edit')"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.row)"
            />
            <!-- 删除 -->
            <el-button
                circle
                :title="$t('trials:subject:action:delete')"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
    </template>

    <!-- 新增/编辑 -->
    <el-dialog
        v-if="editDialog.visible"
        :visible.sync="editDialog.visible"
        :close-on-click-modal="false"
        :title="editDialog.title"
        width="700px"
        custom-class="base-dialog-wrapper"
    >
      <SubjectsForm :data="rowData" :other-info="otherInfo" @close="closeEditDialog" @getList="getList" />
    </el-dialog>

    <!-- 修改受试者状态 -->
    <el-dialog
        v-if="statusVisible"
        :visible.sync="statusVisible"
        :close-on-click-modal="false"
        :title="$t('trials:subject:dialogTitle:editStatus')"
        width="700px"
        custom-class="base-dialog-wrapper"
    >
      <SubjectStatusForm :data="rowData" @closeDialog="closeStatusDialog" @getList="getList" />
    </el-dialog>
    <!-- 修改受试者状态 -->
    <el-dialog
        v-if="MessageVisible"
        :visible.sync="MessageVisible"
        :close-on-click-modal="false"
        :title="$t('trials:subject:title:sendReport').replace('xxx',rowData.Code)"
        width="720px"
        custom-class="base-dialog-wrapper"
    >
      <MessageTable :data="rowData" @closeDialog="closeStatusDialog" @getList="getList" />
    </el-dialog>
  </BaseContainer>
</template>
<script>
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import SubjectsForm from './components/SubjectsForm'
const searchDataDefault = () => {
  return {
    host: '',
    port: '',
    aet: '',
  }
}
export default {
  name: 'SubjectList',
  components: { BaseContainer, Pagination, SubjectsForm },
  data() {
    return {
      MessageVisible: false,
      model_cfg: { visible: false, showClose: true, width: '700px', title: '' },
      searchData: searchDataDefault(),
      loading: false,
      list: [],
      total: 0,
      siteOptions: [],
      visitPlanConfirmed: false,
      rowData: {},
      userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
      otherInfo: {},
      editDialog: { title: '', visible: false },
      statusVisible: false,
      trialId: '',
      hasCrcRoute: false,
      hasQCRoute: false
    }
  },
  watch: {
    list() {
      this.$nextTick(() => {
        this.$refs.subjectList.doLayout()
      })
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getParams(obj) {
      let result = ''
      let item
      for (item in obj) {
        if (obj[item] && String(obj[item])) {
          result += `&${item}=${obj[item]}`
        }
      }
      if (result) {
        result = '?' + result.slice(1)
      }
      return result
    },
    // 获取受试者列表
    getList() {
      this.loading = true
      this.searchData.trialId = this.$route.query.trialId
      this.$axios({
        method: 'get',
        url: process.env.VUE_APP_NODE_SERVER_PATH + 'pacs' + this.getParams(this.searchData),
      }).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.list = res.data.data
        }
        this.loading = false
      })
    },
    // 新增
    handleAdd() {
      this.rowData = {}
      this.editDialog.title = this.$t('trials:subject:dialogTitle:new')
      this.editDialog.visible = true
    },
    // 编辑
    handleEdit(row) {
      this.rowData = {...row}
      this.editDialog.title = this.$t('trials:subject:dialogTitle:edit')
      this.editDialog.visible = true
    },
    // 关闭弹窗
    closeEditDialog() {
      this.editDialog.visible = false
    },
    // 删除
    handleDelete(row) {
      this.$confirm('是否删除该工作站', {
        type: 'warning',
        distinguishCancelAndClose: true
      })
          .then(() => {
            this.loading = true
            this.$axios({
              method: 'delete',
              url: process.env.VUE_APP_NODE_SERVER_PATH + 'pacs',
              data: {
                pacs_id: row._id
              }
            }).then(res => {
              if (res.data.code !== 1) {
                this.$message.error(res.data.message)
              } else {
                this.$message.success('删除成功')
              }
              this.getList()
              this.loading = false
            })
          })
    },
    // 查询
    handleSearch() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
  }
}
</script>
