<!--  -->
<template>
    <div class="hc-layout-box">
        <hc-card :scrollbar="true" action-size="lg">
            <div class="warning-box">
                <div class="demo-collapse">
                    <el-collapse v-model="activeNames" accordion @change="handleChange">
                        <el-collapse-item class="p-3" name="1">
                            <template #title>
                                <hc-icon class="font-bold" name="alarm-warning" style="font-size: 20px;" />
                                <span class="font-bold" style="font-size: 18px;">异常设置</span>
                            </template>

                            <el-collapse
                                v-model="activeNames1" accordion class="demo-collapse1"
                                @change="handleChange1"
                            >
                                <el-collapse-item class="p-10" name="1" style="padding-bottom: 100px;">
                                    <template #title>
                                        <span style="font-size: 16px;">项目异常设置</span>
                                    </template>
                                    <div class="warn-box-items h-100 flex">
                                        <div class="warn-item">
                                            <div class="warn-item-tilte">投资进展缓慢</div>
                                            <div class="warn-item-inner">
                                                <el-row style="height: 100%;">
                                                    <el-col :span="8">
                                                        <div class="warn-item-inner-box">
                                                            <div class="ml-[50px] text-center" style="font-size: 16px;">
                                                                第一季度
                                                            </div>
                                                            <div class="warn-item-inner-title ml-[50px] text-right">
                                                                该季度投资计划完成比例
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <!-- <div class="arrow">   |||</div> -->
                                                                <div class="arrow" style="width: auto;min-width:60px">
                                                                    三级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: center; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div
                                                                    class="arrow arrow-oringe"
                                                                    style="width: auto;min-width:60px"
                                                                >
                                                                    二级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-red"> 一级</div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :offset="6" :span="10">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">
                                                                第二季度
                                                            </div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">
                                                                    该季度投资计划完成比例
                                                                </div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">
                                                                    前两季度累计投资计化完成比例
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow"> 三级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe"> 二级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red"> 一级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="10">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">
                                                                第三季度
                                                            </div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">
                                                                    该季度投资计划完成比例
                                                                </div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">
                                                                    前三季度累计投资计化完成比例
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow"> 三级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe"> 二级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red"> 一级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :offset="4" :span="10">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">
                                                                第四季度
                                                            </div>
                                                            <div class="warn-item-inner-box-title">
                                                                <div class="flex-1" />
                                                                <div class="warn-item-inner-title flex-1">
                                                                    该季度投资计划完成比例
                                                                </div>
                                                                <div class="warn-item-inner-title ml-2 flex-1">
                                                                    当年度累计投资计化完成比例
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow"> 三级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-oringe"> 二级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div>
                                                                    <div class="arrow arrow-red"> 一级</div>

                                                                    <div class="container">
                                                                        <div class="triangle" />
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                        <div class="warn-item">
                                            <div class="warn-item-tilte">建设进展缓慢</div>
                                            <div class="warn-item-inner">
                                                <el-row :gutter="4" style="height: 100%;">
                                                    <el-col :span="8">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">
                                                                第二季度
                                                            </div>
                                                            <div class="warn-item-inner-title text-right">
                                                                该季度工作计划完成比例
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <!-- <div class="arrow">   |||级预警</div> -->
                                                                <div class="arrow" style="width: auto;min-width:60px">
                                                                    三级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: center; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div
                                                                    class="arrow arrow-oringe"
                                                                    style="width: auto;min-width:60px"
                                                                >
                                                                    二级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-red"> 一级</div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :offset="6" :span="8">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">
                                                                第一季度
                                                            </div>
                                                            <div class="warn-item-inner-title text-right">
                                                                该季度工作计划完成比例
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <!-- <div class="arrow">   |||级预警</div> -->
                                                                <div class="arrow" style="width: auto;min-width:60px">
                                                                    三级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: center; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div
                                                                    class="arrow arrow-oringe"
                                                                    style="width: auto;min-width:60px"
                                                                >
                                                                    二级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-red"> 一级</div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">
                                                                第三季度
                                                            </div>
                                                            <div class="warn-item-inner-title text-right">
                                                                该季度工作计划完成比例
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <!-- <div class="arrow">   |||级预警</div> -->
                                                                <div class="arrow" style="width: auto;min-width:60px">
                                                                    三级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: center; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div
                                                                    class="arrow arrow-oringe"
                                                                    style="width: auto;min-width:60px"
                                                                >
                                                                    二级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-red"> 一级</div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :offset="6" :span="8">
                                                        <div class="warn-item-inner-box">
                                                            <div class="text-center" style="font-size: 16px;">
                                                                第四季度
                                                            </div>
                                                            <div class="warn-item-inner-title text-right">
                                                                该季度工作计划完成比例
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <!-- <div class="arrow">   |||级预警</div> -->
                                                                <div class="arrow" style="width: auto;min-width:60px">
                                                                    三级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: center; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div
                                                                    class="arrow arrow-oringe"
                                                                    style="width: auto;min-width:60px"
                                                                >
                                                                    二级
                                                                </div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                            <div class="warn-item-inner-box-detail">
                                                                <div class="arrow arrow-red"> 一级</div>

                                                                <div class="container">
                                                                    <div class="triangle" />
                                                                </div>
                                                                <div
                                                                    class="flex"
                                                                    style="text-align: right; align-items: center;"
                                                                >
                                                                    <span class="mr-1"><</span>
                                                                    <el-input
                                                                        v-model="inputVal" class="warn-innput"
                                                                        style="width: 50px;"
                                                                    />
                                                                    <span>%</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="save-btn-left">
                                        <el-button color="#20C98B" type="primary" @click="addClick">
                                            <hc-icon class="text-white" name="save" />
                                            <span class="text-white">保存</span>
                                        </el-button>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
            <div class="other-box">
                <div class="demo-collapse">
                    <el-collapse v-model="activeNames3" accordion @change="handleChange3">
                        <el-collapse-item class="p-3" name="1">
                            <template #title>
                                <hc-icon class="font-bold" name="microsoft" style="font-size: 20px;" />
                                <span class="font-bold" style="font-size: 18px;">其他设置</span>
                            </template>

                            <el-collapse
                                v-model="activeNames4" accordion class="demo-collapse1"
                                @change="handleChange4"
                            >
                                <el-collapse-item class="p-4" name="1">
                                    <template #title>
                                        <hc-icon name="projector" style="font-size: 18px;" />
                                        <span style="font-size: 16px;">项目相关</span>
                                    </template>
                                    <div class="ml-4 font-bold">
                                        重点项目推进计划
                                    </div>
                                    <div class="main-project">
                                        <div>
                                            <div class="main-project-item">
                                                <div>
                                                    <span>项目阶段</span>
                                                    <hc-icon
                                                        class="ml-2 mr-2 font-bold" name="arrow-right-s"
                                                        style="font-size: 16px;"
                                                    />
                                                </div>
                                                <div style="max-height:300px;overflow-y: auto;">
                                                    <div v-for="(item, index) in proStation" :key="index" class="mt-1">
                                                        <el-input
                                                            v-model="item.dictValue" placeholder="阶段名称"
                                                            style="width: 340px"
                                                        />
                                                        <el-link :underline="false" type="primary">
                                                            <hc-icon
                                                                class="font-bold" name="add"
                                                                style="font-size: 20px;" @click="addClick(item, index)"
                                                            />
                                                        </el-link>
                                                        <el-link :underline="false" type="primary">
                                                            <hc-icon
                                                                class="font-bold" name="close"
                                                                style="font-size: 20px;" @click="delClick(item, index)"
                                                            />
                                                        </el-link>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ml-38 mt-3">
                                                <el-button
                                                    :loading="saveProStationLoad" class="ml-8" color="#20C98B"
                                                    type="primary" @click="saveProStation"
                                                >
                                                    <hc-icon class="text-white" name="save" />
                                                    <span class="text-white">保存</span>
                                                </el-button>
                                            </div>
                                        </div>

                                        <div>
                                            <div class="main-project-item">
                                                <div>
                                                    <span>项目类型</span>
                                                    <hc-icon
                                                        class="ml-2 mr-2 font-bold" name="arrow-right-s"
                                                        style="font-size: 16px;"
                                                    />
                                                </div>
                                                <div style="max-height:300px;overflow-y: auto;">
                                                    <div v-for="(item, index) in proType" :key="index" class="mt-1">
                                                        <el-input
                                                            v-model="item.dictValue" placeholder="类型名称"
                                                            style="width: 340px"
                                                        />
                                                        <el-link :underline="false" type="primary">
                                                            <hc-icon
                                                                class="font-bold" name="add"
                                                                style="font-size: 20px;"
                                                                @click="addClickType(item, index)"
                                                            />
                                                        </el-link>
                                                        <el-link :underline="false" type="primary">
                                                            <hc-icon
                                                                class="font-bold" name="close"
                                                                style="font-size: 20px;"
                                                                @click="delClickType(item, index)"
                                                            />
                                                        </el-link>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ml-38 mt-3">
                                                <el-button
                                                    :loading="saveProTypenLoad" class="ml-8" color="#20C98B"
                                                    type="primary" @click="saveProType"
                                                >
                                                    <hc-icon class="text-white" name="save" />
                                                    <span class="text-white">保存</span>
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <el-divider class="mt-10" />
                                    <div class="ml-4 font-bold">
                                        工作要点任务分工
                                    </div>
                                    <div class="main-project">
                                        <div>
                                            <div class="main-project-item">
                                                <div>
                                                    <span>项目阶段</span>
                                                    <hc-icon
                                                        class="ml-2 mr-2 font-bold" name="arrow-right-s"
                                                        style="font-size: 16px;"
                                                    />
                                                </div>
                                                <div style="max-height:300px;overflow-y: auto;">
                                                    <div
                                                        v-for="(item, index) in proStationTip" :key="index"
                                                        class="mt-1"
                                                    >
                                                        <el-input
                                                            v-model="item.dictValue" placeholder="阶段名称"
                                                            style="width: 340px"
                                                        />
                                                        <el-link :underline="false" type="primary">
                                                            <hc-icon
                                                                class="font-bold" name="add"
                                                                style="font-size: 20px;"
                                                                @click="addClickTip(item, index)"
                                                            />
                                                        </el-link>
                                                        <el-link :underline="false" type="primary">
                                                            <hc-icon
                                                                class="font-bold" name="close"
                                                                style="font-size: 20px;"
                                                                @click="delClickTip(item, index)"
                                                            />
                                                        </el-link>
                                                    </div>
                                                </div>
                                                <!-- <div>
                                                <el-button color="#20C98B" type="primary" class="ml-8" :loading="savProStationTipLoad" @click="saveProStationTip">
                                                    <hc-icon name="save" class="text-white" />
                                                    <span class="text-white">保存</span>
                                                </el-button>
                                            </div> -->
                                            </div>
                                            <div class="ml-38 mt-3">
                                                <el-button
                                                    :loading="savProStationTipLoad" class="ml-8" color="#20C98B"
                                                    type="primary" @click="saveProStationTip"
                                                >
                                                    <hc-icon class="text-white" name="save" />
                                                    <span class="text-white">保存</span>
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </hc-card>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getDictionary, saveDict } from '~api/dictbiz'
import { arrToKey, getArrValue, isArrItem } from 'js-fast-way'

onMounted(() => {
    getProStation()
    getProType()
    getProStationTip()
})

const inputVal = ref(75)
const inputVal2 = ref('')
const activeNames = ref(['1'])
const activeNames1 = ref(['1'])
const handleChange1 = (val) => {
    if (!val) {
        activeNames.value = ''
    }
}
const handleChange = (val) => {
    if (val) {
        activeNames1.value = '1'
    }
}
const activeNames3 = ref(['1'])
const activeNames4 = ref(['1'])
const handleChange4 = (val) => {
    if (!val) {
        activeNames3.value = ''
    }
}
const handleChange3 = (val) => {
    if (val) {
        activeNames4.value = '1'
    }
}
const proStation = ref([{ dictValue: '' }])

const getProStation = async () => {
    const { error, code, data } = await getDictionary({ code: 'projectStage' })
    if (!error && code === 200) {
        proStation.value = getArrValue(data)
        if (proStation.value.length === 0) {
            proStation.value = [
                { dictValue: '' },
            ]
        }
    } else {
        proStation.value = []
    }

}
const addClick = (item, index) => {
    proStation.value.splice(index + 1, 0, { dictValue: '' })
}
const delClick = (item, index) => {
    if (proStation.value.length === 1) {
        window.$message.warning('请至少保留一条数据')
        return
    }
    proStation.value.splice(index, 1)
}
const saveProStationLoad = ref(false)
const saveProStation = async () => {
    const list = arrToKey(proStation.value, 'dictValue', ',').split(',')
    const isIn = isArrItem(list, '') // true
    if (isIn) {
        window.$message.warning('请输入阶段名称')
        return
    }
    saveProStationLoad.value = true
    const { error, code, msg } = await saveDict({ type: 'projectStage', list })
    saveProStationLoad.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        getProStation()
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}
const proType = ref([
    { name: '铁路' },
    { name: '建成项目' },

])
const getProType = async () => {
    const { error, code, data } = await getDictionary({ code: 'projectType' })
    if (!error && code === 200) {
        proType.value = getArrValue(data)
        if (proType.value.length === 0) {
            proType.value = [
                { dictValue: '' },
            ]
        }
    } else {
        proType.value = []
    }

}
const addClickType = (item, index) => {

    proType.value.splice(index + 1, 0, { dictValue: '' })
}
const delClickType = (item, index) => {
    if (proType.value.length === 1) {
        window.$message.warning('请至少保留一条数据')
        return
    }
    proType.value.splice(index, 1)
}
const saveProTypenLoad = ref(false)
const saveProType = async () => {
    const list = arrToKey(proType.value, 'dictValue', ',').split(',')
    const isIn = isArrItem(list, '') // true
    if (isIn) {
        window.$message.warning('请输入类型名称')
        return
    }
    saveProTypenLoad.value = true
    const { error, code, msg } = await saveDict({ type: 'projectType', list })
    saveProTypenLoad.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        getProType()
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}
const proStationTip = ref([])
const getProStationTip = async () => {
    const { error, code, data } = await getDictionary({ code: 'workFocusStage' })
    if (!error && code === 200) {
        proStationTip.value = getArrValue(data)
        if (proStationTip.value.length === 0) {
            proStationTip.value = [
                { dictValue: '' },
            ]
        }
    } else {
        proStationTip.value = []
    }

}
const addClickTip = (item, index) => {

    proStationTip.value.splice(index + 1, 0, { dictValue: '' })
}
const delClickTip = (item, index) => {
    if (proStationTip.value.length === 1) {
        window.$message.warning('请至少保留一条数据')
        return
    }
    proStationTip.value.splice(index, 1)
}
const savProStationTipLoad = ref(false)
const saveProStationTip = async () => {
    const list = arrToKey(proType.value, 'dictValue', ',').split(',')
    const isIn = isArrItem(list, '') // true
    if (isIn) {
        window.$message.warning('请输入阶段名称')
        return
    }
    savProStationTipLoad.value = true
    const { error, code, msg } = await saveDict({ type: 'workFocusStage', list })
    savProStationTipLoad.value = false
    if (!error && code === 200) {
        window?.$message?.success(msg)
        getProStationTip()
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}
</script>

<style lang='scss' scoped>
.hc-layout-box {
    position: relative;
    height: 100%;
    width: 100%;
}
.warning-box {
    width: 100%;
    height: auto;
    position: relative;

    // border:1px solid red;
    .warn-box-items {

        display: flex;
        justify-content: space-between;

        .warn-item {
            border: 1px solid rgb(187, 187, 187);
            height: 550px;

            width: 48%;

            .warn-item-tilte {
                height: 45px;
                line-height: 45px;
                background-color: #015EA7;
                color: white;
                font-size: 18px;
                font-weight: 800;
                text-align: center;
            }
            .warn-item-inner {
                padding: 10px;

                .warn-item-inner-box {
                    padding: 15px;

                    //    border:1px solid rgb(187, 187, 187);
                    .warn-item-inner-box-detail {
                        margin-top: 10px;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }

                }
            }
        }
    }
    .save-btn-left {
        position: absolute;
        right: 50px;
        bottom: -25px
    }

}
.other-box {
    width: 100%;
    margin-top: 30px;
    //    border:1px solid black;
}

.arrow {
    color: white;
    position: relative;
    //    width: 80px; /* 矩形的宽度 */
    height: 30px; /* 矩形的高度 */
    line-height: 30px;
    background-color: #06B2F6; /* 矩形的背景颜色 */
    padding-left: 5px;
    width: auto;
    min-width: 60px
}

.arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px; /* 三角形相对于右边缘的偏移量 */
    width: 0;
    height: 0;
    border-top: 15px solid transparent; /* 上三角形的大小 */
    border-bottom: 15px solid transparent; /* 下三角形的大小 */
    border-left: 15px solid #06B2F6; /* 三角形的颜色 */
    transform: translateY(-50%);
}
.arrow-oringe::after {
    border-left: 15px solid #FF9102; /* 三角形的颜色 */
}
.arrow-red::after {
    border-left: 15px solid #FF0001; /* 三角形的颜色 */
}
.warn-item-inner-box-detail-right {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.warn-item-inner-box-title {
    display: flex;
    text-align: right;

}
.demo-collapse {
    height: auto;
}
.warn-item-inner-title {
    height: 55px;
    text-align: center;
    //    margin-top: 10px;

}
.main-project {
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
    padding-right: 40px;
    width: 100%;
    padding-top: 20px;
    .main-project-item {
        flex: 1;
        display: flex;
        align-items: center;
    }
}
.arrow-oringe {
    background-color: #FF9102;
}
.arrow-red {
    background-color: #FF0001;
}
</style>

<style>
.demo-collapse .el-collapse-item__wrap {
    border-bottom: none;
}

.demo-collapse .el-collapse {
    border-bottom: none;
}

.demo-collapse1 .el-collapse-item__header.is-active {
    border-bottom: 1px solid var(--el-collapse-border-color);
    margin-bottom: 10px;
}

.demo-collapse .el-collapse-item__wrap {
    overflow: initial;

}

.warn-innput .el-input__inner {
    font-weight: 900;
}
</style>
