<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.name" placeholder="请输入模版名称" />
                    </a-form-model-item>
                </a-form-model>
                <a-button @click="onSearch" type="primary">查 询</a-button>
                <a-button @click="onReset">重 置</a-button>
            </a-space>
        </div>

        <div id="commonTable">
            <div style="margin-bottom: 16px">
                <a-button icon="plus" @click="handlerAdd" 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="formatter" slot-scope="text, record">
                    <a-switch :checked="record.status==2 ? false : true" checked-children="启用" un-checked-children="禁用" @change="onChange(record)" />
                </span>
                <span slot="action" slot-scope="text,record">
                    <a @click="detail(record)">修改设置</a>
                </span>
            </a-table>
            <!-- 新建/修改框 -->
            <a-drawer :title="drawerModel == 1 ? '新建收费模版':'修改收费模版'" :visible="visible" @close="hanlderClose" width="512">
                <a-form-model>
                    <a-form-model-item label="模版名称">
                        <a-input v-model="addForm.name" style="width: 240px" placeholder="请输入模版名称" />
                    </a-form-model-item>
                    <a-form-model-item label="功能模块大类">
                        <a-checkbox-group :options="modalType" @change="modelChange" />
                    </a-form-model-item>
                    <a-form-model-item label="时间类型">
                        <a-checkbox-group :options="timeType" @change="timeChange" />
                    </a-form-model-item>
                    <a-form-model-item label="价格参数">
                        <div class="columns">
                            <span class="columns-item">功能模块</span>
                            <span class="columns-item">时间</span>
                            <span class="columns-item">价格</span>
                        </div>
                        <div class="model-item" v-for="(item, index) in modelInput" :key="index">
                            <template v-if="activeModel.indexOf(item.id)!=-1">
                                <span class="models">{{item.name}}</span>
                                <span class="models2">
                                    <div v-for="(it , id) in timeInput" :key="id">
                                        <span v-if="activeTime.indexOf(it.id)!=-1">
                                            {{it.years}}年{{it.months}}个月{{it.days}}天
                                            <a-input-number step="0.01" v-model="addForm.chargingTemplateFunctionTimeTypeDTO[id + index * timeInput.length].unitPrice" style="width:120px;margin-left: 65px"></a-input-number>
                                        </span>
                                    </div>
                                </span>
                            </template>
                        </div>
                    </a-form-model-item>
                </a-form-model>
                <a-button v-if="drawerModel==1" @click="addConfirm" type="primary">确认新增</a-button>
                <a-button v-else type="primary" @click="addConfirm">确认修改</a-button>
            </a-drawer>
        </div>
    </div>
</template>

<script>
import {getChargingList} from "@/api/manage"
import {onoffCharging} from "@/api/manage"
import {findTimeType, findSuperNavigation, addCharge, updateCharge } from "@/api/manage";
export default {
    name: "chagingStandard",
    data() {
        return {
            drawerModel: 1,
            form: {
                pageNum: 1,
                size: 10,
                name: ''
            },
            colors: ['volcano','orange','yellow','green','blue','purple','grey'],
            tableData: [],
            columns: [
                {
					title: "模版名称",
					dataIndex: "name",
					width: 120,
				},
				{
					title: "包含功能模块",
					dataIndex: "includeFunctionModelList",
					scopedSlots: { customRender: "tags" },
					width: 360,
				},
                {
					title: "已购买次数",
					dataIndex: "payNum",
					width: 120,
				},
				{
					title: "状态",
					dataIndex: "status",
					scopedSlots: { customRender: "formatter" },
					width: 120,
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: 180,
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
            ],
            pagination: {
                current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
            },
            //新建
            addForm: {
                name: '',
                chargingTemplateFunctionTimeTypeDTO: [
                    {
                        chargingFunctionId: 0,
                        chargingTimeTypeId: 0,
                        unitPrice: 0,
                    }
                ],
            },
            visible: false,
            //收费标准时间类型
            timeType: [],
            activeTime: [],
            timeInput: [],
            //收费标准模块信息
            modalType: [],
            activeModel: [],
            modelInput: [],
        }
    },
    mounted() {
        this.getType();
        this.getData();
    },
    methods: {
        getData() {
            getChargingList(this.form).then(res => {
                this.pagination.total = res.data.total;
                let data = res.data.rows;
                this.tableData = data;
                this.doPrice();
            })
        },
        //获取后台数据
        getType() {
            findTimeType().then(res => {
                let data = res.data;
                this.timeInput = data; //输入框
                let opts = [];
                data.forEach(ele => {
                    let obj = {
                        label: ele.years+'年' + ele.months+'个月' + ele.days+'天',
                        value: ele.id
                    };
                    opts.push(obj)
                })
                this.timeType = opts //多选框
            });
            findSuperNavigation().then(res => {
                let data = res.data;
                this.modelInput = data; //输入框
                let opts = [];
                data.forEach(ele => {
                    let obj = {
                        label: ele.name, value: ele.id
                    };
                    opts.push(obj)
                })
                this.modalType = opts //多选框
            })
        },
        //填充价格
        doPrice() {
            let addForm = [];
            for(let i = 0;i < this.modelInput.length;i++){
                for(let j = 0; j < this.timeInput.length;j++) {
                    let obj = {
                        chargingFunctionId: this.modelInput[i].id,
                        chargingTimeTypeId: this.timeInput[j].id,
                        unitPrice: 0,
                    };
                    addForm.push(obj)
                }
            };
            this.addForm.chargingTemplateFunctionTimeTypeDTO = addForm;
        },
        //分页
		handleTableChange(pagination) {
			this.form.size = pagination.pageSize;
			this.form.pageNum = pagination.current;
			this.getData();
		},
        //新建收费模版
        handlerAdd() {
            this.drawerModel = 1;
            this.visible = true
        },
        //-改变选择的模块
        modelChange(val) {
            this.activeModel = val;
        },
        timeChange(val) {
            this.activeTime = val
        },
        hanlderClose() {
            this.visible = false
        },
        //确定添加
        addConfirm() {
            let adds = this.addForm.chargingTemplateFunctionTimeTypeDTO
            let chosenAdds = [];
            adds.forEach(ele => {
                if(this.activeModel.indexOf(ele.chargingFunctionId)!= -1 && 
                   this.activeTime.indexOf(ele.chargingTimeTypeId)!= -1) {
                    let obj = {
                        chargingFunctionId: ele.chargingFunctionId,
                        chargingTimeTypeId: ele.chargingTimeTypeId,
                        unitPrice: ele.unitPrice
                    };
                    chosenAdds.push(obj)
                }
            })
            let obj = {
                name: this.addForm.name,
                chargingTemplateFunctionTimeTypeDTO: chosenAdds
            }
            if(this.drawerModel == 1) {
                addCharge(obj).then(() => {
                    this.visible = false
                })
            } else {
                let o = Object.assign(obj, {id: this.chosenModel});
                updateCharge(o).then(() => {
                    this.visible = false
                })
            };
            this.getData();
        },
        //修改模版
        detail(record) {
            this.chosenModel = record.id
            this.drawerModel = 2;
            this.visible = true
        },
        //启用/禁用
        onChange(record) {
            let obj = {id: record.id}
            onoffCharging(obj).then(() => {
                this.getData()
            })
        },
        //查询和重置
        onSearch() {
            this.getData()
        },
        onReset() {
            this.form.name = '';
            this.getData();
        }
    }
}
</script>

<style lang="less" scoped>
.columns {
    display: flex;
    justify-content: flex-start;
    background: lightgrey;
    .columns-item {
        width: 160px;
    }
}
.model-item {
    display: flex;
    justify-content: flex-start;
    .models {
        width: 160px;
    }
    .models2 {
        width: 320px;
    }
}
</style>