<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">
      <view-table
        ref="table"
        view-code="Process"
        :select-enable="true"
        :create-enable="allow('create')"
        :remove-enable="allow('remove')"
        @create="$refs.form.open()"
        @edit="({ row, index }) => $refs.form.open(row)"
      >
        <template #filterCommand>
          <Button v-if="allow('export')" size="small" type="info" custom-icon="fa fa-cloud-download-alt" @click="exportFile()">{{ $t('Front_Btn_Export') }}</Button>
          <file-upload v-if="allow('import')" url="api/Process/importFile" accept=".proc" @on-success="importFileSuccess">
            <template #>
              <Button type="primary" custom-icon="fa fa-cloud-upload-alt" size="small">{{ $t('Front_Btn_Import') }}</Button>
            </template>
          </file-upload>
        </template>
        <template #command="{ row }">
          <Button
            v-if="allow('processDef')"
            size="small"
            :title="$t('Front_Btn_Process_Def')"
            type="primary"
            custom-icon="fa fa-route"
            @click="$refs.flowChart.open({ processID: row.id })"
          ></Button>
          <Button size="small" :title="$t('Front_Btn_Version')" type="info" custom-icon="fa fa-bars" @click="$refs.processDefTable.open({ processID: row.id })"></Button>
        </template>
      </view-table>
    </Card>
    <modal-form ref="form" view-code="ProcessEdit" :create-enable="allow('create')" :edit-enable="allow('edit')" @on-after-save="$refs.table.loadData()" />
    <modal-table ref="processDefTable" view-code="ProcessDefModal">
      <template #command="{ row }">
        <Button
          size="small"
          v-if="allow('processDef')"
          :title="$t('Front_Btn_Process_Def')"
          type="primary"
          custom-icon="fa fa-route"
          @click="$refs.flowChart.open({ id: row.id })"
        ></Button>
        <Button size="small" v-if="allow('active') && !row.isActive" :title="$t('Front_Btn_Active')" type="primary" custom-icon="fa fa-star" @click="active(row)"></Button>
      </template>
    </modal-table>
    <flow-chart ref="flowChart" />
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import flowChart from '../../components/workflow/flow-chart.vue';
  import processApi from '../../api/process';
  import processDefApi from '../../api/processDef';

  export default {
    name: 'system-process',
    mixins: [mixinPage],
    components: { flowChart },
    data() {
      return {};
    },
    computed: {},
    created() {},
    methods: {
      // 激活版本
      active(row) {
        this.confirm('Front_Msg_Sure_To_Active_Version', async () => {
          await processDefApi.active(row.id);
          this.success('Front_Msg_Success');
          this.$refs.processDefTable.loadData();
        });
      },
      // 导出文件
      exportFile() {
        let ids = this.$refs.table.getSelected().map(x => {
          return x.id;
        });
        if (ids.length > 0) {
          processApi.exportFile(ids);
        } else {
          this.error('Front_Msg_Please_Select_Export_Item');
        }
      },
      // 导入成功
      importFileSuccess(res) {
        if (res.code == 0) {
          this.success('Front_Msg_Success', () => {
            this.$refs.table.loadData();
          });
        } else {
          this.error(res.message);
        }
      }
    }
  };
</script>
