<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Tabs value="todo">
        <TabPane :label="$t('Front_Label_Todo')" name="todo">
          <view-table ref="todoTable" view-code="TodoList" :select-enable="true">
            <template #filterCommand>
              <Button size="small" type="primary" custom-icon="fa fa-check-double" @click="batchDo">{{ $t('Front_Btn_Batch_Do') }}</Button>
            </template>
            <template #command="{ row }">
              <Button size="small" :title="$t('Front_Btn_Detail')" type="info" custom-icon="fa fa-file-alt" @click="$refs.taskForm.open(row)"></Button>
            </template>
          </view-table>
        </TabPane>
        <TabPane :label="$t('Front_Label_Done')" name="done">
          <view-table ref="doneTable" view-code="DoneList">
            <template #command="{ row }">
              <Button size="small" :title="$t('Front_Btn_Detail')" type="info" custom-icon="fa fa-file-alt" @click="$refs.taskForm.open(row)"></Button>
            </template>
          </view-table>
        </TabPane>
      </Tabs>
    </Card>
    <task-form ref="taskForm" @on-after-action="onAfterAction()"></task-form>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import modelApi from '../../api/model';
  import taskApi from '../../api/task';

  export default {
    name: 'common-myTask',
    mixins: [mixinPage],
    components: {},
    data() {
      return {};
    },
    computed: {},
    created() {
      setTimeout(async () => {
        if (this.$route.query.id != null) {
          const res = await modelApi.get('Task', this.$route.query.id);
          this.$refs.taskForm.open(res);
        }

        // for (let key in this.$route.query) {
        //   this.$refs.table.filterData[key] = this.$route.query[key];
        // }
      });
    },
    methods: {
      batchDo() {
        this.confirm('Front_Msg_Sure_To_Batch_Do', async () => {
          let ids = this.$refs.todoTable.getSelected().map(x => {
            return x.id;
          });

          if (ids.length > 0) {
            await taskApi.batchDo(ids);
            this.success('Front_Msg_Success');
            this.$refs.todoTable.loadData();
            this.$refs.doneTable.loadData();
          } else {
            this.error('Front_Msg_Please_Select_Task_Item');
          }
        });
      },
      onAfterAction() {
        this.$refs.todoTable.loadData();
        this.$refs.doneTable.loadData();
      }
    }
  };
</script>
e
