<template>
    <div class="test2">

        <div class="test2-wrapper">
            <div class="header">
                <el-button plain type="primary" icon="el-icon-search" @click="handel_search">刷 新</el-button>
                <!--<el-button @click="checkedKeys">得到节点id</el-button>-->
                <el-upload
                        action
                        :show-file-list="false"
                        class="upload-demo"
                        :http-request="file_uploader"
                        :before-upload="file_verified"
                >
                    <el-button plain
                               type="success"
                               icon="el-icon-circle-plus-outline"
                    >导 入
                    </el-button>
                </el-upload>

                <!--<el-button plain type="info" icon="el-icon-arrow-up" @click="order_by_real_amount" style="margin-right:0px">真实人数排序</el-button>-->
                <!--<el-button plain type="info" icon="el-icon-arrow-down" @click="order_by_false_amount">虚假人数排序</el-button>-->
                <!--<el-button plain type="info" icon="el-icon-edit" @click="handel_type" >编辑</el-button>-->



                <div class="head-item">
                    <el-select v-model="params.orderByInfo" placeholder="请选择">
                        <el-option
                                v-for="item in selectList"
                                :key="item.text"
                                :label="item.label"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </div>

                <div class="text headrow">
                    <el-input v-model="params.typeName" placeholder="请输入题目内容内容" style="width:200px"></el-input>
                    <el-input v-model="params.typeId" placeholder="请输入题型编号" style="width:200px"></el-input>
                    <el-date-picker
                            v-model="params.updateDate"
                            style="width:200px"
                            value-format="yyyyMMdd"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>

                <div class="head-item">

                    <el-select v-model="params.order" placeholder="请选择排序" @change="orderSelect">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                </div>

                <el-button plain type="primary" icon="el-icon-search" @click="handel_search">搜索</el-button>

                <el-button plain type="primary" icon="el-icon-search" @click="handel_cdn">刷新CDN</el-button>

            </div>

            <div class="data-wrapper">
                <div class="left">

                    <el-tree :data="table_data" :props="defaultProps" @node-click="handel_node_click" ref="tree"></el-tree>
                             <!--node-key="id" show-checkbox :check-strictly="true"></el-tree>-->

                </div>


                <div class="center">
                    <div class="content">
                        <el-form label-width="100px" :model="dialog_dto" ref="ruleForm">

                            <div v-for="dialog_item in dialog_list">
                                <el-form-item
                                        v-if="dialog_item.type === 'text'"
                                        :label="dialog_item.label"
                                        :prop="dialog_item.prop"
                                >
                                    <el-input v-model.trim="dialog_dto[dialog_item.prop]"
                                              :placeholder="dialog_item.placeholder"/>
                                </el-form-item>


                                <el-form-item
                                        v-if="dialog_item.type === 'text_disabled'"
                                        :label="dialog_item.label"
                                        :prop="dialog_item.prop"
                                >
                                    {{dialog_dto[dialog_item.prop]}}
                                </el-form-item>

                                <el-form-item
                                        v-else-if="dialog_item.type === 'checkbox'"
                                        :label="dialog_item.label"
                                        :prop="dialog_item.prop"
                                >
                                    <el-checkbox :true-label="1" :false-label="0" v-model="dialog_dto[dialog_item.prop]"
                                                 :checked="dialog_dto[dialog_item.prop] === 1" ></el-checkbox>
                                </el-form-item>

                                <el-form-item
                                        v-if="dialog_item.type === 'date'"
                                        :label="dialog_item.label"
                                >
                                    <el-date-picker
                                            v-model="dialog_dto[dialog_item.prop]"
                                            value-format="yyyyMMdd"
                                            type="date"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item
                                        v-else-if="dialog_item.type === 'select'"
                                        :label="dialog_item.label"
                                >
                                    <el-select v-model="dialog_dto[dialog_item.prop]"
                                               :placeholder="dialog_item.placeholder">
                                        <el-option
                                                v-for="item in dialog_item.select"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item
                                        v-if="dialog_item.type === 'select_number'"
                                        :label="dialog_item.label"
                                >
                                    <!--<el-option -->
                                            <!--v-for="item in options"-->
                                            <!--:key="item.value"-->
                                            <!--:label="item.label"-->
                                            <!--:value="item.value">-->
                                    <!--</el-option>-->

                                    <el-select v-model="dialog_dto[dialog_item.prop]"
                                               :placeholder="dialog_item.placeholder" clearable>
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>

                            </div>

                        </el-form>

                    </div>

                    <div class="footer">
                        <div class="footer-wrapper" v-if="dialog_list.length > 0">

                            <el-button type="primary" @click="handel_dialog_conform(dialog_dto)">修 改</el-button>

                        </div>
                    </div>


                </div>

                <div class="right">

                    <div class="right-wrapper" v-for="item in dialog_right_list">
                        <div class="content">
                            <el-form label-position="top">

                                <el-form-item
                                        :label="item.start + '-'+ item.end"
                                >
                                    <el-input
                                            autosize
                                            type="textarea"
                                            v-model="item.resultName"
                                            placeholder="请输入">
                                    </el-input>
                                </el-form-item>

                            </el-form>

                        </div>

                        <div class="footer">
                            <div class="footer-wrapper" v-if="dialog_right_list.length > 0">

                                <el-button type="primary" @click="handel_dialog_conform(item)">修 改</el-button>

                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import miniApi from '@/api/mini_test';
    import {uploadFile} from '@/utils/util';

    const class_dialog_list = [
        {label: '类别名称', prop: 'className', placeholder: '请输入', type: 'text'}
    ];

    const type_dialog_list = [
        {label: '类别', prop: 'classId', type: 'select'},
        {label: '题型编号', prop: 'id', placeholder: '请输入', type: 'text_disabled'},
        {label: '下题编号', prop: 'nextType', placeholder: '请输入', type: 'text'},
        {label: '题型名称', prop: 'typeName', placeholder: '请输入', type: 'text'},
        {label: '测试人数', prop: 'amount', placeholder: '请输入', type: 'text'},
        {label: '真实测试人数', prop: 'realAmount', placeholder: '请输入', type: 'text_disabled'},
        {label: '更新日期', prop: 'updateDate', placeholder: '请输入', type: 'date'},
        {label: '首页图', prop: 'imageurlCarousel', placeholder: '请输入', type: 'text'},
        {label: '轮播图', prop: 'carousel', placeholder: '请输入', type: 'checkbox'},
        {label: '猜你喜欢', prop: 'love', placeholder: '请输入', type: 'checkbox'},
        {label: '每日推荐', prop: 'recommend', placeholder: '请输入', type: 'checkbox'},
        {label: '热点', prop: 'hot', placeholder: '请输入', type: 'checkbox'},
        {label: '首页', prop: 'isFirst', placeholder: '请输入', type: 'checkbox'},
        {label: '每日热点', prop: 'dayhot', placeholder: '请输入', type: 'checkbox'},
        {label: '推荐', prop: 'daytuijian', placeholder: '请输入', type: 'checkbox'},
        {label: '每日更新', prop: 'daynew', placeholder: '请输入', type: 'checkbox'},

    ];

    const question_dialog_list = [
        {label: '问题名称', prop: 'questionName', placeholder: '请输入', type: 'text'}
    ];

    const option_dialog_list = [
        {label: '选项名称', prop: 'optionName', placeholder: '请输入', type: 'text'},
        {label: '选项分数', prop: 'optionScope', placeholder: '请输入', type: 'text'}
    ];


    export default {
        name: "Test2",
        data() {
            return {
              options: [{
                value: '1',
                label: '真实人数排序↓'
              }, {
                value: '2',
                label: '虚假人数排序↓'
              }, {
                value: '3',
                label: '更新时间排序↓'
              }, {
                value: '4',
                label: '更新时间排序↑'
              }],

                fileList: [],
                hiddenIcon: false,
                uploadFile: {},

                table_data: [],

                dialog_list: [],
                dialog_dto: {},

                dialog_right_list: [],

                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                params:{},
              selectList:[
                {label:'轮播图',value:'carousel'},
                {label:'猜你喜欢',value:'love'},
                {label:'每日推荐',value:'recommend'},
                {label:'热点',value:'hot'},
                {label:'首页',value:'isFirst'},
                {label:'每日热点',value:'dayhot'},
                {label:'推荐',value:'daytuijian'},
                {label:'每日更新',value:'daynew'},
                {label:'下题编号',value:'nextType'},
              ],
              classes:[]
            }
        },
        mounted() {
            this.init();
        },
        methods: {
          checkedKeys(data) {
            console.log(this.$refs.tree.getCheckedKeys())
            alert(JSON.stringify(this.$refs.tree.getCheckedKeys()));
          },
            init() {
                this.handel_search()
            },

            handel_search() {
                const loading = this.$loading({
                    lock: true,
                    text: '拼命加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.dialog_right_list = [];
                this.dialog_list = [];
                miniApi.list(this.params).then(res => {
                    this.convert_tree(res);
                    this.table_data = res;
                    console.log(res)
                  this.classes = res;
                    loading.close();
                    this.params = {};
                })
            },

            handel_node_click(item) {
                this.dialog_dto = item;
                let type = this.get_type(item);
                this.dialog_right_list = [];
                switch (type) {
                    case 'class':
                        this.dialog_list = class_dialog_list;
                        break;
                    case 'type':
                        item.result.map(m => m.resultName = m.resultName.replace(/\\n/g,"\n"));
                        miniApi.class_list().then(res => {
                            let select = res.map(m => {
                                return {
                                    label: m.className,
                                    value: m.id
                                }
                            });

                            this.dialog_list = type_dialog_list;

                            console.log(this.dialog_list)

                            this.dialog_list.find(f => f.type = 'select').select = select;

                            this.dialog_right_list = item.result;

                            console.log(this.dialog_list)

                        });

                        break;
                    case 'question':
                        this.dialog_list = question_dialog_list;
                        break;
                    case 'option':
                        this.dialog_list = option_dialog_list;
                        break;
                    case 'result':
                        break;
                    default:
                        break;
                }
            },
            convert_tree(list) {
                list.forEach(f => {

                    if (f.className && f.typeName) {
                        f.name = f.typeName;
                    } else if (f.questionName) {
                        f.name = f.questionName;
                    } else if (f.optionName) {
                        f.name = f.optionName;
                    } else {
                        f.name = f.className;
                    }

                    if (f.type || f.question || f.option) {
                        f.children = f.type || f.question || f.option;
                        this.convert_tree(f.type || f.question || f.option)
                    }
                })
            },
            order_by_real_amount(){
              this.params.realAmount = "true";
              this.handel_search();
            },
            order_by_false_amount(){
              this.params.amount = "true";
              this.handel_search();
            },
            handel_dialog_cancel(item) {

            },
          orderSelect(val){
            this.params.order = val;
            this.handel_search();
          },
            get_type(item) {
                if ('className' in item && 'typeName' in item) {
                    return 'type';
                } else if ('questionName' in item) {
                    return 'question';
                } else if ('optionName' in item) {
                    return 'option';
                } else if ('resultName' in item) {
                    return 'result';
                } else {
                    return 'class';
                }
            },
          handel_type(){

          },
            handel_dialog_conform(item) {


                this.$confirm('此操作将修改数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let type = this.get_type(item);
                    switch (type) {
                        case 'class':
                            item.id = item.classId;
                            miniApi.class_update(item).then(this.call_back);
                            break;
                        case 'type':
                            console.log(item)
                            miniApi.type_update(item).then(this.call_back);
                            break;
                        case 'question':
                            miniApi.question_update(item).then(this.call_back);
                            break;
                        case 'option':
                            miniApi.option_update(item).then(this.call_back);
                            break;
                        case 'result':
                            miniApi.result_update(item).then(this.call_back);
                            break;
                        default:
                            break;
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            call_back(res) {
                // this.handel_search();
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            },
            file_uploader(params) {
                let formData = new FormData();
                // 向 formData 对象中添加文件
                formData.append('file', params.file);
                miniApi.upload_excel(formData).then(res => {
                   this.handel_search();
                })
            },
            file_verified(params) {
                let file_name = params.name;
                let ext = file_name.substr(file_name.lastIndexOf('.') + 1, file_name.length - 1);
                return ext === 'xls' || ext === 'xlsx';
            },
          handel_cdn(){
            miniApi.freshCDN().then( this.init() )
          }
        }
    }
</script>

<style lang="less" scoped>
    .test2 {
        position: relative;
        padding: 4px 8px;
        height: 100%;
        background-color: #eee;
        overflow: hidden;

        .test2-wrapper {
            height: 91%;
            background-color: #fff;
            border-radius: 4px;
            .header {
                margin: 0 0 10px;
                padding: 10px;
                display: flex;
                justify-content: flex-start;
                /deep/ .el-button {
                    margin-right: 10px;
                }
            }

            .data-wrapper {
                display: flex;
                justify-content: flex-start;
                background-color: #fff;

                padding: 4px;
                height: 100%;
                .left {
                    overflow: auto;
                    width: 33%;
                }

                /deep/ .el-form-item {

                    width: 80%;
                }
                .content {

                    width: 100%;

                }
                .footer {
                    .footer-wrapper {
                        display: flex;
                        justify-content: space-around;
                    }
                }
                .center {
                    width: 40%;

                    overflow: auto;

                }
                .right {
                    overflow: auto;
                    width: 26%;
                }
            }
        }

    }
</style>
