<template>
  <div class="setmeal">
    <div class="setmeal__h">
      <p class="setmeal__h--p"> {{$t('mealconfig_1')}} </p>
    </div>

    <Form ref="formValidate" :model="formValidate" :label-width="100" class="setmeal__form config__box">
      <h2>{{$t('mealconfig_15')}}</h2>
      <FormItem class="formitem" :label="$t('orderlist_5') +'：'">
          <Input clearable v-model="formValidate.alipay.name" style="width: 700px" />
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_2')+'：'">
          <RadioGroup v-model="formValidate.alipay.switch" >
              <Radio label="1">{{ $t('enable') }}</Radio>
              <Radio label="0">{{ $t('setmealadd_9') }}</Radio>
          </RadioGroup>
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_3')+'：'" >
        <Select clearable v-model="formValidate.alipay.mode" style="width:700px">
            <Option v-for="item in mode_list" :value="item.key" :key="item.key">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem class="formitem" label="App Id：">
          <Input clearable v-model="formValidate.alipay.app_id" style="width: 700px" />
      </FormItem>
      <FormItem class="formitem" label="Seller Id：">
          <Input clearable v-model="formValidate.alipay.seller_id" style="width: 700px" />
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_4')+'：'">
          <Input clearable v-model="formValidate.alipay.rsa_public_key" style="width: 700px" />
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_5')+'：'">
          <Input clearable v-model="formValidate.alipay.rsa_private_key" style="width: 700px" />
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_6')+'：'">
          <Input clearable v-model="formValidate.alipay.alipay_public_key" style="width: 700px" />
      </FormItem>
      <h2>PayPal</h2>
      <FormItem class="formitem" :label="$t('orderlist_5') +'：'">
          <Input clearable v-model="formValidate.paypal.name" style="width: 700px" />
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_7')+'：'">
          <RadioGroup v-model="formValidate.paypal.switch">
              <Radio label="1">{{ $t('enable') }}</Radio>
              <Radio label="0">{{ $t('setmealadd_9') }}</Radio>
          </RadioGroup>
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_8')+'：'">
        <Select clearable v-model="formValidate.paypal.mode" style="width:700px">
            <Option v-for="item in mode_list" :value="item.key" :key="item.key">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_9')+'：'">
          <Input clearable v-model="formValidate.paypal.client_id" style="width: 700px" />
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_10')+'：'">
          <Input clearable v-model="formValidate.paypal.secret_key" style="width: 700px" />
      </FormItem>
      <!-- <FormItem class="formitem" :label="$t('mealconfig_11')+'：'">
          <Input clearable v-model="formValidate.paypal.currency" style="width: 700px" />
      </FormItem> -->
      <h2>{{$t('mealconfig_12')}}</h2>
      <FormItem class="formitem" :label="$t('orderlist_5') +'：'">
          <Input clearable v-model="formValidate.cash.name" style="width: 700px" />
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_13')+'：'">
          <RadioGroup v-model="formValidate.cash.switch">
              <Radio label="1">{{ $t('enable') }}</Radio>
              <Radio label="0">{{ $t('setmealadd_9') }}</Radio>
          </RadioGroup>
      </FormItem>
      <FormItem class="formitem" :label="$t('mealconfig_14')+'：'">
          <!-- <Input clearable type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" v-model="formValidate.cash.desc" style="width: 700px" /> -->
          <quill-editor class="inputbox" v-model="formValidate.cash.desc" :options="quillOption"  style="width: 700px"></quill-editor>
      </FormItem>
      <FormItem class="application__btn">
        <Button type="primary" @click="updateConfig">{{$t('save')}}</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import {GetPayConfig, UpdatePayConfig} from '@/api/setmeal'
import { getToken } from '@/libs/util'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'
import quillConfig from './quillEditor.config'
Quill.register('modules/imageResize', ImageResize)
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      quillOption: quillConfig,
      access_token: getToken(),
      formValidate: {
        alipay: {
          name: '',
          switch: '1',
          mode: 'production',
          app_id: '',
          seller_id: '',
          rsa_public_key: '', // 公钥
          rsa_private_key: '', // 私钥
          alipay_public_key: '', // 支付宝公钥
        },
        paypal: {
          name: '',
          switch: '1',
          mode: 'production',
          client_id: '',
          secret_key: '',
          currency: '',
        },
        cash: {
          name: '',
          switch: '',
          desc: '',
        },
      },
      mode_list: []
    }
  },
  created(){
    this.getPayConfig()
  },
  methods: {
    // 获取配置
    getPayConfig(){
      let access_token = this.access_token
      GetPayConfig({access_token}).then(res=>{
        this.mode_list = res.data.mode_list
        this.formValidate = res.data.config
        this.formValidate.alipay.switch = this.formValidate.alipay.switch + ''
        this.formValidate.paypal.switch = this.formValidate.paypal.switch + ''
        this.formValidate.cash.switch = this.formValidate.cash.switch + ''
      })
    },
    // 更新配置
    updateConfig(){
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: `<p>${this.$t('mealconfig_16')}</p>`,
        onOk: () => {
          this.updateConfigBtn()
        },
        onCancel: () => {
          this.$Message.info(this.$t('cancel'))
        }
      })
    },
    updateConfigBtn(){
      let _this = this
      let access_token = _this.access_token
      const formdata = new FormData()
      formdata.append('access_token',_this.access_token)
      formdata.append('config',JSON.stringify(_this.formValidate))
      UpdatePayConfig(formdata).then(res=>{
        if(res.data.isUpdate){
          _this.$Message.success(_this.$t('update_successfully'))
          _this.getPayConfig()
        } else {
          _this.$Message.error(res.msg)
        }
      })
    },
  }
}
</script>

<style  lang='scss'>
.setmeal {
  &__h{
    height:72px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
    padding: 0 30px;
    &--p{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      // margin-left: 30px;
      color:rgba(35,35,42,1);
    }
  }
}
.config__box{
  background: #fff;
  border-radius: 10px;
  padding: 30px;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 250px;
}
</style>
