<template>
    <div>
        <form-container @submit="submitForm"></form-container>
        <div class="table">
            <el-table :data="lists" style="width: 100%">
                <el-table-column prop="code" label="类型">
                    <template slot-scope="lists">
                        <span v-if="lists.row.code === 'piaochuang'">漂浮窗</span>
                        <span v-else-if="lists.row.code === 'otherLink'">其他链接</span>
                        <span v-else>其他</span>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间">
                    <template slot-scope="lists">
                        <div @click="changeStatus(lists.$index,'startTime')">
                            <!-- <el-input v-if="statusCode === 'startTime' && statusIndex === lists.$index" :value="lists.row.startTime" /> -->
                            <el-date-picker
                                v-if="statusCode === 'startTime' && statusIndex === lists.$index"
                                v-model="lists.row.startTime"
                                type="datetime"
                                placeholder="选择开始时间"
                                @change="changeTime(lists.row,'startTime',$event)"
                            >
                            </el-date-picker>
                            <div v-else>
                                <span v-if="lists.row.startTime-0">
                                    {{ $moment(lists.row.startTime-0).format("YYYY-MM-DD HH:mm") }}
                                </span>
                                <span v-else>
                                    暂无
                                </span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间">
                    <template slot-scope="lists">
                        <div @click="changeStatus(lists.$index,'endTime')">
                            <el-date-picker
                                v-if="statusCode === 'endTime' && statusIndex === lists.$index"
                                v-model="lists.row.endTime"
                                type="datetime"
                                placeholder="选择开始时间"
                                @change="changeTime(lists.row,'endTime',$event)"
                            >
                            </el-date-picker>
                            <div v-else>
                                <span v-if="lists.row.endTime-0">
                                    {{ $moment(lists.row.endTime-0).format("YYYY-MM-DD HH:mm") }}
                                </span>
                                <span v-else>
                                    暂无
                                </span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="value" label="常量值">
                    <template slot-scope="lists">
                        <div v-for="(item,index) in getValue(lists.row.value)" :key="index" @click="changeStatus(lists.$index,'value')">
                            <div>
                                <template v-if="lists.row.code !== 'otherLink'">
                                    {{ item.title }}
                                </template>
                                <template v-else>
                                    <el-input v-if="statusCode === 'value' && statusIndex === lists.$index" :value="item.title" @blur="changeTitle($event,index,lists.row)" />
                                    <span v-else>{{ item.title }}</span>
                                </template>
                            </div>
                            <template v-if="Array.isArray(item.value)">
                                <div v-for="(itemA,indexA) in item.value" :key="indexA">
                                    <el-input v-if="statusCode === 'value' && statusIndex === lists.$index" :value="itemA" @blur="changeValue($event,item.title,lists.row,indexA)" />
                                    <span v-else>{{ itemA }}</span>
                                    {{ item.title }}
                                </div>
                            </template>
                            <template v-else>
                                <div>
                                    <el-input v-if="statusCode === 'value' && statusIndex === lists.$index" :value="item.value" @blur="changeValue($event,item.title,lists.row)" />
                                    <span v-else>{{ item.value }}</span>
                                </div>
                            </template>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述">
                    <template slot-scope="lists">
                        <div @click="changeStatus(lists.$index,'description')">
                            <el-input v-if="statusCode === 'description' && statusIndex === lists.$index" :value="lists.row.description" @blur="changeTime(lists.row,'description',$event)" />
                            <span v-else> {{ lists.row.description }} </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="modifyName" label="最后修改人登录名">
                    <template slot-scope="lists">
                        <span> {{ lists.row.modifyName }} </span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    :page-size="params.pageSize"
                    layout="prev, pager, next"
                    :total="dataList.total - 0"
                    @current-change="currentChange"
                >
                </el-pagination>
            </div>
        </div>

        <!-- <el-dialog
            width="400px"
            :show-close="false"
            :visible.sync="isEdit"
        >
            <details-of-distribution ref="distribution" :currId="id" v-if="isEdit"></details-of-distribution>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isEdit = false">取消</el-button>
                <el-button type="primary" @click="determine('ruleForm')">确定</el-button>
            </div>
        </el-dialog> -->

    </div>
</template>

<script>
    const FormContainer = () => import('./form.vue');
    import { GET_LIST,UPDATE_DATA } from '@/api/otherPage';
    import Alert from "@/utils/alert";

    export default {
        name: "index",
        data() {
            return {
                count: 0,
                id: '',
                isEdit: false,
                lists: [],
                dataList: {},
                params: {
                    locationId: '',
                    description: '',
                    pageNum: 1,
                    pageSize: 10,
                },
                statusIndex: -1,
                statusCode: '',

            }
        },
        mounted() {
            this.getList()
        },
        components: { FormContainer },
        methods: {
            // 修改content
            changeTitle(e,index,item) {
                let strList = JSON.parse(item.value)
                strList[index].content = e.target.value
                const params = {
                    code: item.code,
                    constantId: item.constantId,
                    value: JSON.stringify(strList)
                }
                this.updateData(params)

            },
            // 修改当前正在编辑的文本框
            changeStatus(index,code) {
                this.statusIndex= index;
                this.statusCode= code;
            },
            // 修改开始/结束时间
            changeTime(item,type,e) {
                const params = {
                    code: item.code,
                    constantId: item.constantId,
                }
                if(type === 'startTime') {
                    params.startTime = this.$moment(e).valueOf()
                } else if (type === 'emdTime') {
                    params.endTime = this.$moment(e).valueOf()
                } else if (type === 'description') {
                    params.description = e.target.value
                }
                this.updateData(params)
            },
            // 搜索查询按钮
            submitForm(res) {
                this.params = {
                    ...this.params,
                    pageNum: 1,
                    description: res.description,
                    locationId: res.locationId,
                };
                this.getList()
            },
            // 获取数组
            async getList() {
                await GET_LIST(this.params).then(res => {
                    const { code,msg,data } = res
                    if(code === 200) {
                        this.lists = data.list
                        this.dataList = data
                    } else {
                        Alert(msg)
                    }
                });
            },
            // 将常量值JSON字符串解析
            getValue(value) {
                const arr = JSON.parse(value)
                let itemList = []
                if(Array.isArray(arr)) {
                    for(let i = 0; i < arr.length; i++) {
                        const item = arr[i]
                        for(let key in item) {
                            if(Array.isArray(item[key])) {
                                const obj = {
                                    title: key,
                                    value: item[key]
                                }
                                itemList.push(obj)
                            } else {
                                const obj = {
                                    title: item.content,
                                    value: item.url
                                }
                                itemList.push(obj)
                                break
                            }
                        }
                    }
                } else {
                    for(let key in arr) {
                        const obj = {
                            title: key,
                            value: arr[key]
                        }
                        itemList.push(obj)
                    }
                }
                return itemList
            },
            // 修改常量值,将其反转成JSON后提交
            changeValue(e,title,defaultValue,index) {
                let dValue = JSON.parse(defaultValue.value);
                if(Array.isArray(dValue)) {
                    for(let i = 0; i < dValue.length; i++) {
                        const item = dValue[i]
                        for(let key in item) {
                            if(Array.isArray(item[key]) && key === title) {
                                item[key][index] = e.target.value
                            } else {
                                if(item.content === title) {
                                    item.url = e.target.value
                                    break;
                                }
                            }
                        }
                    }
                } else {
                    for(let key in dValue) {
                        if(key === title) {
                            dValue[key] = e.target.value
                        }
                    }
                }
                const params = {
                    code: defaultValue.code,
                    constantId: defaultValue.constantId,
                    value: JSON.stringify(dValue)
                }
                this.updateData(params)
            },
            // 常量修改
            async updateData(params) {
                await UPDATE_DATA(params).then(res => {
                    const { code } = res
                    if(code === 200) {
                        Alert.success('修改成功')
                        this.getList()
                        this.statusIndex= -1;
                        this.statusCode= '';
                    }
                });
            },

            /**
             * 分页
             */
            currentChange(res) {
                console.log('res: ', res);
                this.params = {
                    ...this.params,
                    pageNum: res,
                };
                this.getList()
            },
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .table {
        margin-top: 20px;
        padding: 30px;
        background: #fff;

        .option-span {
            color: #a90500;
            cursor: pointer;
        }
    }

    .pagination {
        margin-top: 20px;
    }
</style>
