<template>
  <div>
    <el-card id="box-card-form-1">
    <el-form ref="form" :model="form">
        <el-form-item
          :label="__('是否启用电脑买家端')"
          label-width="150px"
          prop="pc_enable"
          style="margin-top: 30px;"
        >
          <el-radio v-model="form.pc_enable" label="1">
            {{__('开启')}}
          </el-radio>
          <el-radio v-model="form.pc_enable" label="0">
            {{__('关闭')}}
          </el-radio>
          <br>
          <span>{{__('不启用电脑买家端，会引导访问移动端')}}</span>
        </el-form-item>

        <el-form-item
          :label="__('启用终端')"
          label-width="150px"
          prop="index_banner_pc_enable"
          style="margin-top: 30px;"
        >
          <el-checkbox-group v-model="form.frontend_enable">

            <el-checkbox v-model="form.frontend_enable[0]" label="h5">{{__('手机H5')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[1]" label="wechat">{{__('公众号商城')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[2]" label="mp_weixin">{{__('微信小程序')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[3]" label="app">{{__('App - iOS及Android')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[4]" label="zfb">{{__('支付宝小程序')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[5]" label="baidu">{{__('百度小程序')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[6]" label="douyin">{{__('字节跳动小程序')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[7]" label="qq">{{__('QQ小程序')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[8]" label="k">{{__('快应用')}}</el-checkbox>
            <br>
            <el-checkbox v-model="form.frontend_enable[9]" label="360">{{__('360小程序')}}</el-checkbox>

          </el-checkbox-group>


        </el-form-item>

        <el-form-item
          :label="__('是否引导下载App')"
          label-width="150px"
          prop="index_banner_pc_enable"
          style="margin-top: 30px;"
        >
          <el-radio v-model="form.donwload_app_enable" label="true">
            {{__('开启')}}
          </el-radio>
          <el-radio v-model="form.donwload_app_enable" label="false">
            {{__('关闭')}}
          </el-radio>
          <br>
          <span>{{__('开启后，用户访问h5的时候会引导用户下载App')}}</span>
        </el-form-item>
        <el-button
          class="form-sub-btn"
          icon="el-icon-s-tools"
          type="primary"
          @click="handleEdit"
        >
          {{ __('修改') }}
        </el-button>




    </el-form>
    </el-card>
  </div>
</template>

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

  export default {
    name: 'Site',
    // eslint-disable-next-line vue/no-unused-components
    components: {VabQuill },

    data() {

      return {
        pram:[],
        checked: true,
        action: URL.action,
        form: {
          pc_enable: undefined,
          donwload_app_enable: undefined,
          frontend_enable: [],

        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,


      async fetchData() {
        const { data } = await getList()


        this.form = {
          donwload_app_enable: data.donwload_app_enable,
          pc_enable: data.pc_enable,
          frontend_enable:data.frontend_enable.split(','),
        }

        // console.log(this.form.frontend_enable)


      },
      handleEdit() {
        this.form.frontend_enable= this.form.frontend_enable.join(',')
        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')
            }
            this.fetchData();
          } else {
            return false
          }
        })
      },
    },
  }
</script>
<style>

