<template>
  <div>
    <div>
      <div class="flex-align-center" style="margin-bottom:10px">
        <el-input size="small" style="width:200px;margin-right:10px" v-model="params.content.where.condition" placeholder="产品编号、产品名称、材质、品牌" @clear="listData(params.content.pageNumber = 1)" @keyup.native.enter="listData(params.content.pageNumber = 1)" clearable></el-input>
        <slot name="addProduct"/>
      </div>
      <tableLayout :layout="tablecols" :data="list" :opwidth="200" height="calc(100vh - 550px)" :custom="true" fixedName="operation qty marketprice discountrate price countPrice" >
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname == 'qty'">
            <el-input-number size="mini" v-if="editIndex == scope.column.data.sa_contract_itemsid" v-model="scope.column.data.qty" @change="qtyChange($event,scope.column.data,scope.column.data.index)" :min="1" label="描述文字"></el-input-number>
            <el-input-number size="mini" v-else disabled v-model="scope.column.data.qty" @change="qtyChange($event,scope.column.data,scope.column.data.index)" :min="1" label="描述文字"></el-input-number>
          </div>
          <div v-else-if="scope.column.columnname == 'attinfos'">
            <previewImage 
              v-if="scope.column.data.attinfos[0]" 
              style="margin-top:0px" 
              class="image" 
              :image="scope.column.data.attinfos[0]" 
              :list="scope.column.data.attinfos" 
              :deletebtn="false"
            ></previewImage>
          </div>
<!--          <div v-else-if="scope.column.columnname == 'discountrate'">
            <el-input size="mini" v-if="editIndex == scope.column.data.sa_contract_itemsid" v-model="form.discountrate" @input="discountrateChange($event,scope.column.data)"></el-input>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </div>-->
          <div v-else-if="scope.column.columnname == 'price'">
            <el-input size="mini" v-if="editIndex == scope.column.data.sa_contract_itemsid" v-model="form.price" @change="priceChange($event,scope.column.data,scope.column.data.index)"></el-input>
            <p v-else>{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</p>
          </div>
          <div v-else-if="scope.column.columnname == 'countPrice'">
            <p>{{tool.formatAmount((scope.column.data.price * scope.column.data.qty),2)}}</p>
          </div>
          <div v-else-if="scope.column.columnname == 'marketprice'">
            <p>{{tool.formatAmount((scope.column.data.marketprice),2)}}</p>
          </div>
          <div v-else-if="scope.column.columnname == 'brand'">
            {{scope.column.data[scope.column.columnname][0] ? scope.column.data[scope.column.columnname][0].brandname : ''}}
          </div>
          <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
        </template>
        <template v-slot:opreation="scope">
          <el-button v-if="editIndex == scope.data.sa_contract_itemsid" type="text" size="mini" @click="save" class="inline-16">保 存</el-button>
          <slot name="edit" :data="scope.data" v-else></slot>
          <slot name="del" :data="scope.data"></slot>
          <!-- <edit :data="scope.data"></edit> -->
        </template>
      </tableLayout>
    </div>
    <div style="height: 35px;margin-top: 20px">
      <div style="float: left">合计(元)：{{ totalPrice }}</div>
      <div style="float: right">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.content.pageNumber"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="100"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
// import edit from './editProduct'
import addProduct from './addTool'
import previewImage from '@/components/previewImage/index'
export default {
  components: {addProduct,previewImage},
  name: '',
  data() {
    return {
      list:[],
      params: {
          "id": 20221122165302,
          "content": {
              "sa_contractid": '',
              "pageNumber": 1,
              "pageSize": 100,
              "where": {
                  "condition": "",
              }
          },
      },
      form: {
        qty:'',
        discountrate:'',
        price:'',
      },
      tablecols:[],
      total:0,
      editIndex:'',
      totalPrice:0,
      currentPage:0
    };
  },
  computed:{
  },
  watch:{
  },
  created () {
    if (this.$route.query.id) this.listData()
    this.tablecols = this.tool.tabelCol(this.$route.name).toolTable.tablecols
  },
  methods: {
    async listData(){
      this.totalPrice = 0
      this.params.content.sa_contractid = this.$route.query.id
      const res = await this.$api.requested(this.params)
      res.data.forEach((e,index)=>{
        this.totalPrice = this.totalPrice + res.data[index].amount
      })
      this.totalPrice = this.tool.formatAmount(this.totalPrice,2)
      this.list = res.data
      this.total = res.total
      this.$emit('priceChange')
    },
    qtyChange (num,data,index) {
      this.form.qty = Math.round(num *100)/100
      data.qty = this.form.qty
      this.$set(this.list,index,data)
      console.log(num);
      
    },
    handleChange(num) {
      console.log(num);
      
    },
    /*discountrateChange (num,data) {
      this.form.discountrate = num      
      this.form.price = this.form.discountrate * data.marketprice
    },*/
    priceChange (num,data,index) {
      if (num < 1){
        this.form.price = 1
      }else {
        this.form.price = Math.round(num * 100)/100
      }
     /* this.form.discountrate = this.form.price / data.marketprice*/
      data.price = this.form.price
      this.$set(this.list,index,data)
      console.log(this.form.price,data.marketprice);
      
    },
    async save () {
      let res = await this.$api.requested({
        "id": 20221122200302,
        "content": {
          "sa_contractid":this.$route.query.id,
          "items": [this.form]
        },
      })
      this.tool.showMessage(res,() => {
        this.editIndex = ''
        this.listData()
        this.$emit('editSuccess',res.data.signamount)
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
  },
};
</script>

<style scoped>
  .image {
    width: 38px;
    height: 38px;
    margin: 0;
  }
</style>
