<template>
  <vxe-modal v-model="value" id="questModel" width="60%" v-loading="load" @show="show" height="80%" show-zoom resize transfer show-footer>
    <template #title>
      <span>选择价格</span>
    </template>
    <by-table :propConfig="tableConfig" ref="table" id="quest-table"></by-table>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="btn">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { queryPrice } from '@/api/priceManage'
@Component({components:{}})
export default class QuestModel extends Vue {
  value=false;
  load=false;
  tableConfig:any={
    attr:{
      size:'mini',
      seq:true,
      align:'center',
      triggerRowCheck:'row',
      radio:true
    },
    columns:[{
      title:'价格',
      field:'price'
    },
    {
      title:'备注',
      field:'remark'
    }
  ]}
  data:Array<any>=[]
  mounted(){
    
  }
  btn(){
    let data:Array<any> = (this.$refs.table as any).getSelectData();
    if(!data || data.length == 0){
      this.$message('请选择数据！');
      return
    }
    this.$emit('priceHandle', data[0].price)
    this.value = false
  }
  show(){
    let height = (document.getElementById('quest-table') as any).parentNode.offsetHeight;
    this.tableConfig.attr.height=height - 36;
    (this.$refs.table as any).setConfig(this.tableConfig);
    this.getList()
  }
  //获取数据
  getList(){
    this.load = true;
    this.data = [];
    queryPrice({}).then((res:any) => {
      for(const item of res.data) {
        this.data.push(item)
      }
      if(this.$refs.table){
        (this.$refs.table as any).setValue(this.data);
      }
      this.load = false;
    }).catch((err:any) => {
      this.load = false;
    })
  }

  setShow(v:boolean){
    this.value = v;
  }
}
</script>

<style lang="scss" scoped>

</style>