<template>
  <div class="app-container">
    <el-card style="margin-bottom: 20px">
      <el-row>
        <span>机床编号:</span>
        <el-select v-model="machineNumberValue" filterable clearable placeholder="机床编号" size="small">
          <el-option
            v-for="item in machineNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <div style="float: left">{{ item.label }}</div>
            <div style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</div>
          </el-option>
        </el-select>
        <el-button type="success" size="small" icon="el-icon-search" style="margin-left:10px" @click="searchTable()">查询</el-button>
      </el-row>
    </el-card>
    <div style="width: 49.8%; float: left;margin-left: 2px">
      <el-card>
        <el-row>
          <div style="margin-left: 43%;margin-top: 20px;font-weight: bold;font-size: 24px">关键节点记录</div>
        </el-row>
        <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" style="margin-left: 90%;margin-top: 15px" @click="handleAdd()">增加</el-button>
        <el-table
          v-loading="loading"
          :data="tableData"
          :row-class-name="tableRowClassName"
          border
          style="width: 100%;max-height: 450px;margin-top: 10px"
          height="450px"
          highlight-current-row
          size="small">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50"/>
          <el-table-column label="关键节点" align="center">
            <template slot-scope="scope">
              {{ scope.row.关键节点 }}
            </template>
          </el-table-column>
          <el-table-column label="完成情况" align="center" width="100px">
            <template slot-scope="scope">
              {{ scope.row.完成情况 }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              {{ scope.row.备注 }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px;">
          <el-pagination
            :current-page="pageCurrent"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :total="total"
            style="display:inline-block;width:50%"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </el-card>
    </div>
    <div style="width: 49.8%; float: right; margin-right: 2px">
      <el-card>
        <el-row>
          <div style="margin-left: 43%;margin-top: 20px;font-weight: bold;font-size: 24px">每日工作记录</div>
        </el-row>
        <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" style="margin-left: 90%;margin-top: 15px" @click="handleAdd1()">增加</el-button>
        <el-table v-loading="loading" :data="tableData1" border style="width: 100%;max-height: 450px;margin-top: 10px" height="450px" highlight-current-row size="small">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50"/>
          <el-table-column label="工作情况" align="center">
            <template slot-scope="scope">
              {{ scope.row.工作情况 }}
            </template>
          </el-table-column>
          <el-table-column label="工作日期" align="center" width="130px">
            <template slot-scope="scope">
              {{ scope.row.工作日期 }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit1(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete1(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px;">
          <el-pagination
            :current-page="pageCurrent1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize1"
            :total="total1"
            style="display:inline-block;width:50%"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"/>
        </div>
      </el-card>
    </div>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" center width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="125px" class="demo-ruleForm">
        <el-form-item label="关键节点" prop="关键节点">
          <el-input v-model="form.关键节点" placeholder="关键节点" size="small"/>
        </el-form-item>
        <el-form-item label="完成情况" prop="完成情况">
          <el-select v-model="form.完成情况" placeholder="完成情况" size="small">
            <el-option
              v-for="item in Completion"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.备注" placeholder="备注" type="textarea" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取消</el-button>
        <el-button v-show="title==='增加关键节点'" type="primary" @click="submitAdd()">确定</el-button>
        <el-button v-show="title==='编辑关键节点'" type="primary" @click="submitEdit()">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title1" :visible.sync="dialogFormVisible1" center width="400px">
      <el-form ref="form1" :model="form1" :rules="rules1" label-position="left" label-width="125px" class="demo-ruleForm">
        <el-form-item label="工作情况" prop="工作情况">
          <el-input v-model="form1.工作情况" placeholder="工作情况" size="small"/>
        </el-form-item>
        <el-form-item label="工作日期" prop="工作日期">
          <el-date-picker
            v-model="form1.工作日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            size="small"
            placeholder="工作日期"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1=false">取消</el-button>
        <el-button v-show="title1==='增加工作记录'" type="primary" @click="submitAdd1()">确定</el-button>
        <el-button v-show="title1==='编辑工作记录'" type="primary" @click="submitEdit1()">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { initProject, searchTable, searchTable1, addData, editData, deleteData, addData1, editData1, deleteData1 } from '@/api/Assembly/InstallationAndMonitoring'

export default {
  data() {
    return {
      machineNumberValue: '',
      machineNumber: [],
      loading: false,
      loading1: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      title: '',
      title1: '',
      Completion: [{
        value: '未完成',
        label: '未完成'
      }, {
        value: '完成',
        label: '完成'
      }],
      form: {
        关键节点: '',
        完成情况: '',
        备注: ''
      },
      rules: {
        关键节点: [{ required: true, message: '请输入关键节点', trigger: 'blur' }],
        完成情况: [{ required: true, message: '请选择完成情况', trigger: 'change' }]
      },
      form1: {
        工作情况: '',
        工作日期: ''
      },
      rules1: {
        工作情况: [{ required: true, message: '请输入工作记录', trigger: 'blur' }],
        工作日期: [{ required: true, message: '请选择工作日期', trigger: 'change' }]
      },
      KeyNodeNum: '',
      WorkRecordNum: '',
      tableData: [],
      tableData1: [],
      pageSize: 10,
      pageSize1: 10,
      pageCurrent: 1,
      pageCurrent1: 1,
      total: 0,
      total1: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      initProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.machineNumber.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号,
            name: response.data[i].项目名称
          })
        }
      })
    },
    searchTable() {
      if (this.machineNumberValue !== '') {
        searchTable(this.machineNumberValue, this.pageCurrent, this.pageSize).then(response => {
          console.log(response)
          this.tableData = response.data.rows
          this.total = response.data.total
        })
        searchTable1(this.machineNumberValue, this.pageCurrent1, this.pageSize1).then(response => {
          for (let i = 0; i < response.data.rows.length; i++) {
            if (response.data.rows[i].工作日期 !== '') {
              response.data.rows[i].工作日期 = response.data.rows[i].工作日期.split(' ')[0]
            }
          }
          this.tableData1 = response.data.rows
          this.total1 = response.data.total
        })
      } else {
        this.$message.warning('请选择机床')
      }
    },
    handleAdd() {
      if (this.machineNumberValue !== '') {
        this.addForm('form', [this.dialogFormVisible = true, this.title = '增加关键节点'])
      } else {
        this.$message.warning('请先选择机床')
      }
    },
    submitAdd() {
      this.addTable(addData, [this.machineNumberValue, this.form.关键节点, this.form.完成情况, this.form.备注], 'form', function() { this.dialogFormVisible = false; this.searchTable() })
    },
    handleEdit(row) {
      this.editForm(row, 'form', [this.title = '编辑关键节点', this.KeyNodeNum = row.关键节点流水号, this.dialogFormVisible = true])
    },
    submitEdit() {
      this.editTable(editData, [this.KeyNodeNum, this.form.关键节点, this.form.完成情况, this.form.备注], 'form', function() { this.searchTable(); this.dialogFormVisible = false })
    },
    handleDelete(row) {
      this.deleteRow(deleteData, row.关键节点流水号, function() { this.searchTable() })
    },
    handleAdd1() {
      if (this.machineNumberValue !== '') {
        this.addForm('form1', [this.dialogFormVisible1 = true, this.title1 = '增加工作记录'])
      } else {
        this.$message.warning('请先选择机床')
      }
    },
    submitAdd1() {
      this.addTable(addData1, [this.machineNumberValue, this.form1.工作情况, this.form1.工作日期], 'form1', function() { this.dialogFormVisible1 = false; this.searchTable() })
    },
    handleEdit1(row) {
      this.editForm(row, 'form1', [this.title1 = '编辑工作记录', this.WorkRecordNum = row.工作记录流水号, this.dialogFormVisible1 = true])
    },
    submitEdit1() {
      this.editTable(editData1, [this.WorkRecordNum, this.form1.工作情况, this.form1.工作日期], 'form1', function() { this.dialogFormVisible1 = false; this.searchTable() })
    },
    handleDelete1(row) {
      this.deleteRow(deleteData1, row.工作记录流水号, function() { this.searchTable() })
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      searchTable(this.machineNumberValue, this.pageCurrent, this.pageSize).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
      })
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      searchTable(this.machineNumberValue, this.pageCurrent, this.pageSize).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
      })
    },
    handleSizeChange1(val) {
      this.pageCurrent1 = 1
      this.pageSize1 = val
      searchTable1(this.machineNumberValue, this.pageCurrent1, this.pageSize1).then(response => {
        for (let i = 0; i < response.data.rows.length; i++) {
          if (response.data.rows[i].工作日期 !== '') {
            response.data.rows[i].工作日期 = response.data.rows[i].工作日期.split(' ')[0]
          }
        }
        this.tableData1 = response.data.rows
        this.total1 = response.data.total
      })
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      searchTable1(this.machineNumberValue, this.pageCurrent1, this.pageSize1).then(response => {
        for (let i = 0; i < response.data.rows.length; i++) {
          if (response.data.rows[i].工作日期 !== '') {
            response.data.rows[i].工作日期 = response.data.rows[i].工作日期.split(' ')[0]
          }
        }
        this.tableData1 = response.data.rows
        this.total1 = response.data.total
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.完成情况 === '完成') {
        return 'completion'
      }
    }
  }
}
</script>

<style scoped>
  span{
    margin: 10px 0px 10px 10px;
  }
</style>
<style>
  .el-table .completion {
    background: limegreen;
  }
</style>
