<!--
  @description: 报表统计-不同采购方式发布的项目数量及完成情况
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/29
-->
<template>
  <dl
    class="reportChart_crud"
  >
    <dt>
      本年不同采购方式发布的项目数量及完成情况
      <p class="right">
        <el-date-picker
          v-model="searchData.statisticalMonth"
          :value-format="elValueYearMonth"
          class="el-date-picker-month-input"
          popper-class="el-date-picker-month el-date-picker_header_none"
          type="month"
          style="margin-right:2.5rem"
          placeholder="请选择月份"
          @change="handChange"
        />
        <i class="iconfont icon-xiazai1" @click="dowloadClick" />
      </p>
    </dt>
    <dd>
      <tableChart
        :height="dd_height"
        class="echart-dom"
        :option="option"
      />
    </dd>
    <!-- 报表统计-供应商统计-供应商投标项目详情 -->
    <bidProjectCompletionRateDetail ref="bidProjectCompletionRateDetail" />
  </dl>
</template>

<script>
/* api */
import { listTenderMethodProjectCompleteInfo, exportTenderMethodProjectCompleteInfo, getRolesOfCheckBuyers } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { filterDictText, download } from '@/assets/js/utils'// 常用方法
/* 混入 */
import { reportChartGroupMixin } from './../../mixins/reportChartGroup.js'
/* 組件 */
import tableChart from './../../components/tableChart'// table列表渲染组件
import bidProjectCompletionRateDetail from './bidProjectCompletionRateDetail-dialog.vue' // 报表统计-供应商统计-供应商投标项目详情
export default {
  name: 'BidProjectCompletionRate',
  components: {
    tableChart, // table列表渲染组件
    bidProjectCompletionRateDetail // 不同采购方式发布的项目数量及完成情况详情
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 获取有权限的角色
      roleOfData: [],
      // 查询条件
      searchData: {
        statisticalMonth: '' // 统计月份
      },
      dd_height: this.height, // 内容的高度
      /* 字典信息-start */
      ...reportChartGroupMixin,
      /* 字典信息-end */
      option: {
      // 标题
        thead: [
          { lable: '采购方式', prop: 'tenderMethodName', align: 'left' },
          { lable: '发布项目数量（个）', prop: 'projectNumbers', align: 'center' },
          { lable: '完成项目数（个）', prop: 'completeProjectNumbers', align: 'center' },
          { lable: '成交金额（万元）', prop: 'completeProjectMoney', align: 'center' },
          { lable: '详情',
            // 操作类
            handle: [
              {
                text: '查看',
                click: this.detail
              }
            ] }
        ],
        // 渲染数据
        data: []
      }
    }
  },
  created() {
    this.initRole() // 获取有权限的角色接口
  },
  methods: {
    /**
    * 月变更时
    */
    handChange(val) {
      if (this.searchData.statisticalMonth) {
        this.searchData.statisticalMonth = this.$Moment(val).format(this.momentYearMonth)
      }
      // this.searchData.statisticalMonth = this.$Moment(this.currentTimeFn()).format(this.momentYearMonth)
      // 获取数据
      this.initChart()
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.option.data = []
      if (searchData) {
        this.searchData = {
          ...this.searchData,
          ...searchData,
          statisticalMonth: ''
        }
      }
      const data = {
        ...this.searchData
      }
      listTenderMethodProjectCompleteInfo(data).then(res => {
        res.data.forEach(item => {
          this.option.data.push({
            ...item,
            tenderMethodName: filterDictText(this.bidAndprocForMethod, item.tenderMethod)

          })
        })
      })
    },
    initRole() {
      // 获取有权限的角色接口
      getRolesOfCheckBuyers().then(res => {
        this.roleOfData = res.data.split(',')
      })
    },
    roleFlag() {
      this.roleCode = this.$store.getters.info.currentRol.roleCode // 角色code
      // 11 项目经理 采购人10
      if (this.roleOfData.includes(this.roleCode)) {
        this.dd_height = 'calc(' + this.height + ' + 2.5rem)'
      } else {
        this.dd_height = 'calc(' + this.height + ' - 2.5rem)'
      }
    },
    // 查看
    detail(row) {
      this.$refs.bidProjectCompletionRateDetail.open(row.row, this.searchData)
    },
    // 下载
    dowloadClick() {
      exportTenderMethodProjectCompleteInfo(this.searchData).then(res => {
        download(res, '不同采购方式发布的项目数量及完成情况信息表.xls')
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.echart-dom .reportChart_tableChart_content{
  width: 100%;
}
</style>
