<template>
  <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body @open="onOpen">
    <el-form ref="form" :model="form" :rules="rules" label-width="6em" v-loading="loading" size="small">
        <el-row>
            <form-col :span="span" label="图片" prop="picture">
                <image-upload v-model="form.picture" :limit="1"/>
            </form-col>
            <form-col :span="span" label="渠道名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入渠道名称"/>
            </form-col>
            <form-col :span="span" label="类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%;">
                    <el-option v-for="item in dict.type.channel_type" :key="item.value" :label="item.label" :value="item.value"/>
                </el-select>
            </form-col>
            <form-col :span="span" label="渠道成本" prop="costRate">
                <el-input v-model.number="form.costRate" placeholder="请输渠道成本率" :min="0">
                <template #append>%</template>
                </el-input>
            </form-col>
            <form-col :span="span" label="是否启用" prop="enabled">
                <el-switch v-model="form.enabled" />
            </form-col>
        </el-row>
        <el-row>
            <form-col :span="24" label="绑定APP" prop="appIds" tip="有哪些APP可以使用该渠道" label-width="7em">
                <app-select v-model="form.appIds" multiple/>
            </form-col>
        </el-row>
        <div class="api-config-title">API配置</div>
        <el-row>
            <form-col :span="24" label="API类型" prop="apiType">
                <el-select v-model="form.apiType" placeholder="请选择API类型" style="width: 100%;">
                    <el-option v-for="item in dict.type.channel_api_type" :key="item.value" :label="item.label" :value="item.value"/>
                </el-select>
            </form-col>

            <!--微信支付配置-->
            <template v-if="form.apiType === ChannelApiType.WECHAT">
                <form-col :span="24" label="商户ID" prop="channelConfig.merchantId">
                    <el-input v-model="form.channelConfig.merchantId" placeholder="请输入商户ID" />
                </form-col>
                <form-col :span="24" label="商户密钥V3" prop="channelConfig.apiV3Key" label-width="7em">
                    <el-input v-model="form.channelConfig.apiV3Key" placeholder="请输入商户密钥V3" />
                </form-col>
                <form-col :span="24" label="秘钥地址" prop="channelConfig.privateKeyPath">
                    <el-input v-model="form.channelConfig.privateKeyPath" placeholder="请输入秘钥地址" />
                </form-col>
                <form-col :span="24" label="证书序列号" prop="channelConfig.merchantSerialNumber">
                    <el-input v-model="form.channelConfig.merchantSerialNumber" placeholder="请输入证书序列号" />
                </form-col>
            </template>

            <!--太米支付配置-->
            <template v-if="form.apiType === ChannelApiType.TM_WX">
                <form-col :span="span" label="开发者ID" prop="channelConfig.developerId">
                    <el-input v-model="form.channelConfig.developerId" placeholder="请输入开发者ID" />
                </form-col>
                <form-col :span="span" label="门店ID" prop="channelConfig.shopId">
                    <el-input v-model="form.channelConfig.shopId" placeholder="请输入门店ID" />
                </form-col>
                <form-col :span="span" label="签名Key" prop="channelConfig.signKey">
                    <el-input v-model="form.channelConfig.signKey" placeholder="请输入签名Key" />
                </form-col>
                <form-col :span="span" label="请求主机" prop="channelConfig.httpUrl">
                    <el-input v-model="form.channelConfig.httpUrl" placeholder="请输入请求主机" />
                </form-col>
                <form-col :span="span" label="SN" prop="channelConfig.sn">
                    <el-input v-model="form.channelConfig.sn" placeholder="请输入SN" />
                </form-col>
            </template>
            
            <!-- 国通星驿配置 -->
            <template v-if="form.apiType === ChannelApiType.XY_WX">
                <form-col :span="24" label="机构号" prop="channelConfig.agetId">
                    <el-input v-model="form.channelConfig.agetId" placeholder="请输入机构号" />
                </form-col>
                <form-col :span="24" label="商户号" prop="channelConfig.custId">
                    <el-input v-model="form.channelConfig.custId" placeholder="请输入商户号" />
                </form-col>
                <form-col :span="24" label="请求域名" prop="channelConfig.host">
                    <el-input v-model="form.channelConfig.host" placeholder="请输入请求域名" />
                </form-col>
                <form-col :span="24" label="公钥" prop="channelConfig.publicKey">
                    <el-input v-model="form.channelConfig.publicKey" placeholder="请输入公钥" type="textarea" />
                </form-col>
            </template>

        </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateChannel, addChannel, getChannel } from "@/api/bst/channel";
import { ChannelType, ChannelApiType } from "@/utils/enums";
import AppSelect from '@/components/Business/App/AppSelect.vue'

export default {
  name: "ChannelEditDialog",
  dicts: ['channel_api_type', 'channel_type'],
  components: { AppSelect },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    channelId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      ChannelApiType,
      span: 12,
      loading: false,
      form: {
        channelId: null,
        name: null,
        enabled: true,
        serviceRate: null,
        costRate: null,
        channelConfig: {}
      },
      rules: {
        name: [
          {required: true, message: '渠道名称不能为空', target: 'blur'}
        ],
        enabled: [
          {required: true, type: 'boolean', message: '是否启用不能为空', target: 'blur'}
        ],
        serviceRate: [
          {required: true, type: 'number', message: '服务费不能为空', target: 'blur'}
        ],
        costRate: [
          {required: true, type: 'number', message: '成本不能为空', target: 'blur'}
        ],
        serviceType: [
          {required: true, message: '服务费收取方式不能为空', target: 'blur'}
        ],
        type: [
          {required: true, message: '渠道类型不能为空', target: 'blur'}
        ],
        apiType: [
          {required: true, message: 'API类型不能为空', target: 'blur'}
        ]
      }
    }
  },
  computed: {
    title() {
      return this.channelId ? "修改支付渠道" : "添加支付渠道"
    },
    visible: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit('update:show', value);
      }
    }
  },
  methods: {
    onOpen() {
        if (this.channelId) {   
            this.getChannelInfo();
        } else {
            this.reset();
        }
    },
    // 表单重置
    reset() {
      this.form = {
        channelId: null,
        name: null,
        enabled: true,
        serviceRate: null,
        costRate: null,
        appIds: [],
        type: ChannelType.CUSTOM,
        channelConfig: {}
      };
      this.resetForm("form");
    },
    getChannelInfo() {
        this.loading = true;
        getChannel(this.channelId).then(response => {
            this.form = response.data;
        }).finally(() => {
            this.loading = false;
        })
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.channelId) {
            updateChannel(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit('success');
              this.visible = false;
            });
          } else {
            addChannel(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('success');
              this.visible = false;
            });
          }
        }
      });
    },
    cancel() {
      this.visible = false;
    },
  }
}
</script> 

<style scoped>
.api-config-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    border-left: 3px solid #409EFF;
    padding-left: 10px;
}
</style>
