<template>
  <div class="work home">
    <div class="home-header">
      <view-header></view-header>
    </div>

    <div class="home-body">
      <div class="home-main">
        <div class="part-box">
          <Form label-position="left" inline>
            <FormItem>
              <Input
                v-model.trim="modalForm.name"
                placeholder="工作名称"
                clearable
              ></Input>
            </FormItem>
            <FormItem :label-width="0">
              <Button type="primary" icon="md-add" @click="toAdd">新增</Button>
            </FormItem>
          </Form>

          <Table
            ref="TableList"
            :columns="columns"
            :data="works"
            :row-class-name="rowClassName"
            disabled-hover
            border
          ></Table>
        </div>

        <view-footer></view-footer>
      </div>
    </div>
  </div>
</template>

<script>
import { workList, createWork, activeWork, deleteWork } from "@/api";
export default {
  name: "work",
  data() {
    return {
      modalForm: {
        name: ""
      },
      works: [],
      columns: [
        {
          title: "#",
          key: "id",
          width: 80
        },
        {
          title: "名称",
          key: "name",
          minWidth: 200
        },
        {
          title: "是否为当前工作",
          key: "active",
          render: (h, param) => {
            return h("div", param.row.active ? "是" : "否");
          }
        },
        {
          title: "创建时间",
          key: "createdOn",
          minWidth: 160
        },
        {
          title: "操作",
          key: "action",
          width: 300,
          align: "center",
          render: (h, param) => {
            const actions = [
              {
                name: "进入",
                action: () => {
                  this.toDetail(param.row);
                }
              },
              {
                name: "删除",
                type: "error",
                action: () => {
                  this.toDelete(param.row);
                }
              }
            ];

            if (!param.row.active) {
              actions.unshift({
                name: "设置为当前工作",
                action: () => {
                  this.toActive(param.row);
                }
              });
            }
            return h("div", this.$tableAction(h, actions));
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await workList();
      this.works = data.map(item => {
        return {
          id: item.id,
          name: item.name,
          active: item.active,
          createdOn: item.createdOn
        };
      });
    },
    rowClassName(row) {
      return row.active ? "row-active" : "";
    },
    async toAdd() {
      if (!this.modalForm.name) {
        this.$Message.error("请输入工作名称！");
        return;
      }

      await createWork(this.modalForm);
      this.$Message.success("创建工作成功！");
      this.getList();
    },
    async toActive(row) {
      await activeWork(row.id);
      this.$Message.success("设置成功！");
      this.getList();
    },
    toDetail(row) {
      this.$router.push({
        name: "WorkOverview",
        params: {
          workId: row.id
        }
      });
    },
    toDelete(row) {
      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前工作吗？",
        onOk: () => {
          this.toDel(row.id);
        }
      });
    },
    async toDel(id) {
      await deleteWork(id);
      this.$Message.success("删除成功！");
      this.getList();
    }
  }
};
</script>
