<template>
    <div class="app-container">
      <el-card>
        <div>
          <el-button
            v-if="checkPermission(['equipment_create'])"
            type="primary"
            icon="el-icon-plus"
          >
            新增
          </el-button>
          <el-select
            v-model="timeType"
            placeholder="设备名称"
            clearable
            style="width: 120px"
            class="filter-item"
            @change="handleFilter"
        >
            <el-option
            v-for="item in timeOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            />
        </el-select>
          <el-select
            v-model="timeType"
            placeholder="维修策略"
            clearable
            style="width: 120px"
            class="filter-item"
            @change="handleFilter"
        >
            <el-option
            v-for="item in timeOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            />
        </el-select>
        
        <el-select
            v-model="timeType"
            placeholder="故障类型"
            clearable
            style="width: 120px"
            class="filter-item"
            @change="handleFilter"
        >
            <el-option
            v-for="item in timeOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            />
        </el-select>
          <el-input
            v-model="listQuery.search"
            placeholder="报停单号"
            style="width: 300px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </div>
      </el-card>
      <el-card shadow="false">
        <el-table
          v-loading="listLoading"
          :data="tableData.results"
          border
          fit
          stripe
          highlight-current-row
          height="100"
          v-el-height-adaptive-table="{bottomOffset: 42}"
        >
          <el-table-column label="序号" type="index" width="80"/>
          
          <el-table-column label="报停编号" prop="number" min-width="120">
          </el-table-column>
          <el-table-column label="维修策略" prop="tactics" min-width="120">
          </el-table-column>
          <el-table-column label="设备名称" prop="name" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="故障类型" prop="type" min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="故障分析" prop="analyse" min-width="120">
          </el-table-column>
          <el-table-column label="录入人" prop="creater" min-width="120">
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            min-width="120px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary">编辑</el-link>
              <el-link type="danger">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="tableData.count > 0"
          :total="tableData.count"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.page_size"
          @pagination="getList"
        />
      </el-card>
    </div>
  </template>
  <script>
    import {getpEquipmentList, createEquipment, updateEquipment, deleteEquipment} from "@/api/equipment";
    import {getUserList} from "@/api/user";
    import {getOrgList} from "@/api/org";
    import checkPermission from "@/utils/permission";
  
  
    import {genTree} from "@/utils";
    import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
    const defaultequipment = {
      name: "",
      number: "",
    };
    export default {
      components: {Pagination},
      data() {
        return {
          equipment: defaultequipment,
          tableData: {
            count: 5,
            results:[
              {number:'RO2021030104588034',tactics:'内部维修',name:'底中框生产线',type:'机械故障',analyse:'油缸密封圈损坏',creater:'陈帅'},
              {number:'RO2021030104574919',tactics:'内部维修',name:'剪板机-4000',type:'机械故障',analyse:'氮气缸气压过低',creater:'陈帅'},
              {number:'RO2021030104554096',tactics:'内部维修',name:'光纤激光机2',type:'机械故障',analyse:'系统重新设定',creater:'陈帅'},
              {number:'RO2021030104501203',tactics:'内部维修',name:'底中框生产线',type:'机械故障',analyse:'换向阀密封圈损坏',creater:'陈帅'},
              {number:'RO2021030104594101',tactics:'内部维修',name:'过道生产线',type:'机械故障',analyse:'冲孔摸具故障',creater:'陈帅'},
            ]
          },
          listQuery: {
            page: 1,
            page_size: 20,
          },
          keeperOptions: [],
          depOptions: [],
          listLoading: true,
          dialogVisible: false,
          dialogType: "new",
          rule1: {
            name: [{required: true, message: "请输入", trigger: "blur"}],
            number: [{required: true, message: "请输入", trigger: "blur"}],
            type: [{required: true, message: "请输入", trigger: "blur"}],
            model: [{required: true, message: "请输入", trigger: "blur"}],
            state: [{required: true, message: "请选择", trigger: "blur"}],
            belong_dept: [{required: true, message: "请选择", trigger: "blur"}]
          },
        };
      },
      computed: {},
      watch: {},
      created() {
        this.getList();
        this.getUserList();
        this.getOrgList();
      },
      methods: {
        checkPermission,
  
        //设备列表
        getList() {
          this.listLoading = true;
          this.listQuery.type = 1;
          getpEquipmentList(this.listQuery).then((response) => {
            if (response.data) {
              this.equipmentList = response.data;
            }
            this.listLoading = false;
          });
        },
  
        //组员列表
        getUserList() {
          getUserList({pageoff: true}).then((res) => {
            this.keeperOptions = genTree(res.data);
          });
        },
  
        //部门列表
        getOrgList() {
          getOrgList({pageoff: true}).then((res) => {
            this.depOptions = genTree(res.data);
          });
        },
  
        handleFilter() {
          this.listQuery.page = 1;
          this.getList();
        },
  
        resetFilter() {
          this.listQuery = {
            page: 1,
            page_size: 20,
          }
          this.getList();
        },
  
        handleCreate() {
          this.equipment = Object.assign({}, defaultequipment);
          this.dialogType = "new";
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.$refs["Form"].clearValidate();
          });
        },
  
        handleEdit(scope) {
          this.equipment = Object.assign({}, scope.row); // copy obj
          this.dialogType = "edit";
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.$refs["Form"].clearValidate();
          });
        },
  
        handleDelete(scope) {
          this.$confirm("确认删除?", "警告", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "error",
          })
            .then(async () => {
            //   
            })
            .catch((err) => {
              this.$message.error(err);
            });
        },
  
       
      },
    };
  </script>
  