<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="180"
        >
          <template v-slot:default="scope">
            <Button
              size="small"
              type="primary"
              class="slot-btns-item"
              @click="
                () => {
                  $refs['addPlanEvaluate'].type = 1;
                  $refs['addPlanEvaluate'].setPlanId(scope.row.id);
                  $refs['addPlanEvaluate'].show();
                }
              "
            >
              年中目标
            </Button>
            <Button
              size="small"
              type="primary"
              class="slot-btns-item"
              @click="
                () => {
                  $refs['addPlanEvaluate'].type = 2;
                  $refs['addPlanEvaluate'].setPlanId(scope.row.id);
                  $refs['addPlanEvaluate'].show();
                }
              "
            >
              年末目标
            </Button>
            <el-popover placement="left" width="200" trigger="click">
              <div style="margin-bottom: 15px;">确认年中自评确认?</div>
              <div style="margin-top:15px; display: flex;justify-content: flex-end;">
                <Button @click="" type="primary" ghost size="small">确认</Button>
              </div>
              <Button
                slot="reference"
                size="small"
                type="primary"
                class="slot-btns-item"
                style="margin-right: 5px;"
                @click="
                () => {

                }
              "
              >
                年中确认
              </Button>
            </el-popover>

            <el-popover placement="left" width="200" trigger="click">
              <div style="margin-bottom: 15px;">确认年末自评确认?</div>
              <div style="margin-top:15px; display: flex;justify-content: flex-end;">
                <Button @click="" type="primary" ghost size="small">确认</Button>
              </div>
              <Button
                style="margin-right: 5px;"
                slot="reference"
                size="small"
                type="primary"
                class="slot-btns-item"
                @click="
                () => {

                }
              "
              >
                年末确认
              </Button>
            </el-popover>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="total"
            @on-change="e => {
              select.page = e;
              getList()
            }"
            show-elevator
            show-sizer
            @on-page-size-change="e => {
              select.page_size = e;
              select.page = 1;
              getList()
            }" />
    </div>

    <addEvaluate ref="addEvaluate" @refresh="getList"></addEvaluate>
    <addPlanEvaluate ref="addPlanEvaluate"></addPlanEvaluate>
  </div>
</template>

<script>
import { getBudget, editorBudget } from "@/api/budget/budget";
import { index, destroy } from "@/api/achievements/evaluate";
import { moneyFormatter, parseTime } from "@/utils";
import { getparameter } from "@/api/system/dictionary";
import addEvaluate from '@/views/achievements/components/addEvaluate.vue'
import addPlanEvaluate from '@/views/achievements/components/addPlanEvaluate.vue'

export default {
  components: {
    addPlanEvaluate, 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_midst',
          formatter: (cell, data, value) => {
            return value ? "" : "待完成"
          }
        },
        {
          label: '年末自评',
          prop: 'year_end',
          formatter: (cell, data, value) => {
            return 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;
}

Button + Button {
  margin-left: 4px;
}
</style>
