<template>
  <el-dialog
   :title="appItem.app_name"
   :visible.sync="dialogPaymentVisible"
   width="40%"
   :modal-append-to-body="false"
   :close-on-click-modal="false"
   :close-on-press-escape="false"
   @close="closeDialog">
   <div class="wechat-tips" v-if="appItem.platform_id == 2">
    填写公众号参数，以便H5商城在微信内调用微信支付、微信提现、授权登录、微信分享等能力；
   </div>
   <el-form
    label-width="120px"
    label-position="left">
    <el-form-item
      v-for="(client, index) in configList"
      :key="client.name"
      :label="client.label"
      :prop="client.name">
      <desensitization-input
        v-if="client.name === 'app_secret'"
        v-model="client.value"
        @change="(e) => changeInput(e, index)" />
      <el-input
        v-else
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 4}"
        v-model="client.value"></el-input>
    </el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
     <el-button @click="closeDialog">取 消</el-button>
     <el-button type="primary" @click="submitForm()">确 定</el-button>
   </span>
 </el-dialog>
</template>

<script>
  import * as API_Payment from '@/api/payment'

  export default {
    name: 'AppSettingsDialog',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      appItem: {
        type: Object,
        default: {}
      }
    },

    data() {
      return {
        /** 表单配置项 */
        configList: [],
        /** dialog */
        dialogPaymentVisible: this.value
      }
    },

    watch: {
      value(val) {
        this.dialogPaymentVisible = val
      },
      appItem: {
        handler(val) {
          if (val) {
            const configList = val.config_json ? JSON.parse(val.config_json) : []
            if (configList.length) {
              this.configList = configList
            }
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      changeInput(e, index) {
        this.$set(this.configList[index], 'value', e)
      },
      /** 关闭弹窗 */
      closeDialog() {
        this.$emit('closeDialog')
      },

      /** 提交修改支付方式表单 */
      submitForm(formName) {
        const { configList } = this
        const id = this.appItem.id
        if (configList.some(v => !v.value)) {
          this.$message.error('请完善表单内容')
          return
        }
        API_Payment.editThirdAppPlatform(id, configList).then(response => {
          this.dialogPaymentVisible = false
          this.$message.success('保存成功！')
          this.$emit('submitSuccess')
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .wechat-tips{
    margin: 10px 0;
    background: #ecf5ff;
    border: 1px solid #c6e2ff;
    font-size: 14px;
    padding: 14px 10px;
  }
</style>
