<template>
  <div class="reading-period">
    <div class="top-wrapper">
      <el-form :inline="true">
        <!-- 阅片期名称 -->
        <el-form-item :label="$t('trials:rpManage:table:readingName')">
          <el-input :maxLength="$inputMax"
            v-model="searchData.ReadingPeriodName"
            style="width:100px;"
            clearable
          />
        </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" icon="el-icon-download" @click="handleExport">
            {{ $t('common:button:export') }}
          </el-button> -->
          <!-- 添加影像学阅片 -->
          <el-button
            v-if="isGlobalReading"
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="handleAdd(0)"
          >
            {{ $t('trials:rpManage:button:addImageReading') }}
          </el-button>
          <!-- 添加肿瘤学阅片 -->
          <el-button
            v-if="isClinicalReading"
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="handleAdd(1)"
          >
            {{ $t('trials:rpManage:button:addOncologyReading') }}
          </el-button>
        </el-form-item>
      </el-form>

    </div>
    <div class="main-wrapper">
      <el-table
        v-loading="loading"
        :data="list"
        stripe
        style="width: 100%"
        height="500"
        @sort-change="handleSortChange"
      >
        <el-table-column type="index" width="40" />
        <!-- 阅片期类型 -->
        <el-table-column
          prop="ReadingSetType"
          :label="$t('trials:rpManage:table:readingType')"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ $fd('ReadingSetType',scope.row.ReadingSetType) }}
          </template>
        </el-table-column>
        <!-- 阅片期名称 -->
        <el-table-column
          prop="ReadingPeriodName"
          :label="$t('trials:rpManage:table:readingName')"
          sortable="custom"
          show-overflow-tooltip
        />
        <!-- 受试者范围 -->
        <el-table-column
          prop="ReadingScope"
          :label="$t('trials:rpManage:table:subjectRange')"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ $fd('ReadingScopeEnum',scope.row.ReadingScope) }}
          </template>
        </el-table-column>
        <!-- 指定中心 -->
        <el-table-column
          prop="SiteCodes"
          :label="$t('trials:rpManage:table:designatedSite')"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.SiteCodes.length>0? scope.row.SiteCodes.join(', '):'' }}
          </template>
        </el-table-column>
        <!-- 截止日期 -->
        <el-table-column
          prop="ExpirationDate"
          :label="$t('trials:rpManage:table:expirationDate')"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.ExpirationDate?moment(scope.row.ExpirationDate).format('YYYY-MM-DD'):'' }}
          </template>
        </el-table-column>
        <!-- 截止访视 -->
        <el-table-column
          prop="SubjectVisitName"
          :label="$t('trials:rpManage:table:expirationVisit')"
        />
        <!-- 关联阅片期 -->
        <el-table-column
          prop="PlanCount"
          :label="$t('trials:rpManage:table:linkedVisits')"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" :disabled="scope.row.PlanCount === 0" @click="handleRelationPR(scope.row)">
              {{ scope.row.PlanCount }}
            </el-button>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column
          prop="IsTakeEffect"
          :label="$t('trials:rpManage:table:readingStatus')"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsTakeEffect === 0" type="info">
              {{ $fd('TakeEffect', scope.row.IsTakeEffect) }}
            </el-tag>
            <el-tag v-else-if="scope.row.IsTakeEffect === 1" type="primary">
              {{ $fd('TakeEffect', scope.row.IsTakeEffect) }}
            </el-tag>
            <el-tag v-else-if="scope.row.IsTakeEffect === 2" type="danger">
              {{ $fd('TakeEffect', scope.row.IsTakeEffect) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 生效时间 -->
        <el-table-column
          prop="EffectOfTime"
          :label="$t('trials:rpManage:table:effectiveTime')"
          sortable="custom"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          :label="$t('common:action:action')"
          width="200"
        >
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
              circle
              :title="$t('trials:rpManage:action:edit')"
              icon="el-icon-edit-outline"
              :disabled="scope.row.IsTakeEffect === 1 || scope.row.IsGlobal"
              @click="handleEdit(scope.row)"
            />
            <!-- 修改状态 -->
            <el-button
              circle
              :title="$t('trials:rpManage:action:status')"
              icon="el-icon-edit"
              :disabled="scope.row.IsGlobal"
              @click="handleEditStatus(scope.row)"
            />

            <!-- 删除 -->
            <el-button
              circle
              :title="$t('trials:rpManage:action:delete')"
              icon="el-icon-delete"
              :disabled="scope.row.IsTakeEffect === 1 || scope.row.IsGlobal"
              @click="handleDelete(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
    </div>
    <!-- 新增/编辑 -->
    <el-dialog
      v-if="addOrEditPR.visible"
      :visible.sync="addOrEditPR.visible"
      :close-on-click-modal="false"
      :before-close="beforePRClose"
      :title="addOrEditPR.title"
      width="80%"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <AddOrEditPR ref="addOrEditPR" :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow" @close="addOrEditPR.visible = false" @getList="getList" />
    </el-dialog>

    <!-- 状态变更 -->
    <el-dialog
      v-if="editStatus.visible"
      :visible.sync="editStatus.visible"
      :close-on-click-modal="false"
      :title="editStatus.title"
      width="500px"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <EditPRStatus :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow" @close="editStatus.visible = false" @getList="refresh" />
    </el-dialog>

    <!-- 关联阅片期 -->
    <el-dialog
      v-if="relationPR.visible"
      :visible.sync="relationPR.visible"
      :close-on-click-modal="false"
      :title="$t('trials:rpManage:dialogTitle:linkedRP')"
      width="1000px"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <RelationPRList :trial-reading-criterion-id="trialReadingCriterionId" :data="currentRow" @close="relationPR.visible = false" @getList="getList" />
    </el-dialog>
  </div>
</template>
<script>
import { getReadingPeriodSetList, deleteReadingPeriodSet } from '@/api/trials'
import { getReadingPeriodList_Export } from '@/api/export'
import Pagination from '@/components/Pagination'
import AddOrEditPR from './AddOrEditPR'
import EditPRStatus from './EditPRStatus'
import RelationPRList from './RelationPRList'
import moment from 'moment'
const searchDataDefault = () => {
  return {
    ReadingPeriodName: '',
    PageIndex: 1,
    PageSize: 20
  }
}
export default {
  name: 'SetReadingPeriod',
  components: { Pagination, AddOrEditPR, EditPRStatus, RelationPRList },
  props: {
    trialReadingCriterionId: {
      type: String,
      default: ''
    },
    isClinicalReading: {
      type: Boolean,
      required: true
    },
    isGlobalReading: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      searchData: searchDataDefault(),
      list: [],
      total: 0,
      loading: false,
      addOrEditPR: { title: '', visible: false },
      editStatus: { title: this.$t('trials:rpManage:dialogTitle:statusChange'), visible: false },
      relationPR: { visible: false },
      trialId: this.$route.query.trialId,
      currentRow: {},
      moment
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleExport() {
      getReadingPeriodList_Export(this.searchData).then(res => {
      }).catch(() => { this.loading = false })
    },
    getList() {
      this.searchData.TrialId = this.$route.query.trialId
      this.loading = true
      this.searchData.TrialReadingCriterionId = this.trialReadingCriterionId
      getReadingPeriodSetList(this.searchData).then(res => {
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    handleAdd(type) {
      this.currentType = type
      this.currentRow = { ReadingSetType: type }
      this.currentRow.Operate = 0
      this.addOrEditPR.title = this.$t('trials:rpManage:dialogTitle:addRP')
      this.addOrEditPR.visible = true
    },
    handleEdit(row) {
      this.currentRow = { ...row }
      this.currentRow.Operate = 1
      this.addOrEditPR.title = this.$t('trials:rpManage:dialogTitle:editRP')
      this.addOrEditPR.visible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm(this.$t('trials:rpManage:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.loading = true
          deleteReadingPeriodSet(row.Id)
            .then(res => {
              this.loading = false
              if (res.IsSuccess) {
                // this.list.splice(this.list.findIndex(item => item.Id === row.Id), 1)
                this.getList()
                this.$message.success(this.$t('common:message:deletedSuccessfully'))
              }
            }).catch(() => { this.loading = false })
        })
    },
    handleRelationPR(row) {
      this.currentRow = { ...row }
      this.relationPR.visible = true
    },
    handleEditStatus(row) {
      this.currentRow = { ...row }
      this.editStatus.visible = true
    },
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    // 排序
    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()
    },
    beforePRClose(done) {
      // 新增且未勾选访视时提醒
      if (this.$refs['addOrEditPR'].list.length > 0 && this.$refs['addOrEditPR'].selectArr.length === 0) {
        this.$confirm(this.$t('trials:rpManage:message:closeDialog'), {
          type: 'warning'
        }).then(() => {
          return done()
        }).catch(() => {
        })
      } else {
        return done()
      }
    },
    refresh() {
      this.getList()
      this.$emit('getList')
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
