<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('直播设置') }}</span>
          </div>
          <div>
            <el-form
              ref="liveForm"
              label-width="100px"
              :model="liveForm"
              :rules="liveRules"
              size="medium"
            >
              <el-form-item
                :label="__('虚拟观看数')"
                label-width="150px"
                prop="live_virtual_click_enable"
              >
                <el-radio-group
                  v-model="liveForm.live_virtual_click_enable"
                  size="medium"
                >
                  <el-radio
                    v-for="(item, index) in live_virtual_click_enableOptions"
                    :key="index"
                    :disabled="item.disabled"
                    :label="__(item.value)"
                  >
                    {{ __(item.label) }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                :label="__('虚拟人气数')"
                label-width="150px"
                prop="live_virtual_like_enable"
              >
                <el-radio-group
                  v-model="liveForm.live_virtual_like_enable"
                  size="medium"
                >
                  <el-radio
                    v-for="(item, index) in live_virtual_like_enableOptions"
                    :key="index"
                    :disabled="item.disabled"
                    :label="__(item.value)"
                  >
                    {{ __(item.label) }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                :label="__('绑定商品数量')"
                label-width="150px"
                prop="live_product_bind_num"
              >
                <el-input
                  v-model="liveForm.live_product_bind_num"
                  clearable
                  :placeholder="__('请输入绑定商品数量')"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
              <el-form-item
                :label="__('推流视频模式')"
                label-width="150px"
                prop="live_push_mode_SD"
              >
                <el-radio-group
                  v-model="liveForm.live_push_mode_SD"
                  size="medium"
                >
                  <el-radio
                    v-for="(item, index) in live_push_mode_SDOptions"
                    :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="liveEdit">
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('阿里云直播设置') }}</span>
            </div>
            <div>
              <el-form
                ref="aliyunForm"
                label-width="100px"
                :model="aliyunForm"
                :rules="aliyunRules"
                size="medium"
              >
                <el-form-item
                  :label="__('推流域名')"
                  label-width="150px"
                  prop="aliyun_live_push_domain"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_live_push_domain"
                    clearable
                    :placeholder="__('请输入推流域名')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('推流鉴权KEY')"
                  label-width="150px"
                  prop="aliyun_live_auth_key_push"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_live_auth_key_push"
                    clearable
                    :placeholder="__('请输入推流鉴权KEY')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('播流域名')"
                  label-width="150px"
                  prop="aliyun_live_live_domain"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_live_live_domain"
                    clearable
                    :placeholder="__('请输入播流域名')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('播流鉴权KEY')"
                  label-width="150px"
                  prop="aliyun_live_auth_key_live"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_live_auth_key_live"
                    clearable
                    :placeholder="__('请输入播流鉴权KEY')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="AppName"
                  label-width="150px"
                  prop="aliyun_live_app_name"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_live_app_name"
                    clearable
                    :placeholder="__('请输入 AppName')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>

                <el-form-item
                  :label="__('视频OSS域名')"
                  label-width="150px"
                  prop="aliyun_live_oss_domain"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_live_oss_domain"
                    clearable
                    :placeholder="__('请输入视频OSS域名')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('直播回调地址')"
                  label-width="150px"
                  prop="aliyun_live_callback"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_live_callback"
                    clearable
                    :placeholder="__('请输入直播回调地址')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('录制回调地址')"
                  label-width="150px"
                  prop="aliyun_record_callback"
                >
                  <el-input
                    v-model="aliyunForm.aliyun_record_callback"
                    clearable
                    :placeholder="__('请输入录制回调地址')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="aliyunEdit"
              >
                {{ __('修改') }}
              </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="tengxunForm"
                label-width="100px"
                :model="tengxunForm"
                :rules="tengxunRules"
                size="medium"
              >
                <el-form-item
                  :label="__('推流域名')"
                  label-width="150px"
                  prop="tengxun_live_push_domain"
                >
                  <el-input
                    v-model="tengxunForm.tengxun_live_push_domain"
                    clearable
                    :placeholder="__('请输入推流域名')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('推流鉴权KEY')"
                  label-width="150px"
                  prop="tengxun_live_auth_key_push"
                >
                  <el-input
                    v-model="tengxunForm.tengxun_live_auth_key_push"
                    clearable
                    :placeholder="__('请输入推流鉴权KEY')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('播流域名')"
                  label-width="150px"
                  prop="tengxun_live_live_domain"
                >
                  <el-input
                    v-model="tengxunForm.tengxun_live_live_domain"
                    clearable
                    :placeholder="__('请输入播流域名')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('播流鉴权KEY')"
                  label-width="150px"
                  prop="tengxun_live_auth_key_live"
                >
                  <el-input
                    v-model="tengxunForm.tengxun_live_auth_key_live"
                    clearable
                    :placeholder="__('请输入播流鉴权KEY')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  label="AppName"
                  label-width="150px"
                  prop="tengxun_live_app_name"
                >
                  <el-input
                    v-model="tengxunForm.tengxun_live_app_name"
                    clearable
                    :placeholder="__('请输入 AppName')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="tengxunEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

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

  export default {
    name: 'Live',
    components: {},
    data() {
      return {
        liveForm: {
          live_virtual_click_enable: undefined,
          live_virtual_like_enable: undefined,
          live_product_bind_num: undefined,
          live_push_mode_SD: undefined,
        },
        liveRules: {
          live_virtual_click_enable: [
            {
              required: true,
              message: '虚拟观看数不能为空',
              trigger: 'change',
            },
          ],
          live_virtual_like_enable: [
            {
              required: true,
              message: '虚拟人气数不能为空',
              trigger: 'change',
            },
          ],
          live_product_bind_num: [
            {
              required: true,
              message: '请输入绑定商品数量',
              trigger: 'blur',
            },
          ],
          live_push_mode_SD: [
            {
              required: true,
              message: '推流视频模式不能为空',
              trigger: 'change',
            },
          ],
        },
        live_virtual_click_enableOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        live_virtual_like_enableOptions: [
          {
            label: this.__('开启'),
            value: '1',
          },
          {
            label: this.__('关闭'),
            value: '2',
          },
        ],
        live_push_mode_SDOptions: [
          {
            label: 'SD',
            value: '1',
          },
          {
            label: 'HD',
            value: '2',
          },
          {
            label: 'FHD',
            value: '3',
          },
        ],
        aliyunForm: {
          aliyun_live_push_domain: undefined,
          aliyun_live_auth_key_push: undefined,
          aliyun_live_live_domain: undefined,
          aliyun_live_auth_key_live: undefined,
          aliyun_live_app_name: undefined,
          aliyun_live_oss_domain: undefined,
          aliyun_live_callback: '/mobile/sns/Live/aliLiveCallback',
          aliyun_record_callback: '/mobile/sns/Live/aliRecordCallback',
        },
        aliyunRules: {
          aliyun_live_push_domain: [
            {
              required: true,
              message: '请输入推流域名',
              trigger: 'blur',
            },
          ],
          aliyun_live_auth_key_push: [
            {
              required: true,
              message: '请输入推流鉴权KEY',
              trigger: 'blur',
            },
          ],
          aliyun_live_live_domain: [
            {
              required: true,
              message: '请输入播流域名',
              trigger: 'blur',
            },
          ],
          aliyun_live_auth_key_live: [
            {
              required: true,
              message: '请输入播流鉴权KEY',
              trigger: 'blur',
            },
          ],
          aliyun_live_app_name: [
            {
              required: true,
              message: '请输入 AppName',
              trigger: 'blur',
            },
          ],
          aliyun_live_oss_domain: [
            {
              required: true,
              message: '请输入视频OSS域名',
              trigger: 'blur',
            },
          ],
          aliyun_live_callback: [
            {
              required: true,
              message: '请输入直播回调地址',
              trigger: 'blur',
            },
          ],
          aliyun_record_callback: [
            {
              required: true,
              message: '请输入录制回调地址',
              trigger: 'blur',
            },
          ],
        },
        tengxunForm: {
          tengxun_live_push_domain: undefined,
          tengxun_live_auth_key_push: undefined,
          tengxun_live_live_domain: undefined,
          tengxun_live_auth_key_live: undefined,
          tengxun_live_app_name: undefined,
        },
        tengxunRules: {
          tengxun_live_push_domain: [
            {
              required: true,
              message: '请输入推流域名',
              trigger: 'blur',
            },
          ],
          tengxun_live_auth_key_push: [
            {
              required: true,
              message: '请输入推流鉴权KEY',
              trigger: 'blur',
            },
          ],
          tengxun_live_live_domain: [
            {
              required: true,
              message: '请输入播流域名',
              trigger: 'blur',
            },
          ],
          tengxun_live_auth_key_live: [
            {
              required: true,
              message: '请输入播流鉴权KEY',
              trigger: 'blur',
            },
          ],
          tengxun_live_app_name: [
            {
              required: true,
              message: '请输入 AppName',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      async fetchData() {
        const { data } = await getList()
        this.liveFormInit(data)
        this.aliyunFormInit(data)
        this.tengxunFormInit(data)
      },
      liveFormInit(data) {
        this.liveForm = {
          live_virtual_click_enable: data.live_virtual_click_enable,
          live_virtual_like_enable: data.live_virtual_like_enable,
          live_product_bind_num: data.live_product_bind_num,
          live_push_mode_SD: data.live_push_mode_SD,
        }
      },
      aliyunFormInit(data) {
        this.aliyunForm = {
          aliyun_live_push_domain: data.aliyun_live_push_domain,
          aliyun_live_auth_key_push: data.aliyun_live_auth_key_push,
          aliyun_live_live_domain: data.aliyun_live_live_domain,
          aliyun_live_auth_key_live: data.aliyun_live_auth_key_live,
          aliyun_live_app_name: data.aliyun_live_app_name,
          aliyun_live_oss_domain: data.aliyun_live_oss_domain,

          aliyun_live_callback: '/mobile/sns/Live/aliLiveCallback',
          aliyun_record_callback: '/mobile/sns/Live/aliRecordCallback',
        }
      },
      tengxunFormInit(data) {
        this.tengxunForm = {
          tengxun_live_push_domain: data.tengxun_live_push_domain,
          tengxun_live_auth_key_push: data.tengxun_live_auth_key_push,
          tengxun_live_live_domain: data.tengxun_live_live_domain,
          tengxun_live_auth_key_live: data.tengxun_live_auth_key_live,
          tengxun_live_app_name: data.tengxun_live_app_name,
        }
      },
      liveEdit() {
        this.$refs['liveForm'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit({
              param: JSON.stringify(this.liveForm),
            })

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

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

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