<template>
  <div class="assign-site">
    <div class="filter-box">
      <el-form :inline="true">
        <!-- 中心编号 -->
        <el-form-item :label="$t('trials:sitesList:table:siteId')">
          <el-input v-model="listQuery.TrialSiteCode" class="mr" clearable />
        </el-form-item>
        <!-- 中心名称 -->
        <el-form-item :label="$t('trials:sitesList:table:siteName')">
          <el-input v-model="listQuery.TrialSiteName" class="mr" clearable />
        </el-form-item>
        <!-- 中心别名 -->
        <!-- <el-form-item :label="$t('trials:sitesList:table:siteAliasName')">
          <el-input v-model="listQuery.TrialSiteAliasName" class="mr" clearable />
        </el-form-item> -->
        <!-- 关键词 -->
        <el-form-item :label="$t('trials:sitesList:form:keyWord')">
          <el-input v-model="listQuery.UserKeyInfo" style="width: 200px" class="mr" clearable
            :placeholder="$t('trials:sitesList:formPlaceholder:keyWord')" />
        </el-form-item>
        <!-- 状态 -->
        <el-form-item :label="$t('trials:sitesList:table:status')">
          <el-select v-model="listQuery.IsDeleted" clearable class="mr">
            <el-option v-for="item of $d.IsSiteDisable" :key="item.label" :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-button v-hasPermi="[
            'trials:trials-panel:setting:personnel-manage:questionnaire-record',
          ]" type="primary" icon="el-icon-info" @click="handleResearchList">
            {{ $t("trials:sitesList:button:siteResearch") }}
          </el-button>
          <!-- 添加中心 -->
          <el-button v-hasPermi="[
            'trials:trials-panel:setting:personnel-manage:add-site',
          ]" type="primary" icon="el-icon-plus" @click="handleAdd">
            {{ $t("trials:sitesList:dialogTitle:assignSite") }}
          </el-button>
          <el-button type="primary" icon="el-icon-download" :disabled="list.length === 0"
            @click="handleResearchListExport">
            {{ $t("common:button:export") }}
          </el-button>
          <!-- 下载模板 -->
          <el-button type="primary" icon="el-icon-download" @click="handleDownload">
            {{ $t("common:button:downloadTpl") }}
          </el-button>
          <el-button v-hasPermi="[
            'trials:trials-panel:setting:personnel-manage:add-site',
          ]" type="primary" icon="el-icon-upload2" @click="handleUpload">
            {{ $t("common:button:upload") }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="listLoading" :data="list" stripe @sort-change="handleSortByColumn">
      <el-table-column type="index" width="50" />
      <!-- 中心编号 -->
      <el-table-column prop="TrialSiteCode" :label="$t('trials:sitesList:table:siteId')" show-overflow-tooltip
        sortable="custom" width="120">
        <template slot-scope="scope">
          <span v-if="!!scope.row.TrialSiteCode">{{
            scope.row.TrialSiteCode
          }}</span>
          <i v-else class="el-icon-warning" style="color: #f44336; font-size: 14px" />
        </template>
      </el-table-column>
      <!-- 中心名称 -->
      <el-table-column prop="TrialSiteName" :label="$t('trials:sitesList:table:siteName')" show-overflow-tooltip
        sortable="custom" min-width="120" />
      <!-- 中心别名 -->
      <el-table-column prop="TrialSiteAliasName" :label="$t('trials:sitesList:table:siteAliasName')"
        show-overflow-tooltip sortable="custom" min-width="120" />
      <!-- 参与者 -->
      <el-table-column prop="UserNameList" :label="$t('trials:sitesList:table:staff')" show-overflow-tooltip
        min-width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.UserCount > 0" size="small" type="text" @click="getCrcList(scope.row)">
            {{
              scope.row.UserNameList.length > 0
                ? scope.row.UserNameList.join(", ")
                : ""
            }}
          </el-button>
        </template>
      </el-table-column>
      <!-- Subjects -->
      <el-table-column prop="SubjectCount" min-width="100" :label="$t('trials:site:table:subjects')"
        show-overflow-tooltip sortable="custom" />
      <!-- Visits -->
      <el-table-column prop="VisitCount" min-width="100" :label="$t('trials:site:table:visits')" show-overflow-tooltip
        sortable="custom" />
      <!-- 状态 -->
      <el-table-column prop="IsDeleted" :label="$t('trials:sitesList:table:status')" show-overflow-tooltip sortable
        min-width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.IsDeleted" type="danger">{{
            $fd("IsSiteDisable", scope.row.IsDeleted)
          }}</el-tag>
          <el-tag v-else>{{
            $fd("IsSiteDisable", scope.row.IsDeleted)
          }}</el-tag>
        </template>
      </el-table-column>
      <!-- DICOM AE -->
      <el-table-column prop="CallingAEList" :label="$t('trials:sitesList:table:AE')" show-overflow-tooltip sortable
        min-width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.CallingAEList.length > 0" size="small" type="text"
            @click="handleConfig(scope.row, 'view')">
            {{
              scope.row.CallingAEList.length > 0
                ? scope.row.CallingAEList.join(", ")
                : ""
            }}
          </el-button>
        </template>
      </el-table-column>
      <!-- 授权时间 -->
      <el-table-column prop="EnabledTime" :label="$t('trials:sitesList:table:timeAdded')" show-overflow-tooltip sortable
        min-width="150" />
      <el-table-column v-if="
        hasPermi([
          'trials:trials-panel:setting:personnel-manage:edit-site',
          'trials:trials-panel:setting:personnel-manage:remove-site',
        ])
      " :label="$t('common:action:action')" min-width="120">
        <template slot-scope="scope">
          <el-button circle :title="$t('trials:sitesList:action:assign')" icon="el-icon-user"
            :disabled="scope.row.IsDeleted" @click="getCrcList(scope.row)" />

          <!-- Edit -->
          <el-button v-hasPermi="[
            'trials:trials-panel:setting:personnel-manage:edit-site',
          ]" circle :title="$t('common:button:edit')" icon="el-icon-edit-outline" @click="handleEdit(scope.row)" />
          <el-button circle :title="$t('common:button:config')" icon="el-icon-setting"
            @click="handleConfig(scope.row, 'add')" />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" style="text-align: right">
      <pagination :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize"
        @pagination="getList" />
    </div>

    <!-- 给site分配crc -->
    <base-model v-if="crc_model.visible" :config="crc_model">
      <template slot="dialog-body">
        <CRCForm :site-id="currentSiteId" @closeDialog="closeDialog" />
      </template>
    </base-model>

    <!-- 修改site信息 -->
    <base-model v-if="edit_model.visible" :config="edit_model">
      <template slot="dialog-body">
        <el-form ref="editForm" :model="form" label-width="100px" :rules="rules">
          <!-- 中心编号 -->
          <el-form-item :label="$t('trials:sitesList:table:siteId')" prop="TrialSiteCode">
            <el-input v-model="form.TrialSiteCode" />
          </el-form-item>
          <!-- 中心名称 -->
          <el-form-item :label="$t('trials:sitesList:table:siteName')" prop="TrialSiteName">
            <el-autocomplete clearable class="inline-input" style="width: 100%" v-model="form.TrialSiteName"
              :fetch-suggestions="querySearch" @select="handleSelect" placeholder=""></el-autocomplete>
          </el-form-item>
          <!-- 中心别称 -->
          <el-form-item :label="$t('trials:sitesList:table:siteAliasName')" prop="TrialSiteAliasName">
            <el-input v-model="form.TrialSiteAliasName" />
          </el-form-item>
          <!-- 状态 -->
          <el-form-item :label="$t('trials:sitesList:table:status')">
            <el-switch v-model="form.IsDeleted" :active-value="false" :inactive-value="true" />
          </el-form-item>
        </el-form>
      </template>
      <template slot="dialog-footer">
        <el-button type="primary" size="small" :disabled="saveBtnLoading" @click="edit_model.visible = false">
          {{ $t("common:button:cancel") }}
        </el-button>
        <el-button type="primary" size="small" :loading="saveBtnLoading" @click="handleUpdateSiteID">
          {{ $t("common:button:save") }}
        </el-button>
      </template>
    </base-model>

    <!-- 修改参与者人员状态 -->
    <base-model v-if="status_model.visible" :config="status_model">
      <template slot="dialog-body">
        <span>{{ $t("trials:internalStaff:table:status") }}:</span>
        <el-radio-group v-model="staffStatus">
          <el-radio v-for="item of $d.IsUserExitTrial" :key="item.label" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </template>
      <template slot="dialog-footer">
        <el-button :disabled="btnLoading" size="small" type="primary" @click="status_model.visible = false">
          {{ $t("common:button:cancel") }}
        </el-button>
        <el-button size="small" type="primary" :loading="btnLoading" @click="saveStatus">
          {{ $t("common:button:save") }}
        </el-button>
      </template>
    </base-model>

    <!-- site下的crc/cra -->
    <base-model v-if="siteOfcrc_model.visible" :config="siteOfcrc_model">
      <template slot="dialog-body">
        <div style="text-align: right">
          <el-button v-hasPermi="[
            'trials:trials-panel:setting:personnel-manage:assign-staff',
          ]" type="primary" icon="el-icon-plus" size="small" @click="crc_model.visible = true">
            {{ $t("common:button:add") }}
          </el-button>
        </div>
        <el-table v-loading="userListLoading" :data="userList" height="400" size="small">
          <!-- 姓名 -->
          <el-table-column prop="UserRealName" :label="$t('trials:internalStaff:table:name')" min-width="100"
            show-overflow-tooltip />
          <!-- 用户名 -->
          <el-table-column prop="UserName" :label="$t('trials:internalStaff:table:uid')" min-width="100"
            show-overflow-tooltip />
          <!-- 用户类型 -->
          <el-table-column prop="UserType" :label="$t('trials:internalStaff:table:userType')" min-width="100"
            show-overflow-tooltip />
          <!-- 电话 -->
          <el-table-column prop="Phone" :label="$t('trials:internalStaff:table:phone')" show-overflow-tooltip
            min-width="100" />
          <!-- 邮箱 -->
          <el-table-column prop="EMail" :label="$t('trials:internalStaff:table:email')" show-overflow-tooltip
            min-width="100" />
          <!-- 单位 -->
          <el-table-column prop="OrganizationName" :label="$t('trials:internalStaff:table:organization')" min-width="100" />
          <!-- 状态 -->
          <el-table-column prop="IsDeleted" :label="$t('trials:internalStaff:table:status')" show-overflow-tooltip
            min-width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.IsDeleted" type="danger">{{
                $fd("IsUserExitTrial", scope.row.IsDeleted)
              }}</el-tag>
              <el-tag v-else>{{
                $fd("IsUserExitTrial", scope.row.IsDeleted)
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="CreateTime" :label="$t('trials:internalStaff:table:authorizationTime')"
            show-overflow-tooltip sortable="custom" min-width="210" />
          <el-table-column prop="DeletedTime" :label="$t('trials:internalStaff:table:disableTime')"
            show-overflow-tooltip sortable min-width="210" />
          <el-table-column v-hasPermi="[
            'trials:trials-panel:setting:personnel-manage:assign-staff',
          ]" :label="$t('common:action:action')" width="100">
            <template slot-scope="scope">
              <el-button v-hasPermi="[
                'trials:trials-panel:setting:personnel-manage:assign-staff',
              ]" circle :title="$t('trials:internalStaff:action:status')" icon="el-icon-edit-outline"
                @click="handleStatus(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </template>
    </base-model>
    <!-- 导入 -->
    <base-model v-if="upload_model.visible" :config="upload_model">
      <template slot="dialog-body">
        <UploadExcel @closeDialog="upload_model.visible = false" @getList="getList" />
      </template>
    </base-model>
    <!--dicom AE-->
    <dicomAEList ref="dicomAEList" @getList="getList" />
  </div>
</template>
<script>
import {
  getSiteCRCSimpleList,
  deleteTrialSite,
  deleteSiteCRC,
  editTrialSite,
  getTrialSiteCRCList,
  trialSiteUserListExport,
  addTrialSites,
  getTrialSiteSelectList,
} from "@/api/trials";
import { DownloadCommonDoc } from "@/api/dictionary";
import Pagination from "@/components/Pagination";
import CRCForm from "./crcForm";
import BaseModel from "@/components/BaseModel";
import UploadExcel from "./uploadExcel";
import moment from "moment";
import dicomAEList from "./dicomAEList.vue";
const getListQueryDefault = () => {
  return {
    UserKeyInfo: "",
    TrialSiteCode: "",
    TrialSiteAliasName: "",
    TrialSiteName: null,
    IsDeleted: null,
    SortField: "TrialSiteCode",
    Asc: true,
    PageIndex: 1,
    PageSize: 20,
  };
};
export default {
  name: "Participant",
  components: { Pagination, CRCForm, BaseModel, UploadExcel, dicomAEList },
  data() {
    return {
      list: [],
      listQuery: getListQueryDefault(),
      listLoading: false,
      total: 0,
      currentSiteId: "",
      site_model: {
        visible: false,
        title: this.$t("trials:sitesList:dialogTitle:assignSite"),
        width: "60%",
      },
      crc_model: {
        visible: false,
        title: this.$t("trials:sitesList:dialogTitle:assignStaff").replace(
          "xxx",
          this.$route.query.trialCode
        ),
        width: "60%",
      },
      edit_model: {
        visible: false,
        title: this.$t("trials:sitesList:dialogTitle:editSite"),
        width: "600px",
        model_type: "add",
      },
      status_model: {
        visible: false,
        title: this.$t("trials:sitesList:dialogTitle:editStaffStauts"),
        width: "500px",
      },
      siteOfcrc_model: { visible: false, title: "", width: "70%" },
      form: {
        TrialSiteCode: "",
        TrialSiteName: "",
        TrialSiteAliasName: "",
        IsDeleted: true,
      },
      upload_model: {
        visible: false,
        title: this.$t("common:button:upload"),
        width: "500px",
      },
      saveBtnLoading: false,
      staffStatus: null,
      currentRow: {},
      btnLoading: false,
      userListLoading: false,
      userList: [],
      moment,
      rules: {
        TrialSiteCode: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          {
            max: 100,
            message: `${this.$t("common:ruleMessage:maxLength")} 100`,
            trigger: "blur",
          },
        ],
        TrialSiteName: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: ["blur", "change"],
          },
          {
            max: 500,
            message: `${this.$t("common:ruleMessage:maxLength")} 500`,
            trigger: "blur",
          },
        ],
        TrialSiteAliasName: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
          {
            max: 500,
            message: `${this.$t("common:ruleMessage:maxLength")} 500`,
            trigger: "blur",
          },
        ],
      },
      trialId: "",
      TrialSiteSelectList: [],
    };
  },
  mounted() {
    this.trialId = this.$route.query.trialId;
    this.getList();
    this.getTrialSiteSelectList();
  },
  methods: {
    // 打开DICOMAE配置列表
    handleConfig(row, status) {
      this.$refs.dicomAEList.open(row, status);
    },
    handleSelect(item) {
      this.form.TrialSiteName = item.SiteName;
      this.form.TrialSiteAliasName = item.AliasName
        ? item.AliasName
        : this.form.TrialSiteAliasName;
      this.form.SiteId = item.SiteId;
    },
    querySearch(queryString, cb) {
      var TrialSiteSelectList = this.TrialSiteSelectList;
      var results = queryString
        ? TrialSiteSelectList.filter(this.createFilter(queryString))
        : TrialSiteSelectList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (TrialSiteSelectList) => {
        return (
          TrialSiteSelectList.SiteName.toLowerCase().indexOf(
            queryString.toLowerCase()
          ) >= 0 ||
          TrialSiteSelectList.AliasName.toLowerCase().indexOf(
            queryString.toLowerCase()
          ) >= 0
        );
      };
    },
    // 获取site可选列表
    async getTrialSiteSelectList() {
      try {
        let res = await getTrialSiteSelectList();
        if (res.IsSuccess) {
          this.TrialSiteSelectList = res.Result.map((item) => {
            return {
              value: item.SiteName + " " + item.AliasName,
              ...item,
            };
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 获取site列表
    getList() {
      this.listLoading = true;
      this.listQuery.TrialId = this.trialId;
      getSiteCRCSimpleList(this.listQuery)
        .then((res) => {
          this.listLoading = false;
          this.list = res.Result.CurrentPageData;
          this.total = res.Result.TotalCount;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    // 打开添加site弹窗
    handleAdd() {
      this.edit_model.title = this.$t(
        "trials:sitesList:dialogTitle:assignSite"
      );
      this.edit_model.model_type = "add";
      Object.keys(this.form).forEach((key) => {
        this.form[key] = "";
        if (key === "IsDeleted") {
          this.form[key] = true;
        }
      });
      this.edit_model.visible = true;
    },
    // 给site分配CRC
    handleAssignCRC(row) {
      if (!row.TrialSiteCode) {
        this.$alert(this.$t("trials:sitesList:message:setSiteId"));
        return;
      }
      this.currentSiteId = row.TrialSiteId;
      var title = this.$t("trials:sitesList:dialogTitle:assignStaff");
      console.log(title);
      this.crc_model.title = title.replace("xxx", this.$route.query.trialCode);
      this.crc_model.visible = true;
    },
    // 编辑site信息
    handleEdit(row) {
      if (Object.keys(row).length) {
        this.form = { ...row };
      }
      this.edit_model.title = this.$t("trials:sitesList:dialogTitle:editSite");
      this.edit_model.model_type = "edit";
      this.edit_model.visible = true;
    },
    // 更新site信息
    handleUpdateSiteID() {
      this.$refs["editForm"].validate((valid) => {
        if (!valid) return;
        this.saveBtnLoading = true;
        const param = {
          trialId: this.trialId,
          id: this.form.Id,
          SiteId: this.form.SiteId,
          TrialSiteName: this.form.TrialSiteName,
          trialSiteCode: this.form.TrialSiteCode,
          trialSiteAliasName: this.form.TrialSiteAliasName,
          isDeleted: this.form.IsDeleted,
        };
        if (this.edit_model.model_type === "add") {
          addTrialSites([param])
            .then((res) => {
              this.saveBtnLoading = false;
              if (res.IsSuccess) {
                this.edit_model.visible = false;
                this.$message.success(
                  this.$t("common:message:savedSuccessfully")
                );
                this.getList();
                this.getTrialSiteSelectList();
              }
            })
            .catch(() => {
              this.saveBtnLoading = false;
            });
        } else {
          editTrialSite(param)
            .then((res) => {
              this.saveBtnLoading = false;
              if (res.IsSuccess) {
                this.edit_model.visible = false;
                this.$message.success(
                  this.$t("common:message:savedSuccessfully")
                );
                this.getList();
                this.getTrialSiteSelectList();
              }
            })
            .catch(() => {
              this.saveBtnLoading = false;
            });
        }
      });
    },
    // 移除site
    handleDelete(row) {
      this.$confirm(this.$t("trials:sitesList:message:removeSite"), {
        type: "warning",
        distinguishCancelAndClose: true,
      }).then(() => {
        deleteTrialSite(row.Id, this.trialId).then((res) => {
          if (res.IsSuccess) {
            this.list.splice(
              this.list.findIndex((item) => item.Id === row.Id),
              1
            );
            this.$message.success(
              this.$t("trials:sitesList:message:removedSuccessfully")
            );
          }
        });
      });
    },
    handleStatus(row) {
      const { IsDeleted } = { ...row };
      this.currentRow = { ...row };
      this.staffStatus = IsDeleted;
      this.status_model.visible = true;
    },
    // 修改某个site下的CRC状态
    saveStatus() {
      this.btnLoading = true;
      deleteSiteCRC(this.currentRow.Id, this.trialId, this.staffStatus)
        .then((res) => {
          this.btnLoading = false;
          if (res.IsSuccess) {
            this.status_model.visible = false;
            this.getTrialSiteCRCList();
            this.getList();
            this.$message.success(this.$t("common:message:savedSuccessfully"));
          }
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    // 获取某个site下的crc列表
    getCrcList(row) {
      this.currentRow = { ...row };
      this.currentSiteId = row.TrialSiteId;
      var title = this.$t("trials:sitesList:dialogTitle:staff");
      this.siteOfcrc_model.title = title.replace("xxx", row.TrialSiteCode);
      this.siteOfcrc_model.visible = true;
      this.getTrialSiteCRCList();
    },
    getTrialSiteCRCList() {
      this.userListLoading = true;
      getTrialSiteCRCList(this.trialId, this.currentRow.TrialSiteId)
        .then((res) => {
          this.userListLoading = false;
          this.userList = res.Result;
        })
        .catch(() => {
          this.userListLoading = false;
        });
    },
    // 导出
    handleResearchListExport() {
      this.listQuery.TrialId = this.trialId;
      this.listLoading = true;
      // eslint-disable-next-line no-unused-vars
      const { SortField, Asc, PageIndex, PageSize, ...param } = {
        ...this.listQuery,
      };
      trialSiteUserListExport({ ...param })
        .then((data) => {
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleResearchList() {
      this.$router.push({
        path: `/trials/trials-panel/attachments/site-research?trialId=${this.$route.query.trialId}&trialCode=${this.$route.query.trialCode}&researchProgramNo=${this.$route.query.researchProgramNo}`,
      });
    },
    handleUpload() {
      this.upload_model.visible = true;
    },
    handleDownload() {
      this.loading = true;
      DownloadCommonDoc("TrialSiteSurveyImportUser_Template")
        .then((data) => {
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // site列表排序
    handleSortByColumn(column) {
      if (column.order === "ascending") {
        this.listQuery.Asc = true;
      } else {
        this.listQuery.Asc = false;
      }
      this.listQuery.SortField = column.prop;
      this.listQuery.PageIndex = 1;
      this.getList();
    },
    // 查询
    handleSearch() {
      this.listQuery.PageIndex = 1;
      this.getList();
    },
    // 重置
    handleReset() {
      this.listQuery = getListQueryDefault();
      this.getList();
    },
    // 关闭添加分配crc模态框
    closeDialog(isReresh) {
      this.crc_model.visible = false;
      if (isReresh) {
        this.listQuery = getListQueryDefault();
        this.getList();
        this.getTrialSiteCRCList();
      }
    },
    // 关闭添加site模态框
    closeSiteDialog() {
      this.site_model.visible = false;
      this.listQuery = getListQueryDefault();
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.assign-site {
  .filter-box {
    display: flex;
    padding: 5px;

    .base-search-form {
      .el-form-item {
        margin-bottom: 0px;
      }
    }

    .mr {
      margin-right: 5px;
      width: 120px;
    }
  }

  .el-dialog__header {
    padding: 10px;
  }

  .el-dialog__body {
    padding: 10px;
  }
}
</style>
