<template>
  <div>

    <el-card>
      <el-row>
        <el-radio-group v-model="radio" style="margin: 10px;" @change="radioChange">
          <el-radio :label="1">未编制</el-radio>
          <el-radio :label="2">已编制</el-radio>
        </el-radio-group>

        <span>零件图号:</span>
        <el-input v-model="partName" placeholder="零件名称" size="small" clearable style="width:200px"/>

        <span>开始时间:</span>
        <el-date-picker
          v-model="date01"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          size="small"
          placeholder="选择开始日期"/>

        <span>结束时间:</span>
        <el-date-picker
          v-model="date02"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          size="small"
          placeholder="选择结束日期"/>

        <el-button size="small" icon="el-icon-search" type="success" style="margin-left: 10px" @click="pageSize2=10; pageCurrent2=1;searchPartNum()">查询</el-button>
      </el-row>

    </el-card>

    <el-card>
      <el-table v-loading="loading2" :data="tableData2" height="370" style="width: 100%;" border element-loading-text="拼命加载中" @row-click="searchTable">
        <el-table-column
          label=" "
          type="index"
          align="center"
          width="50"/>
        <el-table-column label="零件图号" align="center" width="230px">
          <template slot-scope="scope">
            {{ scope.row.零件图号 }}
          </template>
        </el-table-column>
        <el-table-column label="零件名称" align="center" width="230px">
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column label="材料" align="center" width="220px">
          <template slot-scope="scope">
            {{ scope.row.材料 }}
          </template>
        </el-table-column>
        <el-table-column label="种类" align="center" width="180px">
          <template slot-scope="scope">
            {{ scope.row.零件类型名称 }}
          </template>
        </el-table-column>
        <el-table-column label="投产数量" align="center" width="180px">
          <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="面积" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.面积 }}
          </template>
        </el-table-column>
        <el-table-column label="重量" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.重量 }}
          </template>
        </el-table-column>
        <el-table-column label="材料费" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.材料费 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              class="el-icon-edit"
              @click="edit(scope.$index, scope.row, 'form')">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          v-if="!loading2"
          :current-page="pageCurrent2"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize2"
          :total="total2"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"/>
      </div>
    </el-card>

    <el-card>
      <el-table v-loading="loading0" :data="tableData" :summary-method="getSummaries" border style="width: 100%;max-height: 390px;" height="340px" stripe show-summary>
        <el-table-column label="序号" width="80" align="center" type="index"/>
        <el-table-column label="工艺名称" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="tableData[scope.$index].工艺名称" size="mini" placeholder="工艺名称" readonly/>
          </template>
        </el-table-column>
        <el-table-column label="工艺要求" align="center">
          <template slot-scope="scope">
            <el-input v-model="tableData[scope.$index].工艺要求" size="mini" readonly type="textarea"/>
          </template>
        </el-table-column>
        <el-table-column label="单件" width="110" align="center">
          <template slot-scope="scope">
            <el-input v-model="tableData[scope.$index].单件定额工时_系数" size="mini" readonly/>
          </template>
        </el-table-column>
        <el-table-column label="准结" width="110" align="center">
          <template slot-scope="scope">
            <el-input v-model="tableData[scope.$index].准结定额工时" size="mini" readonly/>
          </template>
        </el-table-column>
        <el-table-column label="外协预算价格" width="110" align="center">
          <template slot-scope="scope">
            <el-input v-model="tableData[scope.$index].外协预算价格_系数" size="mini" />
          </template>
        </el-table-column>
      </el-table>
      <el-button size="small" type="primary" style="float:right;margin: 10px" @click="saveRowPrice">保存</el-button>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible" title="编辑" center style="min-height: 300px" width="800px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">

        <el-form-item label="面积" prop="面积" style="margin-left: 200px">
          <el-input v-model="form.面积" placeholder="面积" size="small" style="width:200px"/>
        </el-form-item>
        <el-form-item label="重量" prop="重量" style="margin-left: 200px">
          <el-input v-model="form.重量" placeholder="重量" size="small" style="width:200px"/>
        </el-form-item>
        <el-form-item label="材料费" prop="材料费" style="margin-left: 200px">
          <el-input v-model="form.材料费" placeholder="材料费" size="small" style="width:200px"/>
        </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 { searchPartNum1, searchPartNum2, searchTable, saveWeightArea, saveMaterialPrice, saveRowPrice } from '@/api/Outsourcing/OutsourcingPriceBudget'
export default {
  data() {
    return {
      lingjianhao: '',
      dialogFormVisible: false,
      form: {
        面积: '',
        重量: '',
        材料费: ''
      },
      rules: {
      },
      cailiaofei: '',
      result: [],
      result2: [],
      radio: 1,
      partName: '', // 零件名称
      date01: '', // 开始时间
      date02: '', // 结束时间
      loading0: false,
      tableData: [],
      loading2: false,
      tableData2: [], // 表格数据
      total2: null, // 总条数
      pageSize2: 10, // 每页显示条数
      pageCurrent2: 1 // 后台获取页
    }
  },
  methods: {
    radioChange() {
      this.tableData2 = []
    },
    // 查零件号
    searchPartNum() {
      if (this.partName === null) {
        this.partName = ''
      }
      if (this.date01 === '') {
        this.date01 = null
      }
      if (this.date02 === '') {
        this.date02 = null
      }
      this.loading2 = true
      this.tableData2 = []
      this.tableData = []
      if (this.radio === 1) {
        searchPartNum1(this.partName, this.date01, this.date02, this.pageCurrent2, this.pageSize2).then(response => {
          this.tableData2 = response.data.rows
          this.total2 = response.data.total
        }).then(() => {
          this.loading2 = false
        })
      } else {
        searchPartNum2(this.partName, this.date01, this.date02, this.pageCurrent2, this.pageSize2).then(response => {
          this.tableData2 = response.data.rows
          this.total2 = response.data.total
        }).then(() => {
          this.loading2 = false
        })
      }
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = ['', '', '', '', '', 0]
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[1] = '统计总价:'
          return
        } else if (index === 5) {
          for (let i = 0; i < data.length; i++) {
            sums[5] += parseFloat(data[i].外协预算价格_系数)
          }
          sums[5] = parseInt(sums[5] * 100) / 100
        }
      })
      return sums
    },
    searchTable(row) {
      this.loading0 = true
      this.tableData = []
      searchTable(row.工艺计划流水号, 2).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          if (response.data[i].外协预算价格_系数 !== 0) {
            response.data[i].外协预算价格_系数 = response.data[i].外协预算价格_系数.toFixed(2)
          }
        }
        this.cailiaofei = row.材料费
        this.tableData = response.data
        this.loading0 = false
      })
    },
    // 打开编辑
    edit(index, row) {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.form.面积 = row.面积
      this.form.重量 = row.重量
      this.form.材料费 = row.材料费
      this.lingjianhao = row.工艺计划流水号
      this.dialogFormVisible = true
    },
    // 编辑确定
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.WithdrawingEdit()
          this.dialogFormVisible = false
        }
      })
    },
    // 编辑
    WithdrawingEdit() {
      if ((this.form.重量 === '' || this.form.重量 === null) && (this.form.面积 === '' || this.form.面积 === null)) {
        this.form.重量 = null
        this.form.面积 = null
        saveWeightArea(this.lingjianhao, this.form.重量, this.form.面积).then(() => {
          this.WithdrawingEdit2()
        })
      } else {
        saveWeightArea(this.lingjianhao, this.form.重量, this.form.面积).then(() => {
          this.WithdrawingEdit2()
        })
      }
    },
    WithdrawingEdit2() {
      if (this.form.材料费 === '' || this.form.材料费 === null) {
        this.form.材料费 = 0
        saveMaterialPrice(this.lingjianhao, this.form.材料费).then(response => {
          this.$message.success('保存成功')
          this.searchPartNum()
        })
      } else {
        saveMaterialPrice(this.lingjianhao, this.form.材料费).then(response => {
          this.$message.success('保存成功')
          this.searchPartNum()
        })
      }
    },
    // 关闭扣款编辑
    callOff(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 保存行价格
    saveRowPrice() {
      if (this.tableData.length === 0) {
        this.$message.error('请选择零件')
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          saveRowPrice(this.tableData[i].工序流水号, parseFloat(this.tableData[i].外协预算价格_系数), this.tableData[i].工艺计划流水号, this.cailiaofei).then(response => {
          })
        }
        this.$message.success('保存成功')
        this.searchPartNum()
      }
    },
    handleSizeChange2(val) {
      this.pageCurrent2 = 1
      this.pageSize2 = val
      this.searchPartNum()
    },
    handleCurrentChange2(val) {
      this.pageCurrent2 = val
      this.searchPartNum()
    }
  }
}
</script>

<style scoped>
  span{
    margin: 10px 0 10px 10px;
  }
  .el-date-editor{
    width:150px
  }
  .el-card{
    margin-bottom: 15px;
  }
</style>
