<template>
  <div class="app-container">
    <!-- 搜索部分 -->
    <div>
      <el-form :model="search" inline v-show="search.showSearch">
        <el-form-item label="工序编码 ">
          <el-input v-model="search.stationCode" placeholder="输入工序编号"></el-input>
        </el-form-item>
        <el-form-item label="工序名称 ">
          <el-input v-model="search.stationName" placeholder="输入工序名称"></el-input>
        </el-form-item>
        <el-button icon="el-icon-search" circle @click="getList"></el-button>
      </el-form>
    </div>
    <!-- 按钮排 -->
    <div>
      <el-row :gutter="2">
        <el-col :span="1.5">
          <el-button type="primary" size="small" @click="addItem">增加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" size="small" @click="updataItem(true)" :disabled="updateDisable">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" size="small" @click="deleteItem(true)" :disabled="delDisable">删除</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="search.showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-row>
        <pagination
          :v-show="true"
          :total="pagination.total"
          :page.sync="pagination.pageNum"
          :limit.sync="pagination.pageSize"
          @pagination="getList"
        />
      </el-row>
    </div>
    <div>
      <vxe-table
        border
        ref="xTable1"
        align="center"
        :print-config="{}"
        :data="table.workstation"
        :loading="table.loading"
        @checkbox-change="selectChangeEvent"
        :row-config="{ isHover: true }"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column field="stationCode" title="工序编码" width="80"></vxe-column>
        <vxe-column field="stationName" title="工序名称" sortable></vxe-column>
        <vxe-colgroup title="所属产线">
          <vxe-column field="workline.lineCode" title="产线id" width="80"></vxe-column>
          <vxe-column field="workline.lineName" title="产线名称"></vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="所属车间">
          <vxe-column field="workline.lineCode" title="产线id" width="80"></vxe-column>
          <vxe-column field="workline.lineName" title="产线名称"></vxe-column>
        </vxe-colgroup>
        <vxe-column title="操作" show-overflow>
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="updataItem(false, scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteItem(false, scope.row)" class="delred">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        background
        :current-page.sync="pagination.pageNum"
        :page-size.sync="pagination.pageSize"
        :total="pagination.total"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="getList"
      >
      </vxe-pager>
    </div>

    <!-- 弹窗-- 修改和删除 -->
    <el-dialog :title="DMLdialog.title" :visible.sync="DMLdialog.visiable" width="600px" append-to-body>
      <el-form ref="DMLdialog" :model="DMLdialog.form" label-width="150px" label-position="left" :rules="DMLdialog.rules">
        <el-form-item label="工序编码 " prop="stationCode">
          <el-input v-model="DMLdialog.form.stationCode" placeholder="输入工序编码" ></el-input>
        </el-form-item>
        <el-form-item label="工序名称 " prop="stationName">
          <el-input v-model="DMLdialog.form.stationName" placeholder="输入工序名称"></el-input>
        </el-form-item>
        <el-form-item label="产线 ">
          <el-select v-model="DMLdialog.form.fkWorklineId" placeholder="请选择产线">
            <el-option
              v-for="item in DMLdialog.workLineOption"
              :key="item.id"
              :label="item.id + '_' + item.lineCode + '_' + item.lineName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkstationList, insertWorkstation, updateWorkstation, delWorkstation,getworkLineList } from '@/api/basisManagement/workstation.js'
export default {
  name: 'workstation',
  data() {
    return {
      //搜索框配置
      search: {
        stationCode: '',
        stationName: '',
        showSearch: true,
      },
      //表格
      table: {
        loading: true,
        workstation: [],
      },
      //分页
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      //新增修改数据项配置
      DMLdialog: {
        title: '',
        visiable: false,
        form: {
          stationCode: '',
          stationName: '',
          fkWorklineId:""

        },
        workLineOption:[],
        rules: {
          stationCode: [{ required: true, message: '工序编码不能为空', trigger: 'blur' }],
          stationName: [{ required: true, message: '工序名称不能为空', trigger: 'blur' }],
        },
      },
      //修改按钮
      updateDisable: true,
      //删除按钮
      delDisable: true,
      flag: 'update', //区分修改和删除
    }
  },
  created() {
    this.getList()
    this.getworkLineOption();
  },
  methods: {
    //获取表格数据
    getList() {
      const query = { ...this.search, ...this.pagination }
      delete query.showSearch
      getWorkstationList(query).then((res) => {
        if (res.code == 200) {
          this.table.loading = false
          this.pagination.total = res.data.item1
          this.table.workstation = res.data.item2
        }
      })
    },
    getworkLineOption()
    {
      getworkLineList().then((res)=>{
        if(res.code==200)
        this.DMLdialog.workLineOption=res.data;


      });
    },

    //行更新
    handleUpdate(row) {},
    //行删除
    handleDelete(row) {},
    selectChangeEvent({ checked }) {
      const records = this.$refs.xTable1.getCheckboxRecords()
      if (records.length == 1) {
        this.updateDisable = false
      } else {
        this.updateDisable = true
      }
      if (records.length > 0) {
        this.delDisable = false
      } else {
        this.delDisable = true
      }
    },
    //新增按钮
    addItem() {
      this.DMLdialog.title = '新增'
      this.DMLdialog.visiable = true
      this.flag = 'add'
    },
    //新增确认
    submitForm() {
      if (this.flag == 'update') {
        updateWorkstation(this.DMLdialog.form).then((res) => {
          if (res.code == 200 && res.data == 1) {
            this.$notify.success('修改成功')
            this.getList()
            this.DMLdialog.visiable = false
            this.reset()
          }
        })
      } else if (this.flag == 'add') {
        this.$refs['DMLdialog'].validate((valid) => {
          if (valid) {
            insertWorkstation(this.DMLdialog.form).then((res) => {
              if (res.code == 200) {
                this.getList()
                this.DMLdialog.visiable = false
                this.reset()
              }
            })
          }
        })
      }
    },
    cancel() {
      this.DMLdialog.visiable = false
      this.reset()
    },
    reset() {
      this.DMLdialog.form = {
        stationCode: '',
        stationName: '',
      }
      this.DMLdialog.form.resetFields()
    },
    //修改事件
    updataItem(flag, row) {
      this.DMLdialog.title = '修改'
      this.DMLdialog.visiable = true
      this.flag = 'update'
      if (!flag) {
        this.DMLdialog.form.stationCode = row.stationCode
        this.DMLdialog.form.stationName = row.stationName
        this.DMLdialog.form.id = row.id
        this.DMLdialog.form.fkWorklineId = row.fkWorklineId
      } else {
        const records = this.$refs.xTable1.getCheckboxRecords()
        if (records.length == 1) {
          this.DMLdialog.form.stationCode = records[0].stationCode
          this.DMLdialog.form.stationName = records[0].stationName
          this.DMLdialog.form.id = records[0].id
          this.DMLdialog.form.fkWorklineId = records[0].fkWorklineId
        }
      }
    },
    //删除事件
    deleteItem(flag, row) {
      if (!flag) {
        this.$modal
          .confirm('是否确认删除设备名称为"' + row.stationName + '"的数据项？')
          .then(function () {
            const array = []
            array.push(row.id)
            return delWorkstation(array)
          })
          .then(() => {
            this.getList()
            this.$modal.msgSuccess('删除成功')
          })
          .catch(() => {})
      } else {
        const records = this.$refs.xTable1.getCheckboxRecords()
        if (records.length > 0) {
          this.$modal
            .confirm('是否确认删除设备名称为"' + records.map((it) => it.deviceName) + '"的数据项？')
            .then(function () {
              return delWorkstation(records.map((it) => it.id))
            })
            .then(() => {
              this.getList()
              this.$modal.msgSuccess('删除成功')
            })
            .catch(() => {})
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.delred {
  ::v-deep .el-icon-delete {
    color: #f56c6c;
  }
  ::v-deep span {
    color: #f56c6c;
  }
}
</style>
