<template>
  <div class="main">
    <div class="main-search"></div>
    <div class="main-btns"></div>
    <div class="main-table"></div>
    <div class="main-footer"></div>
  </div>

  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add">{{
          $t("create")
        }}</el-button>
        <el-button
          type="primary"
          icon="el-icon-share"
          :disabled="selection.length == 0"
          @click="table_saveAdmin"
          >{{ $t("organization.assignAdmin") }}</el-button
        >
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
            v-model="search.Keyword"
            clearable
            style="width: 320px"
            :placeholder="$t('pleaseInput')"
          >
            <template #prepend>
              <el-select
                v-model="search.QueryType"
                style="width: 120px"
                :placeholder="$t('pleaseChoose')"
                class="filter-item"
              >
                <el-option
                  v-for="item in queryTypes"
                  :key="item"
                  :label="$t('organization.queryType' + item)"
                  :value="item"
                />
              </el-select>
            </template>
          </el-input>

          <el-select
            v-model="search.State"
            clearable
            style="width: 200px"
            :placeholder="$t('organization.organizationState')"
            class="filter-item"
          >
            <el-option
              v-for="item in stateTypes"
              :key="item"
              :label="$t('organization.' + item)"
              :value="item"
            />
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="upsearch">{{
            $t("query")
          }}</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        :pageSize="10"
        row-key="UserCode"
        @selection-change="selectionChange"
        stripe
        :hideDo="true"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          :label="$t('organization.organizationName')"
          prop="OrganizationName"
        ></el-table-column>
        <el-table-column
          :label="$t('organization.organizationLogo')"
          prop="LogoUrl"
        >
          <template #default="scope">
            <el-avatar :src="scope.row.LogoUrl" size="large" @error="true">
              <img
                src="http://cdn-bj.fis.plus/A914494F6DEA4B57ACC8049F4776291C.png"
              />
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('organization.organizationState')"
          prop="State"
        >
          <template #default="scope">
            <span>{{
              $t("organization.organizationState" + scope.row.State)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('organization.countryName')"
          prop="CountryName"
        ></el-table-column>
        <el-table-column
          :label="$t('organization.provinceName')"
          prop="ProvinceName"
        ></el-table-column>
        <el-table-column
          :label="$t('organization.cityName')"
          prop="CityName"
        ></el-table-column>
        <el-table-column
          :label="$t('organization.patientType')"
          prop="PatientType"
        >
          <template #default="scope">
            <span>{{
              $t("organization.patientType" + scope.row.PatientType)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('organization.adminFullName')"
          prop="AdminFullName"
        ></el-table-column>
        <el-table-column
          :label="$t('organization.directorName')"
          prop="DirectorName"
        ></el-table-column>
        <el-table-column :label="$t('createTime')" prop="CreateTime">
          <template #default="scope">
            <span>{{ new Date(scope.row.CreateTime).toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('operate')"
          fixed="right"
          align="center"
          width="210"
        >
          <template #default="scope">
            <!-- 编辑 -->
            <el-button
              type="text"
              size="small"
              @click="table_edit(scope.row, scope.$index)"
              >{{ $t("edit") }}</el-button
            >
            <!-- 删除 -->
            <el-popconfirm
              :title="confirmDel"
              @confirm="table_del(scope.row, scope.$index)"
            >
              <template #reference>
                <el-button
                  type="text"
                  size="small"
                  @click="changeTitle(scope.row)"
                  >{{ $t("delete") }}</el-button
                >
              </template>
            </el-popconfirm>
            <!-- 审核 -->
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.State != 0"
              @click="table_audit(scope.row, scope.$index)"
              >{{ $t("audit") }}</el-button
            >
            <!-- 更多 -->
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
              <el-button type="text" size="small"
                >{{$t('more')}}<el-icon class="el-icon--right"
                  ><el-icon-arrow-down /></el-icon
              ></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="table_saveUser(scope.row)">{{
                    $t("organization.setDirector")
                  }}</el-dropdown-item>
                  <el-dropdown-item @click="table_Setting(scope.row, 0)">{{
                    $t("organization.setting0")
                  }}</el-dropdown-item>
                  <el-dropdown-item @click="table_Setting(scope.row, 1)">{{
                    $t("organization.setting1")
                  }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <save-dialog
    v-if="dialog.show"
    ref="saveDialog"
    @success="refresh"
    @closed="dialog.show = false"
  ></save-dialog>
  <save-setting
    v-if="dialog.showSetting"
    ref="saveSetting"
    @closed="dialog.showSetting = false"
  ></save-setting>
  <save-admin
    v-if="dialog.showAdmin"
    ref="saveAdmin"
    @success="saveAdmin"
    @closed="dialog.showAdmin = false"
  ></save-admin>
  <save-user
    v-if="dialog.showUser"
    ref="saveUser"
    @success="saveUser"
    @closed="dialog.showUser = false"
  ></save-user>
</template>

<script>
import saveDialog from "./saveOrganization";
import saveSetting from "./saveSetting";
import saveAdmin from "@/components/admin/selectAdmin";
import saveUser from "@/components/user/selectUser";

export default {
  components: {
    saveDialog,
    saveSetting,
    saveAdmin,
    saveUser,
  },
  data() {
    return {
      dialog: {
        show: false,
        showSetting: false,
        showAdmin: false,
        showUser: false,
      },
      apiObj: this.query,
      search: {
        QueryType: "0",
        Keyword: null,
      },
      queryTypes: ["0", "1"],
      stateTypes: ["WaitAudit", "Audited", "Rejected"],
      selection: [],
      confirmDel: this.$t("organization.confirmDelete"),
      organizationCode: "",
    };
  },
  methods: {
    async query(params) {
      return await this.$API.wing.list("GetManageOrganizationPages", params);
    },
    //搜索
    upsearch() {
      this.$refs.table.upData(this.search);
    },
    //刷新当前页
    refresh() {
      this.$refs.table.refresh();
    },
    //增加
    add() {
      this.dialog.show = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open();
      });
    },
    //编辑
    table_edit(row) {
      this.dialog.show = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open(true).setData(row);
      });
    },
    //配置
    table_Setting(row, type) {
      this.dialog.showSetting = true;
      this.$nextTick(() => {
        this.$refs.saveSetting.open(type).setData(row);
      });
    },
    //分配管理员
    table_saveAdmin() {
      this.dialog.showAdmin = true;
      this.$nextTick(() => {
        var adminCode = "";
        if (this.selection.length == 1) {
          adminCode =
            this.selection[0].AssignedAdmins &&
            this.selection[0].AssignedAdmins[0];
        }
        this.$refs.saveAdmin.open().setData(adminCode);
      });
    },
    //保存管理员
    async saveAdmin(selectCode) {
      if (this.selection.length == 0) {
        return;
      }
      var organizationCodes = this.selection.map((x) => x.OrganizationCode);
      await this.$API.wing.post(
        "AssignedAdminsToOrganizationsAsync",
        {
          OrganizationCodes: organizationCodes,
          AssignedAdmins: [selectCode],
        },
        this.refresh
      );
    },
    //分配责任人
    table_saveUser(row) {
      this.dialog.showUser = true;
      this.organizationCode = row.OrganizationCode;
        console.log(row)
      this.$nextTick(() => {
        var director = "";
        if (row.Directors.length == 1) {
          director = row.Directors[0];
        }
        this.$refs.saveUser.open().setData(row.OrganizationCode, director);
      });
    },
    //保存责任人
    async saveUser(selectCode) {
      await this.$API.wing.post(
        "ModifyOrganizationDirectorsAsync",
        {
          OrganizationCode: this.organizationCode,
          Directors: [selectCode],
        },
        this.refresh
      );
    },
    //审核
    table_audit(row) {
      this.$confirm(this.$t("organization.approveOrgMsg"), this.$t("audit"), {
        distinguishCancelAndClose: true,
        confirmButtonText: this.$t("audited"),
        cancelButtonText: this.$t("rejected"),
        type: "warning",
      })
        .then(() => {
          this.$API.wing.post(
            "ModifyOrganizationStateAsync",
            {
              OrganizationCode: row.OrganizationCode,
              State: 1,
            },
            this.refresh
          );
        })
        .catch((action) => {
          if (action === "cancel") {
            this.$API.wing.post(
              "ModifyOrganizationStateAsync",
              {
                OrganizationCode: row.OrganizationCode,
                State: 2,
              },
              this.refresh
            );
          }
        })
        .finally(() => {});
    },
    //删除
    async table_del(row) {
      await this.$API.wing.post(
        "RemoveOrganization",
        {
          OrganizationCode: row.OrganizationCode,
        },
        this.refresh
      );
    },
    //删除前验证
    async changeTitle(row) {
      this.confirmDel = this.$t("organization.confirmDelete");
      var res = await this.$API.wing.post("OrganizationBindQueryResult", {
        OrganizationCode: row.OrganizationCode,
      });
      if (res.BindDeviceNum > 0 || res.BindUserNum > 0) {
        this.confirmDel = this.$t("organization.confirmDelete2");
      }
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
  },
};
</script>

<style>
</style>
