<template>
  <div class="app-container">

    <el-card>
      <span>工艺名称：</span>
      <el-input v-model="Code" placeholder="工艺名称" clearable size="small" style="width: 15%;top: 1px;"/>
      <span style="margin-left: 10px">工艺分类：</span>
      <el-select v-model="processClassificationValue" size="small" filterable clearable placeholder="工艺分类">
        <el-option
          v-for="item in processClassification"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button type="success" class="el-icon-search" size="small" style="margin-left: 10px" @click="pageSize=10;pageList=1;getTableData()">查询</el-button>
      <el-button v-if="false" type="primary" class="el-icon-circle-plus-outline" size="small" @click="addData('form1')">新增</el-button>
    </el-card>

    <el-card class="box-card">
      <el-table
        v-loading="loading"
        :data="tableData3"
        border
        stripe
        size="small"
        tooltip-effect="dark"
        style="width: 100%;"
        height="650">
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="55"/>
        <el-table-column
          align="center"
          label="工艺名称"
          width="300">
          <template slot-scope="scope">{{ scope.row.工艺名称 }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="工艺名称简称"
          width="280">
          <template slot-scope="scope">{{ scope.row.工艺名称简称 }}</template>
        </el-table-column>

        <el-table-column label="计算方式" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.外协价格计算标准流水号)===1" type="success" size="small">工时</el-tag>
            <el-tag v-if="parseInt(scope.row.外协价格计算标准流水号)===2" type="success" size="small">重量</el-tag>
            <el-tag v-if="parseInt(scope.row.外协价格计算标准流水号)===3" type="success" size="small">面积</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="工时价格(元/分)">
          <template slot-scope="scope">
            {{ scope.row.外协价格1 }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="重量价格(元/kg)">
          <template slot-scope="scope">
            {{ scope.row.重量价格1 }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="面积价格(元/m2)">
          <template slot-scope="scope">
            {{ scope.row.面积价格1 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130px" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              class="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row, 'form')">编辑</el-button>
            <el-button
              v-if="false"
              size="mini"
              type="danger"
              class="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          v-if="!loading"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible1" title="外协价格计算系数维护" center width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" class="demo-ruleForm" label-width="100px" style="width: 90%;margin: auto">
        <el-row style="margin: 2px 0 30px 30px;">
          <el-radio-group v-model="radio">
            <el-radio :label="1">工时</el-radio>
            <el-radio :label="2">重量</el-radio>
            <el-radio :label="3">面积</el-radio>
          </el-radio-group>
        </el-row>

        <el-form-item v-if="radio === 1" label="工时(元/分)" prop="Price">
          <el-input v-model="form.Price" size="small" placeholder="请输入工时价格"/>
        </el-form-item>

        <el-form-item v-if="radio === 2" label="重量(元/kg)" prop="weightPrice">
          <el-input v-model="form.weightPrice" size="small" placeholder="请输入重量价格"/>
        </el-form-item>

        <el-form-item v-if="radio === 3" label="面积(元/m2)" prop="areaPrice">
          <el-input v-model="form.areaPrice" size="small" placeholder="请输入面积价格"/>
        </el-form-item>

        <el-row>
          <el-col :span="14"/>
          <el-form-item >
            <el-button size="small" @click="callOff('form')">取消</el-button>
            <el-button size="small" type="primary" @click="submit('form')">确 定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="dialogFormVisible2" title="新增工艺" center width="28%">
      <el-form ref="form1" :model="form1" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-form-item label="工艺名称" prop="Name">
          <el-input v-model="form1.Name" size="small" />
        </el-form-item>
        <el-form-item label="工艺名称简称" prop="ShortName">
          <el-input v-model="form1.ShortName" size="small" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff1('form1')">取消</el-button>
        <el-button size="small" type="primary" @click="submit1('form1')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { getType, getTable, delList, Add, editList } from '@/api/Outsourcing/OutsourcingDataMaintenance'

export default {
  data() {
    return {
      colorCode1: [],
      colorCode2: [],
      colorCode3: [],
      radio: 1,
      processClassificationValue: '',
      processClassification: [],
      form: { // 添加修改表单
        Price: '', // 外协价格
        weightPrice: '', // 重量价格
        areaPrice: '' // 面积价格
      },
      count1: 0,
      count2: 0,
      form1: {
        Name: '',
        ShortName: ''
      },
      EditCode: '',
      loading: false,
      Code_Check: false,
      Code_Check1: false,
      Code: '', // 工艺计划流水号
      dialogFormVisible1: false,
      dialogFormVisible2: false, // 新增编辑弹框
      total: null, // 总条数
      pageSize: 10, // 每页显示条数
      pageList: 1, // 后台获取页
      currentPage: 1, // 显示当前页
      tableData3: [], // 表格数据
      rules: { // 表单验证规则
        Price: [{ required: true, message: '请输入工时价格', trigger: 'change' }],
        weightPrice: [{ required: true, message: '请输入重量价格', trigger: 'change' }],
        areaPrice: [{ required: true, message: '请输入面积价格', trigger: 'change' }],
        Name: [{ required: true, message: '请输入工艺名称', trigger: 'change' }],
        ShortName: [{ required: true, message: '请输入工艺名称简称', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getTableData()
    this.fetchData()
  },
  methods: {
    // 初始化获取工艺分类
    fetchData() {
      this.processClassificationValue = ''
      this.processClassification = []
      getType().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.processClassification.push({
            label: response.data[i].工艺分类名称,
            value: response.data[i].工艺分类流水号
          })
        }
      })
    },
    // 按条件查询
    getTableData() {
      this.loading = true
      this.tableData3 = []
      this.colorCode1 = []
      this.colorCode2 = []
      this.colorCode3 = []
      if (this.Code === '' || this.Code === null) {
        this.Code_Check = false
      } else {
        this.Code_Check = true
      }
      if (this.processClassificationValue === '' || this.processClassificationValue === null) {
        this.Code_Check1 = false
      } else {
        this.Code_Check1 = true
      }
      getTable(this.Code_Check, this.Code, this.Code_Check1, this.processClassificationValue, this.pageList, this.pageSize).then(response => {
        this.total = parseInt(response.data.total)
        if (response.data.rows.length !== 0) {
          this.tableData3 = response.data.rows
        }
      })
      this.loading = false
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delList(row.工艺编号).then(response => {
          if (response.data[0].result === '1') {
            this.getTableData()
            this.$message({
              message: '已被成功删除',
              type: 'success'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 打开添加
    addData(formName) {
      this.count1 = this.count1 + 1
      if (this.count1 !== 1) {
        this.$refs[formName].resetFields()
      }
      this.form1.Name = ''
      this.form1.ShortName = ''
      this.dialogFormVisible2 = true
    },
    // 添加
    submitAdd() {
      Add(this.form1.Name, this.form1.ShortName).then(response => {
        if (response.data[0].result === '1') {
          this.dialogFormVisible2 = false
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.pageList = 1
          this.pageSize = 10
          this.getTableData()
        } else {
          this.$message.error('添加失败')
          this.dialogFormVisible2 = false
        }
      })
    },
    // 打开编辑
    handleEdit(index, row, formName) {
      this.count2 = this.count2 + 1
      if (this.count2 !== 1) {
        this.$refs[formName].resetFields()
      }
      this.radio = parseInt(row.外协价格计算标准流水号)
      this.form.Price = row.外协价格1
      this.EditCode = row.工艺编号
      this.form.weightPrice = row.重量价格1
      this.form.areaPrice = row.面积价格1
      this.dialogFormVisible1 = true
    },
    // 提交编辑
    submitEdit() {
      if (this.form.Price === '0') {
        this.form.Price = ''
      }
      if (this.form.weightPrice === '0') {
        this.form.weightPrice = ''
      }
      if (this.form.areaPrice === '0') {
        this.form.areaPrice = ''
      }
      editList(this.EditCode, this.form.Price, this.form.weightPrice, this.form.areaPrice, this.radio).then(response => {
        if (response.data[0].result === '1') {
          this.dialogFormVisible1 = false
          this.$message({
            type: 'success',
            message: '信息更新成功!'
          })
          this.getTableData()
        } else {
          this.dialogFormVisible1 = false
          this.$message.error('信息更新失败')
        }
      })
    },
    // 提交添加或者修改
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitEdit()
        } else {
          return false
        }
      })
    },
    submit1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitAdd()
        } else {
          return false
        }
      })
    },
    // 重置表单
    callOff(formName) {
      this.dialogFormVisible1 = false
      this.$refs[formName].resetFields()
    },
    callOff1(formName) {
      this.dialogFormVisible2 = false
      this.$refs[formName].resetFields()
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.getTableData()
    }
  }
}
</script>
<style scoped>
  .el-card{
    margin-bottom: 15px;
  }
  .mianji{
    background-color: #7EE3FC;
    border: 1px solid #1f2d3d;
  }
</style>
