<template>
    <el-dialog :close-on-click-modal="false" :visible.sync="tableAddDetailsBoxes" :before-close="closeTableAddBox" title="新增指标细则" custom-class="dialogBox" append-to-body width="80%" top="15vh">
        <el-row>
            <el-col :span="24">
                <el-button
                      icon="el-icon-circle-plus-outline"
                      type="primary"
                      @click="addTablePostDetailsCont()"
                >添加细则</el-button>
            </el-col>
        </el-row>
        <el-table ref="detailsPostTablees" :data="addDetailsInfoList" style="width: 100%" empty-text="">
            <el-table-column
                    fixed
                    label="考核内容"
                    width="150">
                    <template slot-scope="scope">
                        <el-input
                        type="textarea"
                          autosize
                          placeholder="请输入考核内容"
                          v-model="scope.row.title">
                        </el-input>
                    </template>
                    
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作属性"
                    width="110">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.punishtype" placeholder="请选择">
                            <el-option label="分数" :value=1></el-option>
                            <el-option label="现金" :value=2></el-option>
                             <el-option label="分数和现金" :value=3></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    label="考核标准"
                    width="150">
                    <template slot-scope="scope">
                        <el-input
                            autosize
                            placeholder="请输入考核标准"
                            v-model="scope.row.standard">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="单位"
                    width="80">
                    <template slot-scope="scope">
                        <el-input
                            autosize
                            placeholder="单位"
                            v-model="scope.row.unit">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="现金标准"
                    width="150">
                    <template slot-scope="scope">
                        <el-input
                            autosize
                            placeholder="请输入现金标准"
                            v-model="scope.row.cashstandard">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作类型"
                    width="130">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.types" placeholder="请选择">
                            <el-option label="扣除" :value=1></el-option>
                            <el-option label="增加" :value=2></el-option>
                            <el-option label="现场确认扣除/增加" :value=3></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="检查方式"
                    width="140">
                    <template slot-scope="scope">
                        <el-select multiple v-model="scope.row.inspemethod" placeholder="请选择">
                          <el-option label="现场检查" :value=1></el-option>
                          <el-option label="资料审查" :value=2></el-option>
                          <el-option label="事件触发" :value=3></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="检查周期"
                    width="110">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.cycle" placeholder="请选择">
                            <el-option
                            v-for="item in optionsclye"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="检查频次"
                    width="120">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.frequency" :min="1" :max="12" label="检查频次" controls-position="right" style="width:100px"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                    label="检查依据"
                    width="180">
                    <template slot-scope="scope">
                        <el-input
                        type="textarea"
                          autosize
                          placeholder="请输入检查依据"
                          v-model="scope.row.evidence">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remarks"
                    label="备注说明"
                    width="180">
                    <template slot-scope="scope">
                        <el-input
                          type="textarea"
                          autosize
                          placeholder="请输入备注说明"
                          v-model="scope.row.remarks">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="postandexport"
                    align="center"
                    fixed="right"
                    label="设置岗位及提报人"
                    width="140">
                    <template  slot-scope="scope">
                        <el-button type="primary" icon="el-icon-s-tools" size="small" @click="setTablePostAndReport(scope)">设置</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    align="center"
                    label="操作"
                    width="100">
                    <template #default="scope">
                        <el-button
                          icon="el-icon-delete"
                          size="mini"
                          type="danger"
                          @click="deleteRulesTableList(scope)"
                        >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        
        <template #footer>
            <div class="dialog-footer"> 
                <el-button size="small" @click="closeTableAddBox">取 消</el-button>
                <el-button size="small" type="primary" @click="addTableDetails" :loading="butLoadings">确 定</el-button>
            </div>
        </template>

        <!--设置岗位及提报人-->
        <el-dialog :close-on-click-modal="false" :visible.sync="setDialogPostManBox" :before-close="closeSetPostAndReportBoxes" title="设置岗位及提报人" custom-class="dialogBox" append-to-body width="50%" top="25vh">
                
            <el-table
                ref="setPostManTables"
                :data="orgPostList"
                style="width: 100%"
                @selection-change="handleSelectionChangees">

                <el-table-column
                    label="已关联"
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="关联岗位"
                    >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="提报人"
                    >
                    <template slot-scope="scope">
                        <el-cascader
                            filterable
                            clearable
                            v-model="scope.row.keylist"
                            :options="scope.row.child"
                            :show-all-levels="false"
                            :props="userProps"
                            collapse-tags
                        >
                        <template slot-scope="{ node, data }">
                            <span>{{ data.name }}</span>
                            <span v-if="node.isLeaf"> ({{ data.number }}) </span>
                          </template>
                    </el-cascader>
                    </template>
                </el-table-column>
                
            </el-table>
            <template #footer>
                <div class="dialog-footer"> 
                    <el-row>
                        <el-col :span="3"><el-button type="warning"  size="small" @click="clearAllSetTable">全部取消</el-button></el-col>
                        <el-col :span="21">
                            <el-button size="small" @click="closeSetPostAndReportBoxes">取 消</el-button>
                            <el-button size="small" type="primary" @click="setIsTruePostManEs" :loading="butLoadings">确 定</el-button>
                        </el-col>
                    </el-row>
                    

                    
                </div>
            </template>
        </el-dialog>


















    </el-dialog>
</template>
<script>
import { getNewTargetDepartPostMan,addTableDetailsList } from "@/api/systemaccredit/systemapi";
export default {
    props:['tableAddDetailsBox','tableToTargetid','tableToid','targetPostMakList','targetunit'],
    data() {
        return {
            butLoadings:false,   //按钮是否加载Loading
            tableAddDetailsBoxes:this.tableAddDetailsBox,
            targetId:this.tableToTargetid,
            tableId:this.tableToid,
            orgPostList:this.targetPostMakList,
            addDetailsInfoList:[],  //细则列表
            // 选择员工配置项
            userProps: {
                value: "id",
                label: "name",
                children: "govlist",
                emitPath:false,
                multiple: true
            },
            //统计周期
            optionsclye: [
                {
                    value: 4,
                    label: '月'
                }, {
                    value: 5,
                    label: '季度'
                }, {
                    value: 6,
                    label: '年'
                }
            ],
            setDialogPostManBox:false,
            multipleSelectiontable:[],  //选中的列表
            listIndex:"",        //表单编号
        }
    },
    created(){
        
    },
    watch:{
        tableAddDetailsBox(){
            this.tableAddDetailsBoxes = this.tableAddDetailsBox
        },
        tableToTargetid(){
            this.targetId = this.tableToTargetid
        },
        tableToid(){
            this.tableId = this.tableToid
            this.addTablePostDetailsCont()
        },
        targetPostMakList:{
            handler(newVal){
                // console.log("newVal");
                // console.log("newVal------------>",newVal);
                // this.orgPostList = this.targetPostMakList
                // console.log("newVal-----222------->",this.targetPostMakList);
            },
            deep: true
        },
           
    },
    methods:{
        //处理细则列表
        addTablePostDetailsCont(){
            let detailsInfo = {
                title:"",   //考核内容
                punishtype:1,   //1:分数；2：现金；3：分数加现金
                standard:"",    //考核标准
                unit:this.targetunit,
                cashstandard:"",    //现金考核标准
                types:1,            //操作种类1:加分；2：减分；3：加减分
                inspemethod:[1],    //检查方式
                cycle:4,            //周期
                frequency:"",       //检查频次
                evidence:"",        //客观证据
                remarks:"",         //备注说明
                postandexport:[],   //相关岗位及提报人
                
            }
            this.addDetailsInfoList.push(detailsInfo);
        },
        //关闭
        closeTableAddBox(){
            this.tableAddDetailsBoxes = false;
            // this.$refs.setPostManTables.clearSelection();
            this.$emit('closeTableAddBox');
            this.addDetailsInfoList = [];
        },
        //色织关联人
        async setTablePostAndReport(val){
            this.setDialogPostManBox = true;
            this.listIndex = val.$index
            // this.getOrgPostLists()
            let sendData = {
                id:this.targetId.toString()
            }
            const res = await getNewTargetDepartPostMan(sendData)
            this.orgPostList =res.data.organdpostlist
            if(val.row.postandexport != null && val.row.postandexport.length > 0){
                // val.row.postandexport.forEach(item=>{
                //     this.$refs.setPostManTables.toggleRowSelection(item, true);
                // })
                this.orgPostList.forEach((item,indx) =>{
                    
                    val.row.postandexport.forEach(items=>{
                        if(item.id == items.id && item.orgid == items.orgid){
                            console.log("色织关联人---------0--------->",item,indx)
                            item.keylist = items.keylist
                            this.$nextTick(() => {
                                this.$refs.setPostManTables.toggleRowSelection(item, true)
                            })
                        }
                    })
                })
            }else{
                this.$nextTick(() => {
                    for (let i = 0; i < this.orgPostList.length; i++) {
                        this.$refs.setPostManTables.toggleRowSelection(this.orgPostList[i], true)
                    }
                })
            }

            console.log("色织关联人---------1--------->",this.listIndex)
            console.log("色织关联人---------2--------->",val.row.postandexport)
            console.log("色织关联人---------3--------->",this.orgPostList)
            console.log("色织关联人---------4--------->",val.row)
        },
        //在列表中删除细则
        deleteRulesTableList(row){
            if(this.addDetailsInfoList.length - 1 > 0){
                this.addDetailsInfoList.splice(row.$index,1);
            }else{
                this.$alert('<strong>至少要有一条细则内容！</strong>！</strong>', '温馨提示！', {
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true,
                    dangerouslyUseHTMLString: true
                })
            } 
        },
        //关闭设置提报人弹窗
        closeSetPostAndReportBoxes(){
            this.setDialogPostManBox = false;
            this.butLoadings= false;
            this.clearAllSetTable();
            this.multipleSelectiontable = [];
        },
        //确定提报人
        setIsTruePostManEs(){
            if(this.multipleSelectiontable != null && this.multipleSelectiontable.length >0){
                let isShouw = true;
                this.multipleSelectiontable.forEach(item=>{
                    if(item.keylist == null || item.keylist.length < 1){
                        this.$alert('<strong>请检查您选中的岗位，存在未选择提报人的选项！！</strong>！</strong>', '温馨提示！', {
                            confirmButtonText: '确定',
                            type: 'warning',
                            center: true,
                            dangerouslyUseHTMLString: true
                        })
                        isShouw = false;
                        return false;
                    }
                })
                if(!isShouw){
                    return false;
                }
            }else{
                this.$alert('<strong>至少要关联一个岗位！</strong>！</strong>！</strong>', '温馨提示！', {
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true,
                    dangerouslyUseHTMLString: true
                })
                return false;
            }
            // this.$refs.setPostManTable
            // console.log("选中内容--111111---->",this.multipleSelectiontable,this.addDetailsInfoList[this.listIndex])
            this.addDetailsInfoList[this.listIndex].postandexport = this.multipleSelectiontable
            // console.log("选中内容--22222---->",this.multipleSelectiontable,this.addDetailsInfoList)
            this.closeSetPostAndReportBoxes()
        },
        //获取选中的数据
        handleSelectionChangees(val){
            this.multipleSelectiontable = val;
        },
        //全部取消
        clearAllSetTable(){
            this.$refs.setPostManTables.clearSelection();
        },
        //提交添加数据
        async addTableDetails(){
            console.log("提交添加数据---->",this.addDetailsInfoList)
            this.butLoadings= true
            if(this.addDetailsInfoList == null || this.addDetailsInfoList.length <1){
                this.$alert('<strong>请您至少添加一条考核细则内容！</strong>', '温馨提示！', {
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true,
                    dangerouslyUseHTMLString: true
                })
                this.butLoadings= false
                return false;
            }
            let nextWriterIsTrue = true;
            this.addDetailsInfoList.forEach(item=>{
                if(item.title == null || item.title == ""){
                    nextWriterIsTrue = false;
                    // console.log("1----------------->")
                }
                switch (item.punishtype){
                    case 2:
                        if(item.cashstandard == null || item.cashstandard == ""){
                            nextWriterIsTrue = false;
                            // console.log("5-----1------------>")
                        }
                        break;
                    case 3:
                        if(item.standard == null || item.standard == ""){
                            nextWriterIsTrue = false;
                            // console.log("5-----3------------>")
                        }
                        if(item.cashstandard == null || item.cashstandard == ""){
                            nextWriterIsTrue = false;
                            // console.log("5-----2------------>")
                        }
                        break;
                    default:
                        if(item.standard == null || item.standard == ""){
                            nextWriterIsTrue = false;
                            // console.log("5-----4------------>")
                        }
                        break;
                }
                
                if(item.unit == null || item.unit == ""){
                    nextWriterIsTrue = false;
                    // console.log("2----------------->")
                }
                if(item.types == null || item.types == "" || item.types == 0){
                    nextWriterIsTrue = false;
                    // console.log("3----------------->")
                }
                if(item.inspemethod == null || item.inspemethod.length <1){
                    nextWriterIsTrue = false;
                    // console.log("4----------------->")
                }else{
                    item.inspemethod = item.inspemethod.map(String)
                }
                // if(item.postandexport == null || item.postandexport.length < 1){
                //     nextWriterIsTrue = false;
                //     // console.log("5----------------->")
                // }
                
            });
            if(!nextWriterIsTrue){
                this.$alert('<strong>至少一条考核细则内容填写不符合规范！请检查并补充完成后，重新提交！</strong>', '温馨提示！', {
                    confirmButtonText: '确定',
                    type: 'warning',
                    center: true,
                    dangerouslyUseHTMLString: true
                })
                this.butLoadings= false
                return false;
            }
            let sendData = {
                targetid:this.targetId.toString(),
                tableid:this.tableId.toString(),
                detailslist:this.addDetailsInfoList
            }

            const res = await addTableDetailsList(sendData)
            console.log("提交添加数据--1-->",sendData,res)
            if(res.code == 0){
                this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success'
                });
                // this.getTargetPostDetailsList();
                this.$emit('getTargetPostDetailsList');
                this.closeTableAddBox();
                this.butLoadings= false
            }else{
                this.butLoadings= false
            }

        },

        //获取岗位与相关行政组织
        async getOrgPostLists(){
            let sendData = {
                id:this.targetId.toString()
            }
            const res = await getNewTargetDepartPostMan(sendData)
            if(res.code ==0){
                this.orgPostList = res.data.organdpostlist
            }
        },
        
    }
}
</script>
<style>
    
</style>