<template>
  <div>
    <el-card>
      <el-radio-group v-model="machineShop">
        <el-radio v-for="shop in machineShops" :key="shop.车间代码" :label="shop.车间代码" @change="pageCurrent = 1;searchTable1()">{{ shop.车间名称 }}</el-radio>
      </el-radio-group>
    </el-card>
    <el-row>
      <el-col style="width: 400px">
        <el-card style="height: 700px">
          <div style="padding: 6px;background-color:#F5F5F5;width: 100%">
            <el-button style="margin-left:80%;font-size: 26px" type="text" icon="el-icon-circle-plus-outline" @click="addProductionLine"/>
          </div>
          <el-table
            v-loading="loading"
            :data="tableData"
            :header-cell-style="tableHeader"
            :cell-style="tableCell"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            tooltip-effect="dark"
            style="width: 100%;"
            height="600px"
            highlight-current-row
            @row-click="handleRowClick">
            <el-table-column align="center" label="产线名称" prop="ProductionLine" min-width="200px" show-overflow-tooltip>
              <template slot-scope="scope">
                <template>
                  <span>{{ scope.row.产线名称 }}</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column align="center" label="编辑" min-width="100px">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-edit" size="mini" @click="editProductionLine(scope.row)"/>
                <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)"/>
              </template>
            </el-table-column>
          </el-table>
          <!--          <div class="block" style="margin-top: 10px;">-->
          <!--            <el-pagination-->
          <!--              v-if="!loading"-->
          <!--              :current-page="pageCurrent"-->
          <!--              :page-sizes="[100, 200, 300, 400, 2000]"-->
          <!--              :page-size="pageSize"-->
          <!--              :total="total"-->
          <!--              layout="total, sizes, prev, pager, next, jumper"-->
          <!--              @size-change="handleSizeChange"-->
          <!--              @current-change="handleCurrentChange"/>-->
          <!--          </div>-->
        </el-card>
      </el-col>
      <el-col style="width: 400px">
        <el-card style="height: 700px">
          <div style="padding: 6px;background-color:#F5F5F5">
            <el-button style="margin-left: 80%;font-size: 26px" type="text" icon="el-icon-circle-plus-outline" @click="addProcess('form')"/>
          </div>
          <el-table
            v-loading="loading"
            :data="tableData1"
            :header-cell-style="tableHeader"
            :cell-style="tableCell"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            tooltip-effect="dark"
            style="width: 100%;"
            height="600px">
            <el-table-column align="center" label="工序名称" prop="Process" min-width="200px" show-overflow-tooltip>
              <template slot-scope="scope">
                <template>
                  <span>{{ scope.row.工序名称 }}</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column align="center" label="编辑" min-width="100px">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-edit" @click="editProcess(scope.row)"/>
                <el-button type="text" icon="el-icon-delete" @click="handleDelete1(scope.row)"/>
              </template>
            </el-table-column>
          </el-table>
          <!--          <div class="block" style="margin-top: 10px;">-->
          <!--            <el-pagination-->
          <!--              v-if="!loading"-->
          <!--              :current-page="pageCurrent1"-->
          <!--              :page-sizes="[10, 20, 30, 40, 2000]"-->
          <!--              :page-size="pageSize1"-->
          <!--              :total="total1"-->
          <!--              layout="total, sizes, prev, pager, next, jumper"-->
          <!--              @size-change="handleSizeChange1"-->
          <!--              @current-change="handleCurrentChange1"/>-->
          <!--          </div>-->
        </el-card>
      </el-col>
    </el-row>
    <!--增加编辑产线-->
    <el-dialog :visible.sync="addDialogFormVisible" :title="addTitle" width="300px">
      <el-form ref="form" :model="form" label-position="top" label-width="120px" style="width: 100%;">
        <el-form-item label="产线名称" prop="productionName" style="margin-left: 20px">
          <el-input v-model="form.productionName" style="height:50px;width: 90%" class="input12" placeholder="" @input="addAble"/>
        </el-form-item>
        <el-form-item style="margin-left: 65px;margin-top: 40px;">
          <el-button v-if="productionAddEdit === 1" :disabled="addDisable" class="button11" @click="addSubmit('form')">确认</el-button>
          <el-button v-else :disabled="addDisable" class="button11" @click="editSubmit('form')">确认</el-button>
          <el-button class="button12" @click="addCallOff('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--删除产线-->
    <el-dialog :visible.sync="deleteDialogFormVisible" width="300px">
      <div style="margin-top:-90px;margin-left: 75px;margin-bottom: 40px;">
        <img :src="img" style="height: 75px;width: 100px;">
      </div>
      <span style="font-size: 30px;font-weight: 400;margin-left: 20px;">确实要删除吗？</span>
      <el-button class="button11" style="margin-top: 80px;margin-left:100px;" @click="deleteSubmit()">是</el-button>
      <el-button class="button12" @click="deleteCalloff">否</el-button>
    </el-dialog>
    <!--增加编辑工序-->
    <el-dialog :visible.sync="addDialogFormVisible1" :title="addTitle1" width="300px">
      <el-form ref="form1" :model="form1" label-position="top" label-width="120px" style="width: 100%;">
        <el-form-item label="工序名称" prop="processName" style="margin-left: 20px">
          <el-input v-model="form1.processName" style="height:50px;width: 90%" class="input12" placeholder="" @input="addAble1"/>
        </el-form-item>
        <el-form-item style="margin-left: 65px;margin-top: 40px;">
          <el-button v-if="processAddEdit === 1" :disabled="addDisable1" class="button11" @click="addSubmit1('form')">确认</el-button>
          <el-button v-else :disabled="addDisable1" class="button11" @click="editSubmit1('form')">确认</el-button>
          <el-button class="button12" @click="addCallOff1('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--删除工序-->
    <el-dialog :visible.sync="deleteDialogFormVisible1" width="300px">
      <div style="margin-top:-90px;margin-left: 75px;margin-bottom: 40px;">
        <img :src="img" style="height: 75px;width: 100px;">
      </div>
      <span style="font-size: 30px;font-weight: 400;margin-left: 20px;">确实要删除吗？</span>
      <el-button class="button11" style="margin-top: 80px;margin-left:100px;" @click="deleteSubmit1()">是</el-button>
      <el-button class="button12" @click="deleteCalloff1">否</el-button>
    </el-dialog>
  </div>
</template>
<script>
import img from '@/assets/404_images/20.png'
import { ExecDatabase } from '@/main'
export default {
  data() {
    return {
      img,
      machineShop: 1,
      machineShops: [],
      tableData: [],
      loading: false,
      addDialogFormVisible: false,
      addTitle: '',
      form: {
        productionName: ''
      },
      productionNum: '',
      productionAddEdit: '',
      addDisable: true,
      deleteDialogFormVisible: false,
      productionLine: '',
      tableData1: [],
      addDialogFormVisible1: false,
      addTitle1: '',
      form1: {
        processName: ''
      },
      processNum: '',
      processAddEdit: '',
      addDisable1: true,
      deleteDialogFormVisible1: false,
      total: 0, // 总条数
      pageSize: 2000, // 每页显示条数
      pageCurrent: 1, // 后台获取页
      total1: 0, // 总条数
      pageSize1: 2000, // 每页显示条数
      pageCurrent1: 1 // 后台获取页
    }
  },
  created() {
    this.searchTable()
    this.searchTable1()
  },
  methods: {
    // 修改table的样式
    tableHeader() {
      return 'background-color: rgb(250, 250, 250);' +
          'border-bottom: 3px rgb(170, 170, 170) solid;' +
          'color: rgb(35, 35, 35);' +
          'font-weight: 5000;' +
          'padding: 15px 10px'
    },
    tableCell() {
      return 'border-color: #E8E8E8;padding: 0px'
    },
    // 查询车间
    searchTable() {
      this.machineShops = []
      var param = []
      var Data = this.CreateData('11', '设备管理_车间_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.machineShops.push({
            车间名称: v.车间,
            车间代码: v.车间代码
          })
        })
      })
    },
    // 查询产线
    searchTable1() {
      this.loading = true
      this.tableData = []
      this.tableData1 = []
      this.productionLine = ''
      var param = []
      param[0] = ['车间代码', this.machineShop]
      param[1] = ['PageSize', this.pageSize]
      param[2] = ['PageCurrent', this.pageCurrent]
      param[3] = ['PageCount', '1111', 'int', '1']
      param[4] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '设备管理_产线_查询_分页', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          this.tableData.push({
            产线名称: v.产线名称,
            产线代码: v.产线代码
          })
        })
        this.loading = false
        this.total = parseInt(response.data.output[0].ItemCount)
      })
    },
    // 增加产线
    addProductionLine() {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.productionAddEdit = 1
      this.addDialogFormVisible = true
      this.addTitle = '增加产线'
      this.form.productionName = ''
      this.addAble()
    },
    // 增加输入产线
    addAble() {
      if (this.form.productionName) {
        this.addDisable = false
      } else {
        this.addDisable = true
      }
    },
    // 增加确定产线
    addSubmit() {
      var param = []
      param[0] = ['产线名称', this.form.productionName]
      param[1] = ['车间代码', this.machineShop]
      var Data = this.CreateData('12', '设备管理_产线_增加', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '信息增加成功',
            type: 'success'
          })
          this.pageCurrent = 1
          this.searchTable1()
        } else {
          this.$message.error('信息增加失败')
        }
      })
      this.addDialogFormVisible = false
    },
    // 增加取消产线
    addCallOff(formName) {
      this.addDialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 编辑产线
    editProductionLine(row) {
      this.productionAddEdit = 2
      this.addDialogFormVisible = true
      this.addTitle = '修改产线'
      this.form.productionName = row.产线名称
      this.productionNum = row.产线代码
      this.addAble()
    },
    // 修改确定产线
    editSubmit() {
      var param = []
      param[0] = ['产线代码', this.productionNum]
      param[1] = ['产线名称', this.form.productionName]
      var Data = this.CreateData('12', '设备管理_产线_修改', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '信息修改成功',
            type: 'success'
          })
          this.searchTable1()
        } else {
          this.$message.error('信息修改失败')
        }
      })
      this.addDialogFormVisible = false
    },
    // 删除产线
    handleDelete(row) {
      this.deleteDialogFormVisible = true
      this.productionNum = row.产线代码
    },
    // 删除确定产线
    deleteSubmit() {
      var param = []
      param[0] = ['产线代码', this.productionNum]
      var Data = this.CreateData('12', '设备管理_产线_删除', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.searchTable1()
        } else {
          this.$message.error('删除失败')
        }
      })
      this.deleteDialogFormVisible = false
    },
    // 删除取消产线
    deleteCalloff() {
      this.deleteDialogFormVisible = false
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    },
    // 点击产线当前行
    handleRowClick(row) {
      this.productionLine = row.产线代码
      this.pageCurrent1 = 1
      this.searchTable2()
    },
    // 查询工序
    searchTable2() {
      this.loading = true
      this.tableData1 = []
      var param = []
      param[0] = ['产线代码', this.productionLine]
      param[1] = ['PageSize', this.pageSize1]
      param[2] = ['PageCurrent', this.pageCurrent1]
      param[3] = ['PageCount', '1111', 'int', '1']
      param[4] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '设备管理_工序_查询_分页', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          this.tableData1.push({
            工序名称: v.工序名称,
            工序代码: v.工序代码
          })
        })
        this.loading = false
        this.total1 = parseInt(response.data.output[0].ItemCount)
      })
    },
    // 增加工序
    addProcess() {
      if (this.productionLine === null || this.productionLine === '') {
        this.$message({
          type: 'info',
          message: '请选择产线'
        })
      } else {
        this.processAddEdit = 1
        this.addDialogFormVisible1 = true
        this.addTitle1 = '增加工序'
        this.form1.processName = ''
        this.addAble1()
      }
    },
    // 增加输入工序
    addAble1() {
      if (this.form1.processName) {
        this.addDisable1 = false
      } else {
        this.addDisable1 = true
      }
    },
    // 增加确定工序
    addSubmit1() {
      var param = []
      param[0] = ['工序名称', this.form1.processName]
      param[1] = ['产线代码', this.productionLine]
      var Data = this.CreateData('12', '设备管理_工序_增加', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '信息增加成功',
            type: 'success'
          })
          this.pageCurrent1 = 1
          this.searchTable2()
        } else {
          this.$message.error('信息增加失败')
        }
      })
      this.addDialogFormVisible1 = false
    },
    // 增加取消工序
    addCallOff1(formName) {
      this.addDialogFormVisible1 = false
      this.$refs[formName].resetFields()
    },
    // 编辑工序
    editProcess(row) {
      this.processAddEdit = 2
      this.addDialogFormVisible1 = true
      this.addTitle1 = '修改工序'
      this.form1.processName = row.工序名称
      this.processNum = row.工序代码
      this.addAble1()
    },
    // 修改确定工序
    editSubmit1() {
      var param = []
      param[0] = ['工序代码', this.processNum]
      param[1] = ['工序名称', this.form1.processName]
      var Data = this.CreateData('12', '设备管理_工序_修改', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '信息修改成功',
            type: 'success'
          })
          this.searchTable2()
        } else {
          this.$message.error('信息修改失败')
        }
      })
      this.addDialogFormVisible1 = false
    },
    // 删除工序
    handleDelete1(row) {
      this.deleteDialogFormVisible1 = true
      this.processNum = row.工序代码
    },
    // 删除确定工序
    deleteSubmit1() {
      var param = []
      param[0] = ['工序代码', this.processNum]
      var Data = this.CreateData('12', '设备管理_工序_删除', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.searchTable2()
        } else {
          this.$message.error('删除失败')
        }
      })
      this.deleteDialogFormVisible1 = false
    },
    // 删除取消工序
    deleteCalloff1() {
      this.deleteDialogFormVisible1 = false
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable1()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable1()
    },
    handleSizeChange1(val) {
      this.pageCurrent1 = 1
      this.pageSize1 = val
      this.searchTable2()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchTable2()
    }
  }
}
</script>

<style scoped>
  >>>.el-dialog__header {
    padding-left: 50px;
  }
  >>>.el-radio__label {
    font-size: 18px;
    padding-left: 10px;
  }
  >>>.el-radio {
    color: #606266;
    font-weight: 500;
    line-height: 2;
    cursor: pointer;
    outline: 0;
    margin-right: 30px;
  }
</style>
