<template>
  <div class="JNPF-common-layout equipment_data">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="14">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="设备编码">
              <el-input v-model="query.eqCode" placeholder="请输入设备编码" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input v-model="query.eqName" placeholder="请输入设备名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备类型">
              <JnpfSelect v-model="query.eqType" placeholder="请选择设备类型" :options="eqTypeOptions" :props="eqTypeProps" clearable></JnpfSelect>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="启用状态">
              <JnpfSelect v-model="query.enabledStatus" placeholder="请选择" clearable :options="enabledStatusOptions"
                          :props="enabledStatusProps">
              </JnpfSelect>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备状态">
              <JnpfSelect v-model="query.eqStatus" placeholder="请选择设备状态" clearable :options="eqStatusOptions"
                          :props="eqStatusProps">
              </JnpfSelect>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门">
              <el-select v-model="query.deptId" placeholder="请选择部门" clearable>
                <el-option
                  v-for="item in deptList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="6">-->
<!--            <el-form-item label="所属产线">-->
<!--              <el-select v-model="query.lineId" placeholder="请选择产线" clearable>-->
<!--                <el-option-->
<!--                  v-for="item in lineList"-->
<!--                  :key="item.id"-->
<!--                  :label="item.name"-->
<!--                  :value="item.id">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="6">
            <el-form-item class="btn">
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <div>
            <el-button type="primary" icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">新建</el-button>
            <!--            <el-button type="danger" icon="el-icon-delete" :disabled="!multipleSelection.length" @click="batchDelete()">批量删除</el-button>-->
          </div>
          <div class="JNPF-common-head-right"></div>
        </div>
        <JNPF-table
          v-loading="listLoading"
          :data="list"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column prop="deptName" label="所属部门" align="center" min-width="100"/>
          <el-table-column prop="eqCode" label="设备编码" align="center" min-width="120"/>
          <el-table-column prop="eqName" label="设备名称" align="center" min-width="120"/>
          <el-table-column prop="eqType" label="设备类型" align="center" min-width="100">
            <template slot-scope="scope">
              {{ getEqTypeLabel(scope.row.eqType) }}
            </template>
          </el-table-column>
          <el-table-column prop="mode" label="型号" align="center" min-width="100"/>
          <el-table-column prop="manufacturer" label="生产厂家" align="center" min-width="120"/>
          <el-table-column prop="supplier" label="供应商" align="center" min-width="120">
            <template slot-scope="scope">
              {{ getSupplierName(scope.row.supplier) }}
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="责任人" align="center" min-width="80"/>
          <el-table-column prop="lineName" label="所属产线" align="center" min-width="100"/>
          <el-table-column prop="buyDate" label="购买日期" align="center" min-width="100" :formatter="jnpf.tableDateFormat1"/>
          <el-table-column prop="eqStatus" label="设备状态" align="center" min-width="80">
            <template slot-scope="scope">
              {{ getEqStatusLabel(scope.row.eqStatus) }}
            </template>
          </el-table-column>
          <el-table-column prop="enabledStatus" label="启用状态" align="center" min-width="80">
            <template slot-scope="scope">
              <el-tag :type="scope.row.enabledStatus == 1 ? 'success' : 'info'" size="small">
                {{ scope.row.enabledStatus == 1 ? '启用' : '未启用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center" min-width="150" show-overflow-tooltip/>
          <el-table-column prop="creatorTime" label="创建时间" align="center" min-width="150" :formatter="jnpf.tableDateFormat1"/>
          <el-table-column label="操作" fixed="right" align="center" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="addOrUpdateHandle(scope.row)">编辑</el-button>
              <el-button type="text" class="JNPF-table-delBtn" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                    @pagination="initData"/>
      </div>
    </div>
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" :deptList="deptList" :lineList="lineList" :supplierList="supplierList"/>
  </div>
</template>

<script>
import {customerOptions, deleteEquipment, getEquipmentList, getLabel, getLineList, getSupplierList} from "./equipment";
import {getDataInterfaceRes} from "@/api/systemData/dataInterface";
import {mapGetters} from "vuex";
import JNPFForm from "./form";
import jnpf from "@/utils/jnpf";

export default {
  name: "equipment",
  components: {
    JNPFForm,
  },
  data() {
    return {
      query: {
        eqCode: undefined,
        eqName: undefined,
        eqType: undefined,
        enabledStatus: undefined,
        deptId: undefined,
        lineId: undefined,
        eqStatus: undefined,
      },
      list: [],
      listLoading: false,
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "",
        sidx: "",
      },
      formVisible: false,
      deptList: [],
      lineList: [],
      supplierList: [],
      enabledStatusOptions: [
        {fullName: "启用", id: 1},
        {fullName: "未启用", id: 2},
      ],
      enabledStatusProps: {label: "fullName", value: "id"},
      eqTypeOptions: customerOptions.eqType || [],
      eqTypeProps: {label: "fullName", value: "id"},
      eqStatusOptions: customerOptions.eqStatus || [],
      eqStatusProps: {label: "fullName", value: "id"},
    };
  },
  computed: {
    jnpf() {
      return jnpf
    },
    ...mapGetters(["userInfo"]),
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {
    this.initData();
    this.getDeptList();
    this.getLineList();
    this.getSupplierList();
  },
  methods: {
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        dataType: 0,
      };
      Object.keys(_query).forEach(key => {
        if (_query[key] === undefined || _query[key] === null || _query[key] === '') {
          delete _query[key];
        }
      });

      getEquipmentList(_query).then((res) => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      }).catch(() => {
        this.listLoading = false;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getDeptList() {
      getDataInterfaceRes('811583643129479301').then(res => {
        this.deptList = res.data || [];
        console.log(this.deptList);
      }).catch(() => {
        this.deptList = [];
      });
    },
    getLineList() {
      getLineList().then(res => {
        this.lineList = res.data || [];
      });
    },
    getSupplierList() {
      getSupplierList().then(res => {
        this.supplierList = res.data || [];
      }).catch(() => {
        this.supplierList = [];
      });
    },
    addOrUpdateHandle(row) {
      let id = row ? row.id : "";
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.JNPFForm.init(id);
      });
    },
    handleDel(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteEquipment(row.id).then(res => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.initData();
            }
          });
        });
      }).catch(() => {
      });
    },
    batchDelete() {
      this.$confirm('此操作将永久删除选中的 ' + this.multipleSelection.length + ' 条数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        const ids = this.multipleSelection.map(item => item.id);
        Promise.all(ids.map(id => deleteEquipment(id))).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.initData();
            }
          });
        });
      }).catch(() => {
      });
    },
    search() {
      this.listQuery.currentPage = 1;
      this.listQuery.pageSize = 20;
      this.initData();
    },
    refresh(isRefresh) {
      this.formVisible = false;
      if (isRefresh) this.search();
    },
    reset() {
      this.query = {
        eqCode: undefined,
        eqName: undefined,
        eqType: undefined,
        eqStatus: undefined,
        enabledStatus: undefined,
        deptId: undefined,
        lineId: undefined,
      };
      this.search();
    },
    getEqTypeLabel(value) {
      return getLabel('eqType', value);
    },
    getEqStatusLabel(value) {
      return getLabel('eqStatus', value);
    },
    getSupplierName(supplierId) {
      if (!supplierId) return '-';
      const supplier = this.supplierList.find(item => String(item.id) === String(supplierId));
      return supplier ? supplier.supplierName : supplierId;
    },
  },
};
</script>
