<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="add"
          >{{ $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
      >
        <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="200"
        >
          <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"
                >更多<el-icon class="el-icon--right"
                  ><el-icon-arrow-down /></el-icon
              ></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="table_setDirector(scope.row, scope.$index)"
                    >{{ $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>
</template>

<script>
import saveDialog from "./saveOrganization";
import saveSetting from "./saveSetting";

export default {
  components: {
    saveDialog,
    saveSetting,
  },
  data() {
    return {
      dialog: {
        show: false,
        showSetting: false,
      },
      apiObj: this.query,
      search: {
        QueryType: "0",
        Keyword: null,
      },
      queryTypes: ["0", "1"],
      stateTypes: ["WaitAudit", "Audited", "Rejected"],
      selection: [],
      confirmDel: this.$t("organization.ConfirmDelete"),
    };
  },
  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_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>
