<template>
  <div>
    <el-table
        ref="multipleTable"
        :data="data"
        style="width: 100%"
        height="calc(100vh - 370px)"
        :header-cell-style="{height:'50px',color:'#606266',fontWeight:'400'}"
        :cell-style="{height:'50px',color:'#666666',fontWeight:'400'}"
        @selection-change="selectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          align="center"
          label="产品图"
          width="80">
        <template slot-scope="scope">
          <div v-if="scope.row.attinfos[0]">
            <previewImage class="image" :image="scope.row.attinfos[0]" :list="scope.row.attinfos" :deletebtn="false"></previewImage>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="qty"
          label="数量"

          width="100">
        <template slot-scope="scope">
          <span >{{scope.row.qty?scope.row.qty:'--'}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="marketprice"

          label="牌价"
          width="100">
        <template slot-scope="scope">
          <span >{{scope.row.marketprice?scope.row.marketprice:'--'}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="discountrate"

          label="折扣(%)"
          width="80">
        <template slot-scope="scope">
          <div v-if="scope.row.discountDifferenceAmount > 0">
            <p><span :style="[setTopColor]">{{Math.round((scope.row.discountrate * 100) * 100)/100}}</span></p>
          </div>
          <div v-else-if="scope.row.discountDifferenceAmount < 0 ">
            <p><span :style="[setDownColor]">{{Math.round((scope.row.discountrate * 100) * 100)/100}}</span></p>
          </div>
          <div v-else>
            <p><span >{{Math.round((scope.row.discountrate * 100) * 100)/100}}</span></p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="price"
          label="单价"

          width="120">
        <template slot-scope="scope">
          <div v-if="(scope.row.discountDifferenceAmount > 0)">
            <p><span :style="[setTopColor]">{{tool.formatAmount(scope.row.price,2)}}</span></p>
          </div>
          <div v-else-if="(scope.row.discountDifferenceAmount < 0 )" >
            <p><span :style="[setDownColor]">{{tool.formatAmount(scope.row.price,2)}}</span></p>
          </div>
          <div v-else>
            <p><span >{{tool.formatAmount(scope.row.price,2)}}</span></p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="discountDifferenceAmount"
          label="单价差额（元）"

          width="100">
        <template slot-scope="scope">
          <span >{{scope.row.discountDifferenceAmount?scope.row.discountDifferenceAmount:'--'}}</span>
        </template>
      </el-table-column>
      <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
          prop="erpitemno"
          label="品号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="standards"
          label="标准"
          width="100">
      </el-table-column>
      <el-table-column
          prop="model"
          label="型号"
          width="180">
        <template slot-scope="scope">
          <p><span>{{scope.row.model || ''}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
          prop="spec"
          label="规格"
          width="180">
        <template slot-scope="scope">
          <p><span>{{scope.row.spec || ''}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
          prop="material"
          label="材质"
          width="180">
        <template slot-scope="scope">
          <p><span>{{scope.row.material || '--'}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
          prop="device"
          label="装置"
          width="180">
        <template slot-scope="scope">
          <p><span>{{scope.row.device || '--'}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
          prop="prodline"
          label="产线"
          width="180">
        <template slot-scope="scope">
          <p><span>{{scope.row.prodline || '--'}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
          prop="specalnote"
          label="特殊说明"
          width="180">
        <template slot-scope="scope">
          <p><span>{{scope.row.specalnote || '--'}}</span></p>
        </template>
      </el-table-column>
      <el-table-column
          prop="brand"
          label="品牌"
          width="200">
        <template slot-scope="scope">
          <p v-for="(item,index) in scope.row.brand">
            <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="200">
        <template slot-scope="scope">
          <p v-for="(item,index) in scope.row.itemclass">
            <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="mindiscountrate"
          label="最低授权折扣(%)"

          width="80">
        <template slot-scope="scope">
          <span >{{scope.row.mindiscountrate?Math.round((scope.row.mindiscountrate * 100) * 100)/100:'--'}}</span>
        </template>
      </el-table-column>

      <el-table-column
          prop="amount"
          label="金额"
          fixed="right"
          width="80">
        <template slot-scope="scope">
          <div v-if="(scope.row.discountDifferenceAmount > 0)">
            <p><span :style="[setTopColor]">{{tool.formatAmount(scope.row.amount,2)}}</span></p>
          </div>
          <div v-else-if="(scope.row.discountDifferenceAmount < 0 )" >
            <p><span :style="[setDownColor]">{{tool.formatAmount(scope.row.amount,2)}}</span></p>
          </div>
          <div v-else>
            <p><span >{{tool.formatAmount(scope.row.amount,2)}}</span></p>
          </div>
<!--          <span >{{scope.row.amount?tool.formatAmount(scope.row.amount,2):'&#45;&#45;'}}</span>-->
        </template>
      </el-table-column>
      <el-table-column
          prop="specialoffer"
          label="是否特价"
          fixed="right"
          width="50">
        <template slot-scope="scope">
          <i class="el-icon-check" v-if="scope.row.discountDifferenceAmount < 0"  style="color: red;font-size: 20px"></i>
          <p v-else>--</p>
        </template>
      </el-table-column>
      <el-table-column
          prop="totalPrice"
          fixed="right"
          label="操作"
          width="80">
        <template slot-scope="scope">
          <el-button type="text" @click="onSelect(scope.row)">添 加</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import previewImage from "@/components/previewImage";
import uploadFile from "@/components/upload/hw_obs_upload";
export default {
  name: "index",
  components:{uploadFile, previewImage},
  props:["data"],
  data(){
    return {
      tableSelectData:[],
      setTopColor:{
        color:'#79da56'
      },
      setDownColor:{
        color:'#ef230c'
      },
    }
  },
  methods:{
    selectionChange(val){
      this.tableSelectData = []
      console.log(val)
      this.tableSelectData = val
      this.$emit("selection",val)
    },
    onSelect(val){
      this.$emit("onSelect",val)
    }
  }
}
</script>

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