<template>
  <div class="app-container">
    <table style="width: 100%">
      <el-card>
        <el-select v-model="projectValue" filterable clearable size="small" style="margin-top:10px;width: 180px" placeholder="项目名称" @change="typeChange()">
          <el-option
            v-for="item in project"
            :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-select v-model="toolNumValue" clearable filterable size="small" style="margin-bottom:10px;width: 180px" placeholder="机床名称">
          <el-option
            v-for="item in toolNum"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 15px" plain @click="searchData">查询</el-button>
      </el-card>

      <el-card>
        <el-table :data="tableData" highlight-current-row stripe size="mini" height="700" border style="width: 870px">
          <el-table-column label="序号" align="center" type="index" width="50"/>
          <el-table-column label="合同编号" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.合同编号 }}
            </template>
          </el-table-column>
          <el-table-column label="项目名称" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.项目名称 }}
            </template>
          </el-table-column>
          <el-table-column label="机床图号" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.机床图号 }}
            </template>
          </el-table-column>
          <el-table-column label="是否显示" align="center" width="200">
            <template slot-scope="scope">
              <el-button
                v-show="parseInt(scope.row.是否显示) === 0"
                size="mini"
                type="success"
                plain
                @click="submitEdit(scope.$index, scope.row)">显示</el-button>
              <span v-show="false">1</span>
              <el-button
                v-show="parseInt(scope.row.是否显示) === 1"
                size="mini"
                type="danger"
                plain
                @click="submitEdit1(scope.$index, scope.row)">关闭</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </table>

  </div>
</template>

<script>
import { upData, getProject, getToolNum, searchTable } from '@/api/BasicData/ProjectManagementDisplay'
export default {
  data() {
    return {
      handelAdd_disable: false,
      projectValue: '',
      project: [],
      toolNumValue: '',
      toolNum: [],
      tableData: [],
      check1: '',
      check2: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    searchData() {
      if (this.projectValue !== '' && this.projectValue !== null) {
        this.check1 = 1
      } else {
        this.check1 = 0
      }
      if (this.toolNumValue !== '' && this.toolNumValue !== null) {
        this.check2 = 1
      } else {
        this.check2 = 0
      }
      searchTable(this.check1, this.projectValue, this.check2, this.toolNumValue).then(response => {
        this.tableData = response.data
      })
    },
    fetchData() {
      this.projectValue = ''
      this.project = []
      getProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.project.push({
            label: response.data[i].项目名称,
            value: response.data[i].项目流水号,
            name: response.data[i].合同编号
          })
        }
      })
    },
    typeChange() {
      this.toolNumValue = ''
      this.toolNum = []
      getToolNum(1, this.projectValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.toolNum.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号
          })
        }
      })
    },
    submitEdit(index, row) {
      upData(row.机床流水号, 1).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('显示成功')
          this.tableData[index].是否显示 = 1
        } else { this.$message.error('显示失败') }
      })
    },
    submitEdit1(index, row) {
      upData(row.机床流水号, 0).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('关闭成功')
          this.tableData[index].是否显示 = 0
        } else { this.$message.error('关闭失败') }
      })
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin: 0px;
  }
</style>

