<template>
  <div class="app-container">
    <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: 80%;margin-top: 15px" @click="handleAdd1()">新增</el-button>
          <el-table
            :data="tableData"
            border
            style="width: 100%;max-height: 450px;margin-top: 10px"
            height="350px"
            size="mini"
            stripe
            highlight-current-row>
            <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" fixed="right" width="200px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  plain
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </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: 80%;margin-top: 15px" @click="handleAdd2()">新增</el-button>
          <el-table :data="tableData1" border style="width: 100%;max-height: 450px;margin-top: 10px" stripe height="350px" highlight-current-row size="mini">
            <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" fixed="right" width="200px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
    <el-card>
      <div style="width: 32.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:75%;margin-top: 15px" @click="handleAdd3()">新增</el-button>
          <el-table
            :data="tableData2"
            border
            style="width: 100%;max-height: 450px;margin-top: 10px"
            height="350px"
            stripe
            highlight-current-row
            size="mini">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              min-width="50"/>
            <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="150px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div style="width: 32.8%; float: right; margin-right: 6px;margin-left: 6px">
        <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:75%;margin-top: 15px" @click="handleAdd4()">增加</el-button>
          <el-table :data="tableData3" border style="width: 100%;max-height: 450px;margin-top: 10px" height="350px" stripe highlight-current-row size="mini">
            <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" fixed="right" width="150px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div style="width: 32.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:75%;margin-top: 15px" @click="handleAdd5()">增加</el-button>
          <el-table :data="tableData4" border style="width: 100%;max-height: 450px;margin-top: 10px" height="350px" stripe highlight-current-row size="mini">
            <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" fixed="right" width="150px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
    <el-card>
      <div style="width: 35.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:75%;margin-top: 15px" @click="handleAdd6()">增加</el-button>
          <el-table :data="tableData5" border style="width: 100%;max-height: 450px;margin-top: 10px" height="350px" highlight-current-row stripe size="mini" @row-click="searchTesting">
            <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" fixed="right" width="200px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div style="width: 63.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:80%;margin-top: 15px" @click="handleAdd7()">增加</el-button>
          <el-table :data="tableData6" border style="width: 100%;max-height: 450px;margin-top: 10px" height="350px" stripe highlight-current-row size="mini">
            <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" fixed="right" width="200px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center width="400px">
      <el-form label-position="left" label-width="115px" class="demo-ruleForm">
        <el-form-item v-show="title==='增加不合格原因'" label="不合格原因" prop="不合格原因">
          <el-input v-model="Reasons" size="small" style="width: 200px"/>
        </el-form-item>
        <el-form-item v-show="title==='增加不合格处理'" label="不合格处理" prop="不合格处理">
          <el-input v-model="Handle" size="small" style="width: 200px"/>
        </el-form-item>
        <el-form-item v-show="title==='增加质检尺寸'" label="质检尺寸" prop="质检尺寸">
          <el-input v-model="Size" size="small" style="width: 200px"/>
        </el-form-item>
        <el-form-item v-show="title==='增加质检外观'" label="质检外观" prop="质检外观">
          <el-input v-model="Appearance" size="small" style="width: 200px"/>
        </el-form-item>
        <el-form-item v-show="title==='增加质检形位'" label="质检形位" prop="质检形位">
          <el-input v-model="Position" size="small" style="width: 200px"/>
        </el-form-item>
        <el-form-item v-show="title==='增加检测项'" label="检测项" prop="检测项">
          <el-input v-model="Test" size="small" style="width: 200px"/>
        </el-form-item>
        <el-form-item v-show="title==='增加检测项明细'" label="检测项明细" prop="检测项明细">
          <el-input v-model="Testing" size="small" style="width: 200px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取消</el-button>
        <el-button type="primary" @click="submitAdd()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>import { initReasons, initHandle, initSize, initAppearance, initPosition, initTest, initTesting, addReasons, addHandle, addSize, addAppearance, addPosition,
  addTest, addTesting, deleteReasons, deleteHandle, deleteSize, deleteAppearance, deletePosition, deleteTest, deleteTesting } from '@/api/Assembly/QualityBasicData'
export default {
  data() {
    return {
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      Reasons: '',
      ReasonsValue: '',
      Handle: '',
      HandleValue: '',
      Size: '',
      Test: '',
      Testing: '',
      SizeValue: '',
      Appearance: '',
      AppearanceValue: '',
      Position: '',
      PositionValue: '',
      value1: '',
      dialogFormVisible: false,
      title: ''
    }
  },
  created() {
    this.searchReasons()
    this.searchHandle()
    this.searchSize()
    this.searchAppearance()
    this.searchPosition()
    this.searchTest()
  },
  methods: {
    searchReasons() {
      initReasons().then(response => {
        this.tableData = response.data
      })
    },
    searchHandle() {
      initHandle().then(response => {
        this.tableData1 = response.data
      })
    },
    searchSize() {
      initSize().then(response => {
        this.tableData2 = response.data
      })
    },
    searchAppearance() {
      initAppearance().then(response => {
        this.tableData3 = response.data
      })
    },
    searchPosition() {
      initPosition().then(response => {
        this.tableData4 = response.data
      })
    },
    searchTest() {
      initTest().then(response => {
        this.tableData5 = response.data
      })
    },
    searchTesting(row) {
      this.value1 = row.检测项流水号
      initTesting(row.检测项流水号).then(response => {
        this.tableData6 = response.data
      })
    },
    handleAdd1() {
      this.title = '增加不合格原因'
      this.dialogFormVisible = true
    },
    handleAdd2() {
      this.title = '增加不合格处理'
      this.dialogFormVisible = true
    },
    handleAdd3() {
      this.title = '增加质检尺寸'
      this.dialogFormVisible = true
    },
    handleAdd4() {
      this.title = '增加质检外观'
      this.dialogFormVisible = true
    },
    handleAdd5() {
      this.title = '增加质检形位'
      this.dialogFormVisible = true
    },
    handleAdd6() {
      this.title = '增加检测项'
      this.dialogFormVisible = true
    },
    handleAdd7() {
      this.title = '增加检测项明细'
      this.dialogFormVisible = true
    },
    submitAdd() {
      if (this.title === '增加不合格原因') {
        addReasons(this.Reasons).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.dialogFormVisible = false
            this.searchReasons()
          } else {
            this.$message.error('增加失败')
          }
        })
      } else if (this.title === '增加不合格处理') {
        addHandle(this.Handle).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.dialogFormVisible = false
            this.searchHandle()
          } else {
            this.$message.error('增加失败')
          }
        })
      } else if (this.title === '增加质检尺寸') {
        addSize(this.Size).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.dialogFormVisible = false
            this.searchSize()
          } else {
            this.$message.error('增加失败')
          }
        })
      } else if (this.title === '增加质检外观') {
        addAppearance(this.Appearance).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.dialogFormVisible = false
            this.searchAppearance()
          } else {
            this.$message.error('增加失败')
          }
        })
      } else if (this.title === '增加质检形位') {
        addPosition(this.Position).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.dialogFormVisible = false
            this.searchPosition()
          } else {
            this.$message.error('增加失败')
          }
        })
      } else if (this.title === '增加检测项') {
        addTest(this.Test).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.dialogFormVisible = false
            this.searchTest()
          } else {
            this.$message.error('增加失败')
          }
        })
      } else if (this.title === '增加检测项明细') {
        addTesting(this.value1, this.Testing).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.dialogFormVisible = false
            initTesting(this.value1).then(response => { this.tableData6 = response.data })
          } else {
            this.$message.error('增加失败')
          }
        })
      }
    },
    handleDelete(row) {
      console.log(row)
      if (row.不合格原因) {
        this.deleteRow(deleteReasons, row.不合格原因, function() { this.searchReasons() })
      } else if (row.不合格处理) {
        this.deleteRow(deleteHandle, row.不合格处理, function() { this.searchHandle() })
      } else if (row.质检尺寸流水号) {
        this.deleteRow(deleteSize, row.质检尺寸流水号, function() { this.searchSize() })
      } else if (row.质检外观流水号) {
        this.deleteRow(deleteAppearance, row.质检外观流水号, function() { this.searchAppearance() })
      } else if (row.质检形位流水号) {
        this.deleteRow(deletePosition, row.质检形位流水号, function() { this.searchPosition() })
      } else if (row.检测项流水号 && !row.检测项明细流水号) {
        this.deleteRow(deleteTest, row.检测项流水号, function() { this.searchTest() })
      } else if (row.检测项流水号 && row.检测项明细流水号) {
        this.deleteRow(deleteTesting, row.检测项明细流水号, function() { initTesting(this.value1).then(response => { this.tableData6 = response.data }) })
      }
    }
  }
}

</script>

<style scoped>

</style>
