<!--
  @description: 报表统计-弃标供应商名单
  @Modifier：zhangyawen
  @routerPath:
  @date：  2021/04/23
-->
<template>
  <!-- :style="{'height':height}" -->
  <dl
    class="reportChart_crud"
  >
    <dt>
      弃标供应商名单
    </dt>
    <dd>
      <tableChart
        :height="height"
        class="echart-dom"
        :option="option"
      />
      <!-- 统计管理-供应商统计-弃标供应商名单详情 -->
      <supplierTenderDetail ref="tenderDetail" v-bind="$attrs" />
      <!-- 统计管理-供应商统计-弃标供应商名单-更多弹框 -->
      <listOfAbandonedBidSuppliersMore ref="moreList" v-bind="$attrs" />
    </dd>
  </dl>
</template>

<script>
/* 組件 */
import tableChart from './../../statisticalChartCommon/tableChart'// table列表渲染组件
import supplierTenderDetail from './../supplierTenderBIdNumber/supplierTenderDetail-dialog.vue' // 报表统计-供应商统计-弃标供应商名单详情
import listOfAbandonedBidSuppliersMore from './listOfAbandonedBidSuppliersMore-dialog.vue' // 报表统计-弃标供应商名单-更多弹框
export default {
  name: 'ListOfAbandonedBidSuppliers',
  components: {
    tableChart, // table列表渲染组件
    supplierTenderDetail,
    listOfAbandonedBidSuppliersMore
  },
  props: {
    height: {
      type: String,
      default: '100%'
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      option: {
        // 底部-操作类
        footer: [
          {
            text: '更多',
            click: this.more
          }
        ],
        // 标题
        thead: [
          { lable: '供应商名称', prop: 'supplierName' },
          { lable: '弃标次数（次）', prop: 'failNum' },
          { lable: '详情',
            // 操作类
            handle: [
              {
                text: '查看',
                click: this.detail
              }
            ] }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  watch: {
    data(val) {
      this.option.data = this.data
    }
  },
  created() {
    // this.option.data = this.data
  },
  methods: {
    // 查看
    detail(row) {
      this.$refs.tenderDetail.open(row.row, '04')
    },
    // 更多
    more() {
      this.$refs.moreList.open()
    }
  }
}
</script>
<style lang="less" scoped>
</style>
