<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('Weixin账号设置') }}</span>
          </div>
          <div>
            <el-form
              ref="wxForm"
              label-width="100px"
              :model="wxForm"
              :rules="wxRules"
              size="medium"
            >
              <el-form-item
                label="Weixin App Id"
                label-width="150px"
                prop="weixin_app_id"
              >
                <el-input
                  v-model="wxForm.weixin_app_id"
                  clearable
                  :placeholder="__('请输入单行文本Weixin App Id')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="Weixin App Key"
                label-width="150px"
                prop="weixin_app_key"
              >
                <el-input
                  v-model="wxForm.weixin_app_key"
                  clearable
                  :placeholder="__('请输入Weixin App Key')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('是否开启')"
                label-width="150px"
                prop="weixin_status"
              >
                <el-radio-group v-model="wxForm.weixin_status" size="medium">
                  <el-radio
                    v-for="(item, index) in weixin_statusOptons"
                    :key="index"
                    :disabled="item.disabled"
                    :label="__(item.value)"
                  >
                    {{ __(item.label) }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button class="form-sub-btn" icon="el-icon-s-tools" type="primary" @click="wxEdit">
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col v-if="false" :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('Weibo账号设置') }}</span>
          </div>
          <div>
            <el-form
              ref="wbForm"
              label-width="100px"
              :model="wbForm"
              :rules="wbRules"
              size="medium"
            >
              <el-form-item
                label="Weibo App Id"
                label-width="150px"
                prop="weibo_app_id"
              >
                <el-input
                  v-model="wbForm.weibo_app_id"
                  clearable
                  :placeholder="__('请输入 Weibo App Id')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="Weibo App Key"
                label-width="150px"
                prop="weibo_app_key"
              >
                <el-input
                  v-model="wbForm.weibo_app_key"
                  clearable
                  :placeholder="__('请输入 Weibo App Key')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('是否开启')"
                label-width="150px"
                prop="weibo_status"
              >
                <el-radio-group v-model="wbForm.weibo_status" size="medium">
                  <el-radio
                    v-for="(item, index) in weibo_statusOptions"
                    :key="index"
                    :disabled="item.disabled"
                    :label="__(item.value)"
                  >
                    {{ __(item.label) }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button class="form-sub-btn" icon="el-icon-s-tools" type="primary" @click="wbEdit">
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="false">
      <el-col v-if="false" :span="12">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('Qq账号设置') }}</span>
            </div>
            <div>
              <el-form
                ref="qqForm"
                label-width="100px"
                :model="qqForm"
                :rules="qqRules"
                size="medium"
              >
                <el-form-item
                  :label="__('回调地址')"
                  label-width="150px"
                  prop="qq_callback_url"
                >
                  <el-input
                    v-model="qqForm.qq_callback_url"
                    clearable
                    readonly
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="Qq App Id"
                  label-width="150px"
                  prop="qq_app_id"
                >
                  <el-input
                    v-model="qqForm.qq_app_id"
                    clearable
                    :placeholder="__('请输入 Qq App Id')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="Qq App Key"
                  label-width="150px"
                  prop="qq_app_key"
                >
                  <el-input
                    v-model="qqForm.qq_app_key"
                    clearable
                    :placeholder="__('请输入 Qq App Key')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('是否开启')"
                  label-width="150px"
                  prop="qq_status"
                >
                  <el-radio-group v-model="qqForm.qq_status" size="medium">
                    <el-radio
                      v-for="(item, index) in qq_statusOptions"
                      :key="index"
                      :disabled="item.disabled"
                      :label="__(item.value)"
                    >
                      {{ __(item.label) }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button class="form-sub-btn" icon="el-icon-s-tools" type="primary" @click="qqEdit">
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col v-if="false" :span="12">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('支付宝账号设置') }}</span>
            </div>
            <div>
              <el-form
                ref="alipayForm"
                label-width="100px"
                :model="alipayForm"
                :rules="alipayRules"
                size="medium"
              >
                <el-form-item
                  :label="__('回调地址')"
                  label-width="150px"
                  prop="alipay_callback_url"
                >
                  <el-input
                    v-model="alipayForm.alipay_callback_url"
                    clearable
                    readonly
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="Alipay App Id"
                  label-width="150px"
                  prop="alipay_app_id"
                >
                  <el-input
                    v-model="alipayForm.alipay_app_id"
                    clearable
                    :placeholder="__('请输入 Alipay App Id')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="Aliapa App Key"
                  label-width="150px"
                  prop="alipay_app_rsapk"
                >
                  <el-input
                    v-model="alipayForm.alipay_app_rsapk"
                    clearable
                    :placeholder="__('请输入 Aliapa App Key')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('是否开启')"
                  label-width="150px"
                  prop="alipay_status"
                >
                  <el-radio-group
                    v-model="alipayForm.alipay_status"
                    size="medium"
                  >
                    <el-radio
                      v-for="(item, index) in alipay_statusOptions"
                      :key="index"
                      :disabled="item.disabled"
                      :label="__(item.value)"
                    >
                      {{ __(item.label) }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="alipayEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row v-if="false">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('Facebook账号设置') }}</span>
          </div>
          <div>
            <el-form
              ref="fbForm"
              label-width="100px"
              :model="fbForm"
              :rules="fbRules"
              size="medium"
            >
              <el-form-item
                :label="__('回调地址')"
                label-width="150px"
                prop="fb_callback_url"
              >
                <el-input
                  v-model="fbForm.fb_callback_url"
                  clearable
                  readonly
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="Fb App Id"
                label-width="150px"
                prop="fb_app_id"
              >
                <el-input
                  v-model="fbForm.fb_app_id"
                  clearable
                  :placeholder="__('请输入 Fb App Id')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="Fb App Key"
                label-width="150px"
                prop="fb_app_key"
              >
                <el-input
                  v-model="fbForm.fb_app_key"
                  clearable
                  :placeholder="__('请输入 Fb App Key')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('是否开启')"
                label-width="150px"
                prop="fb_status"
              >
                <el-radio-group v-model="fbForm.fb_status" size="medium">
                  <el-radio
                    v-for="(item, index) in fb_statusOptions"
                    :key="index"
                    :disabled="item.disabled"
                    :label="__(item.value)"
                  >
                    {{ __(item.label) }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button class="form-sub-btn" icon="el-icon-s-tools" type="primary" @click="fbEdit">
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('Google账号设置') }}</span>
          </div>
          <div>
            <el-form
              ref="googleForm"
              label-width="100px"
              :model="googleForm"
              :rules="googleRules"
              size="medium"
            >
              <el-form-item
                :label="__('回调地址')"
                label-width="150px"
                prop="google_callback_url"
              >
                <el-input
                  v-model="googleForm.google_callback_url"
                  clearable
                  readonly
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="Google App Id"
                label-width="150px"
                prop="google_app_id"
              >
                <el-input
                  v-model="googleForm.google_app_id"
                  clearable
                  :placeholder="__('请输入 Google App Id')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                label="Google App Key"
                label-width="150px"
                prop="google_app_key"
              >
                <el-input
                  v-model="googleForm.google_app_key"
                  clearable
                  :placeholder="__('请输入 Google App Key')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('是否开启')"
                label-width="150px"
                prop="google_status"
              >
                <el-radio-group
                  v-model="googleForm.google_status"
                  size="medium"
                >
                  <el-radio
                    v-for="(item, index) in google_statusOptions"
                    :key="index"
                    :disabled="item.disabled"
                    :label="__(item.value)"
                  >
                    {{ __(item.label) }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="googleEdit"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('iOS账号设置') }}</span>
            </div>
            <div>
              <el-form
                ref="appleForm"
                label-width="100px"
                :model="appleForm"
                :rules="appleRules"
                size="medium"
              >
                <el-form-item
                  :label="__('是否开启')"
                  label-width="150px"
                  prop="apple_status"
                >
                  <el-radio-group
                    v-model="appleForm.apple_status"
                    size="medium"
                  >
                    <el-radio
                      v-for="(item, index) in apple_statusOptions"
                      :key="index"
                      :disabled="item.disabled"
                      :label="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="appleEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('手机动态码登录设置') }}</span>
            </div>
            <div>
              <el-form
                ref="mobileForm"
                label-width="100px"
                :model="mobileForm"
                :rules="mobileRules"
                size="medium"
              >
                <el-form-item
                  :label="__('是否开启')"
                  label-width="150px"
                  prop="mobile_status"
                >
                  <el-radio-group
                    v-model="mobileForm.mobile_status"
                    size="medium"
                  >
                    <el-radio
                      v-for="(item, index) in mobile_statusOptions"
                      :key="index"
                      :disabled="item.disabled"
                      :label="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="mobileEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

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

  export default {
    name: 'Connect',
    components: {},
    data() {
      return {
        wxForm: {
          weixin_app_id: undefined,
          weixin_app_key: undefined,
          weixin_status: undefined,
        },
        wxRules: {
          weixin_app_id: [
            {
              required: true,
              message: this.__('请输入 Weixin App Id'),
              trigger: 'blur',
            },
          ],
          weixin_app_key: [
            {
              required: true,
              message: this.__('请输入 Weixin App Key'),
              trigger: 'blur',
            },
          ],
          weixin_status: [
            {
              required: true,
              message: this.__('是否开启不能为空'),
              trigger: 'change',
            },
          ],
        },
        weixin_statusOptons: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        wbForm: {
          weibo_app_id: undefined,
          weibo_app_key: undefined,
          weibo_status: undefined,
        },
        wbRules: {
          weibo_app_id: [
            {
              required: true,
              message: this.__('请输入 Weibo App Id'),
              trigger: 'blur',
            },
          ],
          weibo_app_key: [
            {
              required: true,
              message: this.__('请输入 Weibo App Key'),
              trigger: 'blur',
            },
          ],
          weibo_status: [
            {
              required: true,
              message: this.__('是否开启不能为空'),
              trigger: 'change',
            },
          ],
        },
        weibo_statusOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        qqForm: {
          qq_callback_url: '',
          qq_app_id: undefined,
          qq_app_key: undefined,
          qq_status: undefined,
        },
        qqRules: {
          qq_app_id: [
            {
              required: true,
              message: this.__('请输入 Qq App Id'),
              trigger: 'blur',
            },
          ],
          qq_app_key: [
            {
              required: true,
              message: this.__('请输入 Qq App Key'),
              trigger: 'blur',
            },
          ],
          qq_status: [
            {
              required: true,
              message: this.__('是否开启不能为空'),
              trigger: 'change',
            },
          ],
        },
        qq_statusOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        alipayForm: {
          alipay_callback_url: '',
          alipay_app_id: undefined,
          alipay_app_rsapk: undefined,
          alipay_status: undefined,
        },
        alipayRules: {
          alipay_app_id: [
            {
              required: true,
              message: this.__('请输入 Alipay App Id'),
              trigger: 'blur',
            },
          ],
          alipay_app_rsapk: [
            {
              required: true,
              message: this.__('请输入 Aliapa App Key'),
              trigger: 'blur',
            },
          ],
          alipay_status: [
            {
              required: true,
              message: this.__('是否开启不能为空'),
              trigger: 'change',
            },
          ],
        },
        alipay_statusOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        fbForm: {
          fb_callback_url: '',
          fb_app_id: undefined,
          fb_app_key: undefined,
          fb_status: undefined,
        },
        fbRules: {
          fb_app_id: [
            {
              required: true,
              message: this.__('请输入 Fb App Id'),
              trigger: 'blur',
            },
          ],
          fb_app_key: [
            {
              required: true,
              message: this.__('请输入 Fb App Key'),
              trigger: 'blur',
            },
          ],
          fb_status: [
            {
              required: true,
              message: this.__('是否开启不能为空'),
              trigger: 'change',
            },
          ],
        },
        fb_statusOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        googleForm: {
          google_callback_url: '',
          google_app_id: undefined,
          google_app_key: undefined,
          google_status: undefined,
        },
        googleRules: {
          google_app_id: [
            {
              required: true,
              message: this.__('请输入 Google App Id'),
              trigger: 'blur',
            },
          ],
          google_app_key: [
            {
              required: true,
              message: this.__('请输入 Google App Key'),
              trigger: 'blur',
            },
          ],
          google_status: [
            {
              required: true,
              message: this.__('是否开启不能为空'),
              trigger: 'change',
            },
          ],
        },
        google_statusOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        appleForm: {
          apple_status: undefined,
        },
        appleRules: {
          apple_status: [
            {
              required: true,
              message: this.__('是否开启不能为空'),
              trigger: 'change',
            },
          ],
        },
        apple_statusOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        mobileForm: {
          mobile_status: undefined,
        },
        mobileRules: {
          mobile_status: [
            {
              required: true,
              message: this.__('是否开启不能为空'),
              trigger: 'change',
            },
          ],
        },
        mobile_statusOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      async fetchData() {
        const { data } = await getList()
        this.wxFormInit(data)
        this.wbFormInit(data)
        this.qqFormInit(data)
        this.alipayFormInit(data)
        this.googleFormInit(data)
        this.appleForm.apple_status = data.apple_status
        this.mobileForm.mobile_status = data.mobile_status
      },
      wxFormInit(data) {
        this.wxForm = {
          weixin_app_id: data.weixin_app_id,
          weixin_app_key: data.weixin_app_key,
          weixin_status: data.weixin_status,
        }
      },
      wbFormInit(data) {
        this.wbForm = {
          weibo_app_id: data.weibo_app_id,
          weibo_app_key: data.weibo_app_key,
          weibo_status: data.weibo_status,
        }
      },
      qqFormInit(data) {
        this.qqForm = {
          qq_callback_url: data.qq_callback_url,
          qq_app_id: data.qq_app_id,
          qq_app_key: data.qq_app_key,
          qq_status: data.qq_status,
        }
      },
      alipayFormInit(data) {
        this.alipayForm = {
          alipay_callback_url: data.alipay_callback_url,
          alipay_app_id: data.alipay_app_id,
          alipay_app_rsapk: data.alipay_app_rsapk,
          alipay_status: data.alipay_status,
        }
      },
      googleFormInit(data) {
        this.googleForm = {
          google_callback_url: data.google_callback_url,
          google_app_id: data.google_app_id,
          google_app_key: data.google_app_key,
          google_status: data.google_status,
        }
      },
      handleEdit() {
        this.$refs['ossForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.ossForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      wxEdit() {
        this.$refs['wxForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.wxForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      wbEdit() {
        this.$refs['wbForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.wbForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      qqEdit() {
        this.$refs['qqForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.qqForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      alipayEdit() {
        this.$refs['alipayForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.alipayForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      fbEdit() {
        this.$refs['fbForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.fbForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      googleEdit() {
        this.$refs['googleForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.googleForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      appleEdit() {
        this.$refs['appleForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.appleForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      mobileEdit() {
        this.$refs['mobileForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.mobileForm),
            })

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