<template>

  <div>
    <el-badge :value="this.count" class="item">
      <el-button @click="drawer = true" type="primary" style="margin-left: 16px;" size="small">消息中心</el-button>
    </el-badge>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="故障码">
        <el-input v-model="formInline.faultCode" placeholder="请输入故障码"></el-input>
      </el-form-item>
      <el-form-item label="故障位">
        <el-input v-model="formInline.faultBit" placeholder="请输入故障位"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findSysCarFaultList()" icon="el-icon-search">查询</el-button>
        <el-button @click="onSubmit" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="dialogFormVisible=true"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:role:edit']"
          :disabled="single"
          icon="el-icon-edit"
          plain
          size="mini"
          type="success"
          @click="handleUpdate"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:role:remove']"
          :disabled="multiple"
          icon="el-icon-delete"
          plain
          size="mini"
          type="danger"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:role:export']"
          icon="el-icon-download"
          plain
          size="mini"
          type="warning"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column
        label="ID"
        width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="故障码"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.faultCode }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="故障类型"
        width="150">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="danger">{{ scope.row.faultTypeName }}</el-tag>
            </div>
        </template>
      </el-table-column>

      <el-table-column
        label="故障组"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="故障位"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.faultBit }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="故障值"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.faultValue }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="故障标签"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.faultLabel }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="是否警告"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.warnStatus == 'Y'">是</span>
          <span style="margin-left: 10px" v-if="scope.row.warnStatus == 'N'">否</span>
        </template>
      </el-table-column>

      <el-table-column
        label="启用状态"
        width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.state==1">待处理</span>
          <span style="margin-left: 10px" v-if="scope.row.state==2">处理中</span>
          <span style="margin-left: 10px" v-if="scope.row.state==3">已处理</span>
          <span style="margin-left: 10px" v-if="scope.row.state==4">忽略</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleEdit(scope.row)">修改</el-button>
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


<!--    添加车辆故障码对话框-->
    <el-dialog title="添加车辆故障码" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="车辆故障编码" >
          <el-input v-model="form.faultCode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障名称" >
          <el-input v-model="form.faultName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障类型" >
          <el-input v-model="form.faultTypeId" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="故障组（可为空）" >
          <el-input v-model="form.faultGroup" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="故障VIN编码" >
          <el-input v-model="form.carVin" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障标签（可为空）" >
          <el-input v-model="form.faultLabel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障位" >
          <el-input v-model="form.faultBit" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障值" >
          <el-input v-model="form.faultValue" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="故障级别" >
          <el-select v-model="form.faultWarn" placeholder="请选择故障级别">
            <el-option label="一级" value="一级">一级</el-option>
            <el-option label="二级" value="二级">二级</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="报警状态（Y.是，N.否）" >
          <el-radio v-model="form.warnStatus" label="Y">是</el-radio>
          <el-radio v-model="form.warnStatus" label="N">否</el-radio>
        </el-form-item>

        <el-form-item label="故障描述信息" >
          <el-input v-model="form.faultDesc" autocomplete="off"></el-input>
        </el-form-item>

<!--        <el-form-item label="启用状态(1.待处理 2.处理中 3.已处理 4.忽略)" >-->
<!--          <el-select v-model="form.state" placeholder="请选择启用状态">-->
<!--            <el-option label="待处理" value="待处理">待处理</el-option>-->
<!--            <el-option label="处理中" value="处理中"></el-option>-->
<!--            <el-option label="已处理" value="已处理"></el-option>-->
<!--            <el-option label="忽略" value="忽略"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="创建人" >-->
<!--          <el-input v-model="form.createBy" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="创建时间" >-->
<!--          <el-input v-model="form.createTime" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="更新人" >-->
<!--          <el-input v-model="form.updateBy" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="更新时间" >-->
<!--          <el-input v-model="form.updateTime" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

        <el-form-item label="备注" >
          <el-input v-model="form.remark" 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="carFaultAdd()">确 定</el-button>
      </div>
    </el-dialog>


    <!--    修改车辆故障码对话框-->
    <el-dialog title="添加车辆故障码" :visible.sync="dialogFormVisible1">
      <el-form :model="formUpdate">
        <el-form-item label="ID" >
          <el-input v-model="formUpdate.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障编码" >
          <el-input v-model="formUpdate.faultCode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障名称" >
          <el-input v-model="formUpdate.faultName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障类型" >
          <el-input v-model="formUpdate.faultTypeName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="故障组（可为空）" >
          <el-input v-model="formUpdate.faultGroup" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="故障VIN编码" >
          <el-input v-model="formUpdate.carVin" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障标签（可为空）" >
          <el-input v-model="formUpdate.faultLabel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障位" >
          <el-input v-model="formUpdate.faultBit" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="车辆故障值" >
          <el-input v-model="formUpdate.faultValue" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="故障级别" >
          <el-select v-model="formUpdate.faultWarn" placeholder="请选择故障级别">
            <el-option label="一级故障" value="一级故障">一级故障</el-option>
            <el-option label="二级故障" value="二级故障">二级故障</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="报警状态（Y.是，N.否）" >
          <el-radio v-model="formUpdate.warnStatus" label="Y">是</el-radio>
          <el-radio v-model="formUpdate.warnStatus" label="N">否</el-radio>
        </el-form-item>

        <el-form-item label="故障描述信息" >
          <el-input v-model="formUpdate.faultDesc" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="启用状态(1.待处理 2.处理中 3.已处理 4.忽略)" >
          <el-select v-model="formUpdate.state" placeholder="请选择启用状态">
            <el-option label="待处理" value="1"></el-option>
            <el-option label="处理中" value="2"></el-option>
            <el-option label="已处理" value="3"></el-option>
            <el-option label="忽略" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="创建人" >
          <el-input v-model="formUpdate.createBy" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建时间" >
          <el-input v-model="formUpdate.createTime" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="更新人" >
          <el-input v-model="formUpdate.updateBy" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="更新时间" >
          <el-input v-model="formUpdate.updateTime" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" >
          <el-input v-model="formUpdate.remark" 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="updateCarFault()">确 定</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="formInline.total>0"
      :limit.sync="formInline.pageSize"
      :page.sync="formInline.pageNum"
      :total="formInline.total"
      @pagination="findSysCarFaultList"
    />

<!--    站内信-->
    <el-drawer
      :visible.sync="drawer"
      size="50%">
      <div>
        <el-table
          :data="messageList"
          style="width: 100%">
          <el-table-column
            label="id"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="消息内容"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.content }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="消息状态"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px" v-if="scope.row.status==1">未读</span>
              <span style="margin-left: 10px" v-if="scope.row.status==2">已读</span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="updateMessage(scope.row)">点击查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-drawer
          :append-to-body="true"
          :before-close="handleClose"
          :visible.sync="innerDrawer">
          <el-form label-width="80px" :model="formMessage">
            <el-form-item label="id">
              <el-input v-model="formMessage.id"></el-input>
            </el-form-item>
            <el-form-item label="发送者">
              <el-input v-model="formMessage.sender"></el-input>
            </el-form-item>
            <el-form-item label="接受者">
              <el-input v-model="formMessage.receiver"></el-input>
            </el-form-item>
            <el-form-item label="消息内容">
              <el-input v-model="formMessage.content"></el-input>
            </el-form-item>
            <el-form-item label="发布时间">
              <el-input v-model="formMessage.createdAt"></el-input>
            </el-form-item>
          </el-form>
        </el-drawer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {findSysCarFaultList} from "@/api/car/fault";
import {addSysCarFault} from "@/api/car/fault";
import {updateSysCarFault} from "@/api/car/fault";
import {deleteSysCarFaultId} from "@/api/car/fault";
import {ALL} from "@riophae/vue-treeselect/src/constants"
import {findMessageList} from "@/api/car/fault";
import {updateMessage} from "@/api/car/fault";
import {selectStatusOne} from "@/api/car/fault";
export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      //查询未读消息条数
      count:"",
      //站内信
      drawer: false,
      innerDrawer: false,
      messageList:[],
      formMessage:{},
      //查询车辆故障列表
      tableData:[],
      //查询条件
      formInline:{
        pageNum: 1,
        pageSize: 10,
        // 总条数
        total: 0,
      },
      //添加车辆故障码
      form:{},
      dialogFormVisible:false,
      //修改车辆故障码
      formUpdate:{},
      dialogFormVisible1:false,
      //删除车辆故障码
      id:"",
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    //查询未读消息条数
    selectStatus(){
      selectStatusOne().then((res)=>{
        this.count=res.data;
      })
    },
    //修改站内信状态
    updateMessage(row){
      this.formMessage=row;
      this.innerDrawer=true;
      updateMessage(this.formMessage).then((res)=>{
        this.findMessageList();
        this.selectStatus();
      })
    },
    //站内信列表
    findMessageList(){

      findMessageList(this.formMessage).then((res)=>{
        this.messageList=res.data;
      })
    },
    //删除车辆故障码
    handleDelete(row){
      this.id=row.id;
      alert(this.id)
      deleteSysCarFaultId(this.id).then((res)=>{
        alert(res.msg);
        if (200==res.code){
          this.findSysCarFaultList();
        }
      })
    },
    //修改回显打开对话框
    handleEdit(row){
      this.formUpdate=row;
      this.dialogFormVisible1=true;
    },
    //修改车辆故障码
    updateCarFault(){
      updateSysCarFault(this.formUpdate).then((res)=>{
        alert(res.msg);
        if (200==res.code){
          this.findSysCarFaultList();
          this.dialogFormVisible1=false;
        }
      })
    },
    //添加车辆故障码
    carFaultAdd(){
      addSysCarFault(this.form).then((res)=>{
        alert(res.msg);
        if (200==res.code){
          this.findSysCarFaultList();
          this.dialogFormVisible=false;
        }
      })
    },
    //查询车辆故障列表
    findSysCarFaultList(){
      findSysCarFaultList(this.formInline).then((res)=>{
        this.tableData = res.data.rows;
        this.formInline.total=res.data.total;
      })
    },
    handleSizeChange(val) {
      alert(val)
      this.formInline.pageSize=val;
      this.findSysCarFaultList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum=val;
      this.findSysCarFaultList();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.findSysCarFaultList();
    this.findMessageList();
    this.selectStatus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
  .item {
    margin-top: 5px;
    margin-right: 30px;
    display: flex;
    justify-content: flex-end;
  }
</style>
