<template>
  <div>
    <center>
      <h2>
        制定故障规则
      </h2>
      <el-form :model="addForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="5"><div class="grid-content bg-purple">
            <el-form-item label="车辆类型" prop="pass">
              <el-input type="text" v-model="addForm.carTypeId" autocomplete="off"></el-input>
              <el-select v-model="addForm.carTypeId" placeholder="请选择">
                <el-option
                  v-for="item in carType"
                  :key="item.carTypeId"
                  :label="item.carTypeName"
                  :value="item.carTypeId">
                </el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple">
            <el-form-item label="故障项" prop="pass">
              <el-input type="text" v-model="addForm.messageTypeId" autocomplete="off"></el-input>
              <el-select v-model="addForm.messageTypeId" placeholder="请选择">
                <el-option
                  v-for="item in faultLabel"
                  :key="item.messageTypeId"
                  :label="item.messageTypeName"
                  :value="item.messageTypeId">
                </el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple-light">
            <el-form-item label="条件">
              <el-select v-model="addForm.faultconditionIdentification" 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-option label="<=" value="<="></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple">
            <el-form-item label="参数" prop="pass">
              <el-input type="text" v-model="addForm.faultconditionParameter" autocomplete="off"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple-light">
            <el-form-item>
              <el-button type="primary" @click="addruleForm('addForm')">提交</el-button>
              <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
          </div></el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="车辆类型" prop="pass">
              <el-select v-model="ruleForm.carTypeId" placeholder="请选择">
                <el-option
                  v-for="item in carType"
                  :key="item.carTypeId"
                  :label="item.carTypeName"
                  :value="item.carTypeId">
                </el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light">
            <el-form-item label="故障项" prop="pass">
              <el-select v-model="ruleForm.messageTypeId" placeholder="请选择">
                <el-option
                  v-for="item in faultLabel"
                  :key="item.messageTypeId"
                  :label="item.messageTypeName"
                  :value="item.messageTypeId">
                </el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item>
              <el-button type="primary" @click="look('ruleForm')">查询</el-button>
            </el-form-item>
          </div></el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="车辆类型"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                {{ scope.row.carTypeName }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="故障项"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                {{ scope.row.messageTypeName }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="故障条件"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                {{ scope.row.faultconditionIdentification }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="故障参数值"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                {{ scope.row.faultconditionParameter }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleUpd(scope.row)">修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!--修改故障规则页面-->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :model="updForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="Id" prop="pass">
            <el-input type="text" v-model="updForm.carconditionId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型" prop="pass">
            <el-select v-model="updForm.carTypeId" placeholder="请选择">
              <el-option
                v-for="item in carType"
                :key="item.carTypeId"
                :label="item.carTypeName"
                :value="item.carTypeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="故障项" prop="pass">
            <el-select v-model="updForm.messageTypeId" placeholder="请选择">
              <el-option
                v-for="item in faultLabel"
                :key="item.messageTypeId"
                :label="item.messageTypeName"
                :value="item.messageTypeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="条件">
            <el-select v-model="updForm.faultconditionIdentification" 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-option label="<=" value="<="></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数" prop="pass">
            <el-input type="text" v-model="updForm.faultconditionParameter" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updruleForm()">确 定</el-button>
        </span>
      </el-dialog>




      <!--分页-->
      <center>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="ruleForm.pageNum"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="ruleForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </center>
    </center>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import {getfaultLabel} from "@/api/fault/faultcode";
import {resetForm} from "@/utils/muyu";
import {getcarType} from "@/api/fault/cartype";
import {addrule, delruleForm, getfaultrule, updruleForm} from "@/api/fault/faultrule";

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

      return {
        ruleForm:{
          pageNum:1,
          pageSize:10
        },
        total:0,
        addForm:{},
        updForm:{},
        faultLabel:[],
        carType:[],
        tableData:[],
        dialogVisible: false,
        unread:[]
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      resetForm,
      //查询
      look(){
        this.getfaultrule()
      },
      //故障名称
      getfaultLabel(){
        getfaultLabel().then(response=>{
          this.faultLabel=response.data
        })
      },
      //车辆类型
      getcarType(){
        getcarType().then(response=>{
          this.carType=response.data
        })
      },
      //制定规则
      addruleForm(){
        addrule(this.addForm).then(response=>{
            alert(response.msg)
            if (response.code==200){
              this.getfaultrule()
            }
        })
      },
      //打开规则修改页面
      handleUpd(row){
        this.dialogVisible=true
        this.updForm={
          carconditionId: row.carconditionId,
          carTypeId: row.carTypeId,
          faultlabelId: row.faultlabelId,
          faultconditionIdentification: row.faultconditionIdentification,
          faultconditionParameter: row.faultconditionParameter
        }
      },
      //关闭规则修改页面
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //修改规则
      updruleForm(){
        updruleForm(this.updForm).then(response=>{
          alert(response.msg)
          if (response.code==200){
            this.dialogVisible=false
            this.getfaultrule()
          }
        })
      },
      //删除规则
      handleDelete(row){
        if (confirm("确定删除么,一旦删除不可恢复！")){
          delruleForm(row.carconditionId).then(response=>{
            alert(response.msg)
            if (response.code==200){
              this.getfaultrule()
            }
          })
        }
      },
      //故障规则列表
      getfaultrule(){
        getfaultrule(this.ruleForm).then(response=>{
          this.tableData=response.data.faultConditionListRespList
          this.total=response.data.total
        })
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.ruleForm.pageSize=val
        this.getfaultcode()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.ruleForm.pageNum=val
        this.getfaultcode()
      },

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

</style>
