<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="72%" :before-close="handleDialogClose">
      <el-table :data="tableData" max-height="600">
        <!-- <el-table-column property="spuModel" label="SPU型号" align="center"></el-table-column> -->
        <el-table-column property="specParams" label="SKU规格" align="center"></el-table-column>
        <el-table-column property="supplyPrice" label="供货价" align="center"></el-table-column>
        <el-table-column property="purchasePrice" label="采购价" align="center" v-if="!priceformulaId"></el-table-column>
        <el-table-column property="salePrice" label="优惠价" align="center" v-if="!priceformulaId"></el-table-column>
        <el-table-column property="productPrice" label="零售价" align="center" v-if="!priceformulaId"></el-table-column>

        <el-table-column prop="salePrice" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleToCanvas(scope.row)">下载吊牌</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
        <qrcode-canvas ref="qcanvas"></qrcode-canvas>
  </div>
</template>
<script>
  import {_getStorage } from '@/utils/utils'
import qrcodeCanvas from "@/components/common/qrcodeCanvas";
export default {
  name: "SkuDialog",
  data() {
    return {
      visible2:false,
      title:'sku列表',
      visible:false,
      tableData: [],
      total:0,
      model:{},
      params:{
        couponId:''
      },
      brandList:[],
      bigData:{},
      priceformulaId:null,
    };
  },
  components:{
    qrcodeCanvas
  },
  mounted(){
    this.priceformulaId = _getStorage('priceformulaId')
    // this.getcoulist()
  },
  methods: {
    handleToCanvas(record){
      this.$refs.qcanvas.getCanvcasInfo(record,this.bigData);
      // console.log('handleToCanvas--',spuId)
    },
    getskulist(record){
      this.model =Object.assign({},record)
      this.$axios
      .get("/products/getSkusTagInfo", {
        params:{
          spuId:record
        }
        }).then(res => {
         let {code,data,msg} =res.data;
         if(code ==200){
            this.tableData = (data.specList && data.specList.length)?data.specList:[]
            this.bigData = data;
            // console.log('data--',data,this.bigData)
         }else{
            this.$message.error(msg);
         }
      })
    },

    cancelForm(val) {
      this.visible =false
    },
    //重新页面加载数据
    changeProfile() {
      this.$emit("okSend");
    },
    handleDialogClose(){
      this.cancelForm(this.visible);
    },
  },

};
</script>
<style lang="scss" scoped>
// /deep/ .el-popover{
//   /deep/ .el-popconfirm{
//       padding: 12px !important;
//   }
// }
/deep/ .el-dialog__body{
  padding-top: 0;
}
.topshow{
  padding: 10px 0 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  >div{
    margin-right: 20px;
  }
}
.statusSpan{
  padding: 0px 10px;
  border-radius: 20px;
  display: inline-block;
  color: #fff;
  background-color:#999;
}
.act{
      background-color:#666;
}
.act2{

  background-color:#7ED321;
}
.act3{

      background-color:#3494F6;
}
.edit {
  color: #16A8E7;
  cursor: pointer;
  a{
    color: #16A8E7;
  }
  span {
    cursor: pointer;
    margin: 0 4px;
  }
}
</style>
