<template>
  <div class="mod-config">
<!--    工具申请界面-->
    <el-form label-position="top" :model="searchData">
      <el-row :gutter="18">
        <el-col :span="2">
          <el-form-item label="客户编码">
            <el-input v-model="searchData.customerNo" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="客户名称">
            <el-input v-model="searchData.customerName" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="跟单员">
            <el-input v-model="searchData.trackerName" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="报价单号">
            <el-input v-model="searchData.quotationNo" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="客户询价单号">
            <el-input v-model="searchData.customerInquiryNo" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="内部询价单号">
            <el-input v-model="searchData.internalInquiryNo" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="18">
        <el-col :span="2">
          <el-form-item label="项目编码">
            <el-input v-model="searchData.projectId" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="项目名称">
            <el-input v-model="searchData.projectName" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="报价专员">
            <el-input v-model="searchData.quoterName" size="large" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="11">
              <el-form-item label="开始日期">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  v-model="searchData.startDate"
                  type="date"
                  placeholder="开始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label=" ">
                <svg t="1701739447362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8471" id="mx_n_1701739447363" width="20" height="20"><path d="M524.288 804.864l444.416-294.912-444.416-294.912v143.36H81.92V655.36h442.368v149.504z m0 0" p-id="8472"></path></svg>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="结束日期">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  v-model="searchData.endDate"
                  type="date"
                  placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button plain type="primary" @click="initDataBtn" @keyup.enter.native="initDataBtn">查 询</el-button>
            <el-button type="primary" @click="applyModel">刀模申请</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="dataList"
      :height="height"
      border
      @selection-change="selectionChangeHandle"
      v-loading="dataListLoading"
      style="width: 100%; ">
      <el-table-column
        type="selection"
        align="center"
        width="30">
      </el-table-column>
<!--      <el-table-column-->
<!--        v-for="(item,index) in columnList1" :key="index"-->
<!--        :sortable="item.columnSortable"-->
<!--        :prop="item.columnProp"-->
<!--        :header-align="item.headerAlign"-->
<!--        :show-overflow-tooltip="item.showOverflowTooltip"-->
<!--        :align="item.align"-->
<!--        :fixed="item.fixed==''?false:item.fixed"-->
<!--        :min-width="item.columnWidth"-->
<!--        :label="item.columnLabel">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>-->
<!--          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"-->
<!--                                             style="width: 100px; height: 80px"/></span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        align="center"
        prop="quotationNo"
        label="报价单号"
        min-width="110"
        show-overflow-tooltip>
        <template slot-scope="{row,$index}">
          {{row.quotationNo+'-'+row.versionCode}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="quotationDate"
        min-width="90"
        label="报价日期"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        align="center"
        prop="customerNo"
        min-width="80"
        show-overflow-tooltip
        label="客户编码">
      </el-table-column>
      <el-table-column
        align="left"
        prop="customerName"
        min-width="120"
        show-overflow-tooltip
        label="客户名称">
      </el-table-column>
      <el-table-column
        align="center"
        prop="projectId"
        min-width="90"
        show-overflow-tooltip
        label="项目编码">
      </el-table-column>
      <el-table-column
        align="left"
        prop="projectName"
        min-width="120"
        show-overflow-tooltip
        label="项目名称">
      </el-table-column>
      <el-table-column
        align="left"
        prop="quoterName"
        min-width="80"
        show-overflow-tooltip
        label="报价专员">
      </el-table-column>
      <el-table-column
        align="left"
        prop="trackerName"
        min-width="80"
        show-overflow-tooltip
        label="跟单员">
      </el-table-column>
      <el-table-column
        align="left"
        prop="currency"
        min-width="60"
        show-overflow-tooltip
        label="货币">
      </el-table-column>
      <el-table-column
        align="center"
        prop="quotationStatus"
        min-width="60"
        show-overflow-tooltip
        label="状态">
      </el-table-column>
      <el-table-column
        align="left"
        prop="remark"
        show-overflow-tooltip
        min-width="120"
        label="备注">
      </el-table-column>
      <el-table-column
        align="center"
        prop="customerInquiryNo"
        show-overflow-tooltip
        min-width="80"
        label="客户询价单号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="internalInquiryNo"
        show-overflow-tooltip
        min-width="80"
        label="内部询价单号">
      </el-table-column>
<!--      <el-table-column-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        width="150"-->
<!--        fixed="right"-->
<!--        label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <a type="text" size="small" @click="updateModel(scope.row)">修改</a>-->
<!--          <a type="text" size="small" @click="deleteData(scope.row)">删除</a>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 1000]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog
      width="800px" v-drag
      :title="'刀模申请'"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form :inline="true" label-position="top" label-width="100px" >
        <el-form-item :label="'申请编号'">
          <el-input v-model="dataForm.applyNo" style="width: 130px" disabled></el-input>
        </el-form-item>
        <el-form-item :label="'申请人'" required="required">
          <el-input v-model="dataForm.applyBy" style="width: 130px" ></el-input>
        </el-form-item>
        <el-form-item :label="'申请日期'" required="required">
          <el-date-picker
            value-format="yyyy-MM-dd"
            style="width: 100%"
            v-model="dataForm.applyDate"
            type="date"
            placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="'申请总数'">
          <el-input v-model="dataForm.applySumQty" style="width: 130px" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" >
        <el-form-item :label="'申请原因'">
          <el-input v-model="dataForm.applyReason" style="width: 770px" ></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-position="top" label-width="100px" >
        <el-form-item :label="'备注'">
          <el-input v-model="dataForm.remark" style="width: 770px" ></el-input>
        </el-form-item>
      </el-form>
      <div  class="rq">
        <el-table
          height="250"
          :data="toolData"
          border
          ref="toolTable"
          v-loading="dataListLoading"
          style="width: 100%;">
          <el-table-column label="报价单号" width="90" prop="quotationNo" show-overflow-tooltip/>
          <el-table-column label="产品编码" width="150" prop="productNo" show-overflow-tooltip/>
          <el-table-column label="工具编码" width="90" prop="toolNo" show-overflow-tooltip/>
          <el-table-column label="工具描述" width="120" prop="toolDescription" show-overflow-tooltip/>
          <el-table-column label="工具数量" width="60" prop="toolQuantity" show-overflow-tooltip/>
          <el-table-column label="申请数量" width="70" prop="applyQty" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.applyQty" type="number" @change="changeSum(scope.row)"  placeholder="请输入数量" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                        style="width:98%"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" width="120" prop="productDesc" show-overflow-tooltip/>
          <el-table-column label="工具成本" width="60" prop="unitCost" show-overflow-tooltip/>
          <el-table-column label="单位报价成本" width="90" prop="quotationUnitCost" show-overflow-tooltip/>
          <el-table-column label="预计使用寿命" width="90" prop="expectedServiceLife" show-overflow-tooltip/>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveData()">{{'保存'}}</el-button>
        <el-button type="primary" @click="visible = false">{{'取消'}}</el-button>
      </span>
    </el-dialog>
    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
  import {
    getQuotationHeaderForToolingInfo,
    getQuotationToolForApply,
    saveToolApply,
  } from "@/api/project/toolingInfo.js"
  import Chooselist from '@/views/modules/common/Chooselist'
  export default {
    components: {
      Chooselist
    },
    data() {
      return {
        height: 200,
        dataList: [],
        searchFlag:false,
        // 搜索条件对象
        searchData:{
          site:this.$store.state.user.site,// 工厂编号
          customerNo:"", // 客户编码
          customer:"", // 客户名称
          tracker:"", // 跟单员
          quotationStatus:"", //状态
          projectId:"", // 项目编码
          projectName:"", // 项目名称
          quoterName:"", // 报价专员
          startDate:"", // 开始日期
          endDate:"", // 结束日期
          dateValue:[],// 开始时间结束时间数组
        },
        exportList:[],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        visible:false,
        dataListLoading: false,
        currentRow:'',
        columnList1:[
          {
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4TestPartNo',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "testPartNo",
            headerAlign: "center",
            align: "left",
            columnLabel: "物料编码",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4PartType',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "partType",
            headerAlign: "center",
            align: "left",
            columnLabel: "物料分类",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 60
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4PartTypeDesc',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "partTypeDesc",
            headerAlign: "center",
            align: "left",
            columnLabel: "物料分类名称",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4PartName',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "partName",
            headerAlign: "center",
            align: "left",
            columnLabel: "物料名称",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4PartDesc',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "partDesc",
            headerAlign: "center",
            align: "left",
            columnLabel: "物料描述",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4PartSpec',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "partSpec",
            headerAlign: "center",
            align: "left",
            columnLabel: "规格型号",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4MaterialNumber',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "materialNumber",
            headerAlign: "center",
            align: "left",
            columnLabel: "物料图号",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4Remark',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "remark",
            headerAlign: "center",
            align: "left",
            columnLabel: "备注",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4CreateDate',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "createDate",
            headerAlign: "center",
            align: "left",
            columnLabel: "创建时间",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 160
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4CreateBy',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "createBy",
            headerAlign: "center",
            align: "left",
            columnLabel: "创建人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4UpdateDate',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "updateDate",
            headerAlign: "center",
            align: "left",
            columnLabel: "上次修改日期",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 160
          },{
            userId: this.$store.state.user.name,
            functionId: 106001,
            serialNumber: '106001Table4UpdateBy',
            tableId: "106001Table4",
            tableName: "项目物料",
            columnProp: "updateBy",
            headerAlign: "center",
            align: "left",
            columnLabel: "修改人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
        ],
        dataForm:{
          site: '',
          applyNo: '',
          applyBy:'',
          applyDate:'',
          applySumQty:'',
          applyReason:'',
          remark:'',
          createBy:'',
          detailList:[],
        },
        toolData:[],
        dataListSelections:[],
        dataRole: {
          partTypeDesc: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
          partName: [
            {
              required: true,
              message: ' ',
              trigger: 'change'
            }
          ],
        },
        // 导出 start
        exportData: [],
        exportName: '项目物料'+this.dayjs().format('YYYYMMDDHHmmss'),
        exportHeader: ["项目物料"],
        exportFooter: [],
        // 导出 end
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 230;
      })
    },
    methods: {
      // 获取基础数据列表S
      getBaseList (val, type) {
        this.tagNo = val
        this.tagNo1 = type
        this.$nextTick(() => {
          let strVal = ''
          if (val === 1013) {
            if(type==1) {
              strVal = this.dataForm.partType
            }
          }
          this.$refs.baseList.init(val, strVal)
        })
      },
      /* 列表方法的回调 */
      getBaseData (val) {
        if (this.tagNo === 1013) {
          if(this.tagNo1==1) {
            this.dataForm.partType = val.Base_id
            this.dataForm.partTypeDesc = val.Base_desc
          }
        }
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.search()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.search()
      },
      initDataBtn(){
        this.$route.params.ids = null;
        this.initData();
      },
      // 初始化数据
      initData(){
        let ids = ""
        if (this.$route.params.ids){
          ids = "?"
          for (let i = 0; i < this.$route.params.ids.length; i++) {
            ids+='ids='+this.$route.params.ids[i]+'&'
          }
          ids = ids.substring(0,ids.length-1);
        }
        let params = {
          no:this.no,
          size:this.size,
          site:this.$store.state.user.site,
          customerNo:this.searchData.customerNo,
          customerName:this.searchData.customerName,
          trackerName:this.searchData.trackerName,
          quotationNo:this.searchData.quotationNo,
          customerInquiryNo:this.searchData.customerInquiryNo,
          internalInquiryNo:this.searchData.internalInquiryNo,
          quotationStatus:this.searchData.quotationStatus,
          projectId:this.searchData.projectId,
          projectName:this.searchData.projectName,
          quoterName:this.searchData.quoterName,
          startDate:this.searchData.startDate,
          endDate: this.searchData.endDate,
        }
        this.init(params,ids)
      },
      init(params,ids){
        this.initQuotationHeaderLoading = true;
        getQuotationHeaderForToolingInfo(params,ids).then(({data})=>{
          this.dataList = data.data.records;
          this.total = data.data.total;
          if (this.tableData.length > 0){
            this.quotationHeader = this.tableData[0];
          }else {
            this.quotationHeader = null;
          }
          this.initQuotationHeaderLoading = false;
        }).catch((error)=>{
          this.initQuotationHeaderLoading = false;
        })
      },
      applyModel() {
        if(this.dataListSelections.length===0){
          this.$alert('请选择报价单！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        getQuotationToolForApply(this.dataListSelections).then(({data}) => {
          if (data.code == 0) {
            this.toolData=data.rows
          }
        })
        this.dataForm={
          site: this.$store.state.user.site,
          applyNo: '',
          applyBy:this.$store.state.user.name,
          applyDate:new Date(),
          applySumQty:0,
          applyReason:'',
          remark:'',
          createBy:this.$store.state.user.name,
          detailList:[],
        };
        this.visible=true;
      },
      changeSum(row){
        if(row.applyQty!=null&&row.applyQty!==''&& row.toolQuantity<row.applyQty){
          row.applyQty=''
          this.$alert('实际申请数量大于表单工具数量！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        this.dataForm.applySumQty =0
        for (const item of this.toolData) {
          // 累加之前先确保值存在，并将 null 或 undefined 转换为0
          this.dataForm.applySumQty += Number(item.applyQty != null && item.applyQty !== '' ? item.applyQty : 0);
        }
      },
      saveData(){
        for (let i = 0; i <  this.toolData.length; i++) {
          if(this.toolData[i].toolQuantity<this.toolData[i].applyQty){
            this.$alert( '工具：'+this.toolData[i].toolNo +'  实际申请数量大于表单工具数量！', '错误', {
              confirmButtonText: '确定'
            })
            return false;
          }
        }
        if(this.dataForm.applySumQty===0){
          this.$alert('未填写申请数量！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.applyBy===''||this.dataForm.applyBy==null){
          this.$alert('未选择申请人！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        if(this.dataForm.applyDate===''||this.dataForm.applyDate==null){
          this.$alert('未选择申请日期！', '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        this.$confirm('确定要保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let i = 0; i < this.toolData.length; i++) {
            if (this.toolData[i].applyQty===''||this.toolData[i].applyQty==null){
              this.toolData[i].applyQty=0
            }
          }
          this.dataForm.detailList=JSON.parse(JSON.stringify(this.toolData))
          saveToolApply(this.dataForm).then(({data}) => {
            if (data && data.code == 0) {
              this.visible=false;
              this.initDataBtn();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }).catch(() => {
        })
      },
      //导出excel
      //导出excel
      async createExportData() {
        // this.searchData.limit = -1
        // this.searchData.page = 1
        // await projectInfoSearch(this.searchData).then(({data}) => {
        //   this.exportList= data.page.list;
        // })
        //
        // return this.exportList;
      },
      startDownload() {
        //  this.exportData = this.dataList

      },
      finishDownload() {
      },
      fields() {
        let json = "{"
        this.columnList1.forEach((item, index) => {
          if (index == this.columnList1.length - 1) {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
          } else {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
          }
        })
        json += "}"
        let s = eval("(" + json + ")")

        return s
      },
    },
  }
</script>

<style scoped>

</style>
