<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="数据集:">
          <el-input
            v-model="queryForm.nameOrId"
            clearable
            size="small"
            style="width: 250px;margin-left: 5px;"
            placeholder="请输入数据集名称或数据集ID"
          />
        </el-form-item>
        <el-form-item label="创建日期:">
          <el-date-picker
            v-model="queryForm.beginTime"
            type="date"
            placeholder="开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
            class="user-search-input"
          >
          </el-date-picker>
          <span>---</span>
          <el-date-picker
            v-model="queryForm.endTime"
            type="date"
            placeholder="结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 23:59:59"
            class="user-search-input"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建人:">
          <el-input
            v-model="queryForm.createByName"
            clearable
            size="small"
            style="width: 200px;margin-left: 5px;"
            placeholder="请输入创建人姓名"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryForm.assignStatus" style="width: 130px;margin-left: 5px;" size="small"
                     class="user-search-input" placeholder="请选择状态">
            <el-option
              v-for="item in assignStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" style="margin-left: 10px" type="primary" :loading="searchBtnLoading" @click="search">查询</el-button>
          <el-button type="primary" size="small" @click="openAddDialog()" v-if="checkPermission(RESOURCE_PERMS.addResource)">新增</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card style="margin-top: 10px;">
      <el-table
        v-loading="searchBtnLoading"
        size="small"
        :data="resourcePage"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="数据集ID" prop="resourceId" align="center" min-width="100"/>
        <el-table-column label="数据集名称" prop="name" align="center" min-width="100"/>
        <el-table-column label="类型" prop="typeName" align="center" min-width="100"></el-table-column>
        <el-table-column label="资源个数" prop="resourceCount" align="center" min-width="100"/>
        <el-table-column label="创建时间" prop="createTimeStr" align="center" min-width="100"/>
        <el-table-column label="状态" prop="assignStatusName" align="center" min-width="100"/>
        <el-table-column label="操作" align="center" fixed="right" width="260">
          <template slot-scope="scope">
            <!--            <el-button-->
            <!--              size="small"-->
            <!--              type="text"-->
            <!--              @click="toDetailPage(scope.row.resourceId)"-->
            <!--            >-->
            <!--              查看-->
            <!--            </el-button>-->
            <el-button
              v-if="checkPermission(RESOURCE_PERMS.deleteResource)"
              size="small"
              type="text"
              @click="deleteResource(scope.row.resourceId,scope.row.name)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        :page-size="queryForm.pageSize"
        :current-page.sync="queryForm.pageNum"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </el-card>

    <el-dialog :close-on-click-modal="false" title="创建数据集" :visible.sync="addVisible" width="600px"
               style="height: 400px">
      <el-form>
        <el-form-item label="数据集名称:">
          <el-input style="width: 400px" v-model="addForm.name" clearable placeholder="请输入数据集名称,长度不超过20个字符"></el-input>
        </el-form-item>
        <el-form-item label="数据集类型:">
          <el-select v-model="addForm.type" style="width: 400px;margin-left: 5px;" size="small"
                     class="user-search-input" clearable filterable placeholder="请选择类型">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="block" style="height: 200px;text-align: center">
            <el-button type="primary" :loading="addLoading" @click="addResource">确定</el-button>
            <el-button @click="closeDialog(0)">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {addResource, deleteResource, getResourcePage} from "@/api/resource";
import {RESOURCE_PERMS} from "@/permission/permission-resource";
import permissionMixin from '../../mixins/permission-mixin'


export default {
  mixins: [permissionMixin],
  name: "ResourceManagement",
  data() {
    return {
      RESOURCE_PERMS,
      total: 0,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        nameOrId: '',
        beginTime: null,
        endTime: null,
        createByName: '',
        assignStatus: 100
      },
      assignStatusList: [
        {value: 100, label: '全部'},
        {value: 0, label: '未分配'},
        {value: 1, label: '已分配'}
      ],
      typeList: [
        {value: 0, label: '文本'},
        {value: 1, label: '图片'},
        {value: 2, label: '视频'}
      ],
      searchBtnLoading: false,
      addVisible: false,
      addLoading: false,
      addForm: {
        type: null,
        name: ''
      },
      resourcePage: [],
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    //分页查询
    fetchResourcePage(queryForm) {
      this.searchBtnLoading = true
      getResourcePage(queryForm).then(res => {
        this.resourcePage = res.result.result
        this.total = Number(res.result.total)
        this.searchBtnLoading = false
      }, err => {
        this.searchBtnLoading = false
      })
    },
    //打开新增弹框
    openAddDialog() {
      this.addForm = {
        type: null,
        name: ''
      }
      this.addVisible = true
    },
    toAddPage(resourceId) {
      this.$router.push({name: `AddResourcePage`, params: {flush: true, resourceId: resourceId}})
    },
    search() {
      this.queryForm.pageNum = 1
      this.fetchResourcePage(this.queryForm)
    },
    changePage(page) {
      this.queryForm.pageNum = page;
      this.fetchResourcePage(this.queryForm)
    },
    //跳转到详情页
    toDetailPage(resourceId) {

    },
    deleteResource(resourceId, name) {
      this.$confirm('数据集将' + name + '被删除,删除后在任务资源分配中无法使用此资源包,请进行确认?', '提示', {type: 'error'}).then(() => {
        deleteResource(resourceId).then(res => {
          this.$message.success('作废资源数据集成功')
          this.queryForm.pageNum = 1
          this.fetchResourcePage(this.queryForm)
        }, err => {

        })
      }, () => {
      })
    },
    addResource() {
      this.addLoading = true
      if (this.addForm.type === null || this.addForm.type === '') {
        this.$message.error("类型不能为空")
        this.addLoading = false
        return false
      }
      if (this.addForm.name == null || this.addForm.name.trim() == '') {
        this.$message.error("数据集名称不能为空")
        this.addLoading = false
        return false
      }
      this.addForm.name = this.addForm.name.trim()
      addResource(this.addForm).then(res => {
        this.$message.success("新增资源数据集成功")
        this.addLoading = false
        this.closeDialog(0)
        // this.queryForm.pageNum = 1;
        // this.fetchResourcePage(this.queryForm)
        this.toAddPage(res.result)
      }, err => {
        this.addLoading = false
      })
    },
    closeDialog(type) {
      if (type == 0) {
        this.addForm = {
          name: '',
          type: null
        }
        this.addVisible = false
        this.addLoading = false
      }
    }
  }
}
</script>

<style scoped>

</style>
