<template>
  <div class="app-container">
    <el-card style="height: 850px">
      <el-row :gutter="10">
        <el-col :span="10">
          <div style="margin-top: 7px; margin-bottom: 7px">
            <el-select
              v-model="orderValue"
              :remote-method="getOrderOptions"
              style="width: 180px"
              placeholder="订单编号"
              size="small"
              filterable
              clearable
              remote
              @change="pageCurrent = 1; getOrderList()">
              <el-option
                v-for="item in orderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-input
              v-model="productKeyword"
              style="width: 180px"
              size="small"
              placeholder="产品名称"
              clearable
              @keyup.enter.native="pageCurrent = 1; getOrderList()"/>
            <el-button
              type="primary"
              plain
              icon="el-icon-search"
              size="small"
              style="margin-left: 10px"
              @click="pageCurrent = 1; getOrderList()">查询
            </el-button>
          </div>
          <el-table
            v-loading="loadingOrder"
            ref="orderTable"
            :data="orderTableData"
            highlight-current-row
            border
            stripe
            size="mini"
            height="740px"
            style="width: 100%"
            @row-click="handleOrderClick">
            <el-table-column width="55px" label="序号" type="index" align="center"/>
            <el-table-column width="130px" label="订单编号" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.订单编号 }}
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.产品名称 }}
              </template>
            </el-table-column>
            <el-table-column width="90px" label="类型" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ 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, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChanges"
              @current-change="handleCurrentChanges"/>
          </div>
        </el-col>

        <el-col :span="14">
          <div style="margin-top: 7px; margin-bottom: 7px">
            <el-input
              v-model="partKeyword"
              :disabled="!currentOrderId"
              style="width: 180px"
              size="small"
              placeholder="零件名称"
              clearable
              @keyup.enter.native="getPartList()"/>
            <el-input
              v-model="drawingNo"
              :disabled="!currentOrderId"
              style="width: 160px"
              size="small"
              placeholder="图号"
              clearable
              @keyup.enter.native="getPartList()"/>
            <span style="font-size: 13px; color: black; margin-left: 12px">
              当前产品：{{ currentProductName || '未选择' }}
            </span>
            <el-button
              :disabled="!currentOrderId"
              type="primary"
              plain
              icon="el-icon-search"
              size="small"
              style="margin-left: 10px"
              @click="getPartList()">刷新零件
            </el-button>
          </div>
          <el-table
            v-loading="loadingPart"
            ref="partTable"
            :data="partTableData"
            highlight-current-row
            border
            stripe
            size="mini"
            height="780px"
            style="width: auto">
            <el-table-column width="55px" label="序号" type="index" align="center"/>
            <el-table-column width="130px" label="产品/部件" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.产品名称 }}
              </template>
            </el-table-column>
            <el-table-column width="200px" label="零件名称" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column width="200px" label="零件图号" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.图号或型号 }}
              </template>
            </el-table-column>
            <el-table-column width="70px" label="数量" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.数量 }}
              </template>
            </el-table-column>
            <el-table-column width="110px" label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip :open-delay="700" effect="dark" content="查看图纸" placement="top">
                  <el-button
                    type="text"
                    icon="el-icon-picture-outline"
                    size="mini"
                    @click="getNum(scope.row)"/>
                </el-tooltip>
                <el-tooltip :open-delay="700" effect="dark" content="改制" placement="top">
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    size="mini"
                    @click="openDialog(scope.row)"/>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
      v-el-drag-dialog
      :visible.sync="dialogFormVisible"
      title="发起零件改制"
      center
      width="900px">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="right"
        label-width="110px"
        class="demo-ruleForm">
        <div class="dialog-block">
          <div class="dialog-block-title">原零件信息</div>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="原订单编号">
                <el-input v-model="form.原订单编号" size="small" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原零件名称">
                <el-input v-model="form.原零件名称" size="small" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原零件图号">
                <el-input v-model="form.原零件图号" size="small" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原数量">
                <el-input v-model="form.原数量" size="small" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="dialog-block">
          <div class="dialog-block-title">改制目标</div>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="改制零件名称" prop="改制零件名称">
                <el-input v-model="form.改制零件名称" size="small" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="改制零件图号" prop="改制零件图号">
                <el-input v-model="form.改制零件图号" size="small" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="改制数量" prop="改制数量">
                <el-input-number
                  v-model="form.改制数量"
                  :min="1"
                  :max="Number(form.原数量 || 1)"
                  size="small"
                  style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="精工期限" prop="精工期限">
                <el-date-picker
                  v-model="form.精工期限"
                  size="small"
                  type="date"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  placeholder="选择日期"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitForm('form')">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog :visible.sync="dialogVisible" width="350px">
      <div v-for="(file, key) in hadFile" :key="key">
        <div class="wrapper">
          <div class="content">
            <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 id="appUrl" :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import request, { MESDownloadFile } from '@/utils/request'

export default {
  data() {
    var validateMaterial = (rule, value, callback) => {
      if (this.form.改制目标 === '非毛坯物料改制' && !value) {
        callback(new Error('请选择物料'))
      } else {
        callback()
      }
    }
    return {
      loadingOrder: false,
      loadingPart: false,
      dialogFormVisible: false,
      dialogVisible: false,
      hadFile: [],
      total: 0,
      pageCurrent: 1,
      pageSize: 100,
      orderValue: '',
      orderOptions: [],
      productKeyword: '',
      orderTableData: [],
      currentOrderId: '',
      currentOrderNo: '',
      currentProductId: '',
      currentProductName: '',
      partKeyword: '',
      drawingNo: '',
      partTableData: [],
      targetList: [
        { value: '原现自制订单改制', label: '原现自制订单改制' },
        { value: '毛坯改制', label: '毛坯改制' },
        { value: '非毛坯物料改制', label: '非毛坯物料改制' }
      ],
      materialName: '',
      materialSpec: '',
      materialNew: '',
      materialNewValue: '',
      tableData1: [],
      pageCurrent1: 1,
      pageSize1: 10,
      total1: 0,
      form: {
        原订单流水号: '',
        原组件流水号: '',
        原基本件流水号: '',
        原工艺计划流水号: '',
        原订单编号: '',
        原零件名称: '',
        原零件图号: '',
        原数量: '',
        改制目标: '',
        改制零件名称: '',
        改制零件图号: '',
        改制数量: 1,
        是否毛坯: '',
        物料编号: '',
        物料名称: '',
        改制原因: '',
        改制要求: '',
        技术备注: '',
        精工期限: ''
      },
      rules: {
        改制目标: [{ required: true, message: '请选择改制目标', trigger: 'change' }],
        改制零件名称: [{ required: true, message: '请输入改制零件名称', trigger: 'blur' }],
        改制零件图号: [{ required: true, message: '请输入改制零件图号', trigger: 'blur' }],
        改制数量: [{ required: true, message: '请输入改制数量', trigger: 'change' }],
        是否毛坯: [{ required: true, message: '请选择是否毛坯', trigger: 'change' }],
        物料编号: [{ validator: validateMaterial, trigger: 'change' }],
        改制原因: [{ required: true, message: '请输入改制原因', trigger: 'blur' }],
        改制要求: [{ required: true, message: '请输入改制要求', trigger: 'blur' }],
        精工期限: [{ required: true, message: '请选择精工期限', trigger: 'change' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  updated() {
    this.$nextTick(() => {
      if (this.$refs.orderTable) {
        this.$refs.orderTable.doLayout()
      }
      if (this.$refs.partTable) {
        this.$refs.partTable.doLayout()
      }
    })
  },
  created() {
    this.getOrderOptions()
    this.getOrderList()
  },
  methods: {
    handleOrderClick(row) {
      this.currentOrderId = row.订单流水号 || ''
      this.currentOrderNo = row.订单编号 || ''
      this.currentProductId = row.组件流水号 || ''
      this.currentProductName = row.产品名称 || ''
      this.getPartList()
    },
    resetMaterialSelect() {
      this.materialName = ''
      this.materialSpec = ''
      this.materialNew = ''
      this.materialNewValue = ''
      this.tableData1 = []
      this.pageCurrent1 = 1
      this.pageSize1 = 10
      this.total1 = 0
      this.form.物料编号 = ''
      this.form.物料名称 = ''
    },
    targetChange(value) {
      this.resetMaterialSelect()
      if (value === '原现自制订单改制') {
        this.form.是否毛坯 = 0
      } else if (value === '毛坯改制') {
        this.form.是否毛坯 = 1
      } else if (value === '非毛坯物料改制') {
        this.form.是否毛坯 = 0
        this.searchMaterial()
      } else {
        this.form.是否毛坯 = ''
      }
    },
    openDialog(row) {
      this.form = {
        原订单流水号: this.currentOrderId,
        原组件流水号: row.组件流水号 || '',
        原基本件流水号: row.基本件流水号 || '',
        原工艺计划流水号: row.工艺计划流水号 || '',
        原订单编号: this.currentOrderNo,
        原零件名称: row.零件名称 || '',
        原零件图号: row.零件图号 || row.图号或型号 || '',
        原数量: row.数量 || '',
        改制目标: '',
        改制零件名称: row.零件名称 || '',
        改制零件图号: row.零件图号 || row.图号或型号 || '',
        改制数量: row.数量 ? Number(row.数量) : 1,
        是否毛坯: '',
        物料编号: '',
        物料名称: '',
        改制原因: '',
        改制要求: '',
        技术备注: '',
        精工期限: row.精工期限 || ''
      }
      this.resetMaterialSelect()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate()
        }
      })
    },
    selectNewMaterial(row) {
      this.materialNewValue = row.物料流水号 || ''
      this.materialNew = (row.名称 || '') + ' ' + (row.代号 || '')
      this.form.物料编号 = row.编码 || row.代号 || ''
      this.form.物料名称 = row.名称 || ''
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.validateField('物料编号')
        }
      })
    },
    searchMaterial() {
      var param = []
      param[0] = ['名称', this.materialName]
      param[1] = ['图号型号', this.materialSpec]
      var Data = this.CreateData('11', '物料信息_查询', param, this.pageSize1, this.pageCurrent1)
      this.ExecDatabase(Data).then(response => {
        if (response.data.rows) {
          this.tableData1 = response.data.rows
          this.total1 = response.data.total
        } else {
          this.tableData1 = response.data
          this.total1 = response.data.length
        }
      })
    },
    handleSizeChange1(val) {
      this.pageCurrent1 = 1
      this.pageSize1 = val
      this.searchMaterial()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchMaterial()
    },
    submitForm(formName) {
      var oldDrawingNo = (this.form.原零件图号 || '').toString().trim()
      var newDrawingNo = (this.form.改制零件图号 || '').toString().trim()
      if (oldDrawingNo && newDrawingNo && oldDrawingNo === newDrawingNo) {
        this.$message.warning('改制零件图号不能与原零件图号相同')
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['原订单流水号', this.form.原订单流水号]
          param[1] = ['原组件流水号', this.form.原组件流水号]
          param[2] = ['改制零件名称', this.form.改制零件名称]
          param[3] = ['改制零件图号', this.form.改制零件图号]
          param[4] = ['改制数量', this.form.改制数量]
          param[5] = ['精工期限', this.form.精工期限]
          param[6] = ['发起人', this.id]
          param[7] = ['原零件名称', this.form.原零件名称]
          param[8] = ['原零件图号', this.form.原零件图号]
          var Data = this.CreateData('12', '技术中心_改制订单_发起改制', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('改制订单发起成功')
              this.dialogFormVisible = false
              this.getOrderList()
              this.getPartList()
            } else {
              this.$message.error(response.data[0].msg || '改制订单发起失败')
            }
          })
        } else {
          return false
        }
      })
    },
    getOrderOptions(query) {
      this.orderOptions = []
      var param = []
      param[0] = ['客户名称', '']
      param[1] = ['订单编号', query || '']

      var Data = this.CreateData('11', '订单信息_列表_查询数据_bak', param)
      this.ExecDatabase(Data).then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.orderOptions.push({
            label: response.data[i].订单编号,
            value: response.data[i].订单流水号
          })
        }
      })
    },
    getOrderList() {
      var param = []
      param[0] = ['订单流水号', this.orderValue]
      param[1] = ['产品名称', this.productKeyword]
      this.loadingOrder = true
      var Data = this.CreateData('11', '技术中心_改制订单_订单_查询', param, this.pageSize, this.pageCurrent)
      this.ExecDatabase(Data).then(response => {
        this.loadingOrder = false
        if (response.data.rows) {
          this.orderTableData = response.data.rows
          this.total = response.data.total
        } else {
          this.orderTableData = response.data
          this.total = response.data.length
        }
        this.currentOrderId = ''
        this.currentOrderNo = ''
        this.currentProductId = ''
        this.currentProductName = ''
        this.partTableData = []
      }).catch(() => {
        this.loadingOrder = false
      })
    },
    getPartList() {
      var param = []
      param[0] = ['组件流水号', this.currentProductId]
      this.loadingPart = true
      var Data = this.CreateData('11', '技术中心_改制订单_零件_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.loadingPart = false
        this.partTableData = response.data
      }).catch(() => {
        this.loadingPart = false
      })
    },
    getNum(row) {
      this.dialogVisible = true
      this.getFileList(row.零件图号 || row.图号或型号)
    },
    getFileList(value) {
      this.hadFile = []
      if (value) {
        request({
          url: '',
          method: 'post',
          data: {
            type: '3',
            name: "select * from 机加工MES_零件图纸PDF表 where 是否启用 = 1 and name = '" + value + "'"
          }
        }).then(data => {
          if (data.data.length > 0) {
            var server = ('' + MESDownloadFile).split('/')
            data.data.map(item => {
              this.hadFile.push({
                url: 'http://' + server[2] + '/webpage/part/' + item.uid + '.' + item.suffix,
                name: item.name + '.' + item.suffix,
                suffix: item.suffix,
                id: item.uid
              })
            })
          }
        })
      }
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.getOrderList()
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 15px;
}

.dialog-block {
  padding: 12px 14px 4px 14px;
  margin-bottom: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.dialog-block-title {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.material-summary {
  font-size: 16px;
  color: red;
}

.wrapper {
  width: 90%;
  height: 50px;
  overflow: hidden;
  border: 1px solid #b8c7d9;
  margin: 10px;
}

.content {
  position: relative;
  padding: 8px 8px 0 8px;
}
</style>
