<script>
import {querySalesQuoteByPage} from "../../../api/quote/salesQuote";

export default {
  name: "salesQuote",
  props: {
    queryStyle: {
      type: Object,
      default: () => ({
        width: "1200px",
      })
    },
    height: {
      type: [String, Number],
      default: "80vh"
    },
    currentRow:{
      type: Object,
      default: () => ({
        id: "",
      })
    }
  },
  data() {
    return {
      queryLoading: false,
      dataList: [],
      querySalesQuote: {
        site: "",
        customerNo: "",
        customerDesc: "",
        projectId: "",
        projectDesc: "",
        status: "",
        quoterName: "",
        trackerName: "",
        quotationNo: "",
        startDate: "",
        endDate: "",
        customerInquiryNo: "",
        internalInquiryNo: "",
      },
      no: 1,
      size: 20,
      total: 0,
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table1QuoteVersionNo',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'quoteVersionNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '报价单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table1QuotationDate',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'quotationDate',
          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: 102003,
          serialNumber: '102003Table1CustomerNo',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'customerNo',
          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: 102003,
          serialNumber: '102003Table1CustomerName',
          tableId: '102003Table1',
          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: 102003,
          serialNumber: '102003Table1ProjectId',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'projectId',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '项目编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200
        }, {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table1ProjectName',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'projectDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '项目名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200
        },
        {
          userId: this.$store.state.user.name,
          functionId: 102003,
          serialNumber: '102003Table1QuoterName',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'quoterName',
          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: 102003,
          serialNumber: '102003Table1TrackerName',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'trackerName',
          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: 102003,
          serialNumber: '102003Table1Currency',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'currency',
          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: 102003,
          serialNumber: '102003Table1Status',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'status',
          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: 102003,
          serialNumber: '102003Table1CustomerInquiryNo',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'customerInquiryNo',
          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: 102003,
          serialNumber: '102003Table1InternalInquiryNo',
          tableId: '102003Table1',
          tableName: '报价信息表',
          columnProp: 'internalInquiryNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '内部询价单号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120
        },
      ],
    }
  },
  methods: {
    handleQuerySalesQuote() {
      let params = {
        ...this.querySalesQuote,
        no: this.no,
        size: this.size,
        site: this.$store.state.user.site,
      }
      this.queryLoading = true;
      querySalesQuoteByPage(params).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.rows
          this.total = data.total
        } else {
          this.$message.warning(data.msg)
        }
        this.queryLoading = false;
      }).catch((error) => {
        this.$message.error(error)
        this.queryLoading = false;
      })
    },
    handleSizeChange(val){
      this.size = val;
      this.handleQuerySalesQuote();
    },
    handleCurrentChange(val){
      this.no = val;
      this.handleQuerySalesQuote();
    },
    handleSaveSalesQuote(){
      this.$emit("save")
    },
    handleUpdateSalesQuoteStatus(row){
      let salesQuote = {
        ...row,
        quotationStatus: row.status,
      }
      this.$emit("updateStatus",salesQuote)
    },
    handleShowSalesQuote(row){
      this.$emit("show",row)
    },
    handleUpdateSalesQuote(row){
      this.$emit("update",row)
    },
    handleRemoveSalesQuote(row){
      this.$emit("remove",row)
    },
    handleAgainSalesQuote(row){
      this.$emit("again",row)
    },
    rowStyle({row}){
      if (this.currentRow.id === row.id){
        return {'background-color': '#E8F7F6'}
      }
    },
    handleClickRow(row){
      let salesQuote = {
        ...row,
        quotationHeaderId: row.id,
      }
      this.$emit("rowClick",salesQuote)
    }
  }
}
</script>

<template>
  <div>
    <div :style="queryStyle">
      <el-form :model="querySalesQuote" label-position="top">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label="客户编码">
              <el-input v-model="querySalesQuote.customerNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="客户名称">
              <el-input v-model="querySalesQuote.customerDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="采购专员">
              <el-input v-model="querySalesQuote.trackerName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="报价单号">
              <el-input v-model="querySalesQuote.quotationNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="客户询价单号">
              <el-input v-model="querySalesQuote.customerInquiryNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="内部询价单号">
              <el-input v-model="querySalesQuote.internalInquiryNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label="项目编码">
              <el-input v-model="querySalesQuote.projectId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="项目名称">
              <el-input v-model="querySalesQuote.projectDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="报价专员">
              <el-input v-model="querySalesQuote.quoterName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="状态">
              <el-select v-model="querySalesQuote.status">
                <el-option label="全部" value=""></el-option>
                <el-option label="草稿" value="草稿"></el-option>
                <el-option label="下达" value="下达"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报价日期">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="querySalesQuote.startDate"
                style="width: 48%"
                type="date"
                placeholder=" ">
              </el-date-picker>
              <div style="width: 1.2%;text-align: center;display: inline-block;">
                -
              </div>
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="querySalesQuote.endDate"
                style="width: 48%"
                type="date"
                placeholder=" ">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label=" ">
              <el-button type="primary" :loading="queryLoading" @click="handleQuerySalesQuote">查询</el-button>
              <el-button type="primary" @click="handleSaveSalesQuote">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="dataList"
              border
              :height="height"
              :row-style="rowStyle"
              @row-click="handleClickRow">
      <el-table-column
        v-for="(item,index) in columns" :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
        label="操作"
        align="center"
        fixed="right"
        width="160">
        <template slot-scope="{row,$index}">
          <a v-if="row.status === '草稿'" @click="handleUpdateSalesQuoteStatus(row)">下达</a>
          <a v-if="row.status === '下达'" @click="handleUpdateSalesQuoteStatus(row)">取消下达</a>
          <a v-if="row.status !== '草稿'" @click="handleShowSalesQuote(row)">详情</a>
          <a v-if="row.status === '草稿'" @click="handleUpdateSalesQuote(row)">编辑</a>
          <a v-if="row.status === '草稿'" @click="handleRemoveSalesQuote(row)">删除</a>
          <a @click="handleAgainSalesQuote(row)">重新报价</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 0px"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="no"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="size"
                   :total="total"
                   layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<style scoped>
</style>
