<template>
  <box-content>
    <div class="title">
      {{ $t('system:retrospect:title:userFrom') }}
    </div>
    <div class="userFrom">
      <el-form size="mini" class="base-search-form">
        <el-form-item :label="$t('system:retrospect:form:createType')">
          <span>{{ $fd('UserCeateSource', otherInfo.UserCeateSource) }}</span>
        </el-form-item>
        <el-form-item :label="$t('system:retrospect:form:createTime')">
          <span>{{ otherInfo.CreateTime }}</span>
        </el-form-item>
        <el-form-item :label="$t('system:retrospect:form:createTrial')">
          <span>{{
            otherInfo.ResearchProgramNo || otherInfo.ExperimentName
              ? `${otherInfo.ResearchProgramNo}, ${otherInfo.ExperimentName} `
              : $t('common:title:none')
          }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="title">
      {{ $t('system:retrospect:title:joinTrial') }}
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <el-form :inline="true" size="mini" class="base-search-form">
        <el-form-item :label="$t('system:retrospect:search:TrialCode')">
          <el-input
            v-model="searchData.TrialCode"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('system:retrospect:search:ResearchProgramNo')">
          <el-input
            v-model="searchData.ResearchProgramNo"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('system:retrospect:search:ExperimentName')">
          <el-input
            v-model="searchData.ExperimentName"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('system:retrospect:search:UserTypeId')">
          <el-select
            v-model="searchData.UserTypeId"
            style="width: 100px"
            placeholder=""
          >
            <template v-for="userType of userTypeOptions">
              <el-option
                v-if="![4, 6, 20].includes(userType.UserTypeEnum)"
                :key="userType.Id"
                :label="userType.UserType"
                :value="userType.Id"
              />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system:retrospect:search:IsDeleted')">
          <el-select
            v-model="searchData.IsDeleted"
            style="width: 100px"
            placeholder=""
          >
            <el-option
              v-for="item of $d.IsUserExitTrial"
              :key="item.Id"
              :label="item.label"
              :value="item.value"
            />
          </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-form-item>
      </el-form>
    </div>

    <!-- 浏览器推荐版本列表 -->
    <el-table
      v-loading="loading"
      v-adaptive="{ bottomOffset: 45 }"
      :data="list"
      stripe
      height="100"
      style="width: 100%"
      @sort-change="handleSortByColumn"
    >
      <el-table-column type="index" width="40" />

      <el-table-column
        prop="TrialCode"
        :label="$t('system:retrospect:table:TrialCode')"
        sortable="custom"
        show-overflow-tooltip
      />
      <el-table-column
        prop="ResearchProgramNo"
        :label="$t('system:retrospect:table:ResearchProgramNo')"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="ExperimentName"
        :label="$t('system:retrospect:table:ExperimentName')"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="TrialStatusStr"
        :label="$t('system:retrospect:table:TrialStatusStr')"
        show-overflow-tooltip
        sortable="custom"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.TrialStatusStr === 'Initializing'"
            type="info"
            >{{ $fd('TrialStatusEnum', scope.row.TrialStatusStr) }}</el-tag
          >
          <el-tag
            v-if="scope.row.TrialStatusStr === 'Ongoing'"
            type="primary"
            >{{ $fd('TrialStatusEnum', scope.row.TrialStatusStr) }}</el-tag
          >
          <el-tag
            v-if="scope.row.TrialStatusStr === 'Completed'"
            type="warning"
            >{{ $fd('TrialStatusEnum', scope.row.TrialStatusStr) }}</el-tag
          >
          <el-tag v-if="scope.row.TrialStatusStr === 'Stopped'" type="danger">{{
            $fd('TrialStatusEnum', scope.row.TrialStatusStr)
          }}</el-tag>
        </template></el-table-column
      >
      <el-table-column
        prop="TrialCreateTime"
        :label="$t('system:retrospect:table:TrialCreateTime')"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="TrialUserRoleList"
        :label="$t('system:retrospect:table:TrialUserRoleList')"
        show-overflow-tooltip
        sortable="custom"
      >
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('trials:staff:tip:userTypeDisabled')"
            placement="top"
            style="margin-right: 2px"
            v-if="
              scope.row.TrialUserRoleList.some(
                (item) => item.IsDeleted || item.IsUserRoleDisabled
              )
            "
          >
            <i class="el-icon-warning icon-i"></i>
          </el-tooltip>
          <span>{{
            scope.row.TrialUserRoleList.map(
              (item) => item.UserTypeShortName
            ).join(', ')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="IsDeleted"
        :label="$t('system:retrospect:table:IsDeleted')"
        show-overflow-tooltip
        sortable="custom"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.IsDeleted ? 'info' : ''">
            {{ $fd('IsUserExitTrial', scope.row.IsDeleted) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="JoinTime"
        :label="$t('system:retrospect:table:JoinTime')"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="RemoveTime"
        :label="$t('system:retrospect:table:RemoveTime')"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        :label="$t('common:action:action')"
        width="200"
        fixed="right"
      >
        <!-- <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">
            {{ $t('dictionary:browser:button:edit') }}
          </el-button>
          <el-button type="text" @click="handleDelete(scope.row)">
            {{ $t('dictionary:browser:button:delete') }}
          </el-button>
        </template> -->
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      class="page"
      :total="total"
      :page.sync="searchData.PageIndex"
      :limit.sync="searchData.PageSize"
      @pagination="getList"
    />
  </box-content>
</template>
<script>
import {
  getUserJoinedTrialList,
  getUserTypeListByUserType,
} from '@/api/admin.js'
import Pagination from '@/components/Pagination'
import BoxContent from '@/components/BoxContent'
const searchDataDefault = () => {
  return {
    TrialCode: null,
    ResearchProgramNo: null,
    ExperimentName: null,
    UserTypeId: null,
    IsDeleted: null,
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: null,
  }
}
export default {
  components: { BoxContent, Pagination },
  props: {
    userId: { type: String, default: '' },
  },
  data() {
    return {
      searchData: searchDataDefault(),
      loading: false,
      otherInfo: {
        CreateTime: null,
        ExperimentName: null,
        ResearchProgramNo: null,
        TrialCode: null,
        UserCeateSource: null,
      },
      list: [],
      total: 0,
      userTypeOptions: [],
    }
  },
  mounted() {
    this.getUserTypeList()
    this.getList()
  },
  methods: {
    getUserTypeList() {
      getUserTypeListByUserType(0).then((res) => {
        if (res.IsSuccess) {
          this.userTypeOptions = []
          res.Result.forEach((item) => {
            if (item.UserTypeEnum !== 21) {
              this.userTypeOptions.push(item)
            }
          })
        }
      })
    },
    async getList() {
      try {
        if (!this.userId) return false
        this.searchData.IdentityUserId = this.userId
        this.loading = true
        let res = await getUserJoinedTrialList(this.searchData)
        if (res.IsSuccess) {
          this.loading = false
          res.OtherInfo = res.OtherInfo ? res.OtherInfo : {}
          Object.keys(this.otherInfo).forEach((key) => {
            this.otherInfo[key] = res.OtherInfo[key]
          })
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
        }
      } catch (err) {
        console.log(err)
        this.loading = false
      }
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    // 排序
    handleSortByColumn(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()
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  font-weight: bold;
  margin-bottom: 10px;
}
.userFrom {
  padding-left: 20px;
  margin-bottom: 10px;
}
.icon-i {
  color: #e6a23c;
  cursor: pointer;
}
</style>
