<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('用户服务协议（注册协议）') }}</span>
          </div>
          <div>
            <vab-quill
              ref="vab-quill"
              v-model="form.reg_protocols_description"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('reg_protocols_description')"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('隐私政策') }}</span>
          </div>
          <div>
            <vab-quill
              ref="vab-quill"
              v-model="form.reg_description"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('reg_description')"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('开店协议') }}</span>
          </div>
          <div>
            <vab-quill
              ref="vab-quill"
              v-model="form.open_store_description"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('open_store_description')"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('分销提现协议') }}</span>
          </div>
          <div>
            <vab-quill
              ref="vab-quill"
              v-model="form.withdraw_protocols_description"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('withdraw_protocols_description')"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('团购活动协议') }}</span>
          </div>
          <div>
            <vab-quill
              ref="vab-quill"
              v-model="form.purchase_activity_description"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('purchase_activity_description')"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('圈子使用须知') }}</span>
          </div>
          <div>
            <vab-quill
              ref="vab-quill"
              v-model="form.circle_used_protocols_description"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('circle_used_protocols_description')"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('分销商认知协议') }}</span>
          </div>
          <div>
            <vab-quill
              ref="vab-quill"
              v-model="form.distribution_protocols_description"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('distribution_protocols_description')"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('拼团玩法详情') }}</span>
          </div>
          <div>
            <vab-quill
              ref="vab-quill"
              v-model="form.tour_diy_protocols_description"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('tour_diy_protocols_description')"
            >
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

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

  export default {
    name: 'RegisterProtocols',
    components: { VabQuill },
    data() {
      return {
        form: {
          reg_description: '',
          reg_protocols_description: '',
          open_store_description: '',
          purchase_activity_description: '',
          circle_used_protocols_description: '',
          distribution_protocols_description: '',
          tour_diy_protocols_description: '',
          withdraw_protocols_description: '',
        },

        options: {
          theme: 'snow',
          bounds: document.body,
          debug: 'warn',
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ size: ['small', false, 'large', 'huge'] }],
                [{ color: [] }, { background: [] }],
                ['blockquote', 'code-block'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }],
                [{ indent: '-1' }, { indent: '+1' }],
                [{ align: [] }],
                [{ direction: 'rtl' }],
                [{ font: [] }],
                ['clean'],
                ['link', 'image', 'vab-upload-image'],
              ],
            },
          },
          placeholder: '',
          readOnly: false,
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      async fetchData() {
        const { data } = await getList()
        this.form = {
          reg_description: data.reg_description,
          reg_protocols_description: data.reg_protocols_description,
          open_store_description: data.open_store_description,
          purchase_activity_description: data.purchase_activity_description,
          circle_used_protocols_description:
            data.circle_used_protocols_description,
          distribution_protocols_description:
            data.distribution_protocols_description,
          tour_diy_protocols_description: data.tour_diy_protocols_description,
          withdraw_protocols_description: data.withdraw_protocols_description,
        }
      },
      async handleEdit(key) {
        const obj = {}
        obj[key] = this.form[key]
        const { msg, status } = await doEdit({
          param: JSON.stringify(obj),
        })

        if (status == 200) {
          this.$baseMessage(msg, 'success')
        } else {
          this.$baseMessage(msg, 'error')
        }
      },
    },
  }
</script>
<style>
  .edit_container {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  .ql-editor {
    height: 500px;
  }
</style>
