<template>
  <div class="routerWapper">
    <div class="portalDetailTitle" v-if="$route.name == 'businessSystemList'">
      <span class="title">业务系统</span>
      <div class="layoutMargin layoutPadding">
        <a-row>
          <a-col span="24">
            <a-button icon="plus" type="primary" @click="onRegister">系统注册</a-button>
          </a-col>
        </a-row>
        <div class="itemMargin">
          <a-alert message="Informational Notes" type="info" show-icon />
        </div>
        <a-table class="elevator-table portalTable" :dataSource="list" :columns="columns" size="small" :pagination="pagination" rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
          <span  slot="operation" slot-scope="text, record"> 
            <span class="actionBtn" @click="edit(record)">编辑</span>
            <span class="actionBtn" @click="more(record)">更多</span>
          </span>
        </a-table>
        <a-modal title="系统注册"  v-model="isShow" width='900px' style="padding: 20px">
          <a-steps :current="current">
            <a-step v-for="item in steps" :key="item.title" :title="item.title" />
          </a-steps>
          <div class="steps-content">
            <!-- {{ steps[current].content }} -->
            <a-form :form='form'>
              <div v-if="current == 0">
                <a-form-item label="系统编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="['xtbm', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
                </a-form-item>

                <a-form-item label="系统名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="['xtmc', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
                </a-form-item>

                <a-form-item label="系统地址" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="['xtdz', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
                </a-form-item>
              </div>
              <div v-if="current == 1">
                <a-form-item label="授权类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-select placeholder="请选择授权类型" v-decorator="['sqlx']">
                    <a-select-option value="oauth2">oauth2</a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item label="授权路径" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="['sqlj', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
                </a-form-item>

                <a-form-item label="授权方法" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-select placeholder="请选择授权方法" v-decorator="['sqff']">
                    <a-select-option value="POST">POST</a-select-option>
                    <a-select-option value="GET">GET</a-select-option>
                  </a-select>
                </a-form-item>
              </div>
              <div v-if="current == 2">
                <a-form-item label="Token Key" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="['tokenKey', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
                </a-form-item>

                <a-form-item label="Token Header Name" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="['tokenHeaderName', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
                </a-form-item>

                <a-form-item label="Token Prefix" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="['tokenPrefix', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
                </a-form-item>

                <a-form-item label="Token Expires Time Key" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="['tokenExpiresTimeKey', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
                </a-form-item>
              </div>
            </a-form>
          </div>
          <template slot="footer">
            <a-button key="back" @click="isShow = !isShow">
              取消
            </a-button>
            <a-button v-if="current >= 1" type="primary" @click="handlePrevStep()">
              上一步
            </a-button>
            <a-button v-if="current < 2" type="primary" @click="handleNextStep()">
              下一步
            </a-button>
            <a-button v-if="current == 2" type="primary" @click="handleRegisterOk()">
              完成
            </a-button>
          </template>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      current: 0,
      steps: [
        {
          title: '基本信息'
        },
        {
          title: '授权认证信息'
        },
        {
          title: '授权结果映射'
        },
      ],
      isShow: false,
      selectedRowKeys: [],
      list: [
        {
          xtbm: 'wuyeapp',
          xtmc: '物业APP',
          xtdz: 'http://www.962121.net'
        }
      ],
      columns: [
        {
          title: '系统编码',
          dataIndex: 'xtbm',
          align: 'center',
          key: 'xtbm'
        },
        {
          title: '系统名称',
          dataIndex: 'xtmc',
          align: 'center',
          key: 'xtmc'
        },
        {
          title: '系统地址',
          dataIndex: 'xtdz',
          align: 'center',
          key: 'xtdz'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          width: '120px',
          scopedSlots: {
            customRender: 'operation',
          },
        }
      ],
      pagination: {//分页
        pageNo: 1,
        pageSize: 10,
        total: 10,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        onChange: this.pageChange
      },
      formStoreList: []
    }
  },
  methods: {
    pageChange(val) {
      this.pagination.pageNo = val
      this.pagination.current = val
      // this.getCompanyList()
    },
    onSelectChange() {},
    onRegister() {
      this.isShow = !this.isShow
    },
    handlePrevStep() {
      if(this.current >= 1) {
        this.current -= 1
      }
    },
    handleNextStep() {
      this.form.validateFields((err, values) => {
        if(!err) {
          this.formStoreList.push(this.form.getFieldsValue())
        }
      })

      console.log(this.formStoreList)
      this.current += 1
    },
    handleRegisterOk() {
      console.log(this.form.getFieldsValue())
    }
  }
}
</script>

<style scoped>
.itemMargin {
  margin-top: 14px;
  margin-bottom: 14px
}
</style>
