<template>
  <div class="flex flex-col justify-between w-full sm:flex-row">
    <div class="w-full">
      <Search :search="search" :reset="reset">
        <template v-slot:body>
          <el-form-item label="支付名称">
            <el-input v-model="query.name" placeholder="请输入支付名称" clearable />
          </el-form-item>
          <el-form-item label="支付商户号">
            <el-input v-model="query.pay_appid" placeholder="请输入支付商户号" clearable />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="query.remark" placeholder="请输入备注" clearable />
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select v-model="query.pay_type" clearable filterable placeholder="请选择支付方式">
              <el-option v-for="(item, index) in paymentList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="小程序类型">
            <el-select v-model="query.miniprogram_type" clearable filterable placeholder="请选择小程序类型">
              <el-option v-for="(item, index) in miniprogramTypelist" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </template>
      </Search>
      <div class="table-default">
        <Add v-action="'manage.PayConfig.addConfig'" class="mt-5 ml-2" @click="openType('createVisible', null)" />
        <el-table :data="tableData" class="mt-3" v-loading="loading">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="name" label="支付名称" />
          <el-table-column prop="pay_type_str" label="支付方式" />
          <el-table-column prop="payee_name" label="收款主体" />
          <el-table-column prop="pay_appid" label="支付商户号" />
          <el-table-column prop="miniprogram_type_str" label="小程序类型" />
          <el-table-column prop="pay_common_params" label="公用支付参数">
            <!-- <template #default="scope">
              <el-input type="textarea" v-model="scope.row.pay_common_params" :rows="6" autosize disabled></el-input>
            </template> -->
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="openType('noteVisible', scope.row)"
                v-action="'manage.PayConfig.remark'">备注</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Paginate />
      </div>
      <Dialog width="800px" v-model="noteVisible" title="备注" destroy-on-close>
        <note @close="closeType('noteVisible')" :primary="noteData"></note>
      </Dialog>

      <Dialog v-model="createVisible" title="新增" destroy-on-close>
        <Create @close="closeType('createVisible')" :primary="createData" />
      </Dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import Create from './form/create.vue';
import note from './form/note.vue';
import { useGetList } from '@/hook/curd/useGetList';
import { optionsCommonParams } from '@/api/common/index'

const api = 'manage/payConfig/list';
const noteVisible = ref(false)
const noteData = ref<object | null>({})
const createVisible = ref(false)
const createData = ref<object | null>({})
const paymentList = ref([])
const miniprogramTypelist = ref([])

const { data, query, search, reset, loading } = useGetList(api);

const tableData = computed(() => data.value?.data);

const openType = (type: string, data: object | null) => {
  switch (type) {
    case 'noteVisible':
      noteVisible.value = true
      noteData.value = data
      break;
    case 'createVisible':
      createVisible.value = true
      createData.value = data
      break;
  }

}
const closeType = (type: string) => {
  switch (type) {
    case 'noteVisible':
      noteVisible.value = false
      break;
    case 'createVisible':
      createVisible.value = false
      break;
  }
  search()
}
const init = () => {
  optionsCommonParams().then(res => {
    console.log(res, 'optionsCommonParams');
    paymentList.value = res.data.payType
    miniprogramTypelist.value = res.data.miniprogramType
  })
}

onMounted(() => {
  init()
  search();
});
</script>
