<template>
    <div style="padding: 30px; background: #f3f6fb;height:100vh;">
        <div style="max-width:1440px; margin:0 auto;">
            <el-row justify="space-between">
                <el-col :span="6">
                    <h1 class="alifont" style="font-size:20px;">智慧设计平台</h1>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="searchKey" placeholder="输入模板关键字快速查找" class="input-with-select">
                        <template #append>
                            <el-button type="primary" @click="queryTemplateBySearchHandler">搜索</el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <div class="q-mt-lg bg-white q-pa-lg rounded">
                <div class="row text-small items-center">
                    <span class="q-mr-lg">适用线路：</span>
                    <el-check-tag :checked="queryObj.lineId == 0" @change="onLineChangeHandler(0)"
                        class="text-small q-mr-md">全部</el-check-tag>
                    <el-check-tag :checked="queryObj.lineId == x.LineID" @change="onLineChangeHandler(x.LineID)" class="text-small q-mr-md"
                        v-for="x in lines" :key="x.LineID">{{x.LineName}}</el-check-tag>
                </div>
                <el-divider></el-divider>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import LineService from '@/services/LineService'
import { userStore } from "@/store/user";
import { storeToRefs } from "pinia";

const {userInfo} = storeToRefs(userStore())
const lines = ref([] as Array<any>)
const queryObj = reactive({
    lineId: 0,
    searchKey: ''
})

const queryTemplateBySearchHandler = () => { }
const onLineChangeHandler = (lineId: number) => {
    queryObj.lineId = lineId
}
const getLinesHandler = async ()=>{
    try {
        let response = await LineService.GetLineListAsync()
        if(response.data.resultCode==1){
            lines.value= response.data.data
            console.log(lines.value)
        }
    } catch (error) { }
}
getLinesHandler()
</script>

<style>
@import url('../../assets/styles/common.css');

@font-face {
    font-family: "alifont";
    font-weight: 400;
    src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
    font-display: swap;
}

.alifont {
    font-family: alifont;
}

.el-check-tag {
    background: #FFF;
    font-weight: 500 !important;
    font-size: 12px !important;
}</style>
