<<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
      <el-form-item label="故障码" prop="troubleCode">
        <el-input
          v-model="queryParams.troubleCode"
          clearable
          placeholder="请输入故障码"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="故障位" prop="troublePosition">
        <el-input
          v-model="queryParams.troublePosition"
          clearable
          placeholder="请输入故障位"
          @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetTroubleQuery">重置</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="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="single"
          icon="el-icon-edit"
          plain
          size="mini"
          type="success"
          @click="handleUpd"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="multiple"
          icon="el-icon-delete"
          plain
          size="mini"
          type="danger"
          @click="handleDel"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-download"
          plain
          size="mini"
          type="warning"
          @click="handleExe"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="故障码" prop="troubleCode"/>
<!--      <el-table-column align="center" label="故障类型" prop="typeName"/>-->
      <el-table-column align="center" label="故障类型">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.typeId===1">电池故障</el-tag>
              <el-tag size="medium" v-if="scope.row.typeId===2">车体故障</el-tag>
              <el-tag size="medium" v-if="scope.row.typeId===3">车尾故障</el-tag>
              <el-tag size="medium" v-if="scope.row.typeId===4">轴轮故障</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="故障位" prop="troublePosition"/>
      <el-table-column align="center" label="故障值" prop="troubleValue"/>
      <el-table-column align="center" label="故障标签" prop="troubleTag"/>
      <el-table-column align="center" label="故障等级">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.gradeId===1">高级</el-tag>
            <el-tag size="medium" v-if="scope.row.gradeId===2">中级</el-tag>
            <el-tag size="medium" v-if="scope.row.gradeId===3">低级</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelet(scope.row.troubleId)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加对话框 -->
    <el-dialog  :visible.sync="opens" append-to-body width="500px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="故障码">
          <el-input v-model="form.troubleCode"/>
        </el-form-item>
        <el-form-item label="故障码位" prop="troublePosition">
          <el-input v-model="form.troublePosition"/>
        </el-form-item>
        <el-form-item label="故障码值" prop="troubleValue">
          <el-input v-model="form.troubleValue"/>
        </el-form-item>
        <el-form-item label="故障码标签" prop="troubleTag">
          <el-input v-model="form.troubleTag"/>
        </el-form-item>
        <el-form-item label="故障码类型" prop="typeId">
          <el-select v-model="form.typeId" placeholder="请选择故障类型">
            <el-option v-for="item in type" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障码等级" prop="gradeId">
          <el-select v-model="form.gradeId">
            <el-option v-for="item in grade" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAdd">添 加</el-button>
        <el-button @click="cance">取 消</el-button>
      </div>
    </el-dialog>

    <!--修改对话框-->
    <el-dialog  :visible.sync="open" append-to-body width="500px">
      <el-form ref="fore" :model="fore" label-width="80px">
        <el-form-item label="故障码">
          <el-input v-model="fore.troubleCode"/>
        </el-form-item>
        <el-form-item label="故障码位" prop="troublePosition">
          <el-input v-model="fore.troublePosition"/>
        </el-form-item>
        <el-form-item label="故障码值" prop="troubleValue">
          <el-input v-model="fore.troubleValue"/>
        </el-form-item>
        <el-form-item label="故障码标签" prop="troubleTag">
          <el-input v-model="fore.troubleTag"/>
        </el-form-item>
        <el-form-item label="故障码类型" prop="typeId">
          <el-select v-model="form.typeId" placeholder="请选择故障类型">
            <el-option v-for="item in type" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障码等级" prop="gradeId">
          <el-select v-model="form.gradeId">
            <el-option v-for="item in grade" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpd">修 改</el-button>
        <el-button @click="cance">取 消</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSize"
      @current-change="handleCurrent"
      :current-page="queryParams.pageNum"
      :page-sizes = "[2, 3 , 5, 10]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100"></el-pagination>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  getAddTrouble,
  getDelTrouble,
  getTroubleGrade,
  getTroubleType,
  getUpdateTrouble,
  listTrouble
} from '@/api/couplet/trouble'

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

      return {
        queryParams:{
          pageNum : 1,
          pageSize : 10,
          troubleCode:'',
          troublePosition:''
        },
        typeList1:[],
        loading: true,
        //显示搜索条件
        showSearch:true,
        //非单个禁用
        single:true,
        //非多个禁用
        multiple:true,
        //列表数据
        dataList:[],
        // 总条数
        total: 0,
        //选中
        ids:[],
        // 是否显示弹出层
        open: false,
        opens: false,
        // 表单参数
        form: {},
        fore:{},
        type:[],
        grade:[]
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      getList() {
        this.loading =true;
        listTrouble(this.addDateRange(this.queryParams)).then(res =>{
          this.dataList = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
      },
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.troubleId)
        this.single = selection.length !=1
        this.multiple = !selection.length
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList()
      },
      resetTroubleQuery() {
        this.resetForm("queryForm")
        this.handleQuery()
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.opens = true;
      },
      handleUpd() {
        this.open = true;
      },
      cance() {
        this.open = false;
        this.reset();
      },
      handleUpdate(data) {
        this.fore = data
        this.open = true
      },
      submitAdd() {
        getAddTrouble(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.opens = false;
          this.getList();
        });
        this.opens = true;
      },
      submitUpd() {
        getUpdateTrouble(this.fore).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
        this.open = true;
      },
      handleDel() {

      },
      handleDelet(troubleId) {
        getDelTrouble(troubleId).then(res =>{
          this.$modal.msgSuccess("删除成功");
          this.getList();
        })
      },
      handleExe(){

      },
      changTypeId() {
        getTroubleType().then(res => {
          this.type = res
        })
      },
      changGradeId() {
        getTroubleGrade().then(res => {
          this.grade = res
        })
      },
      handleSize(val) {
        this.queryParams.pageSize = val
        this.getList()
      },
      handleCurrent(val) {
        this.queryParams.pageNum = val
        this.getList()
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getList()
      this.changTypeId()
      this.changGradeId()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
