<template>
  <div>
    <el-input class="mt-10" style="width:200px" prefix-icon="el-icon-search" size="small" placeholder="搜索产品名称" v-model="param.content.where.condition" @keyup.native.enter="search()" @clear="search()" clearable></el-input>
    <div style="float: right">
      <label class="search__label">折扣(%):</label>
      <el-input style="width: 100px;" v-model="discountrate" size="small"   label="默认折扣"  @change="discountrateChange"></el-input>
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      style="width: 100%"
      size="mini"
      border>
    <el-table-column
        prop="itemno"
        label="产品编号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="itemname"
        label="产品名称"
        width="180">
    </el-table-column>
    <el-table-column
        label="型号"
        width="180">
      <template slot-scope="scope">
        <p><span>{{scope.row.model}}</span></p>
      </template>
    </el-table-column>
    <el-table-column
        label="规格"
        width="180">
      <template slot-scope="scope">
        <p><span>{{scope.row.spec}}</span></p>
      </template>
    </el-table-column>
    <el-table-column
        prop="caliber"
        label="口径"
        width="180">
    </el-table-column>
    <el-table-column
        prop="pressure"
        label="压力"
        width="180">
    </el-table-column>
    <el-table-column
        prop="material"
        label="材质"
        width="180">
    </el-table-column>
    <el-table-column
        prop="brand"
        label="品牌"
        width="180">
      <template slot-scope="scope">
        <p v-for="(item,index) in scope.row.brand" :key="index">
          <span style="float: left" v-if="index === scope.row.brand.length -1">{{item?item.brandname+'':'--'}}</span>
          <span style="float: left" v-else>{{item?item.brandname+',':'--'}}</span>
        </p>
      </template>
    </el-table-column>
    <el-table-column
        prop="itemclass"
        label="类别"
        width="180">
      <template slot-scope="scope">
        <p v-for="(item,index) in scope.row.itemclass" :key="index">
          <span style="float: left" v-if="index === scope.row.itemclass.length -1">{{item?item.itemclassname+'':'--'}}</span>
          <span style="float: left" v-else>{{item?item.itemclassname+',':'--'}}</span>
        </p>
      </template>
    </el-table-column>
    <el-table-column
        prop="unitid"
        label="计量单位"
        width="100">
      <template slot-scope="scope">
        <el-tag size="mini" type="info" effect="plain">{{scope.row.unitname}}/{{scope.row.axunitname}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="marketprice"
        label="牌价"
        width="100"
        fixed="right">
    </el-table-column>
     <el-table-column
      label="数量"
      width="180"
      fixed="right">
      <template slot-scope="scope">
        <el-input-number :disabled="!checkDateOut" :controls="true" :step-strictly="true" size="mini" v-model="scope.row.outqty" @change="qtyChange" label="输入数量"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column
        prop="price"
        label="单价"
        width="100"
        fixed="right">
      <template slot-scope="scope">
        <el-input :disabled="!checkDateOut"  size="mini" v-model="scope.row.price" @change="priceChange" label="输入单价"></el-input>
      </template>
    </el-table-column>
    <el-table-column
        prop="outamount"
        label="金额"
        width="100"
        fixed="right">
<!--      <template slot-scope="scope">
        <el-input :disabled="!checkDateOut" :controls="true" :step-strictly="true" size="mini" v-model="scope.row.outqty" @change="amountChange" label="输入金额"></el-input>
      </template>-->
    </el-table-column>
    <el-table-column
        label="操作"
        width="90"
        fixed="right">
      <template slot-scope="scope">
        <el-button :disabled="!checkDateOut" type="text" size="small" @click="deleteProduct(scope.row)">删 除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="container normal-panel flex-align-center flex-between">
      <p v-if="list[0]">金额合计(元): {{list[0].sumamount}}</p>
      <p v-else>金额合计(元): 0</p>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import previewImage from '@/components/previewImage/index.vue'
export default {
  props:['id','mainData'],
  components:{
    previewImage
  },
  data () {
    return {
      param:{
        "id": 20220906154703,
        "version":1,
        "content": {
          "sa_salesforecastbillid":this.$route.query.id,
          "where":{
            "sa_projectid":'',
            "condition":""
          }
        }
      },
      list:[],
      currentPage:0,
      total:0,
      checkDateOut:false,
      time:null,
      discountrate:0
    }
  },
  methods:{
    async listData (sa_projectid,discountrate) {
      this.discountrate = discountrate
      this.param.content.where.sa_projectid = sa_projectid
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    async search () {
      this.param.content.pageNumber = 1
      this.listData(this.param.content.where.sa_projectid,this.discountrate)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData(this.param.content.where.sa_projectid,this.discountrate)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData(this.param.content.where.sa_projectid,this.discountrate)
    },
    qtyChange () {
      console.log(this.list)
      this.list = this.list.filter(e=>{
        e.outamount = e.outqty * e.price
        return e
      })
      if(this.time !== null){
        clearTimeout(this.time);
      }
      this.time = setTimeout(async () => {
        console.log(this.list)
        const res = await this.$api.requested({
          "id": 20220906155003,
          "content": {
            "sa_salesforecastmodelid":this.mainData.sa_salesforecastmodelid,
            "sa_salesforecastbillid":this.$route.query.id,
            "sa_projectid": this.param.content.where.sa_projectid,
            "itemclassinfos": this.list.map(e=>{
              return {
                /*"sa_salesforecastid":e.sa_salesforecastid,
                "itemclassnum": e.itemclassnum,
                "orderqty": e.orderqty,
                "orderamount": e.orderamount,
                "invoiceqty": e.invoiceqty,
                "invoiceamount": e.invoiceamount,
                "outqty": e.outqty,
                "outamount": e.outamount,
                "itemid":e.itemid*/
                "sa_salesforecastid":e.sa_salesforecastid,
                "itemid": e.itemid,
                "orderqty": e.orderqty,
                "orderamount": e.orderamount,
                "invoiceqty": e.invoiceqty,
                "invoiceamount": e.invoiceamount,
                "outqty": e.outqty,
                "price":e.price
              }
            })
          }
        })
        console.log(this.param.content.where.sa_projectid)
        this.listData(this.param.content.where.sa_projectid,this.discountrate)
        this.$emit('onSuccess',this.param.content.where.sa_projectid)
        /*this.tool.showMessage(res,()=>{
          this.listData()
          this.$emit('onSuccess')
        })*/
      },300)
    },
    priceChange(){
      this.list = this.list.filter(e=>{
        e.outamount = e.outqty * e.price
        return e
      })
      if(this.time !== null){
        clearTimeout(this.time);
      }
      this.time = setTimeout(async () => {
        console.log(this.list)
        const res = await this.$api.requested({
          "id": 20220906155003,
          "content": {
            "sa_salesforecastmodelid":this.mainData.sa_salesforecastmodelid,
            "sa_salesforecastbillid":this.$route.query.id,
            "sa_projectid": this.param.content.where.sa_projectid,
            "itemclassinfos": this.list.map(e=>{
              return {
                /*"sa_salesforecastid":e.sa_salesforecastid,
                "itemclassnum": e.itemclassnum,
                "orderqty": e.orderqty,
                "orderamount": e.orderamount,
                "invoiceqty": e.invoiceqty,
                "invoiceamount": e.invoiceamount,
                "outqty": e.outqty,
                "outamount": e.outamount,
                "itemid":e.itemid*/
                "sa_salesforecastid":e.sa_salesforecastid,
                "itemid": e.itemid,
                "orderqty": e.orderqty,
                "orderamount": e.orderamount,
                "invoiceqty": e.invoiceqty,
                "invoiceamount": e.invoiceamount,
                "outqty": e.outqty,
                "price":e.price
              }
            })
          }
        })
        console.log(this.param.content.where.sa_projectid)
        this.listData(this.param.content.where.sa_projectid,this.discountrate)
        this.$emit('onSuccess',this.param.content.where.sa_projectid)
        /*this.tool.showMessage(res,()=>{
          this.listData()
          this.$emit('onSuccess')
        })*/
      },300)
    },
    discountrateChange(){
      if (this.discountrate > 100){
        this.discountrate = 100
      }else if(this.discountrate < 0){
        this.discountrate = 0
      }else {
       this.discountrate = Math.round(this.discountrate * 100)/100
      }
      this.$emit('discountrateSet',this.discountrate)
    },
    /*amountChange (){
      this.list = this.list.filter(e=>{
        e.outamount = e.outqty * e.marketprice
        return e
      })
      if(this.time !== null){
        clearTimeout(this.time);
      }
      this.time = setTimeout(async () => {
        const res = await this.$api.requested({
          "id": 20220906155003,
          "version":1,
          "content": {
            "sa_salesforecastmodelid":this.mainData.sa_salesforecastmodelid,
            "sa_salesforecastbillid":this.$route.query.id,
            "sa_projectid": this.param.content.where.sa_projectid,
            "itemclassinfos": this.list.map(e=>{
              return {
                "sa_salesforecastid":e.sa_salesforecastid,
                "itemclassnum": e.itemclassnum,
                "orderqty": e.orderqty,
                "orderamount": e.orderamount,
                "invoiceqty": e.invoiceqty,
                "invoiceamount": e.invoiceamount,
                "outqty": e.outqty,
                "outamount": e.outamount,
                "itemid":e.itemid
              }
            })
          }
        })
        console.log(this.param.content.where.sa_projectid)
        this.listData(this.param.content.where.sa_projectid)
        this.$emit('onSuccess',this.param.content.where.sa_projectid)
        /!*this.tool.showMessage(res,()=>{
          this.listData()
          this.$emit('onSuccess')
        })*!/
      },1000)
    },*/
    async deleteProduct (row) {
      const res = await this.$api.requested({
        "id": 20220906155103,
        "version":1,
        "content": {
            "sa_salesforecastid":row.sa_salesforecastid,
            "sa_projectid":0,
            "sa_salesforecastbillid":this.$route.query.id
        }
      })
      this.tool.showMessage(res,()=>{
        this.listData(this.param.content.where.sa_projectid,this.discountrate)
      })
    }
  },
  watch:{
    mainData (val) {
      let date = new Date(this.mainData.periodend)
      let now = Date.now()
      if (date.getTime() < now) {
        this.checkDateOut =  false
      } else {
        this.checkDateOut = true
      }
    }
  },
  mounted () {
    console.log(this.mainData,"mainData")
  }
}

</script>
<style>
</style>