<template>
  <div class="page-view">
    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" label-width="120px" @query="onQuery" @reset="onReset">
      <app-filter-item :filter-config="{ operation: 'LIKE' }" :span="6" el-type="input" label="算法任务名称">
        <el-input v-model="filters.name" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
      <app-filter-item :filter-config="{ operation: 'LIKE' }" :span="6" el-type="input" label="算法任务编码">
        <el-input v-model="filters.code" clearable placeholder="请输入" @keyup.enter.native="$refs['app-filter'].query" />
      </app-filter-item>
      <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="6" el-type="input" label="算法任务状态">
        <el-select v-model="filters.deployedStatus" clearable placeholder="请选择" @keyup.enter.native="$refs['app-filter'].query">
          <el-option v-for="item in deployedStatus" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </app-filter-item>
    </app-filter>

    <!-- 列表组件 -->

    <div class="flex-1 pa-11 bg-white h-100 flex-col mt-11 border-radius-5">
      <div class="mb-15">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addData"> 新增</el-button>
        <el-button icon="el-icon-plus" size="mini" :disabled="selections.length === 0" type="danger" @click="delData"> 删除</el-button>
      </div>
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
        @row-dblclick="edit"
        @select-change="handleSelectsChange"
        :selectable="allowSelect"
        checkbox
      >
        <template #deployedStatus="scope">
          <el-tag :type="typeMap[scope.row.deployedStatus]">{{ foramtStatus[scope.row.deployedStatus] }}</el-tag>
        </template>
      </app-table>
    </div>

    <!-- dialog组件 -->

    <detail-dialog v-model="dialogVisible" :data="currentRow" :title="dialogTitle" @confirm="refresh" />
    <publish-dialog v-model="publishDialogVisible" :data="currentRow" :title="publishTitle" @confirm="refresh" />
  </div>
</template>

<script>
import tableMixin from '@/mixins/table.js'; // 列表mixins
import DetailDialog from './DetailDialog.vue';
import TooltipButton from '@/views/dataResource/dataServices/dataServiceAPI/components/TooltipButton.vue';
import publishDialog from '@/views/dataResource/arithmeticManage/arithmeticTask/publishDialog.vue';
import API from '@/api/business/arithmeticTask';
export default {
  name: 'arithmeticTask',
  components: { publishDialog, TooltipButton, DetailDialog },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      filters: {},
      deployedStatus: [
        {
          value: '1',
          label: '待推理',
        },
        {
          value: '2',
          label: '已完成',
        },
        {
          value: '4',
          label: '已发布',
        },
        {
          value: '5',
          label: '已失效',
        },
      ],
      selections: [],
      // 列表表头
      columns: [
        { label: '算法任务名称', prop: 'name', align: 'center' },
        { label: '算法任务编码', prop: 'code', align: 'center' },
        {
          label: '算法任务状态',
          prop: 'deployedStatus',
          dataType: 'slot',
          slot: 'deployedStatus',
          width: '140px',
          align: 'center',
        },
        {
          dataType: 'option',
          label: '操作',
          width: '240px',
          fixed: 'right',
          align: 'center',
          operation: [
            {
              name: '算法推理',
              icon: 'el-icon-edit-outline',
              clickFun: (row) => {
                this.showDetail(row);
              },
            },
            {
              name: '推理完成',
              icon: 'el-icon-s-claim',
              showHide: (row) => {
                return row.deployedStatus === '1';
              },
              clickFun: (row) => {
                this.updataStatus(row, '2');
              },
            },
            {
              name: '算法发布',
              icon: 'el-icon-s-promotion',
              color: '#67c23a',
              showHide: (row) => {
                return row.deployedStatus === '2' || row.deployedStatus === '5';
              },
              clickFun: (row) => {
                this.publish(row);
              },
            },
            {
              name: '取消发布',
              icon: 'el-icon-s-release',
              color: '#e6a23c',
              showHide: (row) => {
                return row.deployedStatus === '4';
              },
              clickFun: (row) => {
                this.updataStatus(row, '5');
              },
            },
          ],
        },
      ],
    };

    const DIALOG_CONFIG = {
      dialogVisible: false,
      dialogTitle: '新增',
      publishDialogVisible: false,
      publishTitle: '',
    };

    return {
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
    };
  },
  mounted() {},
  computed: {
    // 配置列表接口方法：只有配置了该计算属性 才会执行 table mixins中的getData方法
    dataMethod() {
      return API.getInferenceList;
    },
    typeMap() {
      return {
        1: 'warning', // 待推理
        2: 'primary', // 已完成
        4: 'success', // 已发布
        5: 'info', // 已失效
      };
    },
    foramtStatus() {
      return {
        1: '待推理',
        2: '已完成',
        4: '已发布',
        5: '已失效',
      };
    },
  },
  methods: {
    addData() {
      this.dialogTitle = '新增';
      this.currentRow = null;
      this.dialogVisible = true;
    },
    showDetail(row) {
      const { id = '', name = '', code = '' } = row;
      // 打开新的页面 到 href 这个页面
      const href = this.$router.resolve({
        path: '/arithmeticManage/arithmeticTask/mindMapPage',
        query: { id, name, code },
      }).href;
      window.open(href, '_blank');
    },
    edit(row) {
      this.dialogTitle = `编辑 - ${row.name}`;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    delData() {
      this.$confirm(`此操作将删除选中算法任务, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            let ids = this.selections.map((item) => {
              return `ids=${item.id}`;
            });
            ids = ids.join('&');
            const { state, message } = await API.deleteInference(ids);
            if (state) {
              this.getData();
              this.$message.success('删除算法任务成功！');
            } else {
              this.$message.warning(message || '删除算法任务失败！');
            }
          } catch (err) {
            this.$message.warning(err || '删除算法任务失败！');
          }
        })
        .catch(() => {});
    },
    updataStatus(row, status) {
      let msg = '';
      if (status === '2') {
        msg = '完成推理';
      } else if (status === '5') {
        msg = '取消发布';
      }
      this.$confirm(`此操作将${msg}（${row.name}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            let data = new FormData();
            data.append('id', row.id);
            data.append('deployedStatus', status);
            const { state, message } = await API.updateInferenceStatus(data);
            if (state) {
              this.getData();
              this.$message.success(`${msg}成功`);
            } else {
              this.$message.warning(message || `${msg}失败！`);
            }
          } catch (err) {
            this.$message.warning(err || `${msg}失败！`);
          }
        })
        .catch(() => {});
    },
    publish(row) {
      this.publishDialogVisible = true;
      this.publishTitle = '发布算法任务：' + row.name;
      this.currentRow = row;
    },
    handleSelectsChange(arr) {
      this.selections = arr;
    },
    allowSelect(row) {
      return row.deployedStatus === '1';
    },
  },
};
</script>

<style></style>
