<template>
  <box-content>
    <div class="title">
      {{ $t('system:retrospect:title:userFrom') }}
    </div>
    <div class="userFrom">
      <el-form
        size="mini"
        class="base-search-form"
        label-position="right"
        :label-width="isEN ? '130px' : '100px'"
      >
        <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
      >
        <template slot-scope="scope">
          <el-button
            v-if="
              Array.isArray(scope.row.TrialUserRoleList) &&
              scope.row.TrialUserRoleList.length > 0
            "
            type="text"
            @click.stop="openRoleList(scope.row)"
          >
            <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>
          </el-button>
        </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"
            :disabled="
              (scope.row.TrialStatusStr === 'Initializing' &&
                !hasPermi(['role:pm'])) ||
              scope.row.IsDeleted ||
              ((scope.row.TrialStatusStr === 'Completed' ||
                scope.row.TrialStatusStr === 'Stopped') &&
                !(
                  hasPermi(['role:qa']) ||
                  hasPermi(['role:ea']) ||
                  hasPermi(['role:pm'])
                ))
            "
            @click.stop="handleDetail(scope.row)"
          >
            {{ $t('system:retrospect:table:detail') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      class="page"
      :total="total"
      :page.sync="searchData.PageIndex"
      :limit.sync="searchData.PageSize"
      @pagination="getList"
    />
    <!-- 修改参与者人员角色 -->
    <base-model v-if="role_model.visible" :config="role_model">
      <template slot="dialog-body">
        <el-table :data="roleList" style="width: 100%" max-height="300px">
          <el-table-column type="index" width="60">
            <template slot-scope="scope">
              <span
                style="
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                "
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="$t('system:retrospect:tip:userTypeSysDisabled')"
                  placement="top"
                  style="margin-right: 3px"
                  v-if="scope.row.IsUserRoleDisabled"
                >
                  <i
                    v-if="scope.row.IsUserRoleDisabled"
                    class="el-icon-warning icon-i"
                  ></i>
                </el-tooltip>
                <span>{{ scope.$index + 1 }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="UserTypeShortName"
            :label="$t('system:retrospect:table:UserTypeShortName')"
          />
          <el-table-column
            prop="IsDeleted"
            :label="$t('system:retrospect:table:IsUserRoleDisabled')"
          >
            <template slot-scope="scope">
              <span> {{ $fd('IsDisable', scope.row.IsDeleted) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="IsDeleted"
            :label="$t('system:retrospect:table:enableTime')"
            min-width="120px"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.CreateTime }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="IsDeleted"
            :label="$t('system:retrospect:table:forbiddenTime')"
            min-width="120px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.IsDeleted">
                {{ scope.row.UpdateTime }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </base-model>
  </box-content>
</template>
<script>
import {
  getUserJoinedTrialList,
  getUserTypeListByUserType,
} from '@/api/admin.js'
import Pagination from '@/components/Pagination'
import BoxContent from '@/components/BoxContent'
import BaseModel from '@/components/BaseModel'
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, BaseModel },
  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: [],

      roleList: [],
      role_model: {
        visible: false,
        title: this.$t('system:retrospect:dialogTitle:role'),
        width: '800px',
      },
    }
  },
  mounted() {
    this.getUserTypeList()
    this.getList()
  },
  methods: {
    openRoleList(row) {
      this.roleList = row.TrialUserRoleList
      this.role_model.visible = true
    },
    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)
        this.loading = false
        if (res.IsSuccess) {
          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
      }
    },
    handleDetail(row) {
      this.$router.push({
        path: `/trials/trials-panel?trialId=${row.TrialId}&trialCode=${row.TrialCode}&researchProgramNo=${row.ResearchProgramNo}`,
      })
    },
    // 查询
    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()
    },
  },
  computed: {
    isEN() {
      return this.$i18n.locale !== 'zh'
    },
  },
}
</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>
