<template>
  <el-dialog v-model="dialogVisible" :show-close="false" @close="reset">
    <el-tabs v-model="activeName">
      <el-tab-pane label="聚合支付" name="pay">
        <el-form ref="form" :model="form" label-width="120px" label-position="left">
          <el-form-item label="店铺id">
            <el-input v-model="form.storeId" placeholder="请输入店铺id"></el-input>
          </el-form-item>
          <el-form-item label="商户号">
            <el-input v-model="form.appId" placeholder="请输入商户号"></el-input>
          </el-form-item>
          <el-form-item label="商户密钥">
            <el-input
              type="textarea"
              v-model="form.appSecret"
              placeholder="请输入商户密钥"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付密码">
            <el-input v-model="form.payPassword" placeholder="请输入支付密码"></el-input>
          </el-form-item>
          <el-form-item label="微信appid">
            <el-input
              v-model="form.wechatSmallAppid"
              placeholder="请输入微信小程序appid"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付宝appid">
            <el-input
              v-model="form.alipaySmallAppid"
              placeholder="请输入支付宝小程序appid"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="支付宝商户号">
                        <el-input v-model="form.alipayAppId" placeholder="请输入支付宝商户号"></el-input>
                    </el-form-item>
                    <el-form-item label="支付宝商户密钥">
                        <el-input v-model="form.alipayAppToken" placeholder="请输入支付宝商户密钥"></el-input>
                    </el-form-item> -->

          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio :value="1">启用</el-radio>
              <el-radio :value="-1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitHandle" :loading="formLoading">
          <span v-if="!formLoading">保存</span>
          <span v-else>保存中...</span>
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
// import { tbMerchantThirdApply, tbMerchantThirdApplyPut } from "@/api/shop";
import ShopApi from "@/api/account/shop";
import shopMerchantApi from "@/api/account/shopMerchant";
import { ElNotification } from "element-plus";
export default {
  data() {
    return {
      dialogVisible: false,
      activeName: "pay",
      formLoading: false,
      form: {
        appSecret: "",
        id: "",
        payPassword: "",
        status: 1,
        appId: "",
        wechatSmallAppid: "",
        storeId: "",
        alipaySmallAppid: "",
        alipayAppToken: "",
        alipayAppId: "",
      },
    };
  },
  methods: {
    // 保存
    async submitHandle() {
      this.formLoading = true;
      try {
        await shopMerchantApi.edit(this.form.id, this.form);
        this.$emit("success");
        this.formLoading = false;
        ElNotification({
          title: "成功",
          message: `修改成功`,
          type: "success",
        });
        this.close();
      } catch (error) {
        this.formLoading = false;
        console.log(error);
      }
    },
    close() {
      this.dialogVisible = false;
    },
    reset() {
      this.form.appSecret = "";
      this.form.id = "";
      this.form.payPassword = "";
      this.form.status = 1;
      this.form.appId = "";
    },
    // 详情（配置三方支付）
    async getDetail(id) {
      console.log(id);
      try {
        const res = await shopMerchantApi.get(id);
        this.form.appSecret = res.appSecret;
        this.form.payPassword = res.payPassword;
        this.form.status = res.status;
        this.form.appId = res.appId;
        this.form.wechatSmallAppid = res.wechatSmallAppid;
        this.form.alipaySmallAppid = res.alipaySmallAppid;
        this.form.merchantName = res.merchantName;
        //this.form.alipayAppToken = res.alipayAppToken
        //this.form.alipayAppId = res.alipayAppId
        this.form.storeId = res.storeId;
        this.dialogVisible = true;
      } catch (error) {
        console.log(error);
      }
    },
    show(obj) {
      if (obj && obj.id) {
        this.form.id = obj.id;
        this.getDetail(obj.id);
      }
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.el-dialog__header) {
  padding: 0;
}
</style>