<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.joinin_investment_direction"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('joinin_investment_direction')"
            >
              {{ __('修改') }}
            </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.joinin_standard"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('joinin_standard')"
            >
              {{ __('修改') }}
            </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.joinin_condition"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('joinin_condition')"
            >
              {{ __('修改') }}
            </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.joinin_cooperation_details"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('joinin_cooperation_details')"
            >
              {{ __('修改') }}
            </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.joinin_expenses_details"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('joinin_expenses_details')"
            >
              {{ __('修改') }}
            </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.joininPrivacyAgreement"
              :min-height="400"
              :options="options"
            />
          </div>
          <div>
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="handleEdit('joininPrivacyAgreement')"
            >
              {{ __('修改') }}
            </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: 'Settle',
    components: { VabQuill },
    data() {
      return {
        form: {
          joinin_investment_direction: '',
          joinin_standard: '',
          joinin_condition: '',
          joinin_cooperation_details: '',
          joinin_expenses_details: '',
          joininPrivacyAgreement:''
        },

        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 = {
          joinin_investment_direction: data.joinin_investment_direction,
          joinin_standard: data.joinin_standard,
          joinin_condition: data.joinin_condition,
          joinin_cooperation_details: data.joinin_cooperation_details,
          joinin_expenses_details: data.joinin_expenses_details,
          joininPrivacyAgreement : data.joininPrivacyAgreement
        }
      },
      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>
