<template>
  <el-dialog v-model="modelValue" title="等级切换" width="500px" @close="handleClose">
    <el-form :model="listQuery" ref="formValidate" :rules="rules">
        <el-form-item prop="fxDj" label="风险等级" v-if="props.type == '级别变更'">
            <MOSTY.Select filterable v-model="listQuery.fxDj" :dictEnum="props.dic.D_GS_RQFJ_FXDJ" width="100%" clearable placeholder="请选择风险等级"/>
        </el-form-item>
        <el-form-item prop="ssbmdm" label="所属部门" v-if="props.type == '警种变更'">
            <MOSTY.Department filterable v-model="listQuery.ssbmdm" width="100%" clearable placeholder="请选择所属部门"/>
        </el-form-item>
        <el-form-item prop="uid" label="选择民警" v-if="props.type == '指定分配'">
            <MOSTY.Other @click="chooseUserVisible = true" readonly v-model="listQuery.uidMc" width="100%" clearable placeholder="请选择选择民警"/>
        </el-form-item>
        <el-form-item prop="bqList" label="添加标签" v-if="props.type == '添加标签'">
            <div @click="chooseMarksVisible = true" style="border: 1px solid #e1e1e1;border-radius: 4px;" class="ww100 pl10 pointer">
                <span v-if="!listQuery.bqList || listQuery.bqList.length == 0" style="color: #e7e7e7;">请选择添加标签</span>
                <span v-else >
                    <el-tag @close.stop="closeTag(idx)" type="success" closable v-for="(it,idx) in listQuery.bqList" :key="idx">{{ it.bqMc }}</el-tag >
                </span>
            </div>
        </el-form-item>
    </el-form>
    <template #footer>
        <div class="tc">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
    </template>
</el-dialog>
<ChooseUser v-model="chooseUserVisible" @choosedUsers="handleUserSelected" :roleIds="roleIds" />
<ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />

</template>

<script setup>
import ChooseUser from "@/components/ChooseList/ChooseUser/index.vue";
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import { ElMessage } from "element-plus";
import { qcckPost } from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ref ,defineProps,defineEmits, reactive} from 'vue';
const props = defineProps({
    modelValue:{
        type:Boolean,
        default:false
    },
    ids:{
        type:Array,
        default:[]
    },
    type:String,
    dic:Object
})
const chooseUserVisible = ref(false)
const chooseMarksVisible = ref(false)
const roleIds = ref([])
const emits = defineEmits(["update:modelValue",'getDepValue']);
const formValidate = ref()
const rules = reactive({
    fxDj: [{ required: true, message: "请选择风险等级", trigger: "change" }],
    ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
    uid: [{ required: true, message: "请选择民警", trigger: "change" }],
    bqList: [{ required: true, message: "请选择标签", trigger: "change" }],
})
const listQuery = ref({});

// 选择民警
const handleUserSelected = (val) => {
    listQuery.value.uid = val[0].id;
    listQuery.value.uidMc = val[0].userName;
    roleIds.value = [val[0].id]
}
// 选择标签
const choosed = (val) => {
    listQuery.value.bqList = val.map(v=>{
        return { bqDm:v.bqDm, bqId:v.id, bqLb:v.bqLb, bqLx:v.bqLx, bqMc:v.bqMc }
    });
    roleIds.value = val.map(v=>v.id)
}

// 删除数据
const closeTag = (idx) =>{
    listQuery.value.bqList.splice(idx,1)
    roleIds.value.splice(idx,1)
}

const submitForm  = () =>{
    formValidate.value.validate((valid) => {
        if (!valid) return false;
        let params = { ids:props.ids, ...listQuery.value  }
        let url = ''
        if( props.type == '警种变更') url = '/mosty-gsxt/tbGsxtRqfjRy/updateByBm'
        if( props.type == '指定分配') url = '/mosty-gsxt/tbGsxtRqfjRy/updateByMj'
        if( props.type == '级别变更') url = '/mosty-gsxt/tbGsxtRqfjRy/updateByFxDj'
        if( props.type == '添加标签') url = '/mosty-gsxt/tbGsxtRqfjRy/updateAddBq'
        qcckPost(params,url).then(res=>{
            ElMessage.success("成功");
            emits('update:modelValue',false)
            emits('change')
        })
    })
}

const handleClose = () =>{
    roleIds.value = []
    emits('update:modelValue',false)
    formValidate.value.resetFields();
}
</script>

<style lang="scss" scoped>

</style>