<template>
  <div style="padding: 0 20px;">
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="绩效指标类型">
      <div slot="content"></div>
      <slot>
        <div class="selects">

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
              关键字
            </span>
            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
          </div>

          <Button style="margin-left: 10px" type="primary"
                  @click="">重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="select.page = 1,getList()">查询</Button>
        </div>
      </slot>
    </lx-header>

    <xy-table :list="list" :table-item="table" @delete="destroy" @editor="edit">
      <template v-slot:btns>
        <el-table-column label="操作" header-align="center" fixed="right" width="200">
          <template v-slot:default="scope">
            <Button type="primary"
                    size="small"
                    style="margin-left:4px;margin-bottom: 2px;"
                    @click="edit(scope.row,1)">年中评审</Button>
            <Button type="error"
                    size="small"
                    style="margin-left:4px;margin-bottom: 2px;"
                    @click="edit(scope.row,2)">年终评审</Button>
            <Button type="error"
                    size="small"
                    style="margin-left:4px;margin-bottom: 2px;"
                    @click="edit(scope.row,2)">查看</Button>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <!--    <div style="display: flex;justify-content: flex-end;">-->
    <!--      <Page :total="total" @on-change="" show-elevator show-sizer @on-page-size-change="" />-->
    <!--    </div>-->
    <addEvaluate ref="addEvaluate" @refresh="getList"></addEvaluate>
  </div>
</template>

<script>
import { getBudget } from "@/api/budget/budget"
import { index,destroy } from "@/api/achievements/evaluate"
import { moneyFormatter, parseTime } from '@/utils'

import addEvaluate from '@/views/achievements/components/addEvaluate.vue'
import { getparameter } from '@/api/system/dictionary'
export default {
  components:{
    addEvaluate
  },
  data() {
    return {
      budgetTypes: [],
      select:{
        keyword: "",
        page: 1,
        page_size: 10
      },
      total: 0,
      table: [{
        label: "项目名称",
        prop: 'name',
        width: 200,
        sortable: false,
        fixed: 'left'
      },
        {
          label: "预算类型",
          prop: 'type',
          width: 115,
          formatter: (cell, data, value) => {
            let res = this.types.filter(item => {
              return item.id === value
            })
            return res[0]?.value || '未知'
          }
        },
        {
          label: "所属年份",
          prop: 'year',
          width: 105
        },
        {
          label: "相关科室",
          prop: 'plan_department.name',
          width: 110
        },
        {
          label: '年初预算金额（元）',
          prop: 'money',
          align: 'right',
          width: 180,
          formatter: (cell, data, value) => {
            if (value == 0) return '--'
            else
              return moneyFormatter(value)
          }
        },
        {
          label: '调整后预算金额（元）',
          prop: 'update_money',
          align: 'right',
          width: 200,
          formatter: (cell, data, value) => {
            return moneyFormatter(value)
          }
        },
        {
          label: "创建信息",
          prop: 'created_at',
          width: 160,
          formatter: (cell, data, value) => {
            return this.$moment(value).format('YYYY-MM-DD')
          }
        },
        {
          label: "描述",
          minWidth: 300,
          prop: 'content',
          align: 'left',
          sortable: false
        },
      ],
      list: [],
    }
  },
  methods: {
    async getBudgetTypes() {
      const res = await getparameter({
        number: 'money_way'
      })
      this.types = res.detail
    },

    async getList() {
      const res = await getBudget(this.select)
      this.list = res.list.data
    },

    edit(row,type) {
      this.$refs["addEvaluate"].id = row.id;
      this.$refs["addEvaluate"].setForm("type",type);
      this.$refs["addEvaluate"].type = "add";
      this.$refs["addEvaluate"].show();
    },
    destroy(row) {
      destroy({
        id: row.id
      }).then(res => {
        this.$message({
          type: "success",
          message: "删除成功"
        })
        this.getList();
      })
    }
  },
  computed: {
  },
  created() {
    this.getBudgetTypes();
    this.getList();
  }
}
</script>

<style scoped lang="scss">
.selects{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>
