template div class=list-card !-- 搜索区域 -- div class=list-card-operation t-button click=formVisible = true新建任务t-button t-input v-model=searchValue class=search-input placeholder=请输入你需要搜

<script lang="ts">
import { prefix } from '@/config/global';
import { SearchIcon } from 'tdesign-icons-vue';
import TaskCard from '@/components/task-card/index.vue';


const INITIAL_DATA = {
  name: '',
  status: '',
  description: '',
  type: '',
  mark: '',
  amount: 0,
};

export default {
  name: 'Projects',
  components: {
    SearchIcon,
    TaskCard,
  },
  data() {
    return {
      pagination: { current: 1, pageSize: 12, total: 0 },
      prefix,
      taskList: [],
      value: 'first',
      rowKey: 'index',
      tableLayout: 'auto',
      verticalAlign: 'top',
      bordered: true,
      hover: true,
      rowClassName: (rowKey) => `${rowKey}-class`,
      formData: { ...INITIAL_DATA },
      options: [
        { label: '网关', value: '1' },
        { label: '人工智能', value: '2' },
        { label: 'CVM', value: '3' },
      ],
      formVisible: false,
      textareaValue: '',
      rules: {
        name: [{ required: true, message: '请输入任务名称', type: 'error' }],
      },
      searchValue: '',
      confirmVisible: false, // 控制确认弹窗
      deleteProduct: undefined,
      dataLoading: false,
    };
  },
  computed: {
    confirmBody(): string {
      const { deleteProduct } = this;
      return deleteProduct ? `删除后，${deleteProduct.name}的所有任务信息将被清空, 且无法恢复` : '';
    },
  },
  watch: {
    // eslint-disable-next-line func-names
    '$route': function(to, from) {
      if (to.path.endsWith('/tasks')) {
        console.log("to tasks")
        // 只有在 /tasks 路由的参数改变时才执行
        this.loadPageData();
      }
    }
  },
  mounted() {
    this.loadPageData();
  },
  methods: {
    loadPageData(): void {
      this.dataLoading = true;
      this.$request
        .get(`http://wxgametest.woa.com/iExplorer/web/projects/${this.$route.params.id}/tasks`, {
          withCredentials: true
        })
        .then((res) => {
          console.log(res)
          if (res.status === 200) {
            const list = res.data;
            console.log(list)
            this.taskList = list;
            this.pagination = {
              ...this.pagination,
              total: list.length,
            };
          } else {
            console.error(res);
            this.taskList = [];
          }
        })
        .catch((e: Error) => {
          console.log(e);
        })
        .finally(() => {
          this.dataLoading = false;
        });
    },
    onPageSizeChange(size: number): void {
      this.pagination.pageSize = size;
      this.pagination.current = 1;
    },
    onCurrentChange(current: number): void {
      this.pagination.current = current;
    },
    onSubmit({ result, firstError }): void {
      if (!firstError) {
        this.$message.success('提交成功');
        this.formVisible = false;
        const { name, description } = this.formData;
        this.$request
          .post(`http://wxgametest.woa.com/iExplorer/web/projects/${this.$route.params.id}/tasks`, {
            name,
            description
          }, {
            withCredentials: true
          })
          .then((res) => {
            console.log(res);
            if (res.status === 200) {
              // 新建任务成功，重新加载任务列表
              this.loadPageData();
            } else {
              console.error(res);
            }
          })
          .catch((e: Error) => {
            console.log(e);
          });
      } else {
        console.log('Errors: ', result);
        this.$message.warning(firstError);
      }
    },
    onClickCloseBtn(): void {
      this.formVisible = false;
      this.formData = {};
    },
    handleDeleteItem(product): void {
      this.confirmVisible = true;
      this.deleteProduct = product;
    },
    onConfirmDelete(): void {
      const { index } = this.deleteProduct;
      this.productList.splice(index - 1, 1);
      this.confirmVisible = false;
      this.$message.success('删除成功');
    },
    onCancel(): void {
      this.deleteProduct = undefined;
      this.formData = {};
    },
    handleManageProduct(product): void {
      this.formVisible = true;
      this.formData = { ...product, status: product?.isSetup ? '1' : '0' };
    },
  },
};
</script