<template>
  <div class="height_100">
    <el-container>
      <el-header>
        <div style="width:100%;display:flex;justify-content:flex-end">
            <el-button type="primary" size="small" @click="addMarket">新增</el-button>
        </div>
      </el-header>
      <el-main>
        <el-table :data="tableData" header-row-class-name="custom-table-header" :loading="loading">
          <el-table-column label="#" width="60" type="index" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 + (queryParams.current - 1) * queryParams.size }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" prop="saleTime" align="center">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.saleTime }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="地区" prop="saleArea" align="center">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.saleArea }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="销售量/件" prop="saleCount" align="center">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.saleCount }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="销售额/万元" prop="saleMoney" align="center">
            <template slot-scope="scope">
              <div>
                <span>{{ scope.row.saleMoney }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="许可参考值" prop="reference" align="center">
            <template slot-scope="scope">
              <div>
                <span>{{ licenseRate == 0 || licenseRate
                    ? (
                        Number(scope.row.saleMoney) *
                        Number(licenseRate)
                      ).toFixed(2)
                    : ""
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="自定义许可费"
            prop="customLicenseFee"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <span>{{
                  scope.row.customLicenseRate == 0 ||
                  scope.row.customLicenseRate
                    ? (
                        Number(scope.row.saleMoney) *
                        Number(scope.row.customLicenseRate)
                      ).toFixed(2)
                    : ""
                }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)" style="color: red">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer class="pagination">
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
        </el-pagination>
      </el-footer>
    </el-container>

    <addEditMarket ref="addEditMarket" @submit="getSubmitMessage"></addEditMarket>
  </div>
</template>

<script>
import addEditMarket from '../dialog/addEditMarket.vue';
export default {
  components: {
    addEditMarket
  },
  props: {
    id:{},
    licenseRate:{}
  },
  data() {
    return {
        //分页信息
        queryParams:{
            current:1,
            size:10
        },
        //总数
        total:0,
        //排序
        sort:[
            {
                "orderBy": "createTime",
                "orderType": 1
            }
        ],
        //数据
        tableData:[],
        //加载
        loading:false
    };
  },
  watch: {
    id(){
      this.getList()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    getList(){
        var params = {
            ...this.queryParams,
            searchQuery:`productId=${this.id}`,
            orderDTOList: this.sort
        }
        this.loading = true
        this.$api.queryProductMarketData(params).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data
                this.total = response.data.total
                this.loading = false
            }
        }).catch(error=>{
            this.tableData = []
            this.total = 0
            this.loading = false
        })
    },
    //分页
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getList()
    },
    //新增
    addMarket(){
        var form = {
            productId:this.id,
            licenseRate:this.licenseRate
        }
        this.$refs.addEditMarket.open(form)
    },
    //编辑
    handleEdit(row){
      var form = {
        ...row,
        licenseRate:this.licenseRate
      }
      this.$refs.addEditMarket.open(form)
    },
    //获取新增编辑的信息
    getSubmitMessage(val){
        this.getList()
    },
    //删除
    handleDelete(row){
        this.deletes([row.id])
    },
    deletes(ids){
        this.$confirm('此操作将删除该产品类别, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$api.deleteProductMarketData(ids).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功！')
                    this.getList()
                }
            }).catch(error=>{
                this.$message.success('删除失败！')
            })
        })
    }
  },
};
</script>
<style lang="scss" scoped>
</style>