<template>
    <div class="content-view">
        <div class="table-head-tool">
            <Button type="primary" @click="showAddWarp">新增</Button>
            <Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
                <FormItem :label-width="20" class="flex">
                    <Select v-model="gridOption.param.seachOption.key" style="width: 120px"
                        :placeholder="seachTypePlaceholder">
                        <Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
                    </Select>
                    <Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
                        placeholder="请输入关键字" @on-search="query(1)" />
                </FormItem>
                <FormItem label="场地类型">
                    <Select v-model="gridOption.param.seachOption.venue_type" style="width: 120px" clearable @on-change="query(1)">
                        <Option value="indoor">室内</Option>
                        <Option value="outdoor">室外</Option>
                        <Option value="semi-outdoor">半室外</Option>
                    </Select>
                </FormItem>
                <FormItem label="地面类型">
                    <Select v-model="gridOption.param.seachOption.surface_type" style="width: 120px" clearable @on-change="query(1)">
                        <Option value="hard">硬地</Option>
                        <Option value="clay">红土</Option>
                        <Option value="grass">草地</Option>
                        <Option value="carpet">地毯</Option>
                    </Select>
                </FormItem>
                <FormItem label="状态">
                    <Select v-model="gridOption.param.seachOption.status" style="width: 120px" clearable @on-change="query(1)">
                        <Option value="active">营业中</Option>
                        <Option value="inactive">暂停营业</Option>
                        <Option value="closed">已关闭</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="query(1)">查询</Button>
                    <Button type="default" @click="resetQuery" class="ml10">重置</Button>
                    <Button type="default" @click="exportCsv" class="ml10">导出</Button>
                </FormItem>
            </Form>
        </div>
        <div class="table-body">
            <tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
                @changePage="query"></tables>
        </div>
        <editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
    </div>
</template>
<script>


import menuServer from '@/api/system/menuServer.js'
import venuesServer from '@/api/ball/venues_server.js'
export default {
    data() {
        let rules = {}

        rules["id"] = [{ required: true, message: '请填写' }];
        rules["name"] = [{ required: true, message: '请填写场地名称' }];
        rules["address"] = [{ required: true, message: '请填写详细地址' }];
        rules["latitude"] = [{ required: true, message: '请填写纬度' }];
        rules["longitude"] = [{ required: true, message: '请填写经度' }];
        rules["venue_type"] = [{ required: true, message: '请填写场地类型' }];
        rules["court_count"] = [{ required: true, type: "number", message: '请选择场地数量', trigger: 'change' }];
        rules["price_per_hour"] = [{ required: true, message: '请填写每小时价格' }];
        rules["facilities"] = [{ required: true, message: '请填写设施描述' }];
        rules["surface_type"] = [{ required: true, message: '请选择地面类型' }];
        rules["timeSlot"] = [{ required: false, message: '请填写营业时间' }];


        return {
            // 搜索类型：只包含适合文本搜索的字段
            seachTypes: [
                { key: "name", value: "场地名称" },
                { key: "address", value: "详细地址" },
                { key: "facilities", value: "设施描述" }
            ],
            gridOption: {
                param: {
                    seachOption: {
                        key: "name",
                        value: "",
                        venue_type: null,    // 场地类型筛选
                        surface_type: null,  // 地面类型筛选
                        status: null         // 状态筛选
                    },
                    pageOption: {
                        total: 0,
                        page: 1,
                        pageSize: 20
                    }
                },
                rules,
                columns: [
                    { key: 'id', title: 'id', is_show_edit: 0 },
                    { key: "name", title: "场地名称", disabled: false, is_show_edit: 1, is_show_list: 1, com: "Input" },
                    { key: "address", title: "详细地址", disabled: false, is_show_edit: 1, is_show_list: 1, com: "Input" },
                    { key: "latitude", title: "纬度", disabled: false, is_show_edit: 1, is_show_list: 1, com: "InputNumber", data_type: "number" },
                    { key: "longitude", title: "经度", disabled: false, is_show_edit: 1, is_show_list: 1, com: "InputNumber", data_type: "number" },
                    {
                        key: "venue_type",
                        title: "场地类型",
                        disabled: false,
                        is_show_edit: 1,
                        is_show_list: 1,
                        com: "Select",
                        options: [
                            { value: "indoor", label: "室内" },
                            { value: "outdoor", label: "室外" },
                            { value: "semi-outdoor", label: "半室外" }
                        ],
                        render: (h, params) => {
                            const typeMap = {
                                'indoor': { text: '室内', color: 'blue' },
                                'outdoor': { text: '室外', color: 'green' },
                                'semi-outdoor': { text: '半室外', color: 'cyan' }
                            };
                            const type = typeMap[params.row.venue_type] || { text: params.row.venue_type || '未知', color: 'default' };
                            return h('Tag', { props: { color: type.color } }, type.text);
                        }
                    },
                    {
                        key: "surface_type",
                        title: "地面类型",
                        disabled: false,
                        is_show_edit: 1,
                        is_show_list: 1,
                        com: "Select",
                        options: [
                            { value: "hard", label: "硬地" },
                            { value: "clay", label: "红土" },
                            { value: "grass", label: "草地" },
                            { value: "carpet", label: "地毯" },
                            { value: "indoor", label: "室内地面" },
                            { value: "other", label: "其他" }
                        ],
                        render: (h, params) => {
                            const surfaceMap = {
                                'hard': { text: '硬地', color: 'cyan' },
                                'clay': { text: '红土', color: 'orange' },
                                'grass': { text: '草地', color: 'green' },
                                'carpet': { text: '地毯', color: 'purple' },
                                'indoor': { text: '室内地面', color: 'blue' },
                                'other': { text: '其他', color: 'default' }
                            };
                            const surface = surfaceMap[params.row.surface_type] || { text: params.row.surface_type || '未知', color: 'default' };
                            return h('Tag', { props: { color: surface.color } }, surface.text);
                        }
                    },
                    { key: "court_count", title: "场地数量", disabled: false, is_show_edit: 1, is_show_list: 1, data_type: "number", com: "InputNumber" },
                    { key: "price_per_hour", title: "每小时价格", disabled: false, is_show_edit: 1, is_show_list: 1, com: "InputNumber", data_type: "number" },
                    { key: "facilities", title: "设施描述", disabled: false, is_show_edit: 1, is_show_list: 0, com: "TextArea" },
                    { key: "timeSlot", title: "营业时间", disabled: false, is_show_edit: 1, is_show_list: 1, com: "Input" },
                    {
                        key: "status",
                        title: "状态",
                        disabled: false,
                        is_show_edit: 1,
                        is_show_list: 1,
                        com: "Select",
                        options: [
                            { value: "active", label: "营业中" },
                            { value: "inactive", label: "暂停营业" },
                            { value: "closed", label: "已关闭" }
                        ],
                        render: (h, params) => {
                            const statusMap = {
                                'active': { text: '营业中', color: 'green' },
                                'inactive': { text: '暂停营业', color: 'orange' },
                                'closed': { text: '已关闭', color: 'red' }
                            };
                            const status = statusMap[params.row.status] || { text: params.row.status || '未知', color: 'default' };
                            return h('Tag', { props: { color: status.color } }, status.text);
                        }
                    },
                    { key: 'create_time', title: '创建时间', is_show_edit: 0 },
                    { key: 'last_modify_time', title: '更新时间',  is_show_edit: 0 },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        type: 'template',
                        render: (h, params) => {
                            let btns = [
                                {
                                    title: '修改',
                                    type: 'primary',
                                    click: () => {
                                        this.showEditWarp(params.row)
                                    },
                                },
                                {
                                    title: '删除',
                                    type: 'primary',
                                    click: () => {
                                        this.delConfirm(params.row)
                                    },
                                },
                            ]
                            return  window.framework.uiTool.getBtn(h, btns)
                        },
                    }
                
                ],
                data: []
            },
        }
    },
    computed: {
        seachTypePlaceholder() {
            const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key);
            return selected ? selected.value : '请选择搜索类型';
        },
        editColumns() {
            let editTempColumns = this.gridOption.columns.filter(p => p.is_show_edit === 1)
            return editTempColumns
        },
        listColumns() {
            let listTempColumns = this.gridOption.columns.filter(p => p.is_show_list !== 0)
            return listTempColumns
        }
    },
    mounted() {
        this.init()
        this.initCol()
    },
    methods: {
        init() {
            this.query(1)
        },
        async initCol() {

            let columnRows = []
            let columnKeys = columnRows.map(p => p.key)
            let newColumns = this.gridOption.columns.filter(p => columnKeys.indexOf(p.key) > -1)
            for (let i = 0; i < newColumns.length; i++) {
                let curColumn = newColumns[i]
                let modelMap = columnRows[i].map_option
                let res = await menuServer.modelInterface({ model_key: columnRows[i].modelKey, map_option: modelMap })
                curColumn.source = res.data
            }

        },
        async inquiry() {
            let res = await venuesServer.all(this.gridOption.param)
            this.gridOption.data = res.data
        },
        async query(page) {
            if (page) {
                this.gridOption.param.pageOption.page = page
            }
            let res = await venuesServer.page(this.gridOption.param)
            this.gridOption.data = res.data.rows
            this.gridOption.param.pageOption.total = res.data.count
        },
        async showAddWarp() {
            this.$refs.editModal.addShow({ 'venue_type': 'indoor', 'surface_type': 'hard', 'court_count': '1', 'status': 'active' }, async (newRow) => {
                let res = await venuesServer.add(newRow)
                this.$Message.success('新增成功！')
                this.init()
            })
        },
        async showEditWarp(row) {
            this.$refs.editModal.editShow(row, async (newRow) => {
                let valid = await this.$refs['editModal'].$refs['From'].validate()
                if (valid) {
                    let res = await venuesServer.edit(newRow)
                    this.$Message.success('修改成功！')
                    this.init()
                }
            })
        },
        async delConfirm(row) {
             window.framework.uiTool.delConfirm(async () => {
                await venuesServer.del(row)
                this.$Message.success('删除成功！')
                this.init()
            })
        },
        resetQuery() {
            this.gridOption.param.seachOption = {
                key: 'name',
                value: '',
                venue_type: null,
                surface_type: null,
                status: null
            };
            this.query(1);
        },
        async exportCsv(row) {
            await venuesServer.exportCsv(row)
        }
    }
}
</script>
<style lang="less"></style>