<template>
  <div class="white pa-3">
    <m-filter :option="filter" @search="handleSearch" />
    <m-table
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :show-select="false"
      :can-delete="false"
      @add="handleAdd"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #status="{ item }">
        <v-chip small :color="item.status === 'active' ? 'success' : 'error'">
          {{ item.status === 'active' ? '启用' : '禁用' }}
        </v-chip>
      </template>
      <template #created_at="{ item }">
        <span>{{ formatDateTime(item.created_at) }}</span>
      </template>
      <template #updated_at="{ item }">
        <span>{{ formatDateTime(item.updated_at) }}</span>
      </template>
      <template #actions="{ item }">
        <v-btn color="primary" text class="mr-2" @click="onEdit(item)">编辑</v-btn>
        <!-- <v-btn color="success" text class="mr-2"  @click="onRun(item)">运行</v-btn> -->
        <v-btn color="error" text  @click="onDelete(item)">删除</v-btn>
      </template>
    </m-table>
    <m-dialog :title="title" :visible.sync="show" fullscreen :footer="false">
      <edit-page v-if="show" ref="edit" :item-data="itemData" @success="show = false; init()"></edit-page>
    </m-dialog>
  </div>
</template>

<script>
import MFilter from '@/components/Filter'
import MTable from '@/components/List/table.vue'
import MDialog from '@/components/Dialog'
import EditPage from './components/edit'
import { api } from '@/api/dataGovernance'
import { formatDate } from '@/utils/date'
export default {
  name: 'dataProcess',
  components: { MFilter, MTable, MDialog, EditPage },
  data () {
    return {
      loading: false,
      show: false,
      filter: {
        list: [
          { type: 'textField', value: '', label: '关键词', key: 'title' }
        ]
      },
      queryData: {
        title: null
      },
      headers: [
        { text: '中文名称', align: 'start', value: 'name_zh' },
        { text: '英文名称', align: 'start', value: 'name_en' },
        { text: '状态', align: 'center', value: 'status' },
        { text: '分类', align: 'center', value: 'category' },
        { text: '作者', align: 'center', value: 'leader' },
        { text: '机构', align: 'center', value: 'organization' },
        { text: '描述', align: 'start', value: 'describe' },
        { text: '创建时间', align: 'start', value: 'created_at' },
        { text: '更新时间', align: 'start', value: 'updated_at' },
        { text: '操作', align: 'start', value: 'actions' }
      ],
      itemData: {},
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0
    }
  },
  computed: {
    title () {
      return Object.keys(this.itemData).length ? '编辑数据流程' : '新增数据流程'
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await api.getDataFlowList({
          page: this.pageInfo.current,
          page_size: this.pageInfo.size,
          search: this.queryData.title || undefined
        })
        this.items = data.list
        this.total = data.pagination.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      Object.assign(this.queryData, val)
      this.pageInfo.current = 1
      this.init()
    },
    handleAdd () {
      this.itemData = {}
      this.show = true
    },
    async onEdit (item) {
      this.itemData = item
      this.show = true
    },
    onDelete ({ id }) {
      this.$confirm('提示', '是否删除该选项')
        .then(async () => {
          try {
            await api.deleteDataFlow(id)
            this.$snackbar.success('删除成功')
            this.init()
          } catch (error) {
            this.$snackbar.error('删除失败')
          }
        })
    },
    async onRun ({ id }) {
      try {
        await api.runDataFlow(id)
        this.$snackbar.success('已启动运行')
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    },
    formatDateTime (dateStr) {
      return formatDate(dateStr)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
