<template>
    <div class="main">
        <div class="cardTitle">订单管理</div>
        <div class="search-box">
            <a-space size="large">
                <a-form-model layout="inline">
                    <a-form-model-item label="订单号">
                        <a-input v-model="form.code" placeholder="请输入订单号" />
                    </a-form-model-item>
                    <a-form-model-item label="企业名称">
                        <a-input v-model="form.name" placeholder="请输入企业名称" />
                    </a-form-model-item>
                    <a-form-model-item label="定制类型">
                        <a-select v-model="form.isCustomized" style="width: 200px" placeholder="类型">
                            <a-select-option :value="1">定制</a-select-option>
                            <a-select-option :value="0">不定制</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="订单状态">
                        <a-select v-model="form.status" style="width: 200px" placeholder="订单状态">
                            <a-select-option :value="0">待支付</a-select-option>
                            <a-select-option :value="1">支付超时</a-select-option>
                            <a-select-option :value="2">支付成功</a-select-option>
                            <a-select-option :value="3">交易结束不可退款</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
                <a-button type="primary" @click="handlerSearch">查 询</a-button>
                <a-button @click="handlerReset">重 置</a-button>
            </a-space>
        </div>
        <div id="commonTable">
            <div style="margin-bottom: 16px">
                <a-button icon="plus" @click="addOrder" type="primary" ghost>
                    新建订单
                </a-button>
            </div>
            <a-table
                :scroll="{ x: 1300 }"
                :columns="columns"
                :data-source="tableData"
                :pagination="pagination"
                @change="handleTableChange"
                :row-key="
                (record, index) => {
                    return index;
                }
                "
            >
                <!-- 操作 -->
                <span slot="tags" slot-scope="text, record">
                    <a-tag v-for="(item, index) in record.includeFunctionModelList" :key="index" :color="colors[index] ? colors[index] : 'black'">
                        {{item}}
                    </a-tag>
                </span>
                <span slot="type" slot-scope="scope">
                    {{scope === 1 ? "定制" : "不定制"}}
                </span>
                <span slot="formatter" slot-scope="scope">{{
                scope === 1 ? "支付超时" : (scope === 2 ? "已支付" : "待支付")
                }}</span>
                <span slot="action" slot-scope="text,record">
                    <a-popconfirm title="确定要解绑吗?" @confirm="unbound(record)" @cancel="() => {return}">
                        <a>解绑小区</a>
                    </a-popconfirm>
                </span>
            </a-table>
        </div>
    </div>
</template>

<script>
import { consoleShow } from "@/api/basic/console";
import {getAllOrder,orderUnbound} from "@/api/manage/index.js"
export default {
    name: "",
    data() {
        return {
            form: {
                pageNum: 1,
                size: 10,
                code: '',
                name: '',
                isCustomized: 0,
                status: 0,
            },
            //颜色列表
            colors: ['volcano','orange','yellow','green','blue','purple','grey'],
            columns: [
                {
					title: "订单号",
					dataIndex: "code",
					width: 180,
				},
                {
					title: "公司名",
					dataIndex: "name",
					width: 180,
				},
				{
					title: "类型",
					dataIndex: "isCustomized",
					scopedSlots: { customRender: "type" },
					width: 180,
				},
				{
					title: "包含功能模块",
					dataIndex: "includeFunctionModelList",
					scopedSlots: { customRender: "tags" },
					width: 400,
				},
				{
					title: "状态",
					dataIndex: "status",
					scopedSlots: { customRender: "formatter" },
					width: 120,
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: 180,
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
            ],
            //   数据
			tableData: [],
			//   分页
			pagination: {
				current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
			},
			loading: false,
			selectedRowKeys: [],
        }
    },
    mounted() {
        consoleShow().then(res => {
            // console.log(res)
        })
        this.getData();
    },
    methods: {
        getData() {
            getAllOrder(this.form).then(res => {
                this.pagination.total = res.data.total;
                let data = res.data.rows;
                this.tableData = data;
            })
        },
		//查询
		handlerSearch() {
			this.getData()
		},
		//重置
		handlerReset() {
            this.form.code = '',
            this.form.name = '',
            this.form.isCustomized = 0,
            this.form.status = 0,
			this.getData()
		},
		//分页
		handleTableChange(pagination) {
			this.form.size = pagination.pageSize;
			this.form.pageNum = pagination.current;
			this.getData();
		},
        //添加订单
        addOrder() {
            this.$router.push({name: 'add_order'})
        },
        //解绑
        unbound(record) {
            let obj = { adminFunctionOrderId : record.id }
            orderUnbound(obj).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg);
                    this.getData();
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
    }
}
</script>

<style lang="less" scoped> 

</style>