<template>
    <HcCard actionUi="text-center" title="焦作至唐河高速公路方城至唐河段">
        <template #extra>
            <HcNewSwitch :datas="tabTab" :keys="tabKey" @change="tabChange" :round="false"/>
        </template>
        <template #search>
            <div class="hc-program-project-form-radio-group">
                <el-radio-group v-model="radioType" size="large">
                    <el-radio-button label="key1">市场部</el-radio-button>
                    <el-radio-button label="key2">实施部</el-radio-button>
                    <el-radio-button label="key3">研发部</el-radio-button>
                    <el-radio-button label="key4">维护部</el-radio-button>
                    <el-radio-button label="key5">管理支出</el-radio-button>
                    <el-radio-button label="key6">外包劳务</el-radio-button>
                </el-radio-group>
            </div>
        </template>
        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :row-style="tableRowStyle">
            <template #key4="{row,index}">
                <el-select v-model="row.key4" v-if="row.isEdit">
                    <el-option label="选项1" value="选项1"/>
                    <el-option label="选项2" value="选项2"/>
                </el-select>
                <span v-else>{{row.key4}}</span>
            </template>
            <template #key5="{row,index}">
                <el-input v-model="row.key5" v-if="row.isEdit"/>
                <span v-else>{{row.key5}}</span>
            </template>
            <template #key6="{row,index}">
                <el-input v-model="row.key6" v-if="row.isEdit"/>
                <span v-else>{{row.key6}}</span>
            </template>
            <template #key7="{row,index}">
                <HcDatePicker :dates="betweenTime" @change="betweenTimeUpdate" v-if="row.isEdit"/>
                <span v-else>{{row.key7}}</span>
            </template>
            <template #key8="{row,index}">
                <el-input v-model="row.key8" v-if="row.isEdit"/>
                <span v-else>{{row.key8}}</span>
            </template>
            <template #key9="{row,index}">
                <el-input v-model="row.key9" v-if="row.isEdit"/>
                <span v-else>{{row.key9}}</span>
            </template>
            <template #action="{row,index}">
                <el-button size="small" type="success" v-if="row.isEdit" @click="row.isEdit = false">保存</el-button>
                <el-button size="small" type="primary" v-else @click="row.isEdit = true">编辑</el-button>
                <el-button size="small" type="warning" @click="relatedModalShow">关联回款</el-button>
                <el-button size="small" type="danger" @click="subplanModalShow(row)">分解子计划</el-button>
            </template>
        </HcTable>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn>
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>

        <!--分解子计划-->
        <HcDialog bgColor="#ffffff" isToBody isTable
                  title="分解子计划" widths="80%"
                  saveText="保存"
                  :show="subplanModal"
                  @close="subplanCloseClick"
                  @save="subplanSaveClick"
        >
            <HcTable :isIndex="false" :column="tableSubplanColumn" :datas="tableSubplanData">
                <template #key4="{row,index}">
                    <el-select v-model="row.key4">
                        <el-option label="选项1" value="选项1"/>
                        <el-option label="选项2" value="选项2"/>
                    </el-select>
                </template>
                <template #key5="{row,index}">
                    <el-input v-model="row.key5"/>
                </template>
                <template #key6="{row,index}">
                    <el-input v-model="row.key6"/>
                </template>
                <template #key7="{row,index}">
                    <HcDatePicker :dates="betweenTime" @change="betweenTimeUpdate"/>
                </template>
                <template #key8="{row,index}">
                    <el-input v-model="row.key8"/>
                </template>
                <template #key9="{row,index}">
                    <el-input v-model="row.key9"/>
                </template>
            </HcTable>
        </HcDialog>

        <!--关联回款里程碑-->
        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="relatedModal" title="关联回款里程碑" widths="70%" @close="relatedCloseClick">
            <HcTable :column="tableRelatedColumn" :datas="tableRelatedData">
                <template #action="{row,index}">
                    <el-button size="small" type="success" v-if="row.relevance" @click="row.relevance = false">取消关联</el-button>
                    <el-button size="small" type="primary" v-else @click="row.relevance = true">关联</el-button>
                </template>
            </HcTable>
        </HcDialog>

    </HcCard>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()

//类型tab数据和相关处理
const tabKey = ref('construction')
const tabTab = ref([
    {key: 'construction', name: '施工单位成本'},
    {key: 'supervision', name: '监理单位成本'},
    {key: 'build', name: '建设单位成本'}
]);
const tabChange = ({key}) => {
    tabKey.value = key
}

const radioType = ref('key1')


//表格
const tableColumn = [
    {key: 'key1', name: '项目环节', width: '160', align: 'center'},
    {key: 'key2', name: '预算类型', width: '160', align: 'center'},
    {key: 'key3', name: '任务明细', width: '160', align: 'center'},
    {key: 'key4', name: '任务类型', width: '160',  align: 'center'},
    {key: 'key5', name: '任务描述', minWidth: '200',  align: 'center', isTooltip: true},
    {key: 'key6', name: '完成指标', minWidth: '200', align: 'center', isTooltip: true},
    {key: 'key7', name: '计划起止日期', width: '280', align: 'center'},
    {key: 'key8', name: '预计工作量（小数/整数/天）', width: '160', align: 'center'},
    {key: 'key9', name: '投入岗位类型(日单价)', width: '160', align: 'center'},
    {key: 'key10', name: '投入人员数量', width: '160', align: 'center'},
    {key: 'key11', name: '关联回款里程碑', minWidth: '200', isTooltip: true},
    {key: 'action', name: '操作', width: '280', align: 'center', fixed: 'right'},
]
const tableData = ref([
    {id: 1, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 2, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 3, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 4, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 5, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 6, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
])

//表格行样式
const tableRowStyle = ({row, rowIndex}) => {
    if (row.id === 2) {
        return {
            'background-color': '#E99D42',
            '--el-fill-color-lighter': '#E99D42',
            '--el-table-row-hover-bg-color': '#E99D42'
        }
    } else if (row.id === 4 || row.id === 5) {
        return {
            'background-color': '#7e9559',
            '--el-fill-color-lighter': '#7e9559',
            '--el-table-row-hover-bg-color': '#7e9559'
        }
    }
}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr, query}) => {
    betweenTime.value = arr
}


const subplanModal = ref(false)
const subplanModalShow = (row) => {
    subplanModal.value = true
}
//表格
const tableSubplanColumn = [
    {key: 'key1', name: '项目环节', width: '160', align: 'center'},
    {key: 'key2', name: '预算类型', width: '160', align: 'center'},
    {key: 'key3', name: '任务明细', width: '160', align: 'center'},
    {key: 'key4', name: '任务类型', width: '160',  align: 'center'},
    {key: 'key5', name: '任务描述', minWidth: '200',  align: 'center', isTooltip: true},
    {key: 'key6', name: '完成指标', minWidth: '200', align: 'center', isTooltip: true},
    {key: 'key7', name: '计划起止日期', width: '280', align: 'center'},
    {key: 'key8', name: '预计工作量（小数/整数/天）', width: '160', align: 'center'},
]
const tableSubplanData = ref([
    {id: 1, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 2, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 3, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 4, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 5, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 6, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
])

const subplanCloseClick = () => {
    subplanModal.value = false
}

const subplanSaveClick = () => {

}



const relatedModal = ref(false)
const relatedModalShow = (row) => {
    relatedModal.value = true
}
//表格
const tableRelatedColumn = [
    {key: 'key1', name: '回款条件', minWidth: '260'},
    {key: 'key2', name: '应收回款时间', width: '160', align: 'center'},
    {key: 'key3', name: '应收回款金额(元)', width: '160', align: 'center'},
    {key: 'key4', name: '催款执行人', width: '160',  align: 'center'},
    {key: 'action', name: '操作', width: '130', align: 'center'},
]
const tableRelatedData = ref([
    {id: 1, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 2, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 3, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 4, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 5, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
    {id: 6, key1: 'xx', key2: 'xx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key7: 'xx', key8: 'xx', key9: 'xx', key10: 'xx'},
])

const relatedCloseClick = () => {
    relatedModal.value = false
}

//取消并返回
const goBackClick = () => {
    router.back()
}
</script>

<style lang="scss">
.hc-program-project-form-radio-group {
    position: relative;
    width: 100%;
    .el-radio-group, .el-radio-group .el-radio-button .el-radio-button__inner {
        width: 100%;
    }
    .el-radio-group .el-radio-button {
        flex: 1;
    }
}
</style>
