<template>
  <div>
    <el-form label-position="top" :inline="true" :model="searchData" @keyup.enter.native="getDataList">
      <div>
        <el-form-item label="申请批次号">
          <el-input v-model="searchData.quotationBatchNo" style="width: 120px" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="searchData.customerNo" style="width: 120px" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="searchData.customerDesc" style="width: 120px" clearable></el-input>
        </el-form-item>
        <el-form-item label="跟单员" v-if="defaultFlag">
          <el-input v-model="searchData.trackerName" style="width: 120px" clearable></el-input>
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input v-model="searchData.testPartNo" style="width: 120px" clearable></el-input>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="searchData.partName" style="width: 120px" clearable></el-input>
        </el-form-item>
        <el-form-item label="要求完成日期" v-if="defaultFlag">
          <el-date-picker
            value-format="yyyy-MM-dd"
            style="width: 120px"
            v-model="searchData.startDate"
            type="date"
            placeholder=" ">
          </el-date-picker>
        </el-form-item>
        <el-form-item label=" " v-if="defaultFlag">
          <div style="text-align: center;"><i class="el-icon-right"></i></div>
        </el-form-item>
        <el-form-item label=" " v-if="defaultFlag">
          <el-date-picker
            value-format="yyyy-MM-dd"
            style="width: 120px"
            v-model="searchData.endDate"
            type="date"
            placeholder=" ">
          </el-date-picker>
        </el-form-item>
      </div>
      <el-form-item label="批次序号" v-if="defaultFlag">
        <el-input v-model="searchData.quotationItemNo" style="width: 120px" clearable ></el-input>
      </el-form-item>
      <el-form-item label="项目编码">
        <el-input v-model="searchData.projectId" style="width: 120px" clearable></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="searchData.projectName" style="width: 120px" clearable></el-input>
      </el-form-item>
      <el-form-item label="报价专员">
        <el-input v-model="searchData.quoterName" style="width: 120px" clearable></el-input>
      </el-form-item>
      <el-form-item label="IFS物料编码">
        <el-input v-model="searchData.finalPartNo" style="width: 120px" clearable></el-input>
      </el-form-item>
      <el-form-item label="客户物料编码">
        <el-input v-model="searchData.customerPartNo" style="width: 120px" clearable></el-input>
      </el-form-item>
      <el-form-item label="优先等级" v-if="defaultFlag">
        <el-select v-model="searchData.priorityLevel" style="width: 120px">
          <el-option label="全部" value=""></el-option>
          <el-option label="紧急" value="紧急"></el-option>
          <el-option label="一般" value="一般"></el-option>
          <el-option label="不紧急" value="不紧急"></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item :label="'状态'">-->
<!--        <el-select v-model="searchData.quotationResultStatus" style="width: 120px">-->
<!--          <el-option label="全部" value=""></el-option>-->
<!--          <el-option label="已下达" value="C"></el-option>-->
<!--          <el-option label="已完成报价" value="E"></el-option>-->
<!--          <el-option label="已提交报价" value="S"></el-option>-->
<!--          <el-option label="客户已反馈" value="R"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item :label="'状态'">
        <el-select v-model="searchData.quotationStatus" style="width: 120px">
          <el-option label="全部" value=""></el-option>
          <el-option label="草稿" value="草稿"></el-option>
          <el-option label="审批中" value="审批中"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="getDataList">查 询</el-button>
        <el-button type="primary"  @click="handleQuote" v-if="defaultFlag">报 价</el-button>
      </el-form-item>
    </el-form>

    <!-- 报价列表 -->
    <el-table
      :height="defaultFlag?'76vh':300"
      :data="dataList"
      border
      v-loading="dataListLoading"
      row-key='quotationNo'
      @row-click="quotationClickRow"
      @selection-change="selectionQuotation"
      ref="quotationTable"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        reserve-selection
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center" label="状态" prop="quotationStatus"
        width="80">
<!--        <template slot-scope="scope">-->
<!--          <span v-show="scope.row.quotationResultStatus === 'C'">已下达</span>-->
<!--          <span v-show="scope.row.quotationResultStatus === 'E'">已完成报价</span>-->
<!--          <span v-show="scope.row.quotationResultStatus === 'S'">已提交报价</span>-->
<!--          <span v-show="scope.row.quotationResultStatus === 'R'">客户已反馈</span>-->
<!--        </template>-->
      </el-table-column>
      <template v-for="(item,index) in columnList">
        <el-table-column
          :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>
      </template>
    </el-table>

    <selectDiv ref="selectDiv"></selectDiv>

    <!-- 分页插件 -->
    <el-pagination style="margin-top: 0px"
                   @size-change="sizeChangeHandle"
                   @current-change="currentChangeHandle"
                   :current-page="pageIndex"
                   :page-sizes="[20,50, 100, 200, 500]"
                   :page-size="pageSize"
                   :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-dialog :visible.sync="quoteVisible" title="待报价信息" :close-on-click-modal="false" append-to-body width="1000px">
      <el-table :data="quotationSelections" border height="300">
        <el-table-column label="状态" header-align="center" align="center" prop="quotationStatus" min-width="80"/>
        <el-table-column label="申请单号" header-align="center" align="center" prop="quotationNo" min-width="120"/>
        <el-table-column label="项目编码" header-align="center" align="left" prop="projectId" min-width="100"/>
        <el-table-column label="项目名称" header-align="center" align="left" prop="projectName" min-width="120"/>
        <el-table-column label="物料编码" header-align="center" align="left" prop="testPartNo" min-width="200"/>
        <el-table-column label="物料名称" header-align="center" align="left" prop="partName" min-width="220"/>
        <el-table-column label="MOQ" header-align="center" align="right" prop="qty" min-width="80">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.qty" :controls="false" :min="0" :step="0"></el-input-number>
          </template>
        </el-table-column>
      </el-table>

      <el-footer style="height: 30px;line-height:30px;text-align: center">
        <el-button :loading="saveBatchQuotationLoading" type="primary" @click="batchQuotation">确定</el-button>
        <el-button type="primary" @click="quoteVisible=false">取消</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>
import {
  quotationInformationSearch, // 询价信息列表查询
} from '@/api/quotation/quotationInformation.js'
import {batchSaveQuote} from "../../../api/quote/quote";
export default {
  name:"toBeQuoted",
  props:{
    defaultFlag:{
      type:Boolean,
      default:true,
    },
    quotationNo:{
      type:String,
      default: "",
    }
  },
  data(){
    return{
      // 查询条件
      searchData:{
        site: this.$store.state.user.site,
        quotationBatchNo: '',
        quotationItemNo: '',
        customerNo: '',
        customerDesc: '',
        trackerName: '',
        testPartNo: '',
        partName: '',
        quotationStatus: '审批中',
        quotationResultStatus: '',
        startDate: '',
        endDate: '',
        projectId: '',
        projectName: '',
        quoterName: '',
        priorityLevel: '',
        customerPartNo: '',
        finalPartNo: '',
        limit:1,
        page:0,
      },
      // 分页
      pageIndex: 1,//当前页码
      pageSize:20,//每页条数
      totalPage:0,//总条数
      // 表格数据
      dataList:[],//表格数据
      quotationSelections:[],//表格选中数据
      // 表格刷新
      dataListLoading:false,
      // 按钮状态
      saveBatchQuotationLoading:false,
      // ======== 列表表头 ========
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1QuotationNo',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'quotationNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '申请单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false,
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1QuotationBatchNo',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'quotationBatchNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '申请批次号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },{
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1QuotationItemNo',
          tableId: '102001Table1',
          tableName: '询价信息表',
          columnProp: 'quotationItemNo',
          headerAlign: 'center',
          align: 'right',
          columnLabel: '序号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1CustomerNo',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'customerNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '客户编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1CustomerDesc',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'customerDesc',
          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: 102001,
          serialNumber: '102001Table1ProjectId',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'projectId',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '项目编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1ProjectName',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'projectName',
          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: 102001,
          serialNumber: '102001Table1TestPartNo',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'testPartNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 160
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1PartName',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'partName',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '物料名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1FinalPartNo',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'finalPartNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: 'IFS物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1CustomerPartNo',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'customerPartNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '客户物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1TrackerName',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'trackerName',
          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: 102001,
          serialNumber: '102001Table1QuoterName',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'quoterName',
          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: 102001,
          serialNumber: '102001Table1PriorityLevel',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'priorityLevel',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '优先等级',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1RequiredCompletionDate',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'requiredCompletionDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '要求完成日期',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 160
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1CreateDate',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 160
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102001,
          serialNumber: '102001Table1CreateBy',
          tableId: '102001Table1',
          tableName: '报价信息表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '创建人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
      ],

      quoteVisible:false,
    }
  },
  created() {
    this.getDataList();
  },
  methods:{
    // 搜索条件中的时间输入框 change事件
    changeDateRange(){
      if (this.searchData.dateValue){
        this.searchData.startDate = this.searchData.dateValue[0];
        this.searchData.endDate = this.searchData.dateValue[1];
      }else {
        this.searchData.startDate="";
        this.searchData.endDate="";
      }
    },
    /**
     * 获取数据列表
     */
    getDataList () {
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      let params = {
        ...this.searchData,
        createBy:this.$store.state.user.name
      }
      if (!this.defaultFlag){
        params.quotationNo = this.quotationNo === ""?"*":this.quotationNo;
      }

      this.dataListLoading = true;
      quotationInformationSearch(params).then(({data}) => {
        if (data.code === 0) {
          this.dataList = data.page.list
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount
          this.$refs.selectDiv.setLengthAll(this.dataList.length)
        }
        this.dataListLoading = false;
      })
    },
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 表格单击事件
    quotationClickRow (row) {
      this.$refs.quotationTable.toggleRowSelection(row)
    },
    selectionQuotation (val) {
      this.quotationSelections = val
      this.$refs.selectDiv.setLengthselected(this.quotationSelections.length)
    },
    // 报价
    batchQuotation(){
      this.saveBatchQuotationHeader(this.quotationSelections);
    },
    // 批量新增报价信息
    saveBatchQuotationHeader(list){
      this.saveBatchQuotationLoading = true;
      batchSaveQuote(list).then(({data})=>{
        this.saveBatchQuotationLoading = false;
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.quoteVisible = false;
          this.$refs.quotationTable.clearSelection();
          this.$router.push({name:"quote-index",params:{ids:data.rows},})
        }else {
          this.$message.error(data.msg);
        }
      }).catch((error)=>{
        this.saveBatchQuotationLoading = false;
      })
    },
    handleQuote(){
      if (this.quotationSelections.length === 0){
        this.$message.warning("请选择需报价的单号")
        return
      }
      this.quotationSelections = this.quotationSelections.map(item=>{
        item.qty = 1
        item.createBy = this.$store.state.user.name
        item.site = this.$store.state.user.site
        return item;
      })
      this.quoteVisible = true;
    }
  },
  mounted() {

  },
  watch:{
    "searchData.quotationBatchNo"(newVal,oldVal){
      this.searchData.quotationBatchNo = newVal.toUpperCase();
    },
    "searchData.customerNo"(newVal,oldVal){
      this.searchData.customerNo = newVal.toUpperCase();
    },
    "searchData.projectId"(newVal,oldVal){
      this.searchData.projectId = newVal.toUpperCase();
    },
    quoteVisible(newVal,oldVal){
      if (newVal === false){
        this.saveBatchQuotationLoading = false;
      }
    }
  }
}

</script>

<style scoped>
/deep/ .el-range-editor--mini.el-input__inner {
  height: 20px;
}
/deep/ .el-range-editor.el-input__inner{
  padding: 0px 10px;
}
/deep/ .el-date-editor .el-range-separator{
  width: auto;
}
/deep/ .el-input--mini .el-input__icon{
  line-height: 20px;
}
.el-table /deep/ .cell{
  height: auto;
  line-height: 1;
}
</style>
