<template>
  <div>
    <!--查询-->
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="7"><div class="grid-content bg-purple">
          <el-form-item label="故障码" prop="pass">
            <el-input type="text" v-model="ruleForm.faultcodeNumber" autocomplete="off"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="7"><div class="grid-content bg-purple-light">
          <el-form-item label="故障位" prop="pass">
            <el-input type="text" v-model="ruleForm.faultBit" autocomplete="off"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="7"><div class="grid-content bg-purple">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple">
          <el-badge :value="messagenumber" class="item" style="margin-top: 10px;">
            <el-button size="small" @click="openmessage()" type="primary">消息</el-button>
          </el-badge>
        </div></el-col>
      </el-row>
    </el-form>

    <el-button type="success" @click="tofalutcode(1)">新增故障码</el-button>
    <!--故障码列表-->
    <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.faultcodeNumber }}
            </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.messageTypeCode }}
            </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.faultGroup }}
            </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.faultBit }}
            </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.faultValue }}
            </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.faultlabelName }}
            </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">
              <span v-if="scope.row.isWarning==0">否</span>
              <span v-if="scope.row.isWarning==1">是</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row,2)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <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>

    <!--对话框（新增/修改）-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>
        <!--新增故障码-->
        <div v-if="this.index==1">
            <el-form :model="addForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="故障名称" prop="pass">
                <el-input type="text" v-model="addForm.messageTypeName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="故障编码" prop="pass">
                <el-input type="text" v-model="addForm.messageTypeCode" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="故障码" prop="pass">
                <el-input type="text" v-model="addForm.faultcodeNumber" autocomplete="off"></el-input>
              </el-form-item>
<!--              <el-form-item label="故障分类" prop="pass">-->
<!--                <el-input type="text" v-model="addForm.faulttypeId" autocomplete="off"></el-input>-->
<!--                <el-select v-model="addForm.faulttypeId" placeholder="请选择">-->
<!--                  <el-option-->
<!--                    v-for="item in faultType"-->
<!--                    :key="item.faulttypeId"-->
<!--                    :label="item.faulttypeName"-->
<!--                    :value="item.faulttypeId">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="是否产生报警" prop="pass">-->
<!--                 <el-input type="text" v-model="addForm.isWarning" autocomplete="off"></el-input>-->
<!--                  <el-radio-group v-model="addForm.isWarning">-->
<!--                    <el-radio label="1">是</el-radio>-->
<!--                    <el-radio label="0">否</el-radio>-->
<!--                  </el-radio-group>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="故障描述" prop="pass">-->
<!--                <el-input type="text" v-model="addForm.faultContent" autocomplete="off"></el-input>-->
<!--              </el-form-item>-->
            </el-form>
        </div>
        <!--修改故障码-->
        <div v-if="this.index==2">
          <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.faultcodeId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="故障名称" prop="pass">
              <el-input type="text" v-model="updForm.faultlabelId" autocomplete="off"></el-input>
                <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="故障码" prop="pass">
              <el-input type="text" v-model="updForm.faultcodeNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="故障组" prop="pass">
              <el-input type="text" v-model="updForm.faultGroup" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="故障位" prop="pass">
              <el-input type="text" v-model="updForm.faultBit" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="故障值" prop="pass">
              <el-input type="text" v-model="updForm.faultValue" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否产生报警" prop="pass">
<!--                 <el-input type="text" v-model="addForm.isWarning" autocomplete="off"></el-input>-->
                  <el-radio-group v-model="updForm.isWarning">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
              </el-form-item>
          </el-form>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addfalutcode()" v-if="this.index==1">新增</el-button>
    <el-button type="primary" @click="updfalutcode()" v-if="this.index==2">修改</el-button>
  </span>
    </el-dialog>

    <!--消息确认-->
    <el-drawer
      title="消息确认"
      :visible.sync="drawer"
      :with-header="false"
      size="60%">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" >
          <el-table
            :data="messageData"
            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.sender }}
                  </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.createTime }}
                  </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.content }}
                  </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">
                    <span v-if="scope.row.status==0">未读</span>
                    <span v-if="scope.row.status==1">已读</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="lookmessage(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已读" name="second" >
          <el-table
            :data="messageData"
            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.sender }}
                  </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.createTime }}
                  </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.content }}
                  </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">
                    <span v-if="scope.row.status==0">未读</span>
                    <span v-if="scope.row.status==1">已读</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="lookmessage(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="未读" name="third">
          <el-table
            :data="messageData"
            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.sender }}
                  </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.createTime }}
                  </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.content }}
                  </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">
                    <span v-if="scope.row.status==0">未读</span>
                    <span v-if="scope.row.status==1">已读</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="lookmessage(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-dialog
          title="提示"
          :visible.sync="dialogVisible1"
          width="30%"
          :before-close="handleClose1">
          <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="发件人" prop="pass">
              <el-input type="text" v-model="Form.sender" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收件人" prop="pass">
              <el-input type="text" v-model="Form.receiver" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发送时间" prop="pass">
              <el-input type="text" v-model="Form.createTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="pass">
              <el-input type="text" v-model="Form.content" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="yes()">确 定</el-button>
          </span>
        </el-dialog>

      </el-tabs>
    </el-drawer>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import {resetForm} from "@/utils/muyu";
import {
  addfalutcode,
  delfaultcode,
  getfaultcode,
  getfaultLabel,
  getfaultType, getunread,
  updfalutcode
} from "@/api/fault/faultcode";
import {changestatus, getmessagelist} from "@/api/fault/faultmessage";

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

      return {
        ruleForm:{
          pageNum:1,
          pageSize:10
        },
        total:0,
        tableData:[],
        dialogVisible: false,
        dialogVisible1: false,
        addForm:{},
        updForm:{},
        title:'',
        index:'',
        faultType:[],
        faultLabel:[],
        drawer:false,
        activeName: 'first',
        messageData:[],
        messageform:{
          status:''
        },
        messagenumber:'',
        Form:{}

      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      resetForm,
      //查询
      submitForm(){
        this.getfaultcode();
      },
      //故障码展示
      getfaultcode(){
        getfaultcode(this.ruleForm).then(response=>{
          console.log(response.data)
          this.tableData=response.data.faultCodeListRespList
          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()
      },
      //去新增故障码页面
      tofalutcode(num){
        this.dialogVisible=true
        this.index=num
        this.title='新增'
        this.getfaultType()
      },
      //去修改故障码页面
      handleEdit(row,num){
        this.dialogVisible=true
        this.index=num
        this.title='修改'
        this.updForm={
          faultcodeId: row.faultcodeId,
          faultlabelId: row.faultlabelId,
          faultcodeNumber: row.faultcodeNumber,
          faultGroup: row.faultGroup,
          faultBit: row.faultBit,
          faultValue: row.faultValue,
          isWarning: row.isWarning
        }
        this.getfaultLabel()
      },
      //关闭新增、修改故障码页面
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //故障码分类
      getfaultType(){
        getfaultType().then(response=>{
          this.faultType=response.data
        })
      },
      //故障名称
      getfaultLabel(){
        getfaultLabel().then(response=>{
            this.faultLabel=response.data
        })
      },
      //新增故障码
      addfalutcode(){
        addfalutcode(this.addForm).then(response=>{
          alert(response.msg);
          if (response.code==200){
            this.dialogVisible=false
            this.index=''
            this.getfaultcode()
          }
        })
      },
      //修改故障码
      updfalutcode(){
        updfalutcode(this.updForm).then(response=>{
          alert(response.msg);
          if (response.code==200){
            this.dialogVisible=false
            this.index=''
            this.getfaultcode()
          }
        })
      },
      //删除故障码
      handleDelete(row){
        alert(JSON.stringify(row))
        delfaultcode(row.messageTypeId).then(response=>{
          alert(response.msg);
          if (response.code==200){
            this.getfaultcode()
          }
        })
      },
      //打开消息确认
      openmessage(){
        this.drawer=true
        this.getmessagelist()
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.getmessagelist()
      },
      //消息列表
      getmessagelist(){
        if (this.activeName=='first'){
          this.messageform.status=''
        }
        if (this.activeName=='second'){
          this.messageform.status=1
        }
        if (this.activeName=='third'){
          this.messageform.status=0
        }
        getmessagelist(this.messageform).then(response=>{
          this.messageData=response.data
        })
      },
      //查看消息
      lookmessage(row){
        this.dialogVisible1=true
        this.Form={
          id:row.id,
          sender: row.sender,
          receiver: row.receiver,
          createTime: row.createTime,
          content: row.content
        }
        //改变状态
        changestatus(row).then(response=>{
            if (response.code==200){
              this.getmessagelist()
            }
        })
      },
      //未读消息
      getunread(){
        getunread().then(response=>{
          this.messagenumber=response.data.length
        })
      },
      handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      yes(){
        this.dialogVisible1=false
        this.getfaultcode()
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getfaultcode();
      this.getmessagelist()
      this.getunread()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
