<template>
  <div>
    <div class="mold-header table_90 f-12">
      <el-row>
        <!--表单-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row :gutter="24">
            <el-col :span="5">
              <el-form-item label="模具名称" label-width="85px">
                <el-input v-model="formInline.matrix_title" placeholder="请输入单个模具名称" maxlength="60" style="width: 100%"
                  oninput="value=value.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g,'')" @keydown.enter="findList(1)"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="半成品物料编码">
                <el-input v-model="formInline.produce_sn" placeholder="请输入单个半成品物料编码或名称" maxlength="60" style="width: 100%"
                  @keydown.enter="findList(1)"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="成品规格型号" label-width="90px">
                <el-input v-model="formInline.produce_sku" placeholder="请输入单个成品规格型号" @keydown.enter="findList(1)">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="模具类型" label-width="75px" prop="region">
                <el-select v-model="formInline.type" filterable placeholder="全部" style="width: 100%"
                  @keydown.enter="findList(1)">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="塑胶注塑模" value="1"></el-option>
                  <el-option label="五金模" value="2"></el-option>
                  <el-option label="硅胶模" value="3"></el-option>
                  <el-option label="线材模" value="4"></el-option>
                  <el-option label="铝挤型材模" value="5"></el-option>
                  <el-option label="金属铸造模" value="6"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="有无复制模" label-width="100px">
                <el-select v-model="formInline.is_copy_matrix" filterable placeholder="全部" style="width: 120%"
                  @keydown.enter="findList(1)">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="无" value="1"></el-option>
                  <el-option label="有，供应商所有" value="2"></el-option>
                  <el-option label="有，我司所有" value="3"></el-option>
                  <el-option label="复制模" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="申请开模时间">
                <el-date-picker v-model="formInline.matrix_start" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                  type="date" placeholder="年/月/日" style="width: 90%" @keydown.enter="findList(1)"> </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="开模完成时间" label-width="100px">
                <el-date-picker v-model="formInline.matrix_finish" type="date" format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD" placeholder="年/月/日" :disabled-date="disabledDate" :shortcuts="shortcuts"
                  style="width: 93%" @keydown.enter="findList(1)"> </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="开模申请人" @keydown.enter="findList(1)" label-width="90px">
                <el-input v-model="formInline.matrix_apply" placeholder="开模申请人" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="模具供应商" @keydown.enter="findList(1)">
                <el-input v-model="formInline.supplier" placeholder="模具供应商" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="物料生产供应商" @keydown.enter="findList(1)">
                <el-input v-model="formInline.produc_supplier" placeholder="物料生产供应商" style="width: 120%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="模具状态" label-width="84px">
                <el-select v-model="formInline.status" filterable placeholder="全部" style="width: 92%"
                  @keydown.enter="findList(1)">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="正常" value="1"></el-option>
                  <el-option label="不佳" value="2"></el-option>
                  <el-option label="修模" value="3"></el-option>
                  <el-option label="报废" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <!-- <el-form-item label="模具剩余寿命" @keydown.enter="findList(1)">
                <el-input v-model="formInline.surplus_life_start" placeholder="" style="width:35%;"
                  onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/)" maxlength="3">
                </el-input> %至
                <el-input v-model="formInline.surplus_life_end" placeholder="" style="width:35%;"
                  oninput="this.value = this.value.replace(/[^\d.]/g,'');"></el-input> %
              </el-form-item> -->
            </el-col>
            <el-col :span="13" class="u-t-r">
              <el-button type="primary" @click="findList(1)">搜索</el-button>
              <el-button type="primary" size="mini" @click="reset()">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </div>
    <!--表格-->
    <div class="mold-header">
      <el-button type="primary" @click="addClick">新增</el-button>
      <el-button type="primary" @click="debounceMethods(findList, 2)">导出</el-button>
    </div>
    <div class="bg_white table_90 m-t-10 border-r-10 text-black f-12">
      <vxe-table border height="450" :data="tableColumn" empty-text="没有更多数据了！" ref="xTable1"
        :show-overflow="showOverflow1" :export-config="{}">
        <vxe-column field="matrix_sn" dir="" fixed="left" align="center" title="模具编号" width="150">
          <template #default="{ row }">
            <span @click="addEdit(row.id)" class="cus-point">
              {{ row.matrix_sn }}
            </span>
          </template>
        </vxe-column>
        <vxe-column field="matrix_title" fixed="left" title="模具名称" width="280"></vxe-column>
        <vxe-column field="produce_sn" title="半成品物料编码" width="150"></vxe-column>
        <vxe-column field="produce_sku" title="成品规格型号（sku）" width="280"></vxe-column>
        <vxe-column field="type_name" title="模具类型" width="100" align="center"></vxe-column>
        <vxe-column field="is_copy_matrix_name" title="有无复制模" width="100" align="center"></vxe-column>
        <vxe-column field="cost_price" title="模具费用" width="100" align="right"></vxe-column>
        <vxe-column field="return_standard" title="模具费返还标准（万次）" width="110" align="right"></vxe-column>
        <vxe-column field="matrix_start" title="申请开模时间" width="110"></vxe-column>
        <vxe-column field="matrix_finish" title="开模完成时间" width="110"></vxe-column>
        <vxe-column field="matrix_life" title="模具设计寿命（万次）" width="110"></vxe-column>
        <vxe-column field="holes_num" title="模具穴数" width="83"></vxe-column>
        <vxe-column field="capacity_num" title="模具产能（每小时）" width="100"></vxe-column>
        <!-- <vxe-column field="surplus_life" title="模具剩余寿命" width="110" align="right" ></vxe-column> -->
        <vxe-column field="matrix_apply" title="开模申请人" width="100" align="center"></vxe-column>
        <vxe-column field="supplier" title="模具供应商" width="150"></vxe-column>
        <vxe-column field="produc_supplier" title="物料生产供应商" width="150"></vxe-column>
        <vxe-column field="status_name" title="模具状态" width="83" align="center">
          <template #default="{ row }">
            <span v-if="row.status == 1" class="green">{{ row.status_name }}</span>
            <span v-else-if="row.status == 2" class="yellow">{{ row.status_name }}</span>
            <span v-else-if="row.status == 3" class="red">{{ row.status_name }}</span>
            <span v-else-if="row.status == 4" class="gray">{{ row.status_name }}</span>
          </template>
        </vxe-column>
        <vxe-column field="agreement" title="模具保管协议" width="105" align="center">
          <!--文件图片下载 S-->
          <template #default="{ row }">
            <vxe-button v-if="row.agreement == ''" disabled status="info">下载</vxe-button>
            <vxe-button @click="getDownload(row.agreement)" status="primary" v-else>下载</vxe-button>
          </template>
          <!--文件图片下载 E-->
        </vxe-column>
        <vxe-column field="remark" title="备注" width="280">
          <template #default="scope">
            <el-tooltip effect="dark" :content="scope.row.remark" placement="top"
              :disabled="scope.row.remark.length > 30">
              <span>{{ scope.row.remark }}</span>
            </el-tooltip>
          </template>
        </vxe-column>
      </vxe-table>
      <!--分页-->
      <div class="page-totle">
        <el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 30]" :page-size="formInline.size"
          layout="total, sizes, prev, pager, next, jumper" :total="count" class="m-t-10 m-b-20 table_90"
          @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import download from 'downloadjs' //下载依赖
import { ElMessage } from 'element-plus'
import axios from 'axios'
export default {
  data () {
    return {
      tableData: [],
      tableColumn: [],
      region: [],
      showOverflow1: false, //导出
      formInline: {
        page: 1,
        size: 20,
        matrix_title: '',
        produce_sn: '',
        produce_titile: '',
        produce_sku: '',
        type_name: '',
        is_copy_matrix: '',
        is_copy_matrix_name: '',
        matrix_apply: '',
        supplier: '',
        produc_supplier: '',
        surplus_life_start: '',
        matrix_start: '',
        matrix_finish: '',
        surplus_life_end: '',
        status_name: '',
        status: '',
        export: '',
        type: ''
      },
      value1: '',
      value2: '',
      conut: ''
    }
  },
  created () {
    this.matrix_id = this.$route.query.matrix_id
    this.findList()
  },
  //清除缓存
  activated () {
    this.matrix_id = this.$route.query.matrix_id
    if (this.$route.query.type == 0) {
      ; (this.fileList = []),
        (this.tableColumn = []),
        (this.formInline = {
          matrix_title: '',
          matrix_data: [],
          produce_sku: '',
          type: '',
          is_copy_matrix: '',
          cost_price: '',
          return_standard: '',
          matrix_start: '',
          matrix_finish: '',
          matrix_life: '',
          surplus_life: '',
          supplier: '',
          status: '',
          agreement: '',
          remark: '',
          matrix_apply: '',
          dotype: 'add',
          id: 0
        })
    }
    this.findList()
  },
  //清除缓存
  beforeRouteUpdate (to, from, next) {
    this.matrix_id = to.query.matrix_id
    this.findList()
    next()
  },
  methods: {
    //模具列表
    findList (type) {
      console.log(1111111)
      if (type == 1) {
        this.formInline.page = 1
      }
      if (type == 2) {
        this.formInline.export = 1
        this.batchExport()
        return false
      }
      this.listLoading = true
      this.$http.post('matrix/matrixIndex', this.formInline).then(res => {
        if (res.status == 200) {
          this.tableColumn = res.data.results
          this.matrix_type = res.data.matrix_type
          this.count = res.data.count_limit
          console.log(res.data.result)
        } else {
          ElMessage({
            type: 'error',
            message: res.errmsg
          })
        }
      })
    },
    //批量导出
    batchExport () {
      /* this.batchExportShow = true*/
      const apiVersion = process.env.VUE_APP_API_VERSION.replace(/\./g, '_')
      axios
        .get(process.env.VUE_APP_API_BASEURL + apiVersion + '/matrix/exportMatrix', {
          params: this.formInline,
          responseType: 'blob',
          headers: {
            /*'X-Token': getToken(),*/
            'Content-Type': 'application/json;charset=utf-8'
          }
        })
        .then(res => {
          if (!res) {
            this.$message.error('下载模板文件失败')
            return false
          }
          const stream = res.data // 后端用stream返回Excel文件
          const blob = new Blob([stream])
          // 前端获取业务码，成功执行正常业务
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          const timeStamp = new Date().toString()
          const nameStr = decodeURI(escape(JSON.parse(res.headers['content-disposition'].split(';')[1].split('=')[1])))
          downloadElement.download = nameStr // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
    },
    //重置
    reset () {
      this.formInline = {
        page: 1,
        size: 20,
        matrix_title: '',
        produce_sn: '',
        produce_sku: '',
        type_name: '',
        type: '',
        is_copy_matrix: '',
        produce_titile: '',
        matrix_apply: '',
        supplier: '',
        produc_supplier: '',
        surplus_life_start: '',
        surplus_life_end: '',
        status_name: ''
      }
      this.findList()
    },
    //保留两位小数
    numFilter (value) {
      const realVal = parseFloat(value).toFixed(2)
      return realVal
    },
    //分页
    handleSizeChange (new_size) {
      this.formInline.size = new_size
      this.findList()
    },
    handleCurrentChange (new_page) {
      this.formInline.page = new_page
      this.findList()
    },
    //新增
    addClick () {
      this.$router.push({
        path: '/mold/add_mold',
        query: { type: 0 }
      })
    },
    addEdit (matrix_id) {
      this.$router.push({
        path: '/mold/edit_mold',
        query: { matrix_id: matrix_id }
      })
    },
    //下载
    getDownload (agreement) {
      download(agreement)
    }
  }
}
</script>
<style scoped>
::v-deep(.vxe-table--render-default .vxe-body--column:not(.col--ellipsis), .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis), .vxe-table--render-default .vxe-header--column:not(.col--ellipsis)) {
  padding: 5px 0;
  font-size: 12px;
}

::v-deep(.el-form-item__label, .el-form-item__label) {
  font-size: 12px;
}

::v-deep(.vxe-button.type--button) {
  height: 24px;
}

::v-deep(.vxe-button) {
  font-size: 12px;
}

::v-deep(.vxe-body--row:hover) {
  background: #f9f9f9;
}

.f-12 {
  font-size: 12px;
}

.cus-point {
  cursor: pointer;
  color: #2c74fa;
}

.cus-point:hover {
  color: #2c74fa;
}

.green {
  color: #38b48b;
}

.yellow {
  color: #fb941c;
}

.red {
  color: #ff3000;
}

.gray {
  color: #909090;
}

.mold-header {
  margin: 20px;
}

.u-t-r {
  text-align: right;
}

::v-deep(.el-button) {
  min-height: 34px;
  padding: 6px 20px;
}

.page-totle {
  width: 100%;
  text-align: right;
}

::v-deep(.vxe-table--render-default .vxe-cell) {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
