<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"/>
        <slot name="export"></slot>
        <uploadAllData
            v-if="tool.checkAuth($route.name,'productDetailManage') && data.status === '新建' && isLeader"
            :total="total"
            @onSuccess="listData()"
            @handlePullApi="handlePullApi"
            @handleDelApi="handleDelApi"
            idName="sa_contract_itemsid"
            type="del"
        ></uploadAllData>
        <addProduct v-if="tool.checkAuth($route.name,'productDetailManage') && data.status === '新建' && isLeader"
                    class="inline-16"  :params="paramsAdd" :tablecolsAdd="tablecolsAdd" title="添加"
                    @addSuccess="addProducts" @addProduct="addProduct" @uploadData="uploadData" @closeDrawer="listData"
                     ref="addProduct"
        ></addProduct>
      </div>
      <tableLayout :layout="tablecols" :data="list" :opwidth="200" height="calc(100vh - 550px)" :width="true" :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" :min="1" label="描述文字"></el-input-number>
            <el-input-number size="mini" v-else disabled v-model="scope.column.data.qty" @change="qtyChange" :min="1" label="描述文字"></el-input-number>
          </div>
          <div v-else-if="scope.column.columnname == 'attinfos'">
            <previewImage 
              v-if="scope.column.data.attinfos[0]" 
              style="width:38px;height:38px;margin: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 == 'type'">
            <el-select v-if="editIndex == scope.column.data.sa_contract_itemsid" v-model="scope.column.data.type">
              <el-option label="折扣系数" value="折扣系数"></el-option>
              <el-option label="指定单价" value="指定单价"></el-option>
            </el-select>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </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>-->
            <el-input size="mini" v-if="editIndex == scope.column.data.sa_contract_itemsid && scope.column.data.type == '折扣系数'" v-model="form.discountrate" @change="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" @input="priceChange($event,scope.column.data)"></el-input>-->
            <el-input size="mini" v-if="editIndex == scope.column.data.sa_contract_itemsid && scope.column.data.type == '指定单价'" v-model="form.price" @change="priceChange($event,scope.column.data)"></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(scope.data)" 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="margin-top:16px;text-align: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>
</template>

<script>
// import edit from './editProduct'

// import addProduct from './addProduct'
import addProduct from '@/template/addProduct'
import previewImage from '@/components/previewImage/index'
import uploadAllData from '@/components/uploadAllData/index'
export default {
  components: {addProduct,previewImage,uploadAllData},
  name: '',
  props:["data","isLeader"],
  data() {
    return {
      list:[],
      paramsAdd:{
        "id": 20221124093602,
        "content": {
          "sa_contractid": this.$route.query.id,
          "pageNumber": 1,
          "pageSize": 100,
          "where": {
            "condition": "",
            "istool":0//是否是工具
          }
        },
      },
      params: {
          "id": 20221122165302,
          "content": {
              "sa_contractid": this.$route.query.id,
              "pageNumber": 1,
              "pageSize": 100,
              "where": {
                  "condition": "",
              }
          },
      },
      form: {
        qty:'',
        discountrate:'',
        price:'',
        type:''
      },
      tablecols:[],
      tablecolsAdd:[],
      total:0,
      editIndex:''
    };
  },
  computed:{
  },
  watch:{
  },
  created () {
    if (this.$route.query.id) this.listData()
    this.tablecols = this.tool.tabelCol(this.$route.name).productDetailTable.tablecols
    this.tablecolsAdd = this.tool.tabelCol(this.$route.name).addProductTable.tablecols

  },
  methods: {
    async listData(){
      this.params.content.sa_contractid = this.$route.query.id
      const res = await this.$api.requested(this.params)
      res.data.forEach((e,index)=>{
        res.data[index].discountrate = Math.round((e.discountrate * 100)*100)/100
      })
      this.list = res.data
      this.total = res.total
      this.$emit('priceChange')
    },
    qtyChange (num) {
      this.form.qty = num
      
    },
    handleChange(num) {
      
    },
    discountrateChange (num,data) {
      if (num > 100){
        this.form.discountrate = 100
      }else if (num < 1){
        this.form.discountrate = 1
      }else {
        this.form.discountrate = Math.round(num*100)/100
      }
      this.form.price = Math.round((this.form.discountrate / 100 * data.marketprice) *100)/100
    },
    priceChange (num,data) {
      if (num > data.marketprice){
        this.form.price = data.marketprice
      }else if (num < data.marketprice * 0.01){
        this.form.price = data.marketprice * 0.01
      }else {
        this.form.price = Math.round(num*100)/100
      }
      this.form.discountrate = Math.round((this.form.price / data.marketprice * 100)*100)/100
      
    },
    async save (data) {
      
      this.form.discountrate = (this.form.discountrate/100).toFixed(4)
      this.form.type = data.type
      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()
    },
    /*批量添加*/
    async addProducts(data){
      let item = data.map(item => {
        return {
          "itemid": item.itemid,
          "price": item.marketprice,
          "qty": 1,
          'marketprice':item.marketprice,
          type:'折扣系数'
        }
      })
      const res = await this.$api.requested({
        "id": 20221123164402,
        "content": {
          "sa_contractid": this.$route.query.id,
          "items": item
        },
      })
      this.tool.showMessage(res,()=>{
        this.listData()
        this.$refs.addProduct.listData()
      })
    },
    /*单独添加*/
    async addProduct(data){
      let res = await this.$api.requested({
        "id": 20221123164402,
        "content": {
          "sa_contractid": this.$route.query.id,
          "items": [
            {
              "itemid": data.itemid,
              "price": data.marketprice,
              "qty": 1,
              'marketprice':data.marketprice,
              type:'折扣系数'
            }
          ]
        },
      })
      this.tool.showMessage(res,() => {
        this.listData()
        this.$refs.addProduct.listData()
      })
    },
    /*一键添加*/
    uploadData(uploadApi,data){
      uploadApi.id = 20221123164402
      uploadApi.content = {
        "sa_contractid": this.$route.query.id, //订单ID
        "items": data.map(e=>{
          return {
            "itemid": e.itemid,
            "price": e.marketprice,
            "qty": 1,
            'marketprice':e.marketprice,
            type:'折扣系数'
          }
        })
      }
      this.listData()
      this.$refs.addProduct.listData()
    },
    /*获取要删除的数据*/
    handlePullApi (pullApi) {
      pullApi.content = JSON.parse(JSON.stringify(this.params.content))
      pullApi.id = 20221122165302
      pullApi.content.sa_contractid = this.$route.query.id
    },
    /*一键删除*/
    handleDelApi (delApi,data) {
      delApi.id = 20221123164502
      delApi.content = {
        "sa_contractid":this.$route.query.id,
        "sa_contract_itemsids":data,
        "pageNumber":0,
        "pageSize":0
      }
      this.listData()
    },
  },
};
</script>

<style scoped>

</style>
