<template>
  <box-content>
    <div class="search">
      <el-form :inline="true" size="small" class="base-search-form">
        <el-form-item label="Site Name:">
          <el-input v-model="searchData.SiteName" style="width: 120px" />
        </el-form-item>
        <el-form-item label="Alias Name:">
          <el-input v-model="searchData.AliasName" style="width: 120px" />
        </el-form-item>
        <el-form-item label="Country:">
          <el-input v-model="searchData.Country" style="width: 120px" />
        </el-form-item>
        <el-form-item label="City:">
          <el-input v-model="searchData.City" style="width: 120px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >Search</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh-left"
            @click="handleReset"
            >Reset</el-button
          >
        </el-form-item>
      </el-form>
      <div style="margin-left: auto">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleAddSystemSite"
          >{{ $t("trial:dictionary:institutions:site:addSystemSite") }}
        </el-button>
        <el-button
          type="primary"
          size="small"
          style="margin-left: 10px"
          icon="el-icon-plus"
          @click="handleAddSite"
          >New
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      v-adaptive="{ bottomOffset: 60 }"
      :data="list"
      stripe
      height="100"
      @sort-change="handleSortByColumn"
    >
      <el-table-column type="index" width="40" />
      <el-table-column
        prop="SiteCode"
        label="Site Code"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="SiteName"
        label="Site Name"
        min-width="150"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="AliasName"
        label="Alias Name"
        min-width="150"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="UniqueCode"
        label="组织机构代码"
        min-width="130"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="Country"
        label="Country"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="City"
        label="City"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="Address"
        label="Address"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="HospitalName"
        label="Affiliated Hospital"
        min-width="180"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="DirectorName"
        label="Director Name"
        min-width="160"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="DirectorPhone"
        label="Director Phone"
        min-width="150"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="ContactName"
        label="Contact Name"
        min-width="150"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="ContactPhone"
        label="Contact Phone"
        min-width="160"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="CreateTime"
        label="CreateTime"
        min-width="160"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column label="Action" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            circle
            icon="el-icon-edit-outline"
            title="编辑"
            @click="handleEdit(scope.row)"
          />
          <el-button
            circle
            icon="el-icon-delete"
            title="删除"
            @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"
    />
    <el-dialog
      v-if="editVisible"
      :visible.sync="editVisible"
      :close-on-click-modal="false"
      :title="title"
      width="800px"
      custom-class="base-dialog-wrapper"
    >
      <site-form
        v-if="editVisible"
        :data="rowData"
        @close="close"
        @getList="getList"
      />
    </el-dialog>
    <base-model
      v-if="addSystemSite_model.visible"
      :config="addSystemSite_model"
    >
      <template slot="dialog-body">
        <div class="search">
          <el-form :inline="true" size="small" class="base-search-form">
            <el-form-item
              :label="
                $t(
                  'trial:dictionary:institutions:site:table:addSystemSite:TrialCode'
                )
              "
            >
              <el-input
                v-model="addSystemSiteSearchData.TrialCode"
                style="width: 100px"
              />
            </el-form-item>
            <el-form-item
              :label="
                $t(
                  'trial:dictionary:institutions:site:table:addSystemSite:TrialSiteName'
                )
              "
            >
              <el-input
                v-model="addSystemSiteSearchData.TrialSiteName"
                style="width: 100px"
              />
            </el-form-item>
            <el-form-item
              :label="
                $t(
                  'trial:dictionary:institutions:site:table:addSystemSite:TrialSiteAliasName'
                )
              "
            >
              <el-input
                v-model="addSystemSiteSearchData.TrialSiteAliasName"
                style="width: 100px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="getTrialSiteList"
                >{{ $t("trial:dictionary:institutions:site:button:sreach") }}
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-refresh-left"
                @click="handleResetAddSite"
                >{{ $t("trial:dictionary:institutions:site:button:reset") }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          v-loading="addSystemSiteLoading"
          :data="addSystemSiteList"
          stripe
          height="300"
          @sort-change="handleSortByColumnAddSite"
        >
          <el-table-column type="index" width="40" />
          <el-table-column
            prop="TrialCode"
            :label="
              $t(
                'trial:dictionary:institutions:site:table:addSystemSite:TrialCode'
              )
            "
            show-overflow-tooltip
            sortable="custom"
          />
          <el-table-column
            prop="TrialSiteName"
            :label="
              $t(
                'trial:dictionary:institutions:site:table:addSystemSite:TrialSiteName'
              )
            "
            show-overflow-tooltip
            sortable="custom"
          />
          <el-table-column
            prop="TrialSiteAliasName"
            :label="
              $t(
                'trial:dictionary:institutions:site:table:addSystemSite:TrialSiteAliasName'
              )
            "
            show-overflow-tooltip
            sortable="custom"
          />
          <el-table-column
            :label="
              $t(
                'trial:dictionary:institutions:site:table:addSystemSite:Action'
              )
            "
            fixed="right"
            width="80"
          >
            <template slot-scope="scope">
              <el-button
                circle
                type="text"
                :title="$t('trial:dictionary:institutions:site:button:add')"
                @click="addSystemSite(scope.row)"
                >{{
                  $t("trial:dictionary:institutions:site:button:add")
                }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
          class="page"
          style="float: right"
          :total="addSystemSiteSearchDataTotal"
          :page.sync="addSystemSiteSearchData.PageIndex"
          :limit.sync="addSystemSiteSearchData.PageSize"
          @pagination="getTrialSiteList"
        />
      </template>
    </base-model>
  </box-content>
</template>
<script>
import {
  getSiteList,
  deleteSite,
  addOrUpdateSite,
  getTrialSiteList,
} from "@/api/dictionary";
import BaseModel from "@/components/BaseModel";
import BoxContent from "@/components/BoxContent";
import Pagination from "@/components/Pagination";
import SiteForm from "./SiteForm";
const searchDataDefault = () => {
  return {
    SiteName: "",
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: "CreateTime",
    AliasName: "",
    Country: null,
    City: null,
  };
};
const searchSiteDataDefault = () => {
  return {
    // SiteName: "",
    PageIndex: 1,
    PageSize: 20,
    Asc: true,
    SortField: "",
    TrialCode: null,
    TrialSiteName: null,
    TrialSiteAliasName: null,
  };
};
export default {
  name: "Sites",
  components: { BoxContent, Pagination, SiteForm, BaseModel },
  data() {
    return {
      editVisible: false,
      title: "Add",
      searchData: searchDataDefault(),
      list: [],
      total: 0,
      loading: false,
      rowData: {},
      addSystemSite_model: {
        visible: false,
        title: this.$t("trial:dictionary:institutions:site:addSystemSite"),
        width: "800px",
        appendToBody: true,
      },
      addSystemSiteLoading: false,
      addSystemSiteList: [],
      addSystemSiteSearchData: searchSiteDataDefault(),
      addSystemSiteSearchDataTotal: 0,
    };
  },
  mounted() {
    this.getList();
    this.getTrialSiteList();
  },
  methods: {
    // 获取项目级别列表
    async getTrialSiteList() {
      try {
        this.addSystemSiteLoading = true;
        let res = await getTrialSiteList(this.addSystemSiteSearchData);
        if (res.IsSuccess) {
          this.addSystemSiteLoading = false;
          this.addSystemSiteList = res.Result.CurrentPageData;
          this.addSystemSiteSearchDataTotal = res.Result.TotalCount;
        }
      } catch (err) {
        this.addSystemSiteLoading = false;
        console.log(err);
      }
    },
    // 将项目级别中心转换为系统级别中心
    async addSystemSite(item) {
      try {
        let data = {
          SiteName: item.TrialSiteName,
          SiteNameCN: item.TrialSiteName,
          AliasName: item.TrialSiteAliasName,
          SiteCode: item.TrialCode,
          TrialSiteId: item.TrialSiteId,
        };
        this.addSystemSiteLoading = true;
        let res = await addOrUpdateSite(data);
        if (res.IsSuccess) {
          this.getTrialSiteList();
          this.getList();
        }
      } catch (err) {
        this.addSystemSiteLoading = false;
        console.log(err);
      }
    },
    handleAddSystemSite() {
      this.addSystemSite_model.visible = true;
      this.addSystemSiteSearchData = searchSiteDataDefault();
      this.addSystemSiteList = [];
      this.addSystemSiteSearchDataTotal = 0;
      this.getTrialSiteList();
    },
    // 获取Site列表信息
    getList() {
      this.loading = true;
      getSiteList(this.searchData)
        .then((res) => {
          this.loading = false;
          this.list = res.Result.CurrentPageData;
          this.total = res.Result.TotalCount;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 新增Site信息
    handleAddSite() {
      this.rowData = {};
      this.title = "Add";
      this.editVisible = true;
    },
    // 编辑Site信息
    handleEdit(row) {
      this.rowData = row;
      this.title = "Edit";
      this.editVisible = true;
    },
    // 删除Site
    handleDelete(row) {
      this.$confirm(this.$t("trials:uploadedDicoms:message:deleteMes"), {
        type: "warning",
        distinguishCancelAndClose: true,
      }).then(() => {
        this.loading = true;
        deleteSite(row.Id)
          .then((res) => {
            this.loading = false;
            if (res.IsSuccess) {
              this.list.splice(
                this.list.findIndex((item) => item.Id === row.Id),
                1
              );
              this.$store.dispatch("global/setSite", {});
              this.$message.success(
                this.$t("common:message:deletedSuccessfully")
              );
            }
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    // 重置列表
    handleReset() {
      this.searchData = searchDataDefault();
      this.getList();
    },
    handleResetAddSite() {
      this.addSystemSiteSearchData = searchSiteDataDefault();
      this.getTrialSiteList();
    },
    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1;
      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();
    },
    handleSortByColumnAddSite(column) {
      if (column.order === "ascending") {
        this.addSystemSiteSearchData.Asc = true;
      } else {
        this.addSystemSiteSearchData.Asc = false;
      }
      this.addSystemSiteSearchData.SortField = column.prop;
      this.addSystemSiteSearchData.PageIndex = 1;
      this.getTrialSiteList();
    },
    // 关闭模态框
    close() {
      this.editVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.Sites {
  height: 100%;
}
</style>
