<template>
    <div v-if="showList">
        <div class="title-line-outer">
            <div class="title-line-inner title-container-style">
                <a-input-search placeholder="请输入类目名称搜索" v-model="searchValue" style="width: 15rem" @search="onSearch" :allowClear="true"/>
                <a-button v-if="page === 'config'" style="background-color: #31a8fa;color: white" @click="showModal(null)">增加类目</a-button>
            </div>
        </div>
        <div class="table-container-style">
            <a-table :columns="columns" :dataSource="datas" :loading="isLoading" rowKey="form_id" :pagination="false">
                 <span slot="index" slot-scope="value,record,index">
                    {{index + 1}}
                </span>
                <span slot="name" slot-scope="value,record" :title="record.field_num>0?'点击查看字段详情':''" @click="viewFieldDetail(record)"
                      :style="{pointerEvents:record.field_num === 0?'none':null,color: record.field_num > 0 ? '#31a8fa':'',cursor:'pointer'}">
                        {{value}}
                </span>
                <span slot="resource" slot-scope="value">
                    {{value === 1?"系统初始化":"用户自定义"}}
                </span>
                <span slot="field_num" slot-scope="value,record" title="点击查看字段详情" @click="viewFieldDetail(record)"
                          :style="{pointerEvents:value === 0?'none':null,color: value > 0 ? '#31a8fa':'',cursor:'pointer'}">
                    {{value}}
                </span>
                <span slot="flag" slot-scope="value">
                    {{value === 1?"启用":"停用"}}
                </span>
                <span slot="option" slot-scope="value,record" class="action-container-style">
                    <template v-if="page === 'config'">
                        <i class="office-operate-search action-style" title="预览" @click="preview(record)"></i>
                        <i class="office-operate-edit action-style" title="编辑" @click="showModal(record)"></i>
                        <i :class="['office-operate-set','action-style',record.use_flag === 1?'action-disabled':'']" title="设计表单" @click="designForm(record)"></i>
                        <a-popconfirm placement="topRight" title="确定删除此类目吗？" ok-text="确定" cancel-text="取消" @confirm="deleteForm(record)">
                            <i :class="['office-operate-delete','action-style',record.use_flag === 1?'action-disabled':'']" title="删除"></i>
                        </a-popconfirm>
                    </template>
                     <i v-else class="office-operate-edit action-style" title="编辑类目权限" @click="editJurisdiction(record)"></i>
                </span>
            </a-table>
        </div>
        <a-pagination :current="page_number" :pageSize="page_size" :hideOnSinglePage="true" :total="total_row" class="pagination-style" @change="pageChange"/>
    </div>
    <form-design v-else :formData="formData" @back="onBack"/>
</template>

<script>
    import {Button,Table,Popconfirm,Pagination} from 'ant-design-vue'
    import AInputSearch from 'ant-design-vue/es/input/Search'
    import 'ant-design-vue/es/input/style/css'
    import 'ant-design-vue/es/radio/style/css'
    import InterfaceConfig from './interfaceConfig';
    import StaticParams from "../../../global-llibs/staticParams";
    import FormDesign from './FormDesign';
    export default {
        name: "FormConfig",
        props:["page"],
        data:function(){
          return {
              pageType:this.page,
              searchValue:"",
              columns:this.getColumns(),
              datas:[],
              isLoading:true,
              page_number:1,
              page_size:10,
              total_row:0,
              showList:true,//true 显示列表 false显示表单设计页面
              formData:null
          }
        },
        components:{
            AInputSearch,
            AButton:Button,
            ATable:Table,
            APopconfirm:Popconfirm,
            FormDesign,
            APagination:Pagination
        },
        methods:{
            onBack:function(){
                this.showList = true;
                this.getList();
            },
            designForm:function(record){
                this.formData = record;
                this.showList = false;
            },
            getColumns:function(){
                if (this.page === "config"){
                    return [
                        {
                            align:"center",
                            title:"序号",
                            key:"index",
                            scopedSlots:{customRender:"index"}
                        },
                        {
                            align:"center",
                            title:"类目名称",
                            dataIndex:"form_name"
                        },
                        {
                            align:"center",
                            title:"类目来源",
                            dataIndex:"form_resource",
                            scopedSlots:{customRender:"resource"}
                        },
                        {
                            align:"center",
                            title:"包含字段数量",
                            dataIndex:"field_num",
                            scopedSlots:{customRender:"field_num"}
                        },
                        {
                            align:"center",
                            title:"创建时间",
                            dataIndex:"create_time"
                        },
                        {
                            align:"center",
                            title:"最近修改时间",
                            dataIndex:"update_time"
                        },
                        {
                            align:"center",
                            title:"最近维护人",
                            dataIndex:"last_modify_person_name"
                        },
                        {
                            align:"center",
                            title:"排序号",
                            dataIndex:"sort_no"
                        },
                        {
                            align:"center",
                            title:"状态",
                            dataIndex:"use_flag",
                            scopedSlots:{customRender:"flag"}
                        },
                        {
                            align:"center",
                            title:"操作",
                            scopedSlots:{customRender:"option"}
                        }
                    ]
                }else{
                    return [
                        {
                            align:"center",
                            title:"序号",
                            key:"index",
                            scopedSlots:{customRender:"index"}
                        },
                        {
                            align:"center",
                            title:"类目名称",
                            dataIndex:"form_name",
                            scopedSlots:{customRender:"name"}
                        },
                        {
                            align:"center",
                            title:"创建时间",
                            dataIndex:"create_time"
                        },
                        {
                            align:"center",
                            title:"最近修改时间",
                            dataIndex:"update_time"
                        },
                        {
                            align:"center",
                            title:"最近维护人",
                            dataIndex:"last_modify_person_name"
                        },
                        {
                            align:"center",
                            title:"审核人员",
                            dataIndex:"check_person_names"
                        },
                        {
                            align:"center",
                            title:"查看人员",
                            dataIndex:"view_person_names",
                        },
                        {
                            align:"center",
                            title:"操作",
                            scopedSlots:{customRender:"option"}
                        }
                    ]
                }

            },
            preview:function(record){
                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.getCustomizeFormFieldByFormId.url,
                    method:InterfaceConfig.getCustomizeFormFieldByFormId.method,
                    params:{
                        org_id:this.BaseConfig.person_info_my.bureau_id,
                        form_id:record.form_id
                    },
                    isTestLogin:InterfaceConfig.getCustomizeFormFieldByFormId.isTestLogin
                }],(result)=>{
                    if (result && result[0]){
                        let data = result[0].data
                        let fieldList = JSON.parse(data.data.form_json);
                        let formWidth = JSON.parse(data.data.form_config_json).form_width;
                        if (data.code === 2000){
                            StaticParams.showPopModal(this,'预览','views/teacherInfo/formCommon/ViewForm.vue',
                                {"fieldsList":fieldList,"form_width":formWidth},false,true,null,"80%","preview-style")
                        }
                    }
                });
            },
            /*
            * 查看字段详情
            * */
            viewFieldDetail:function(record){
                let params = {
                    org_id:this.BaseConfig.person_info_my.bureau_id,
                    form_id:record.form_id
                }

                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.getCustomizeFormFieldList.url,
                    method:InterfaceConfig.getCustomizeFormFieldList.method,
                    params:params,
                    isTestLogin:true
                }],(result)=>{
                    if (result && result[0]){
                        let data = result[0].data;
                        if (data.code === 2000){
                            StaticParams.showPopModal(this,"字段详情信息","views/teacherInfo/systemConfig/FieldDetail.vue",{data:data.data.field_list},false,true)
                        }
                    }
                })
            },
            deleteForm:function(record){
                let params = {
                    form_id:record.form_id
                }

                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.deleteCustomizeForm.url,
                    method:InterfaceConfig.deleteCustomizeForm.method,
                    params:params,isTestLogin:true}],
                    (result)=>{
                    if (result && result[0]){
                        let data = result[0].data;
                        if (data.code === 2000){
                         this.$toast("类目删除成功");
                         if (this.datas.length === 1 && this.page_number > 1){
                             this.page_number -= 1;
                         }
                         this.getList();
                        }
                    }
                    })
            },
            saveFormInfo:function (type,dom){
                if (type === "ok"){
                    let tips = "";
                    if (dom.name === ""){
                        tips = "请输入类目名称";

                    }else if (dom.sort === null){
                        tips = "请输入排序号";
                    }

                    if (tips !== ""){
                        dom.showTips(tips);
                        return false;
                    }

                    let params = {
                        form_name:dom.name,
                        sort_no:dom.sort,
                        data_num_type:dom.type,
                        system_id:10,
                        use_flag:dom.use,
                        last_modify_person_id:this.BaseConfig.userInfo.person_id_cookie,
                        create_person_id:this.record?this.record.create_person_id:this.BaseConfig.userInfo.person_id_cookie,
                        create_person_name:this.record?this.record.create_person_name:this.BaseConfig.userInfo.person_name_cookie,
                        org_id:this.BaseConfig.person_info_my.bureau_id
                    };

                    if (dom.formData){
                        params.form_id = dom.formData.form_id;
                    }

                    this.InterfaceConfig.callInterface([
                            {url:InterfaceConfig.saveCustomizeForm.url,method:InterfaceConfig.saveCustomizeForm.method,params:params,isTestLogin:true}],
                        (result)=>{
                            if (result && result[0]){
                                let data = result[0].data;
                                if (data.code === 2000){
                                    if(dom.formData){
                                        this.$toast('编辑类目成功')
                                    }else{
                                        this.$toast('增加类目成功')
                                    }
                                    this.getList();
                                    StaticParams.closePopModal(this);
                                }
                            }
                        })

                }else{
                    return true;
                }
            },
            onSearch:function (value) {
                this.searchValue = value;
                this.isLoading = true;
                this.page_number = 1;
                this.getList();
            },
            pageChange:function (page) {
                if (this.page_number !== page){
                    this.page_number = page;
                    this.isLoading = true;
                    this.getList();
                }
            },
            getList:function () {
                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.getCustomizeFormList.url,
                    method:InterfaceConfig.getCustomizeFormList.method,
                    params:{
                        org_id:this.BaseConfig.person_info_my.bureau_id,
                        system_id:10,
                        form_name:this.searchValue,
                        page_number:this.page_number,
                        page_size:this.page_size
                    },
                    isTestLogin:true
                }],(result)=>{
                    if (result && result[0]){
                        let data = result[0].data;
                        if (data.code === 2000){
                            this.isLoading = false;
                            this.total_row = data.data.total_row;
                            this.datas = data.data.list;
                        }
                    }
                })
            },
            showModal:function (record = null) {
                if (record !== null){//编辑
                    StaticParams.showPopModal(this,"编辑类目","views/teacherInfo/systemConfig/AddAndEditFormInfo.vue",{
                        form_name:record.form_name,
                        form_sort:record.sort_no,
                        use_flag:record.use_flag,
                        data_num_type:record.data_num_type,
                        record:record
                    },true,true,this.saveFormInfo);
                }else{//新建
                    this.InterfaceConfig.callInterface([{url:InterfaceConfig.getCustomizeFormMaxSortNo.url,
                        method:InterfaceConfig.getCustomizeFormMaxSortNo.method,params:{
                            org_id:this.BaseConfig.person_info_my.bureau_id,
                            system_id:10
                        },isTestLogin: true}],(result)=>{
                        if (result && result[0]){
                            let data = result[0].data;
                            if (data.code === 2000){
                                StaticParams.showPopModal(this,"增加类目","views/teacherInfo/systemConfig/AddAndEditFormInfo.vue",{
                                    form_name:"",
                                    form_sort:data.data.max_sort_no,
                                    use_flag:0,
                                    data_num_type:1,
                                    record:null
                                },true,true,this.saveFormInfo);
                            }
                        }
                    })
                }
            },
            editJurisdiction:function(record){
                StaticParams.showPopModal(this,"编辑类目权限","views/teacherInfo/systemConfig/SetCheckAndViewPerson.vue",{
                    record:record
                },true,true,(type,dom)=>{
                    if (type === "ok"){
                        this.setCustomizeFormPerson(record,dom);
                    }
                    return true
                });
            },
            setCustomizeFormPerson:function(record,dom){
                let check_person_ids = "";
                let view_person_ids = "";
                dom.checkAry.forEach((item)=>{
                    check_person_ids += item.person_id + ",";
                });
                if (check_person_ids !== ""){
                    check_person_ids = check_person_ids.substr(0,check_person_ids.length - 1);
                }

                dom.viewAry.forEach((item)=>{
                    view_person_ids += item.person_id + ",";
                });
                if (view_person_ids !== ""){
                    view_person_ids = view_person_ids.substr(0,view_person_ids.length - 1);
                }

                let params = {
                    org_id:this.BaseConfig.person_info_my.bureau_id,
                    form_id:record.form_id,
                    check_person_ids:check_person_ids,
                    check_person_json:JSON.stringify({selected_person:dom.checkAry,selected_depart:dom.checkDepart}),
                    view_person_ids:view_person_ids,
                    view_person_json:JSON.stringify({selected_person:dom.viewAry,selected_depart:dom.viewDepart}),
                    person_id:this.BaseConfig.userInfo.person_id_cookie
                }

                this.InterfaceConfig.callInterface([{
                    url:InterfaceConfig.setCustomizeFormPerson.url,
                    method:InterfaceConfig.setCustomizeFormPerson.method,
                    params:params,
                    isTestLogin:InterfaceConfig.setCustomizeFormPerson.isTestLogin,
                }],(result)=>{
                    if (result && result[0]){
                        let data = result[0].data;
                        if (data.code === 2000){
                            this.$toast("编辑类目权限成功");
                            this.getList();
                        }
                    }
                })
            }
        },
        mounted() {
            // eslint-disable-next-line no-debugger
            this.getList();
        },
    }
</script>

<style lang="scss">
    .preview-style{
        .ant-modal-body{
            height: 50rem;
            max-height: 800px;
            overflow: auto;
        }
    }
    .title-container-style{
        justify-content: space-between;
    }
    .action-container-style{
        width:100%;
        .action-style{
            font-size: 1rem;
            color:#31a8fa;
            cursor:pointer;
            margin-right: 0.5rem;
            &:nth-last-of-type(1){
                margin-right: 0;
            }
        }
        .action-disabled{
            pointer-events: none;
            color:#999999;
        }
    }
</style>
