<template>
  <div class="api-sign">
    <el-form ref="apiSingFrom" :model="apiSingFrom" :rules="rules" label-width="80px">
      <el-form-item :label="$t('pages.toolsOther.apiSign.platform')" prop="platform">
        <el-select
          v-model="apiSingFrom.platform"
          :placeholder="$t('pages.toolsOther.apiSign.platformPlaceholder')"
          style="width: 100%"
          class="filter-item"
        >
          <el-option
            v-for="item in originPlatforms"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('pages.toolsOther.apiSign.body')" prop="body">
        <el-input v-model="apiSingFrom.body" />
      </el-form-item>
      <el-form-item :label="$t('pages.toolsOther.apiSign.signKey')" prop="key">
        <el-input v-model="apiSingFrom.key" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="submitApiSignFormLoading" @click="submitApiSignForm()">{{ $t('common.submit') }}</el-button>
        <el-button @click.prevent="settingRequestApiSing()">{{ $t('pages.toolsOther.action.setAttributes') }}</el-button>
      </el-form-item>
    </el-form>
    <div v-if="apiSingParamContent" class="sgin-content">
      {{ apiSingParamContent }}
    </div>
    <el-dialog
      :title="$t('pages.toolsOther.apiSign.dialogTitle')"
      :visible.sync="apiSingParamContentVisible"
      :modal-append-to-body="true"
      :append-to-body="true"
      :before-close="apiSingParamContentHandleClose"
    >
      <div class="form-dialog-api-sing">
        <el-form label-width="80px" :model="addSingAttributeForm" style="margin-right: 20px;">

          <el-row v-for="(item, index) in addSingAttributeForm.attributes" :key="index" :gutter="10">
            <el-col :span="12">
              <el-form-item :label="$t('pages.toolsOther.apiSign.key')">
                <el-input v-model="item.key" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('pages.toolsOther.apiSign.value')">
                <el-input v-model="item.value" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cleanSingAttribute">{{ $t('pages.toolsOther.action.clearAttributes') }}</el-button>
        <el-button @click="addSingAttribute">{{ $t('pages.toolsOther.action.addAttribute') }}</el-button>
        <el-button type="primary" @click="submitAddSingAttribute">{{ $t('pages.toolsOther.action.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { requestApiSing } from '@/api/tools'
import { originPlatforms } from '@/constant/origin'
export default {
  name: 'ToolsOther',
  data() {
    return {
      addSingAttributeForm: {
        attributes: [
          { key: '', value: '' }
        ]
      },
      apiSingParamContentVisible: false,
      originPlatforms,
      apiSingFrom: {
        platform: 'iOS',
        body: '',
        key: ''
      },
      submitApiSignFormLoading: false,
      apiSingParamContent: null,
    }
  },
  computed: {
    rules() {
      return {
        platform: [{ required: true, message: this.$t('pages.toolsOther.validation.requiredParam'), trigger: 'blur' }],
        body: [{ required: true, message: this.$t('pages.toolsOther.validation.requiredParam'), trigger: 'blur' }],
        key: [{ required: true, message: this.$t('pages.toolsOther.validation.requiredParam'), trigger: 'blur' }]
      }
    }
  },
  methods: {
    cleanSingAttribute() {
      this.addSingAttributeForm.attributes = [{ key: '', value: '' }]
    },
    submitAddSingAttribute() {
      const attributes = this.addSingAttributeForm.attributes
      const resultModel = {}
      for (let index = 0; index < attributes.length; index++) {
        const attribute = attributes[index]
        resultModel[attribute.key] = attribute.value
      }
      this.apiSingFrom.body = JSON.stringify(resultModel)
      this.apiSingParamContentVisible = false
    },
    apiSingParamContentHandleClose() {
      this.apiSingParamContentVisible = false
    },
    addSingAttribute() {
      this.addSingAttributeForm.attributes.push({ key: '', value: '' })
    },
    settingRequestApiSing() {
      this.apiSingParamContentVisible = true
    },
    submitApiSignForm() {
      const that = this
      that.$refs.apiSingFrom.validate((valid) => {
        if (!valid) {
          console.error('error submit!!')
          return
        }
        that.submitApiSignFormLoading = true
        requestApiSing(that.apiSingFrom).then(res => {
          that.submitApiSignFormLoading = false
          that.apiSingParamContent = res.body
        }).catch(er => {
          that.submitApiSignFormLoading = false
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sgin-content {
  background: rgb(243, 240, 240);
  padding: 20px;
}
</style>
