<template>
  <div class="app-container">
    <el-container>
      <el-aside width="400px">
        <el-button @click="handleAddTemplate">添加模版报文</el-button>
        <el-empty description="暂无报文模版" v-if="templateList.length == 0"></el-empty>
        <el-col :span="24" v-for="template in templateList" v-if="templateList.length != 0">
          <el-card class="box-card" style="margin-top: 20px">
            <div slot="header" class="text">
              <span>{{ template.messageTemplateName }}</span>
              <el-button style="float: right" type="text" @click="handleArrange(template.messageTemplateId)">模版配置
              </el-button>
            </div>
            <div class="text">
              <span>{{ template.messageTemplateDescribe }}</span>
            </div>
          </el-card>
        </el-col>
      </el-aside>
      <el-container v-if="this.queryParam.messageTemplateId != 0">
        <el-header>
          <el-form :inline="true" ref="queryParams" :model="addParams" class="demo-form-inline">
            <el-form-item label="报文类别" size="mini">
              <el-select
                v-model="addParams.messageType"
                clearable
                placeholder="报文类别"
              >
                <el-option
                  v-for="dict in dict.type.car_message_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="编码" size="mini">
              <el-input v-model="addParams.messageCode" placeholder="编码"></el-input>
            </el-form-item>
            <el-form-item label="标签" size="mini">
              <el-input v-model="addParams.messageLabel" placeholder="标签"></el-input>
            </el-form-item>
            <el-form-item label="起始位" size="mini">
              <el-input v-model="addParams.messageStartIndex" placeholder="起始位"></el-input>
            </el-form-item>
            <el-form-item label="终止位" size="mini">
              <el-input v-model="addParams.messageEndIndex" placeholder="终止位"></el-input>
            </el-form-item>
            <el-form-item label="数据类型" size="mini">
              <el-select
                v-model="addParams.messageDataType"
                clearable
                placeholder="数据类型"
              >
                <el-option
                  v-for="dict in dict.type.car_message_data_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="固定值" size="mini" v-if="this.addParams.messageDataType == 'fixed'">
              <el-input v-model="addParams.fixedValue" placeholder="固定值"></el-input>
            </el-form-item>
            <el-form-item label="最小值" size="mini" v-if="this.addParams.messageDataType == 'range'">
              <el-input v-model="addParams.minimumValue" placeholder="最小值"></el-input>
            </el-form-item>
            <el-form-item label="最大值" size="mini" v-if="this.addParams.messageDataType == 'range'">
              <el-input v-model="addParams.maximumValue" placeholder="最大值"></el-input>
            </el-form-item>
            <el-form-item size="mini">
              <el-button type="primary" @click="handleAddValue">添加</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main style="margin-top: 35px">
          <el-tabs v-model="queryParam.messageType" @tab-click="handleClick">
            <el-tab-pane label="基础" name="basics">
              <el-table :data="valueList">
                <el-table-column label="编码" prop="messageCode" align="center"/>
                <el-table-column label="标签" prop="messageLabel" align="center"/>
                <el-table-column label="起始位" prop="messageStartIndex" align="center"/>
                <el-table-column label="终止位" prop="messageEndIndex" align="center"/>
                <el-table-column align="center" label="数据类型" prop="messageDataType">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.car_message_data_type" :value="scope.row.messageDataType"/>
                  </template>
                </el-table-column>
                <el-table-column label="固定值" prop="fixedValue" align="center">
                  <template slot-scope="scope">
                    {{scope.row.fixedValue?scope.row.fixedValue:'-'}}
                  </template>
                </el-table-column>
                <el-table-column label="最小值" align="center">
                  <template slot-scope="scope">
                    {{scope.row.minimumValue?scope.row.minimumValue:'-'}}
                  </template>
                </el-table-column>
                <el-table-column label="最大值" align="center">
                  <template slot-scope="scope">
                    {{scope.row.maximumValue?scope.row.maximumValue:'-'}}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="数据" name="info">
              <el-table :data="valueList">
                <el-table-column label="编码" prop="messageCode" align="center"/>
                <el-table-column label="标签" prop="messageLabel" align="center"/>
                <el-table-column label="起始位" prop="messageStartIndex" align="center"/>
                <el-table-column label="终止位" prop="messageEndIndex" align="center"/>
                <el-table-column align="center" label="数据类型" prop="messageDataType">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.car_message_data_type" :value="scope.row.messageDataType"/>
                  </template>
                </el-table-column>
                <el-table-column label="固定值" prop="fixedValue" align="center">
                  <template slot-scope="scope">
                    {{scope.row.fixedValue?scope.row.fixedValue:'-'}}
                  </template>
                </el-table-column>
                <el-table-column label="最小值" align="center">
                  <template slot-scope="scope">
                    {{scope.row.minimumValue?scope.row.minimumValue:'-'}}
                  </template>
                </el-table-column>
                <el-table-column label="最大值" align="center">
                  <template slot-scope="scope">
                    {{scope.row.maximumValue?scope.row.maximumValue:'-'}}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="状态" name="status">
              <el-table :data="valueList">
                <el-table-column label="编码" prop="messageCode" align="center"/>
                <el-table-column label="标签" prop="messageLabel" align="center"/>
                <el-table-column label="起始位" prop="messageStartIndex" align="center"/>
                <el-table-column label="终止位" prop="messageEndIndex" align="center"/>
                <el-table-column label="数据类型" prop="messageDataType" align="center"/>
                <el-table-column label="固定值" prop="fixedValue" align="center">
                  <template slot-scope="scope">
                    {{scope.row.fixedValue?scope.row.fixedValue:'-'}}
                  </template>
                </el-table-column>
                <el-table-column label="最小值" align="center">
                  <template slot-scope="scope">
                    {{scope.row.minimumValue?scope.row.minimumValue:'-'}}
                  </template>
                </el-table-column>
                <el-table-column label="最大值" align="center">
                  <template slot-scope="scope">
                    {{scope.row.maximumValue?scope.row.maximumValue:'-'}}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog title="添加报文模版" :visible.sync="open" append-to-body>
      <el-form :model="form">
        <el-form-item label="模版名称">
          <el-input v-model="form.messageTemplateName" placeholder="模版名称"></el-input>
        </el-form-item>
        <el-form-item label="模版描述">
          <el-input v-model="form.messageTemplateDescribe" placeholder="模版描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  templateList,
  addTemplate,
  valueList,
  addValue
} from "/src/api/car/message/template";

export default {
  name: "MessageTemplateValue",
  dicts: ['car_message_type', 'car_message_data_type'],
  data() {
    return {
      // 报文模版列表
      templateList: [],
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 报文数据列表参数
      queryParam: {
        // 报文模版外键
        messageTemplateId: 0,
        // 选项卡参数
        messageType: '',
      },
      // 报文数据列表
      valueList: [],
      // 添加报文数据参数
      addParams: {
        templateId: 0,
      },
    };
  },
  created() {
    // 获取报文模版列表
    this.getTemplateList();
  },
  methods: {
    /** 获取报文模版列表 */
    getTemplateList() {
      templateList().then(response => {
        this.templateList = response.data;
      })
    },
    /** 添加报文模版 */
    handleAddTemplate() {
      this.open = true
    },
    /** 提交按钮 */
    submitForm() {
      addTemplate(this.form).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getTemplateList();
      })
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 模版配置 */
    handleArrange(messageTemplateId) {
      this.queryParam.messageTemplateId = messageTemplateId;
      this.addParams.templateId = messageTemplateId;
    },
    /** 切换选项卡 */
    handleClick() {
      valueList(this.queryParam).then(response => {
        this.valueList = response.data
      })
    },
    /** 添加报文数据 */
    handleAddValue(){
      if (this.addParams.messageType == null){
        this.$modal.msgError("请选择报文类别");
      }else {
        addValue(this.addParams).then(response => {
          this.$modal.msgSuccess("添加成功");
          valueList(this.queryParam).then(response => {
            this.valueList = response.data
          })
        })
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.addParams = {
        messageType: '',
        messageCode: '',
        messageLabel: '',
        messageStartIndex: '',
        messageEndIndex: '',
        messageDataType: '',
        fixedValue: '',
        minimumValue: '',
        maximumValue: ''
      }
    },
  }
};
</script>
<style>
.el-header {
  //background-color: #B3C0D1;
  //color: #333;
  text-align: center;
}

.el-aside {
  //background-color: #D3DCE6;
  //color: #333;
}

.el-main {
  //background-color: #E9EEF3;
  //color: #333;
  text-align: center;
}

.text {
  line-height: 30px;
}

.box-card {
  width: 350px;
  margin-top: 15px;
}

</style>
