<template>
  <div id="">
    <el-dialog
      :visible.sync="dialogVisible"
      width="1088px"
      :show-close="false"
      :close-on-click-modal="false"
      destroy-on-close
      @closed="close"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">选择机构</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <el-table
        ref="table"
        row-key="tenantId"
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          reserve-selection
          :selectable="dis_active"
        >
        </el-table-column>
        <el-table-column
          align="center"
          type="index"
          :disabled="true"
        ></el-table-column>
        <template v-for="(item, index) in tableSet">
          <el-table-column
            header-align="center"
            :align="item.align ? item.align : 'center'"
            :prop="item.prop"
            :label="item.label"
            :width="item.width || ''"
            ><template slot-scope="scope"
              ><div v-if="item.scope === 'options'">
                <template v-for="(itemt, indext) in item.options">
                  <span v-if="itemt.value === scope.row[item.prop]">{{
                    itemt.label
                  }}</span>
                </template>
              </div>
              <span v-else>{{ scope.row[item.prop] }}</span></template
            >
          </el-table-column>
        </template>
      </el-table>
      <div style="margin-top: 10px; text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTable" :loading="disbtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      disbtn: false,
      dialogVisible: false,
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet: [
        {
          label: "租户ID",
          prop: "tenantId",
          hidden: true,
        },
        {
          label: "租户名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "地址",
          prop: "address",
          hidden: true,
        },
        {
          label: "状态",
          prop: "status",
          hidden: true,
          scope: "options",
          options: [
            {
              label: "启用",
              value: 1,
            },
            {
              label: "失效",
              value: 0,
            },
          ],
        },
      ],
      tableData: [],
      loading: false,
      total: 0,
      outActive: [], //置灰列表
      active: [], //当前选中
    };
  },
  methods: {
    selectionChange(e) {
      this.active = e;
    },
    showBox(e) {
      if (e && e.length > 0) {
        this.outActive = e;
      }
      this.getList(true);
      this.dialogVisible = true;
    },
    dis_active(e) {
      return this.outActive.includes(e.tenantId) ? false : true;
    },
    getList(int) {
      if (int) {
        this.formData = { pageSize: 10, pageNum: 1 };
      }
      this.loading = true;
      this.$api
        .systemtenantlist(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submitTable() {
      if (this.active.length === 0) {
        this.$message.warning("请勾选机构");
        return;
      }
      this.disbtn = true;
      this.dialogVisible = false;
      this.$emit("backTenantList", this.active);
    },
    close() {
      this.disbtn = false;
      this.$refs.table.clearSelection();
      this.outActive = [];
      this.active = [];
    },
    handleSizeChange(e) {
      this.formData.pageSize = e;
      this.formData.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(e) {
      this.formData.pageNum = e;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
