<template>
  <div>
    <el-button
      v-for="(tab, index) in tabs"
      :key="index"
      :type="activeTab === tab ? 'primary' : 'default'"
      @click="activeTab = tab"
    >
      {{ tab }}
    </el-button>

    <div v-if="activeTab === '车辆报文'">
      <h2>车辆报文</h2>
        <el-row>
          <el-button size="small" @click=" dialogFormVisible =  true">
            添加模板
          </el-button>
        </el-row>
      <el-row>
        <el-tabs v-model="editableTabsValue" :tab-position="tabPosition" type="card" @tab-click="handleTabClick">
            <el-tab-pane
             v-for="(item,index) in editableTabsValue"
             :key="item.keyCode"
             :label="item.keyCode"
             :name="item.keyCode"
            >
              <el-card>
              <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                 <el-form-item label="报文类别" prop="messageTypeCode">
                    <el-select v-model="form.messageType" clearable placeholder="请选择">
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"
                       ></el-option>
                    </el-select>
                 </el-form-item>
                <el-form-item label="车文类型编码" prop="label">
                   <el-select v-model="form.label" clearable placeholder="请选择车辆报文类型编码">
                     <el-option
                       v-for="item in messageTypeList"
                       :key="item.messageCode"
                       :label="item.messageName"
                       :value="item.messageCode"
                     >
                     </el-option>
                   </el-select>
                </el-form-item>
                <el-form-item label="开始位下标" prop="startBit">
                  <el-input v-model="form.startBit" placeholder="请输入开始位下标"></el-input>
                </el-form-item>
                <el-form-item label="结束位下标" prop="stopBit">
                  <el-input v-model="form.stopBit" placeholder="请输入结束位下标"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </el-form>

                <el-tabs @tab-click="handleTypeTabClick" >
                  <el-tab-pane
                    v-for="(item, index) in options"
                    :key="item.value"
                    :label="item.label"
                    :name="item.value"
                  >
                  </el-tab-pane>
                </el-tabs>

                <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="label" />
                  <el-table-column label="开始位下标" align="center" prop="startBit" />
                  <el-table-column label="结束位下标" align="center" prop="stopBit" />
                  <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)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <el-dialog title="添加模板" :visible.sync="dialogFormVisible">
                  <el-form :model="modelCodes">
                    <el-form-item label="模板">
                      <el-input v-model="modelCodes" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addTab">确 定</el-button>
                  </div>
                </el-dialog>
              </el-card>
            </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
    <div v-else-if="activeTab === '故障管理'">
      <h2>故障管理</h2>

    </div>
    <div v-else-if="activeTab === '指标预警'">
      <h2>指标预警</h2>

    </div>
    <div v-else-if="activeTab === '电子围栏'">
      <h2>电子围栏</h2>

    </div>
  </div>
</template>

<script>

import { listMessage ,getMessage, delMessage, addMessage, updateMessage } from "/src/api/car/ListManager.js";
import {listMessageType} from "@/api/car/ListManager";

export default {
  data() {
    return {
      rules: {},
      showSearch: true,
      ids: [],
      messageList: [],
      title: "",
      loading: true,
      messageTypeList: [],
      total: 0,
      queryTypeParams: {
        messageName: null,
        type: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyCode: null,
      },
      modelCodes: '',
      options: [
        {
          value: 'identification',
          label: '车辆基础'
        },
        {
          value: 'information',
          label: '车辆数据'
        },
        {
          value: 'status',
          label: '设备状态'
        }
      ],
      tabPosition: 'left',
      editableTabsValue: false,
      form: {},
      dialogFormVisible : false,
      tabs: ['车辆报文', '故障管理', '指标预警', '电子围栏'],
      activeTab: '车辆报文',
    };
  },
  created() {
    this.getList();
    this.getTypeList();
    this.getListCopy();
  },
  methods:{
    getListCopy() {
      this.loading = true;
      listMessage(this.queryParams).then(response => {
        console.log('Response data:', response.data);
        const rows = response.data;
        if (Array.isArray(rows)) {
          this.messageList = rows;
          const uniqueSysLeixingpick = new Map();
          rows.forEach(item => {
            uniqueSysLeixingpick.set(item.keyCode, item);
          });
          // 将 Map 的值转换回数组
          this.editableTabs = Array.from(uniqueSysLeixingpick.values());
        } else {
          console.error('Rows is not an array:', rows);
        }
        this.loading = false;
      }).catch(error => {
        console.error('Error fetching message details:', error);
        this.loading = false;
      });
    },
    getList() {
      this.loading = true;
      listMessage(this.queryParams).then(response => {
        this.messageList = response.data;
        this.loading = false;
      });
    },
    addTab() {
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({
        keyCode: this.modelCodes,
        content: 'New Tab content'
      });
      this.editableTabsValue = newTabName;
      this.dialogFormVisible = false
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        keyCode: null,
        label: null,
        startBit: null,
        stopBit: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getTypeList() {
      this.loading = true;
      listMessageType(this.queryTypeParams).then(response => {
        this.messageTypeList = response.data;
        this.loading = false;
      });
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleTypeTabClick(tab) {
      console.log(tab.name)
      this.queryParams.messageType = tab.name
      this.getList()
    },
    submitForm() {
      addMessage(this.form).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.open = false;
        this.getList();
      });
    },
    handleTabClick(tab) {
      this.queryParams.keyCode = tab.name
      this.form.keyCode = tab.name
      this.getList()
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除车辆报文记录编号为"' + ids + '"的数据项？').then(function () {
        return delMessage(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

  },
};
</script>

<style scoped>
.el-button {
  margin-right: 10px;
}
</style>
