<template>
  <div>
    <div class="system-index-btns mgb20">
      <a-button
        v-auth="'AUTH_APP_INSTANCE-SAVE'"
        type="primary"
        class="lk-mb-20"
        @click="editRow()"
      >
        新建系统实例
      </a-button>
    </div>
    <!-- 列表区域-STR -->
    <lk-table
      :table-data="tableData"
      @change="search"
    >
      <a-table-column
        data-index="id"
        title="流水号"
      />
      <a-table-column
        data-index="name"
        title="实例名字"
      />
      <a-table-column
        data-index="code"
        title="英文编码"
      />
      <a-table-column
        data-index="appName"
        title="系统名字"
      />
      <a-table-column title="类型">
        <template slot-scope="scope">{{ scope.type === 0?'内部系统':'外部系统' }}</template>
      </a-table-column>

      <a-table-column>
        <template
          v-if="scope.type !== 0"
          slot-scope="scope"
        >
          <a-button
            v-auth="'AUTH_APP_INSTANCE-SAVE'"
            type="link"
            @click="editRow(scope)"
          >
            编辑
          </a-button>
        </template>
      </a-table-column>
    </lk-table>
    <!-- 列表区域-END -->

    <!-- 保存记录-STR -->
    <a-modal
      v-model="editDialog.show"
      :title="editDialog.data.id?'修改系统实例':'添加系统实例'"
      :confirm-loading="editDialog.save"
      cancel-text="取消"
      ok-text="确认"
      @ok="saveDialog"
    >
      <a-form-model
        ref="form"
        :rules="rules"
        :model="editDialog.data"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-model-item label="系统" prop="appId" required>
          <a-select
            v-model="editDialog.data.appId"
            show-search
            placeholder="请输入系统名字"
            :filter-option="false"
            @search="remoteMethod"
            @focus="remoteMethod()"
          >
            <a-spin v-if="loading" slot="notFoundContent" size="small" />
            <a-select-option
              v-for="item in apps"
              :key="item.id"
              :value="item.id"
            >
              {{ item.cnName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="实例名字" prop="name" required>
          <a-input
            v-model="editDialog.data.name"
            placeholder="请输入实例名字"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 保存记录-END -->
  </div>
</template>

<script>
export default {
  name: 'AuthAppInstanceList',
  data() {
    return {
      apps: [],
      loading: false,
      tableData: {
        loading: false,
        total: 0,
        page: 1,
        size: 10,
        list: []
      },
      editDialog: {
        data: {
          appId: '',
          name: ''
        },
        save: false,
        show: false
      },
      rules: {
        appId: [{ required: true, message: '请选择系统', trigger: 'change' }],
        name: [{ required: true, message: '请输入实例名字', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.search(1)
  },
  methods: {
    async search(page) {
      page = page || this.tableData.page || 1
      this.tableData.loading = true

      try {
        const data = await this.$store.dispatch('auth/authAppInstanceList', {
          page: page,
          size: this.tableData.size
        })
        this.tableData.list = data.list || []
        this.tableData.total = data.count
        this.tableData.page = page
        this.tableData.loading = false
      } catch (e) {
        this.tableData = this.$options.data().tableData
      }
    },
    resetForm() {
      this.search(1)
    },
    editRow(row) {
      row = row || {}
      this.editDialog.data = JSON.parse(JSON.stringify(row))
      for (const key in this.editDialog.errmsg) {
        this.editDialog.errmsg[key] = ''
      }
      this.remoteMethod()
      this.editDialog.show = true
    },
    async remoteMethod(query) {
      this.loading = true
      try {
        const data = await this.$store.dispatch('auth/authAppList', {
          quickSearch: query,
          type: 1,
          size: 1000
        })
        this.apps = data.list || []
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },
    async saveDialog() {
      this.editDialog.save = true
      try {
        await this.$refs.form.validate()
        this.$store.dispatch('auth/authAppInstanceSave', {
          id: this.editDialog.data.id,
          appId: this.editDialog.data.appId,
          name: this.editDialog.data.name
        })
        this.editDialog = this.$options.data().editDialog
        this.search()
      } catch (e) {
        this.editDialog.save = false
      }
    }
  }
}
</script>

<style lang="scss">
.system-index-btns {
  text-align: right;
  & i {
    font-size: 12px;
    margin-right: 8px;
    vertical-align: top;
  }
  & span {
    display: inline-block;
    vertical-align: top;
  }
}
.device-info {
  .device-info-body {
    margin: 15px 15px 70px;
  }
  .el-dialog__header {
    border-bottom: 1px solid $lk-border-base;
  }
  .info-line {
    margin-bottom: 10px;
    span {
      display: inline-block;
      padding: 5px 0;
      color: $lk-text-primary;
      font-size: 14px;
      line-height: 24px;
    }
    span.name {
      min-width: 110px;
      line-height: 24px;
    }
  }
}
</style>
