<template>
  <div class="app-container">
    <el-card>
      <!--<span>项目名称</span>-->
      <!--<el-select v-model="projectValue" placeholder="请选择项目名称" filterable size="small">-->
      <!--<el-option-->
      <!--v-for="item in project"-->
      <!--:key="item.value"-->
      <!--:label="item.label"-->
      <!--:value="item.value"/>-->
      <!--</el-select>-->
      <span>机床图号</span>
      <el-select v-model="machineValue" placeholder="请选择机床图号" filterable size="small">
        <el-option
          v-for="item in machine"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span>组号</span>
      <el-select v-model="groupValue" placeholder="请选择组号" filterable size="small">
        <el-option
          v-for="item in group"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button icon="el-icon-search" type="primary" plain size="small" @click="pageCurrentWB = 1;pageSizeWB = 1000;pageCurrent = 1;pageSize = 1000;getTableData()">查询</el-button>
      <el-button icon="el-icon-circle-plus-outline" class="button111" size="small" @click="openUrgentItem()">加急件</el-button>
    </el-card>
    <el-card>
      <div v-for="(file, key) in hadFile" :key="key">
        <div class="wrapper">
          <div class="content">
            <div class="action"/>
            <div v-if="file.suffix==='pdf'" class="icon"><svg-icon icon-class="pdf" /></div>
            <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon"><svg-icon icon-class="doc" /></div>
            <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon"><svg-icon icon-class="excel" /></div>
            <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon"><svg-icon icon-class="ppt" /></div>
            <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon"><svg-icon icon-class="pic" /></div>
            <div v-else class="icon"><svg-icon icon-class="file" /></div>
            <a :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>
          </div>
        </div>
      </div>
    </el-card>
    <el-card>
      <h3>自制件</h3>
      <el-table
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
        stripe
        size="mini"
        style="width: 100%;max-height: 520px"
        height="460">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <el-table-column
          label="机床图号"
          align="center"
          prop="机床图号"
          min-width="150px">
          <template slot-scope="scope">{{ scope.row.机床图号 }}</template>
        </el-table-column>
        <el-table-column
          label="零件图号"
          align="center"
          prop="零件图号"
          min-width="200px">
          <template slot-scope="scope">{{ scope.row.零件图号 }}</template>
        </el-table-column>
        <el-table-column
          label="零件名称"
          align="center"
          prop="零件名称"
          min-width="140px"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.零件名称 }}</template>
        </el-table-column>
        <el-table-column
          label="组号"
          align="center"
          prop="组号"
          min-width="80px">
          <template slot-scope="scope">{{ scope.row.组号 }}</template>
        </el-table-column>
        <el-table-column
          label="零件数量"
          min-width="70"
          align="center">
          <template slot-scope="scope">{{ scope.row.零件数量 }}</template>
        </el-table-column>
        <el-table-column label="部件数量" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.部件数量 }}
          </template>
        </el-table-column>
        <el-table-column label="机床数量" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.机床数量 }}
          </template>
        </el-table-column>
        <el-table-column
          label="材料"
          prop="材料"
          align="center"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.材料 }}</template>
        </el-table-column>
        <el-table-column
          label="规格"
          prop="规格"
          align="center"
          show-overflow-tooltip>
          <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">
          <template slot-scope="scope">{{ scope.row.零件类型名称 }}</template>
        </el-table-column>
        <el-table-column align="center" label="分类码" width="150">
          <template slot-scope="scope">
            {{ scope.row.分类码 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="旧零件图号" width="150">
          <template slot-scope="scope">
            {{ scope.row.前零件图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="整改类型" width="150">
          <template slot-scope="scope">
            {{ scope.row.整改类型 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              :disabled="Number(id)!==0"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40, 100]"
          :page-size="pageSize"
          :total="total"
          layout="total"
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges"/>
      </div>
    </el-card>
    <el-card>
      <h3>外购件</h3>
      <el-table
        v-loading="loadingWB"
        :data="tableDataWB"
        style="width: 100%;min-height: 600px;"
        size="mini"
        stripe
        height="500"
        highlight-current-row
        border>
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50"/>
        <el-table-column align="center" prop="物料名称" label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="物料规格" label="物料规格">
          <template slot-scope="scope">
            {{ scope.row.物料规格 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="物料型号" label="物料型号">
          <template slot-scope="scope">
            {{ scope.row.物料型号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件数量">
          <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">
          <template slot-scope="scope">
            {{ scope.row.机床数量 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="零件类型" label="零件类型">
          <template slot-scope="scope">
            {{ scope.row.零件类型 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="供货商" label="供货商">
          <template slot-scope="scope">
            {{ scope.row.供货商 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" width="100">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="标记" width="100">
          <template slot-scope="scope">
            {{ scope.row.标记 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="分类码" width="150">
          <template slot-scope="scope">
            {{ scope.row.分类码 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="整改类型" width="150">
          <template slot-scope="scope">
            {{ scope.row.整改类型 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              :disabled="Number(id)!==0"
              size="mini"
              type="text"
              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="pageCurrentWB"
          :page-sizes="[10, 20, 30, 40, 100]"
          :page-size="pageSizeWB"
          :total="totalWB"
          layout="total"
          @size-change="handleSizeChangeWB"
          @current-change="handleCurrentChangeWB"/>
      </div>
    </el-card>
    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="添加加急件" center style="min-height: 300px" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="100px" class="demo-ruleForm">
        <el-form-item label="机床号" prop="机床号" style="margin-left: 70px">
          <el-select v-model="form.机床号" placeholder="选择机床" filterable clearable size="small" style="width:200px" @change="getGroupSelect1">
            <el-option
              v-for="item in machine"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="组号" prop="组号" style="margin-left: 70px">
          <el-select v-model="form.组号" placeholder="选择组号" filterable clearable size="small" style="width:200px">
            <el-option
              v-for="item in group1"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="零件图号" prop="零件图号" style="margin-left: 70px">
          <el-input v-model="form.零件图号" placeholder="零件图号" size="small" style="width:200px" clearable/>
        </el-form-item>
        <el-form-item label="零件名称" prop="零件名称" style="margin-left: 70px">
          <el-input v-model="form.零件名称" placeholder="零件名称" size="small" style="width:200px" clearable/>
        </el-form-item>
        <el-form-item label="零件数量" prop="零件数量" style="margin-left: 70px">
          <el-input-number v-model="form.零件数量" :step="1" :min="0" size="mini" style="width:200px"/>
        </el-form-item>
        <el-form-item label="零件备注" prop="零件备注" style="margin-left: 70px">
          <el-input v-model="form.零件备注" placeholder="零件备注" size="small" style="width:200px" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="callOff('form')">取消</el-button>
        <el-button type="primary" @click="submit('form')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { machineSelect, groupSelect, basicPartsData, deleteBasicParts, purchasePartsData, deletePurchaseData, getFileData, addUrgentItem } from '@/api/TechnologyCenter/QueryParts'
import { mapGetters } from 'vuex'
import { ServerIP } from '@/utils/request'
export default {
  name: 'Index',
  data() {
    return {
      machineValue: '',
      machine: [],
      groupValue: '',
      group: [],
      group1: [],
      loading: false,
      loadingWB: false,
      dialogFormVisible: false,
      total: 0,
      tableData: [],
      tableDataWB: [],
      pageCurrent: 1,
      pageSize: 1000,
      pageCurrentWB: 1,
      pageSizeWB: 1000,
      totalWB: 0,
      form: {
        机床号: '',
        组号: '',
        零件图号: '',
        零件名称: '',
        零件数量: '',
        零件备注: ''
      },
      rules: {
        机床号: [{ required: true, message: '请选择机床', trigger: 'change' }],
        组号: [{ required: true, message: '请选择组号', trigger: 'change' }],
        零件图号: [{ required: true, message: '请输入零件图号', trigger: 'blur' }],
        零件名称: [{ required: true, message: '请输入零件名称', trigger: 'blur' }],
        零件数量: [{ required: true, message: '请输入零件数量', trigger: 'blur' }]
      },
      hadFile: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'id'// 人员编号
    ]),
    groupName() {
      for (let i = 0; i < this.group.length; i++) {
        if (this.group[i].value === this.groupValue) {
          return this.group[i].label
        }
      }
    }
  },
  watch: {
    machine(val) {
      if (val.length > 0) {
        this.machineValue = val[0].value
      }
    },
    machineValue(val) {
      this.groupValue = ''
      this.group = []
      if (val) {
        this.getGroupSelect(val)
      }
    },
    group(val) {
      if (val.length > 0) {
        this.groupValue = val[0].value
      }
    },
    groupValue(val) {
      if (val) {
        this.pageCurrentWB = 1
        this.pageSizeWB = 1000
        this.pageCurrent = 1
        this.pageSize = 1000
        this.getTableData()
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 在什么情况下需要查询上传的附件，调用this.getFileData()即可根据
    getFileData(machineValue) {
      this.hadFile = []
      getFileData(machineValue).then(res => {
        if (res.data.length > 0) {
          res.data.map(item => {
            this.hadFile.push({
              url: `${ServerIP}${item.文件标识}.${item.文件后缀}`,
              name: `${item.文件名称}.${item.文件后缀}`,
              suffix: item.文件后缀,
              id: item.文件标识
            })
          })
        }
      })
    },
    fetchData() {
      this.getSelect(machineSelect, ['机床图号', '机床流水号'], 'machine')
    },
    getGroupSelect(val) {
      this.getSelect(groupSelect, ['组号', '组件流水号'], 'group', val)
    },
    getGroupSelect1() {
      this.form.组号 = ''
      this.getSelect(groupSelect, ['组号', '组件流水号'], 'group1', this.form.机床号)
    },
    callOff(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addUrgentItem(this.form.组号, this.form.零件图号, this.form.零件名称, this.form.零件数量, this.form.零件备注, this.id).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('添加成功')
              this.getTableData()
              this.dialogFormVisible = false
            } else {
              this.$message.error('添加成功')
            }
          })
        }
      })
    },
    getTableData() {
      this.getFileData(this.machineValue)
      console.log(this.hadFile, 88899)
      const machine_check = this.machineValue ? 1 : 0
      const group_check = this.groupValue ? 1 : 0
      this.loading = true
      basicPartsData(machine_check, this.machineValue, group_check, this.groupValue, this.pageSize, this.pageCurrent).then(response => {
        this.loading = false
        const res = response.data
        this.total = res.total
        console.log(this.tableData)
        this.tableData = res.rows.map(item => {
          if (item.整改类型 === '1') {
            item.整改类型 = '新增'
          } else if (item.整改类型 === '2') {
            item.整改类型 = '替换'
          } else if (item.整改类型 === '3') {
            item.整改类型 = '补充加工'
          }
          return item
        })
      })
      this.loadingWB = true
      purchasePartsData(this.groupValue, this.pageCurrentWB, this.pageSizeWB).then(response => {
        this.loadingWB = false
        const data = response.data
        this.totalWB = data.total
        this.tableDataWB = data.rows.map(item => {
          console.log(item)
          if (item.整改类型 === '1') {
            item.整改类型 = '新增'
          } else if (item.整改类型 === '2') {
            item.整改类型 = '替换'
          } else if (item.整改类型 === '3') {
            item.整改类型 = '补充加工'
          }
          item.零件类型 = item.零件类型 === '2' ? '外购件' : '标准件'
          return item
        })
      })
    },
    openUrgentItem() {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.dialogFormVisible = true
    },
    handleDelete(row) {
      if (row.基本件流水号) {
        this.deleteRow(deleteBasicParts, row.基本件流水号, function() {
          this.getTableData()
        })
      } else {
        this.deleteRow(deletePurchaseData, row.标准件和外购件流水号, function() {
          this.getTableData()
        })
      }
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.getTableData()
    },
    handleSizeChangeWB(val) {
      this.pageCurrentWB = 1
      this.pageSizeWB = val
      this.getTableData()
    },
    handleCurrentChangeWB(val) {
      this.pageCurrentWB = val
      this.getTableData()
    }
  }
}
</script>

<style scoped>
span{
  margin: 0px;
}
.wrapper{
  width: 225px;
  height: 50px;
  overflow: hidden;
  border: 1px solid #b8c7d9;
  float: left;
  margin: 0px;
}
.content{
  position: relative;
  padding: 8px 8px 0 8px;
}
.action{
  position: absolute;
  top: 4px;
  right: 8px;
}
.delete{
  padding: 0 5px;
  border-radius: 3px;
  color: #0f84b0;
  font-size: 12px;
}
.delete:hover{
  background: -webkit-linear-gradient(top,#0ba9e3,#0099d3);
  color: #fff;
}
a{
  text-decoration: none;
}
.icon{
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: 7px;
  margin-top: 2px;
  font-size: 26px;
}
.info{
  position: absolute;
  left: 44px;
  line-height: 30px;
  display: inline-block;
  color: #999;
}
.el-card {
   padding: 0px !important;
   margin: 0px !important;
}
</style>
<style lang="scss">
  .button111{
    background:rgb(253,246,236);
    border-color: #ff9759;
    color: #ff9759;
    &:hover{
      background: #ff9759;
      border-color: #ff9759;
      color: white;
    }
    &:focus{
      background: #ff9759;
      border-color: #ff9759;
      color: white;
    }
  }
</style>
