<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("vinno.create")
        }}</el-button>
        <el-button
          type="primary"
          icon="el-icon-compass"
          :disabled="selection.length == 0"
          @click="add"
          >{{ $t("organization.AssignAdmin") }}</el-button
        >
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-select
            v-model="search.QueryType"
            clearable
            style="width: 200px"
            :placeholder="$t('vinno.placeholder')"
            class="filter-item"
          >
            <el-option
              v-for="item in queryTypes"
              :key="item"
              :label="$t('organization.QueryType' + item)"
              :value="item"
            />
          </el-select>
          <el-input
            v-model="search.Keyword"
            :placeholder="$t('vinno.placeholder2')"
            style="width: 200px"
            clearable
          ></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("vinno.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('vinno.createTime')" prop="CreateTime">
          <template #default="scope">
            <span>{{
              scope.row.CreateTime.slice(0, 19).replace("T", " ")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('vinno.operate')"
          fixed="right"
          align="center"
          width="120"
        >
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              @click="table_edit(scope.row, scope.$index)"
              >编辑</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("vinno.del") }}</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <save-dialog
    v-if="dialog.show"
    ref="saveDialog"
    @success="handleSuccess"
    @closed="dialog.show = false"
  ></save-dialog>
</template>

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

export default {
  components: {
    saveDialog,
  },
  data() {
    return {
      dialog: {
        show: false,
      },
      apiObj: this.query,
      search: {
        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("edit").setData(row);
      });
    },
    //删除
    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");
      }
    },
    //批量删除
    async batch_del() {
      this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, "提示", {
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading();
          this.selection.forEach((item) => {
            this.$refs.table.tableData.forEach((itemI, indexI) => {
              if (item.id === itemI.id) {
                this.$refs.table.tableData.splice(indexI, 1);
              }
            });
          });
          loading.close();
          this.$message.success("操作成功");
        })
        .catch(() => {});
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //本地更新数据
    handleSuccess(data, mode) {
      this.$refs.table.refresh("refresh");
      if (mode == "add") {
        data.id = new Date().getTime();
        this.$refs.table.tableData.unshift(data);
      } else if (mode == "edit") {
        this.$refs.table.tableData
          .filter((item) => item.id === data.id)
          .forEach((item) => {
            Object.assign(item, data);
          });
      }
    },
  },
};
</script>

<style>
</style>
