<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('平台账号设置') }}</span>
            <el-button
              type="info"
              style="float: right"
              @click="querySmsData"
            >
              {{ __('查看记录') }}
            </el-button>
          </div>
          <div>
            <el-form
              ref="form"
              label-width="100px"
              :model="form"
              :rules="rules"
              size="medium"
            >
              <el-form-item
                :label="__('账号/平台id')"
                label-width="150px"
                prop="service_user_id"
              >
                <el-input
                  v-model="form.service_user_id"
                  clearable
                  :placeholder="__('请输入 账号/平台id')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('短信KEY/平台KEY')"
                label-width="150px"
                prop="service_app_key"
              >
                <el-input
                  v-model="form.service_app_key"
                  clearable
                  :placeholder="__('请输入 短信KEY/平台KEY')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('测试内容')"
                label-width="150px"
                prop="sms_content"
              >
                <el-input
                  v-model="form.sms_content"
                  clearable
                  :placeholder="__('请输入 测试内容')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('测试接收手机号码')"
                label-width="150px"
                prop="sms_test"
              >
                <el-input
                  v-model="form.sms_test"
                  clearable
                  :placeholder="__('请输入 测试接收手机号码')"
                  :style="{ width: '100%' }"
                >
                  <template slot="append">{{ __('发送') }}</template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <SmsTable ref="SmsTable" />
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getList, doEdit } from '@/api/base/config'
  import SmsTable from './components/smsRecord'

  export default {
    name: 'Sms',
    components: {SmsTable},
    data() {
      return {
        form: {
          service_user_id: undefined,
          service_app_key: undefined,
          sms_content: undefined,
          sms_test: undefined,
        },
        rules: {
          service_user_id: [
            {
              required: true,
              message: this.__('请输入 账号/平台id'),
              trigger: 'blur',
            },
          ],
          service_app_key: [
            {
              required: true,
              message: this.__('请输入 短信KEY/平台KEY'),
              trigger: 'blur',
            },
          ],
          sms_content: [
            {
              required: true,
              message: this.__('请输入 测试内容'),
              trigger: 'blur',
            },
          ],
          sms_test: [
            {
              required: true,
              message: this.__('请输入 测试接收手机号码'),
              trigger: 'blur',
            },
          ],
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      async fetchData() {
        const { data } = await getList()
        this.form = {
          service_user_id: data.service_user_id,
          service_app_key: data.service_app_key,
          sms_content: data.sms_content,
          sms_test: data.sms_test,
        }
      },
      querySmsData() {
        this.$refs['SmsTable'].showTable()
      },
      handleEdit() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.form),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>
