<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-table ref="table" view-code="OpenUser" @create="$refs.form.open()" @edit="({ row, index }) => $refs.form.open(row)">
        <template slot-scope="{ row }" slot="command">
          <Button size="small" :title="$t('Front_Btn_API_Permission')" type="primary" custom-icon="fa fa-atom" @click="openApiTableOpen(row)"></Button>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" view-code="OpenUserEdit" @on-after-save="$refs.table.loadData()" />
    <modal-table ref="openApiTable" view-code="OpenApiCheck" :select-enable="true" :static="true" :footerEnable="true">
      <template slot="footer">
        <Button type="primary" custom-icon="fa fa-save" @click="saveOpenApiPermission()">{{ $t('Front_Btn_Save') }}</Button>
        <Button type="default" custom-icon="fa fa-times" @click="$refs.openApiTable.close()">{{ $t('Front_Btn_Close') }}</Button>
      </template>
    </modal-table>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import openApiPermissionApi from '../../api/openApiPermission';

  export default {
    name: 'system-openUser',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        openUserID: null
      };
    },
    computed: {},
    created() {},
    methods: {
      // 打开接口列表界面
      async openApiTableOpen(row) {
        this.openUserID = row.id;
        let openApis = await openApiPermissionApi.queryForCheck(row.id);
        this.$refs.openApiTable.loadData(openApis);
        this.$refs.openApiTable.setSelected(
          openApis.filter(item => {
            return item.checked;
          })
        );
        this.$refs.openApiTable.open();
      },
      // 保存接口权限
      async saveOpenApiPermission() {
        this.confirm('Front_Msg_Sure_To_Save', () => {
          let openApiIDs = this.$refs.openApiTable.getSelected().map(item => {
            return item.id;
          });

          openApiPermissionApi.batchSave(this.openUserID, openApiIDs).then(() => {
            this.success('Front_Msg_Success', () => {
              this.$refs.openApiTable.close();
            });
          });
        });
      }
    }
  };
</script>
