<template>
  <BaseContainer>
    <!-- 搜索框 -->
    <template slot="search-container">
      <el-form :inline="true">
        <!-- 中心编号 -->
        <el-form-item :label="$t('trials:researchStaff:table:siteId')">
          <el-select v-model="searchData.SiteId" clearable filterable style="width:120px;">
            <el-option
              v-for="(item,index) of siteOptions"
              :key="index"
              :label="item.TrialSiteCode"
              :value="item.SiteId"
            />
          </el-select>
        </el-form-item>
        <!-- 姓名 -->
        <el-form-item :label="$t('trials:researchStaff:table:Name')">
          <el-input :maxLength="$inputMax" v-model="searchData.UserName" class="mr" clearable style="width:120px;" />
        </el-form-item>
        <!-- 角色 -->
        <el-form-item :label="$t('trials:researchStaff:table:role')">
          <el-select
            v-model="searchData.TrialRoleNameId"
            style="width:120px;"
            clearable
          >
            <el-option
              v-for="item of dict.type.SiteSurvey_UserRoles"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 单位 -->
        <el-form-item :label="$t('trials:researchStaff:table:organization')">
          <el-input :maxLength="$inputMax" v-model="searchData.OrganizationName" class="mr" clearable style="width:120px;" />
        </el-form-item>
        <!-- 是否生成账号 -->
        <el-form-item :label="$t('trials:researchStaff:table:isGenerateAccount')">
          <el-select
            v-model="searchData.IsGenerateAccount"
            style="width:120px;"
            clearable
          >
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>
        <!-- 用户类型 -->
        <el-form-item :label="$t('trials:researchStaff:table:userType')">
          <el-select
            v-model="searchData.UserTypeId"
            style="width:120px;"
            clearable
          >
            <el-option
              v-for="item of userTypeOptions"
              :key="item.Id"
              :label="item.UserTypeShortName"
              :value="item.Id"
            >
              <span>{{ item.UserType }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 状态 -->
        <!-- <el-form-item :label="$t('trials:researchStaff:table:status')">
          <el-select v-model="searchData.State" clearable filterable style="width:120px;">
            <el-option
              v-for="(item,index) of researchUserState"
              :key="index"
              :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-form-item>
        <!-- 重置 -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
            {{ $t('common:button:reset') }}
          </el-button>
        </el-form-item>
        <!-- 发邮件 -->
        <el-form-item>
          <el-button
            v-hasPermi="['trials:trials-panel:attachments:site-research:summary-record:sendEmail']"
            type="primary"
            icon="el-icon-message"
            :loading="sendEmailLoading"
            :disabled="selectArr.length === 0"
            @click="handleSendEmail"
          >
            {{ $t('trials:researchRecord:dialogButton:sendEmail') }}
          </el-button>
        </el-form-item>
        <!-- 导出 -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-download"
            :disabled="list.length === 0"
            @click="handleExport"
          >
            {{ $t('common:button:export') }}
          </el-button>
        </el-form-item>
      </el-form>
    </template>

    <template slot="main-container">
      <!-- 系统文件列表 -->
      <el-table
        ref="researchUsers"
        v-loading="loading"
        v-adaptive="{bottomOffset:70}"
        :data="list"
        stripe
        height="100"
        @selection-change="handleSelectChange"
        @sort-change="handleSortByColumn"
      >
        <el-table-column
          type="selection"
          width="50"
          :selectable="handleSelectTable"
        />
        <el-table-column type="index" width="50" />
        <!-- 中心编号 -->
        <el-table-column
          prop="TrialSiteSurvey.TrialSiteCode"
          :label="$t('trials:researchStaff:table:siteId')"
          show-overflow-tooltip
          sortable="custom"
          min-width="100"
        >
          <template slot-scope="scope">{{ `${scope.row.TrialSiteSurvey.TrialSiteCode}` }}</template>
        </el-table-column>
        <!-- 中心名称 -->
        <el-table-column
          prop="TrialSiteSurvey.SiteName"
          :label="$t('trials:researchStaff:table:siteName')"
          show-overflow-tooltip
          sortable="custom"
          min-width="120"
        >
          <template slot-scope="scope">{{ `${scope.row.TrialSiteSurvey.SiteName}` }}</template>
        </el-table-column>
        <!-- 姓名 -->
        <el-table-column
          prop="LastName"
          :label="$t('trials:researchStaff:table:Name')"
          show-overflow-tooltip
          sortable="custom"
          min-width="100"
        >
          <template slot-scope="scope">{{ `${scope.row.LastName} / ${scope.row.FirstName}` }}</template>
        </el-table-column>
        <!-- 角色 -->
        <el-table-column
          prop="TrialRoleName"
          :label="$t('trials:researchStaff:table:role')"
          show-overflow-tooltip
          sortable="custom"
          min-width="100"
        />
        <!-- 电话号码 -->
        <el-table-column
          prop="Phone"
          :label="$t('trials:researchStaff:table:phone')"
          show-overflow-tooltip
          sortable="custom"
          min-width="120"
        />
        <!-- 邮箱 -->
        <el-table-column
          prop="Email"
          :label="$t('trials:researchStaff:table:email')"
          show-overflow-tooltip
          sortable="custom"
          min-width="150"
        />
        <!-- 单位 -->
        <el-table-column
          prop="OrganizationName"
          :label="$t('trials:researchStaff:table:organization')"
          show-overflow-tooltip
          sortable="custom"
          min-width="100"
        />
        <!-- 是否生成账号 -->
        <el-table-column
          prop="IsGenerateAccount"
          :label="$t('trials:researchStaff:table:isGenerateAccount')"
          show-overflow-tooltip
          sortable="custom"
          min-width="130"
        >
          <template slot-scope="scope">
            {{ $fd('YesOrNo', scope.row.IsGenerateAccount) }}
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="State"-->
        <!--          :label="$t('trials:researchStaff:table:status')"-->
        <!--          show-overflow-tooltip-->
        <!--          sortable="custom"-->
        <!--          min-width="130"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ $fd('researchUserState', scope.row.State) }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <!-- 用户类型 -->
        <el-table-column
          prop="UserType"
          :label="$t('trials:researchStaff:table:userType')"
          show-overflow-tooltip
          sortable="custom"
          min-width="100"
        />
        <!-- 是否加入 -->
        <el-table-column
          prop="IsJoin"
          :label="$t('trials:researchStaff:table:isJoin')"
          show-overflow-tooltip
          sortable="custom"
          min-width="100"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsJoin" type="info">{{ $fd('IsJoin', scope.row.IsJoin) }}</el-tag>
            <el-tag v-else type="danger">{{ $fd('IsJoin', scope.row.IsJoin) }}</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
    </template>
  </BaseContainer>
</template>
<script>
import { trialSiteSurveyUserList, getTrialSiteSelect, getUserTypeList, trialSiteUserSummaryListExport, sendSiteSurveyUserJoinEmail } from '@/api/trials'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
const searchDataDefault = () => {
  return {
    SortField: '',
    Asc: true,
    PageIndex: 1,
    PageSize: 20,
    SiteId: '',
    UserTypeId: '',
    IsGenerateAccount: null,
    TrialRoleNameId: '',
    UserName: '',
    OrganizationName: '',
    FormWriterKeyInfo: '',
    State: ''
  }
}
export default {
  name: 'SiteResearchList',
  components: { BaseContainer, Pagination },
  dicts: ['SiteSurvey_UserRoles'],
  data() {
    return {
      searchData: searchDataDefault(),
      loading: false,
      list: [],
      total: 0,
      trialId: this.$route.query.trialId,
      siteOptions: [],
      userTypeOptions: [],
      selectArr: [],
      sendEmailLoading: false
      // researchUserState: [
      //   { label: '未邀请', value: 0 },
      //   { label: '已邀请', value: 1 },
      //   { label: '已确认', value: 2 },
      //   { label: '已拒绝', value: 3 },
      //   { label: '超时', value: 4 }
      // ]

    }
  },
  mounted() {
    this.getList()
    this.getSite()
    this.getUserType()
  },
  methods: {
    // 获取系统文件数据
    getList() {
      this.loading = true
      this.searchData.TrialId = this.trialId
      trialSiteSurveyUserList(this.searchData).then(res => {
        this.loading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      }).catch(() => {
        this.loading = false
      })
    },
    // 获取调查表用户已勾选人员信息
    handleSelectChange(val) {
      this.selectArr = val
    },
    // handleSelectable(row) {
    //   // 已超时||已拒绝
    //   // if (row.State === 3 || row.State === 4) {
    //   //   return true
    //   // } else {
    //   //   return false
    //   // }
    //   return true
    // },
    // 发送邮件
    handleSendEmail() {
      this.sendEmailLoading = true
      const param = {
        TrialId: this.trialId,
        TrialSiteSurveyId: this.selectArr[0].TrialSiteSurveyId,
        BaseUrl: `${location.protocol}//${location.host}/login`,
        RouteUrl: `${location.protocol}//${location.host}/email-recompose`,
        UserList: this.selectArr
      }
      sendSiteSurveyUserJoinEmail(param).then(() => {
        this.sendEmailLoading = false
        // 发送成功
        this.$message.success(this.$t('trials:researchStaff:message:sendEmalil'))
        this.getList()
      }).catch(() => { this.sendEmailLoading = false })
      // var joinUrl = `${location.protocol}//${location.host}/#/joinVerify`
      // var sendEmailUserArr = this.selectArr.map((v) => { return { Id: v.Id, Email: v.Email, IsSystemUser: v.IsSystemUser, SystemUserId: v.SystemUserId } })
      // sendInviteEmail({
      //   TrialId: this.trialId,
      //   SendUsers: sendEmailUserArr,
      //   BaseUrl: BaseUrl,
      //   RouteUrl: joinUrl
      // }).then(() => {
      //   this.sendEmailLoading = false
      //   this.$message.success(this.$t('common:message:savedSuccessfully'))
      //   this.getResearchUserList()
      // }).catch(() => { this.sendEmailLoading = false })
    },
    // 导出
    handleExport() {
      this.searchData.TrialId = this.trialId
      this.loading = true
      // eslint-disable-next-line no-unused-vars
      const { SortField, Asc, PageIndex, PageSize, ...param } = { ...this.searchData }
      trialSiteUserSummaryListExport({ ...param }).then(data => {
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    // 获取site下拉框数据
    getSite() {
      getTrialSiteSelect(this.trialId).then(res => {
        this.siteOptions = res.Result
      })
    },
    // 获取系统用户类型
    getUserType() {
      getUserTypeList(3).then(res => {
        this.userTypeOptions = res.Result
      })
    },
    handleSelectTable(row) {
      return row.IsGenerateSuccess && !row.IsJoin
    },
    // 重置
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
      this.$nextTick(() => {
        this.$refs.researchUsers.clearSort()
      })
    },
    // 查询
    handleSearch() {
      this.getList()
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.getList()
    }
  }
}
</script>
