<template>
  <div class="aimodeltc-edit">
    <el-dialog
      v-bind="$attrs"
      :title="state.dialogTitle"
      v-model="state.modalVisible"
      :before-close="cancelDialog"
      :append-to-body="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="false"
      class="aimodel-dialog"
      draggable
    >
      <el-form ref="aimodeltcRef" :model="state.form" :rules="state.rules" label-width="140px">
        <el-row>
          <el-col :span="24">
            <!-- 代理商归属 -->
            <all-Select :multiple="false" @refreshButton="refreshData" :activeId="state.form.paysortagentsid" />
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付类型" prop="paysortname">
              <el-radio-group v-model="state.form.paysortname" :disabled="state.dialogType === 'up'" @change="onformType">
                <el-radio :value="'支付宝'" :label="'支付宝'">支付宝</el-radio>
                <el-radio :value="'微信'" :label="'微信'">微信</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否可用" prop="paysortsfky">
              <el-radio-group v-model="state.form.paysortsfky">
                <el-radio :value="1" :label="1">可用</el-radio>
                <el-radio :value="0" :label="0">不可用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- 微信支付内容 -->
          <el-col :span="12" v-show="state.form.paysortname === '微信'">
            <el-form-item label="微信appid" prop="paysortwxappid">
              <el-input v-model="state.form.paysortwxappid" placeholder="微信appid" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="state.form.paysortname === '微信'">
            <el-form-item label="微信支付key" prop="paysortwxkey">
              <el-input v-model="state.form.paysortwxkey" placeholder="微信支付key" />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="state.form.paysortname === '微信'">
            <el-form-item label="微信mchid" prop="paysortwxmchid">
              <el-input type="textarea" :rows="4" v-model="state.form.paysortwxmchid" placeholder="微信mchid" />
            </el-form-item>
          </el-col>

          <!-- 支付宝支付内容 -->
          <el-col :span="12" v-show="state.form.paysortname === '支付宝'">
            <el-form-item label="支付宝商户id" prop="paysortalipayuid">
              <el-input v-model="state.form.paysortalipayuid" placeholder="支付宝商户id" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="state.form.paysortname === '支付宝'">
            <el-form-item label="支付宝appid" prop="paysortalipayappid">
              <el-input v-model="state.form.paysortalipayappid" placeholder="支付宝appid" />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="state.form.paysortname === '支付宝'">
            <el-form-item label="支付宝私钥" prop="paysortalipayprivekey">
              <el-input type="textarea" :rows="4" v-model="state.form.paysortalipayprivekey" placeholder="支付宝私钥" />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="state.form.paysortname === '支付宝'">
            <el-form-item label="支付宝公钥" prop="paysortalipaypublickey">
              <el-input type="textarea" :rows="4" v-model="state.form.paysortalipaypublickey" placeholder="支付宝公钥" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
          <el-button @click="cancelDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import paymentStoreApi from '@store/modules/paymentStoreApi'
import {filterObject} from '@/utils/index'
import {nextTick} from 'vue'

// 接口封装文件
const productManageStore = paymentStoreApi()
// 全局变量
const {proxy} = getCurrentInstance()
// 验证form
const aimodeltcRef = ref(null)

const state = reactive({
  // 弹窗开关
  modalVisible: false,
  // 弹窗标题
  dialogTitle: '',
  dialogType: '',
  // 详情
  editView: {},
  // 表单
  form: {
    paysortname: '',
    paysortsfky: '',
    paysortalipayuid: '',
    paysortalipayappid: '',
    paysortalipayprivekey: '',
    paysortalipaypublickey: '',
    paysortwxkey: '',
    paysortwxmchid: '',
    paysortagentsid: '',
    paysortagentsqym: '',
    paysortalipayappid: ''
  },
  // 验证表单
  rules: {
    paysortname: [{required: true, message: '此项不能为空', trigger: 'blur'}]
  }
})

const emits = defineEmits(['refresh'])
const refreshData = (data) => {
  state.form.paysortagentsid = data.map((value) => value.agentsid).join(',')
  state.form.paysortagentsqym = data.map((value) => value.agentsqym).join(',')
}
// 确定弹窗回调
const submitDialog = () => {
  aimodeltcRef.value.validate(async (valid) => {
    if (valid) {
      if (Object.keys(state.editView).length) {
        let params = JSON.parse(JSON.stringify(state.form))
        params['paysortid.value'] = state.editView.paysortid
        await productManageStore.up(params)
        proxy.$modal.msgSuccess('修改成功！')
      } else {
        let params = JSON.parse(JSON.stringify(state.form))
        // 做支付类型判断
        if (params.paysortname === '支付宝') {
          delete params.paysortwxappid
          delete params.paysortwxkey
          delete params.paysortwxmchid
        } else {
          delete params.paysortalipayuid
          delete params.paysortalipayappid
          delete params.paysortalipayprivekey
          delete params.paysortalipaypublickey
        }

        await productManageStore.add(params)
        proxy.$modal.msgSuccess('新增成功！')
      }
      state.editView = {}
      aimodeltcRef.value.resetFields()
      emits('refresh')
      state.modalVisible = false
    }
  })
}

// 切换类型
const onformType = (data) => {
  if (data === '支付宝') {
    state.rules = {
      paysortname: [{required: true, message: '此项不能为空', trigger: 'blur'}],
      paysortalipayuid: [{required: true, message: '此项不能为空', trigger: 'blur'}],
      paysortalipayappid: [{required: true, message: '此项不能为空', trigger: 'blur'}],
      paysortalipayprivekey: [{required: true, message: '此项不能为空', trigger: 'blur'}],
      paysortalipaypublickey: [{required: true, message: '此项不能为空', trigger: 'blur'}]
    }
  } else {
    state.rules = {
      paysortname: [{required: true, message: '此项不能为空', trigger: 'blur'}],
      paysortwxappid: [{required: true, message: '此项不能为空', trigger: 'blur'}],
      paysortwxkey: [{required: true, message: '此项不能为空', trigger: 'blur'}],
      paysortwxmchid: [{required: true, message: '此项不能为空', trigger: 'blur'}]
    }
  }
}

// 关闭弹窗
const cancelDialog = () => {
  state.editView = {}
  aimodeltcRef.value.resetFields()
  state.modalVisible = false
}

// 打开弹窗
const openDialog = async (data = {}) => {
  if (Object.keys(data).length) {
    await getDataView(data)
  }
  state.dialogTitle = Object.keys(data).length ? `编辑【${data.paysortname}】` : '新增'
  state.dialogType = Object.keys(data).length ? 'up' : 'add'
  state.modalVisible = true
}

// 申请详情
const getDataView = (data) => {
  nextTick(async () => {
    const result = await productManageStore.view({'paysortid.value': data.paysortid})
    state.editView = result
    state.form = filterObject(result, Object.keys(state.form))
  })
}

defineExpose({
  openDialog
})
</script>
