<template>
    <div class="g-main">
        <div>
            <div class="m-table">
                <h2>系统高级配置</h2>
                <div style="width: 100%; display: flex; align-items: center;">
                    <div class=""
                        style="width: 100%; display: flex; flex-direction: column;margin-left: 50px;align-items: center;justify-content: center ">
                        <div style="width: 100%; display: flex; flex-direction: column; justify-content: center">
                            <h3>12345政务热线</h3>
                            <div class="m-table1" style=" width: 50%; display: flex; flex-direction:column;align-items: center;justify-content: space-between;">
                                <div style="display: flex; flex-direction: column;">
                                    <div
                                        style="display: flex;border-bottom: 1px dotted rgba(0, 0, 0, 0.3); flex-direction: row; align-items: center; justify-content: space-between;">
                                        <div>
                                            <div style="display: flex; flex-direction: row; align-items: center;">
                                                <div style="width: 10px; height: 10px; background-color: #4e89ec"></div>
                                                <div style="font-weight:800;font-size: 14px; margin-left: 10px;">
                                                    设置联系当事人(初访)时限
                                                </div>
                                            </div>
                                            <div
                                                style=" margin: 20px;font-size: 14px; display: flex; align-items: center;">
                                                “联系当事人时限”设置为“派件时间”之后的
                                                <el-input-number @change="handleChange()"
                                                    :disabled="!sysAdvancedList.contactFlag"
                                                    v-model="sysAdvancedList.contactLimit"
                                                    style="width: 150px; margin-left: 5px" :min="1"
                                                    label="描述文字"></el-input-number>
                                                <div style="margin-left: 5px;">小时”</div>
                                            </div>
                                        </div>
                                        <el-switch v-model="sysAdvancedList.contactFlag" active-color="#13ce66"
                                            :active-value="1" :inactive-value="0" inactive-color="#eaecf0"
                                            @change="handleChange()"></el-switch>
                                    </div>
                                    <div
                                        style="margin-top: 20px; display: flex;border-bottom: 1px dotted rgba(0, 0, 0, 0.3); flex-direction: row; align-items: center; justify-content: space-between;">
                                        <div>
                                            <div style="display: flex; flex-direction: row; align-items: center;">
                                                <div style="width: 10px; height: 10px; background-color: #4e89ec"></div>
                                                <div style="font-weight:800;font-size: 14px; margin-left: 10px;">
                                                    设置(部门)办结时限
                                                </div>
                                            </div>
                                            <div
                                                style=" margin: 20px;font-size: 14px; display: flex; align-items: center;">
                                                “(部门)办结时限”设置为“(上级)办结时限”的前
                                                <el-input-number @change="handleChange()"
                                                    :disabled="!sysAdvancedList.resolveLimitFlag"
                                                    v-model="sysAdvancedList.resolveLimitDay"
                                                    style="width: 150px; margin-left: 5px" :min="1"
                                                    label="描述文字"></el-input-number>
                                                <div style="margin-left: 5px;">天的</div><el-time-select
                                                    v-model="sysAdvancedList.resolveLimitTime"
                                                    :disabled="!sysAdvancedList.resolveLimitFlag"
                                                    style="margin-left: 5px; width: 120px;"
                                                    :picker-options="{ start: '00:00', step: '00:15', end: '24:00' }"
                                                    @change="handleChange()" placeholder="选择时间"></el-time-select>
                                            </div>
                                        </div>
                                        <el-switch v-model="sysAdvancedList.resolveLimitFlag" active-color="#13ce66"
                                            :active-value=1 :inactive-value=0 inactive-color="#eaecf0"
                                            @change="handleChange()"></el-switch>
                                    </div>
                                    <div
                                        style="margin-top: 20px; display: flex;border-bottom: 1px dotted rgba(0, 0, 0, 0.3); flex-direction: row; align-items: center; justify-content: space-between;">
                                        <div>
                                            <div style="display: flex; flex-direction: row; align-items: center;">
                                                <div style="width: 10px; height: 10px; background-color: #4e89ec"></div>
                                                <div style="font-weight:800;font-size: 14px; margin-left: 10px;">
                                                    设置退件时限
                                                </div>
                                            </div>
                                            <div
                                                style=" margin: 20px;font-size: 14px; display: flex; align-items: center;">
                                                “退件时限”设置为“派件时间”之后的
                                                <el-input-number @change="handleChange()"
                                                    :disabled="!sysAdvancedList.returnFlag"
                                                    v-model="sysAdvancedList.returnLimit"
                                                    style="width: 150px; margin-left: 5px" :min="1"
                                                    label="描述文字"></el-input-number>
                                                <div style="margin-left: 5px;">小时内，超过该实现推荐即为“超期退件”</div>
                                            </div>
                                        </div>
                                        <el-switch v-model="sysAdvancedList.returnFlag" active-color="#13ce66"
                                            :active-value=1 :inactive-value=0 inactive-color="#eaecf0"
                                            @change="handleChange()">

                                        </el-switch>
                                    </div>
                                    <div
                                        style="margin-top: 20px; display: flex;border-bottom: 1px dotted rgba(0, 0, 0, 0.3); flex-direction: row; align-items: center; justify-content: space-between;">
                                        <div>
                                            <div style="display: flex; flex-direction: row; align-items: center;">
                                                <div style="width: 10px; height: 10px; background-color: #4e89ec"></div>
                                                <div style="font-weight:800;font-size: 14px; margin-left: 10px;">
                                                    事件办理过程中上传录音默认设置
                                                </div>
                                            </div>
                                            <div
                                                style="margin: 20px; font-size: 14px; display: flex; align-items: center;">
                                                联系当事人(初访)时(默认) :
                                                <div style="margin-left: 20px;">
                                                    <el-radio v-model="sysAdvancedList.contactVoiceFlag"
                                                        @change="handleChange()" :label="1">需要录音</el-radio>
                                                    <el-radio v-model="sysAdvancedList.contactVoiceFlag"
                                                        @change="handleChange()" :label="0">不需要录音</el-radio>
                                                </div>
                                            </div>
                                            <div
                                                style="margin: 20px; font-size: 14px; display: flex; align-items: center;">
                                                事件办结时(默认) :
                                                <div style="margin-left: 20px;">
                                                    <el-radio v-model="sysAdvancedList.resolveVoiceFlag"
                                                        @change="handleChange()" :label="1">需要录音</el-radio>
                                                    <el-radio v-model="sysAdvancedList.resolveVoiceFlag"
                                                        @change="handleChange()" :label="0">不需要录音</el-radio>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div
                                        style="margin-top: 20px; display: flex;border-bottom: 1px dotted rgba(0, 0, 0, 0.3); flex-direction: row; align-items: center; justify-content: space-between;">
                                        <div>
                                            <div style="display: flex; flex-direction: row; align-items: center;">
                                                <div style="width: 10px; height: 10px; background-color: #4e89ec"></div>
                                                <div style="font-weight:800;font-size: 14px; margin-left: 10px;">
                                                    派件是否默认开启“短信通知相关人员”
                                                </div>
                                            </div>
                                            <div
                                                style=" margin: 20px;font-size: 14px; display: flex; align-items: center;">
                                                <div style=""> 请选择短信通知哪些人员(可多选) :</div>
                                                <div style="margin-left: 20px;">
                                                    <template>
                                                        <el-checkbox v-model="sysAdvancedList.responsibleLeader"
                                                            :disabled="!sysAdvancedList.smsFlag" :true-label="1"
                                                            :false-label="0" @change="handleChange">
                                                            部门分管领导
                                                        </el-checkbox>
                                                        <el-checkbox v-model="sysAdvancedList.deptLeader"
                                                            :disabled="!sysAdvancedList.smsFlag"
                                                            @change="handleChange()" :true-label="1"
                                                            :false-label="0">部门负责人</el-checkbox>
                                                        <el-checkbox v-model="sysAdvancedList.deptStaff"
                                                            :disabled="!sysAdvancedList.smsFlag"
                                                            @change="handleChange()" :true-label="1" :false-label="0"
                                                            label="1">部门工作人员</el-checkbox>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                        <el-switch v-model="sysAdvancedList.smsFlag" active-color="#13ce66"
                                            :active-value=1 :inactive-value=0 inactive-color="#eaecf0"
                                            @change="handleChange">

                                        </el-switch>
                                    </div>
                                    <div
                                        style=" margin-top: 20px;display: flex;border-bottom: 1px dotted rgba(0, 0, 0, 0.3); flex-direction: row; align-items: center; justify-content: space-between;">
                                        <div>
                                            <div style="display: flex; flex-direction: row; align-items: center;">
                                                <div style="width: 10px; height: 10px; background-color: #4e89ec"></div>
                                                <div style="font-weight:800;font-size: 14px; margin-left: 10px;">
                                                    是否需要开启热线专班(专员)回访
                                                </div>
                                            </div>
                                            <div :disabled="!sysAdvancedList.hotlineSpecialTeamFlag"
                                                style=" margin: 20px;font-size: 14px; display: flex; align-items: center;">
                                                若开启热线专班(专员)回访，对已办结的事件进行审核归档时需要填写相应的回访信息。
                                            </div>
                                        </div>
                                        <el-switch v-model="sysAdvancedList.hotlineSpecialTeamFlag"
                                            active-color="#13ce66" :active-value=1 :inactive-value=0
                                            inactive-color="#eaecf0" @change="handleChange()">
                                        </el-switch>
                                    </div>
                                    <div
                                        style=" margin-top: 20px;display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
                                        <div>
                                            <div style="display: flex; flex-direction: row; align-items: center;">
                                                <div style="width: 10px; height: 10px; background-color: #4e89ec"></div>
                                                <div style="font-weight:800;font-size: 14px; margin-left: 10px;">
                                                    允许以下角色导出12345热线事件数据
                                                </div>
                                            </div>
                                            <div
                                                style=" margin: 20px;font-size: 14px; display: flex; align-items: center;">
                                                <div style="margin-right: 10px;">
                                                    请选择允许哪些角色可以导出12345热线事件数据(可多选) :
                                                </div>
                                                <el-select v-model="sysAdvancedList.exportDataRoleList" multiple
                                                    style="width: 160px;" placeholder="请选择" @change="handleChange1()">
                                                    <el-option v-for="item in govroleList" :key="item.id"
                                                        :label="item.name" :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </div>
                                        <!-- <el-switch v-model="sysAdvancedList" active-color="#13ce66"
                                            inactive-color="#eaecf0">
                                        </el-switch> -->
                                    </div>
                                </div>
                            </div>
                        </div>

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

    </div>
</template>
<script>
import { requestPost,requestGet } from '@/js/dai/request';
import nextTick from 'dai-js/tools/nextTick';
import { mapGetters } from 'vuex';
// import addForm from './residentCategoryComponents/addForm.vue';
import axios from 'axios';
export default {
	data() {
		return {
            radio:"",
			num:"",
            HotlineShow:1,
			customerId:"",
            govroleList:[],

			sysAdvancedList:{
                
            }
		};
	},
	components: {  },
	created() {},
	computed: {
		maxTableHeight() {
			return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeigh : this.clientHeight - 410;
		},
		...mapGetters(['clientHeight', 'iframeHeight'])
	},
	watch: {},
	mounted() {
		this.user = this.$store.state.user;
		this.customerId=this.$store.state.customerId
		this.agencyId = this.user.agencyId;
		this.sysAdvancedPage();
        this.getGovroleList()
	},
	methods: {
        handleSwitch(row){
            console.log(row,this.num,"sdgmlsdlgjk");
            const url = '/sys/sysAdvanced/update';
			const param = {
				id: row.id,
                openFlag:row.openFlag,
			};
            requestPost(url, param).then(res=>{
             if (res.code === 0) {
                 console.log("sgl.msl;kgm");

                 this.sysAdvancedPage()
             }
         });
        },
        getGovroleList(){
            const url = '/gov/access/govrole/page';
			const param = {
                pageSize:20,
                pageNo:1,
                name:""
			};
            requestGet(url, param).then(res=>{
             if (res.code === 0) {
                this.govroleList=res.data.list
             }
         });
        },
        handleChange1(){
            console.log(this.sysAdvancedList.exportDataRoleList,"dsfjlsdkf");
            this.handleChange()
        },
        handleChange(){
            const url = '/governance/icEventConfig/update';
            console.log(this.sysAdvancedList.exportDataRoleList);
            if(this.sysAdvancedList.exportDataRoleList.length!==0){
                this.sysAdvancedList.exportDataRole=this.sysAdvancedList.exportDataRoleList.toString()
            }else{
                this.sysAdvancedList.exportDataRoleList=null
                this.sysAdvancedList.exportDataRole=""
            }
            
           
			const param = {
                ...this.sysAdvancedList
			};
            console.log(param,"sdlkjggsdklf");
         requestPost(url, param).then(res=>{
             if (res.code === 0) {
                 this.sysAdvancedPage()
             }
         });
        },
        //update/id  
        // json格式的id
		async sysAdvancedPage(row) {
			const url = '/governance/icEventConfig/getStreetConfigDetail';
			const param = {
				orgId: this.agencyId,
			};
			const { data, code, msg } = await requestGet(url, param);
			if (code === 0) {
				this.sysAdvancedList=data
                if (this.sysAdvancedList.exportDataRoleList[0]=="") {
                    this.sysAdvancedList.exportDataRoleList=[]
                }
                console.log(this.sysAdvancedList,"sdfklsdjlk");
			} else {
				this.$message.error(msg);
			}
		},

	}
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/modules/management/list-main.scss';
.m-search {
	.u-item-width-normal {
		width: 200px;
	}
}
.m-table1{
    margin:16px 7px 7px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    position: relative;
    padding:24px 16px 10px;

    /deep/ .el-table th, .el-table tr{
      height:54px;
    }

    //列表中，只有左侧有按钮时
    .u-table-btn1 {
      display: flex;
        .u-btn-upload {
          margin-left: 10px;
          display: flex;
          text-align: center;
        }

    }

    //列表中，按钮排布左右两边时
    .u-table-btn2 {
      display: flex;
      // margin-top: 10px;
      justify-content: space-between;

      .u-table-btn2-left{
        display: flex;

        .u-btn-upload {
          margin-left: 10px;
          display: flex;
          text-align: center;
        }
      }

    }

    .m-table-item {
      margin-top: 16px;
      position: relative;
    }
  }

</style>
