<template>
    <div>
        <div style="display: flex;align-items: center;justify-content: space-between;" v-if="isShow">
            <div>
                <a-input-search v-model:value="value" placeholder="请输入商品名" style="width: 200px;margin-left: 20px;"
                    @search="onSearch" />
                <!-- <a-space direction="vertical">
                    <a-select v-model:value="value1" :size="size" style="width: 200px;margin-left: 20px;" :options="options"></a-select>
                </a-space> -->
            </div>
            <div>
                <a-button type="primary" block @click="onCreatePay">新建支付项</a-button>
            </div>
        </div>
        <div style="margin-top: 10px;" v-if="isShow">
            <a-table :dataSource="list" :columns="columns">
                <template #bodyCell="{ column, record }">
                    <div v-if="column.key == 'picurl'">
                        <div style="display:flex;align-items: center;">
                            <a-image :width="100" :src="record.picurl" />
                            <div>{{ record.subject }}
                            </div>
                        </div>
                    </div>
                    <div v-else-if="column.key == 'status'">
                        <div v-if="record.status == 0" style="color: rgb(12, 191, 33);">
                            正常
                        </div>
                        <div v-else-if="record.status == 1" style="color: #e6a23c;">
                            预警额度
                        </div>
                        <div v-else style="color: #f56c6c;">
                            风控
                        </div>
                    </div>

                    <div v-if="column.key == 'tags'">
                        <a-button type="primary" @click="onEdit(record)">编辑</a-button>
                        <a-button type="primary" style="margin-left: 20px;" @click="onCopy">支付链接</a-button>
                        <a-button type="primary" style="margin-left: 20px;">统计</a-button>
                        <a-popconfirm title="确定下架这条数据" ok-text="确定" cancel-text="取消" @confirm="onDel(record)">
                            <a-button type="primary" style="margin-left: 20px">删除</a-button>
                        </a-popconfirm>
                    </div>
                </template>
            </a-table>
        </div>
        <div v-else>
            <CreatePay @onBack="onBack"></CreatePay>
        </div>
        <a-modal v-model:visible="visible" title="编辑" @ok="handleOk" :width="1000">
            <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
                autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <a-form-item label="选择商品" name="subject" :label-col="{ span: 2 }" labelAlign="left">
                    <div style="width:100%;display: flex;align-items: center;">
                        <a-select v-model:value="formState.subject" style="width: 120px"
                            :options="listArray.map((item, index) => ({ value: item.goodsid, label: item.subject, index: index }))">
                        </a-select>
                    </div>
                </a-form-item>
                <a-form-item label="商品描述" name="shortname" :label-col="{ span: 2 }" labelAlign="left">
                    <a-input v-model:value="formState.shortname" placeholder="请输入商品描述" />
                </a-form-item>
                <a-form-item label="支付金额" name="price" :label-col="{ span: 2 }" labelAlign="left">
                    <a-radio-group v-model:value="formState.paymentmodel" name="radioGroup" class="pay">
                        <div style="display: flex;height: 50px;">
                            <a-radio value="0" style="width:150px;">商品默认金额</a-radio>
                            <a-input-number style="width:200px;height: 40px;" v-model:value="formState.payment" />
                            <div style="width:50px;">元</div>
                        </div>
                        <div style="display: flex;height: 50px">
                            <a-radio value="1" style="width:150px;">自定义金额</a-radio>
                            <a-input-number style="width:200px;height: 40px;" v-model:value="formState.paymentmodel" />
                            <div style="width:50px;">元</div>
                        </div>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="支付渠道" name="price" :label-col="{ span: 2 }" labelAlign="left">
                    <a-checkbox-group v-model:value="checkboxValue" style="width: 100%">
                        <div style="display:flex;" v-for="item, index in optionsWithDisabled" :itemKey="item">
                            <a-checkbox :value="item.value" :label="item.label"
                                @change="onSelectCheckboxValue(item, index)">
                                <div>{{ item.value }}</div>
                            </a-checkbox>
                            <!-- <div style="margin-left:20px;">收款账户</div>
                    <div style="margin-left:20px;color: black;" v-if="listValue[index] &&listValue[index].paytype == 1">{{listValue[index].name}}</div>
                    <div style="margin-left:20px;color: black;" v-else-if="listValue[index] &&listValue[index].paytype == 2">{{listValue[index].payname}}</div>
                   <div style="margin-left:20px;color: black;" v-else>默认</div>
                    <div style="margin-left:20px;color: rgb(15, 64, 245);cursor: pointer;" @click="onSet(item.label)">设置</div> -->
                        </div>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item label="支付前填写手机号" name="price" :label-col="{ span: 2 }" labelAlign="left">
                    <div style="display: flex;">
                        <a-switch v-model:checked="formState.fullphone" />
                    </div>
                </a-form-item>
                <a-form-item label="开始时间" name="price" :label-col="{ span: 2 }" labelAlign="left">
                    <div style="display:flex">
                        <!-- <a-date-picker v-model:value="formState.starttime" :format="dateFormat"
                            :disabledDate="disabledDate" /> -->
                        <a-time-picker v-model:value="formState.startvalue" format="HH:mm" />
                    </div>
                </a-form-item>
                <a-form-item label="结束时间" name="price" :label-col="{ span: 2 }" labelAlign="left">
                    <div style="display:flex">
                        <!-- <a-date-picker v-model:value="formState.expireendtime" :format="dateFormat"
                            :disabledDate="disabledDate" /> -->
                        <a-time-picker v-model:value="formState.endvalue" format="HH:mm" />
                    </div>
                </a-form-item>
                <a-form-item label="信息备注" name="price" :label-col="{ span: 2 }" labelAlign="left">
                    <div style="display:flex">
                        <a-input v-model:value="formState.remark" placeholder="请填写备注" />
                    </div>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineExpose, onMounted, reactive, toRef } from 'vue';
import type { SelectProps } from 'ant-design-vue';
import { getUid } from '@/utils/userInfo'
import moment from 'moment';
import { onUpdateGoodsPay, onfindby, onSelectGoods } from '@/api/index'
import CreatePay from './components/createpay/index.vue'
import dayjs, { Dayjs } from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
const dateFormat = 'YYYY/MM/DD';
let listValue = ref<any>([])
const startvalue = ref<Dayjs>(dayjs('08:00', 'HH:mm'));
const endvalue = ref<Dayjs>(dayjs('10:00', 'HH:mm'));
const disabledDate = (current: any) => {
    return current && current < moment().startOf("day")
}
const popupScroll = () => {
    console.log('popupScroll');
};
const value = ref<string>('');
const checkboxValue = ref<any>([])
const optionss = ref<Array<Object>>([])
const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))
let list = ref()
let listArray = ref<any>([])
let isShow = ref(true)
let formState = ref<any>({})
const optionsWithDisabled = [
    { value: '微信', label: '1' },
    { label: '2', value: '支付宝' },
    { label: '3', value: '京东白条' },
    { label: '4', value: '花呗' }
];
const columns = [
    {
        title: '支付项目名称',
        dataIndex: 'picurl',
        key: 'picurl',
    },
    {
        title: '绑定商品编号',
        dataIndex: 'goodsid',
        key: 'goodsid',
    },
    {
        title: '支付金额',
        dataIndex: 'price',
        key: 'price',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
    },
    {
        title: '创始人',
        dataIndex: 'userid',
        key: 'userid',
    },
    {
        title: '备注',
        dataIndex: 'body',
        key: 'body',
    },
    {
        title: '操作',
        dataIndex: 'tags',
        key: 'tags',
    },
]
const visible = ref<boolean>(false);

const showModal = () => {
    visible.value = true;
};

const handleOk = (e: MouseEvent) => {
    console.log(e);
    visible.value = false;
};
const onEdit = (e: any) => {
    console.log(e, 'e');

    formState.value = e
    showModal()
}
const onSearch = async () => {
    const params = {
        status: "0",
        name: value.value,
        uid: getUid()
    }
    const data = await onfindby(params)
    list.value = data.data
};
const onBack = (e: Number) => {
    isShow.value = !isShow.value;
    onSearch()
};
const onCreatePay = async () => {
    isShow.value = !isShow.value
}
const onCopy = () => {
    console.log(11);
}
const onDel = async (e: any) => {
    console.log(e, 'e');
    e.status = '1'
    e.uid = getUid()
    e.goodspayditch = e.goodspayditch2
    e.goodsid = e.goodspayditch[0].goodsid
    const data = await onUpdateGoodsPay(e)
    console.log(data, 'data');
}
const onFinish = (values: any) => {
    console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};
const init = async () => {
    const uid = getUid()
    const data = await onSelectGoods(uid)
    listArray.value = data.data
}
const onSelectCheckboxValue = (e: any, index: any) => {
    checkboxValue.value[index] = e

}
onMounted(async () => {
    onSearch()
    init()
})
defineExpose({
    size: ref<SelectProps['size']>('middle'),
    value1: ref('a1'),
    options,
    value,
    isShow,
    visible,
    formState,
    checkboxValue,
    optionsWithDisabled,
    dateFormat,
    locale,
    startvalue,
    endvalue,
    onSearch,
    columns,
    onEdit,
    optionss,
    onCreatePay,
    onBack,
    onCopy,
    onDel,
    showModal,
    handleOk,
    disabledDate,
    onFinish,
    onFinishFailed,
    onSelectCheckboxValue
})
</script>
<style lang="less" scoped>
</style>