<template>
  <div>
    <div style="width: 30%;float: left">

        <el-col :span="12">
          <el-button type="primary" plain disabled>添加模板</el-button>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-submenu index="1">

              <!--卡片-->
              <el-row>
                <!-- 将v-for的范围从2增加到所需显示的卡片数量 -->
                <el-col :span="24" v-for="typeData in typeTable" :key="index">
                  <el-card :body-style="{ padding: '0px' }">
                    <div style="padding: 14px;">
                      <span>{{typeData.typeName}}</span>
                      <div class="bottom clearfix">
                        <el-button type="text" @click="open(typeData.typeId)">模板配置</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <!--              -->
            </el-submenu>


          </el-menu>
        </el-col>

    </div>
    <div style="width: 70%;float: right">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="报文类别">
          <el-input v-model="formInline.user" placeholder="报文类别"></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="formInline.user" placeholder="编码"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="formInline.user" placeholder="标签"></el-input>
        </el-form-item>
        <el-form-item label="起始位">
          <el-input v-model="formInline.user" placeholder="起始位"></el-input>
        </el-form-item>
        <el-form-item label="终止位">
          <el-input v-model="formInline.user" placeholder="终止位"></el-input>
        </el-form-item>
        <el-form-item label="数据类型">
          <el-select v-model="formInline.region" placeholder="数据类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-tabs @tab-click="handleTypeTabClick" >
        <el-tab-pane
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :name="item.value"
        >

          <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="车辆报文类型编码" align="center" prop="carMsg" />
            <el-table-column label="开始位下标" align="center" prop="beginIndex" />
            <el-table-column label="结束位下标" align="center" prop="endIndex" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['message:message:remove']"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {findCarmsgListByModelId, msgTypeList} from "@/api/system/manage/template";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        typeTable:[],
        msgTable:[],
        formInline:{},
        options: [
          {
            value: 'identification',
            label: '车辆基础'
          },
          {
            value: 'information',
            label: '车辆数据'
          },
          {
            value: 'status',
            label: '设备状态'
          }
        ],
        messageList:[],
        params:''
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      findTypeList(){
        msgTypeList().then(res => {
          this.typeTable = res.data
        })
      },
      open(typeId){
        alert(typeId)
       this.params=typeId
        findCarmsgListByModelId(params).then(res => {
          this.msgTable = res.data
        })
      },
      handleTypeTabClick(typeId){
       this.params=typeId
        findCarmsgListByModelId(params).then(res => {
          this.msgTable = res.data

        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.findTypeList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
