<template>
  <div style="padding: 0 20px">
    <lx-header
      icon="md-apps"
      :text="$route.meta.title"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
    >
      <div slot="content"></div>
      <slot>
        <span style="padding: 0 6px; word-break: keep-all">关键字</span>
        <span>
          <Input
            v-model="select.keyword"
            placeholder="请输入关键字"
            style="width: 180px"
          ></Input>
        </span>
        <Button type="primary" style="margin-left: 10px" ghost @click=""
          >重置</Button
        >
        <Button type="primary" style="margin-left: 10px" @click="getList">查询</Button>
        <Button
          v-if="role === 0"
          type="primary"
          style="margin-left: 10px"
          @click="
            $refs['addPropertyPlan'].setType('add'),
              $refs['addPropertyPlan'].show()
          "
          >新增</Button
        >
      </slot>
    </lx-header>

    <xy-table :list="list" :table-item="table">
      <template v-if="role !== 0" #btns> </template>
      <template v-else #btns>
        <el-table-column label="操作" header-align="center" align="left">
          <template #default="{ row }">
            <Button size="small" type="primary" @click="$refs['file'].setId(row.id),$refs['file'].show()">附件
            </Button>
            <Button size="small" type="primary" @click="$refs['remark'].setId(row.id),$refs['remark'].show()">备注
            </Button>
            <Button ghost size="small" type="primary" @click="$refs['addPropertyPlan'].setType('editor'),$refs['addPropertyPlan'].setId(row.id),$refs['addPropertyPlan'].show()">编辑
            </Button>
            <Poptip transfer confirm placement="bottom" title="确认要删除吗"
                    @on-ok="destroy({ id: row.id }).then(_ => { $message({ type: 'success',message: '删除成功' });getList(); })">
              <Button style="margin-left: 4px;" ghost size="small" type="error">删除
              </Button>
            </Poptip>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex; justify-content: flex-end; margin-top: 10px">
      <Page
        :total="total"
        show-elevator
        @on-change="
          (e) => {
            select.page = e;
            getList();
          }
        "
      />
    </div>

    <addPropertyPlan ref="addPropertyPlan" :role="role" @refresh="getList"></addPropertyPlan>
    <remark ref="remark"></remark>
    <file ref="file"></file>
  </div>
</template>

<script>
import { index, destroy } from "@/api/propertyPlan";

import addPropertyPlan from "@/views/finance/components/addPropertyPlan.vue";
import remark from "./components/remark.vue";
import file from "./components/file.vue";
export default {
  components: {
    file,
    remark,
    addPropertyPlan,
  },
  data() {
    return {
      role: 0,//0业务，1财务
      select: {
        page: 1,
        page_size: 10,
      },
      list: [],
      table: [
        {
          label: "项目名称",
          width: 220,
          align: "left",
          prop: 'contract.name'
        },
        {
          prop: "plan_date",
          label: "计划评审时间",
          width: 200,
        },
        {
          prop: "actually_date",
          label: "实际评审时间",
          width: 200,
        },
      ],
      total: 0,
    };
  },
  methods: {
    destroy,
    async getList() {
      const res = await index(this.select);
      this.total = res.total;
      this.list = res.data;
    },
  },
  computed: {},
  created() {
    this.getList();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.role = to.path.split("_")[1] ? Number(to.path.split("_")[1]) : '';
    });
  },
};
</script>

<style scoped lang="scss">
Button + Button {
  margin-left: 4px;
}
</style>
