<template>
  <div>
    <el-card style="height: 700px;margin-top: 20px;margin-left: 2%;width: 96%;">
      <div>
        <el-steps :active="step" align-center>
          <el-step title="步骤一" description="项目基础信息"></el-step>
          <el-step title="步骤二" description="配置分类"></el-step>
          <el-step title="步骤三" description="选择资源"></el-step>
          <el-step title="步骤四" description="选择标注人"></el-step>
          <el-step title="步骤五" description="预览并绑定"></el-step>
        </el-steps>
      </div>
      <div v-if="step==0">
        <div style="border: 1px solid #ebeef5; height:480px; width:90%;margin-left: 5%;margin-top: 20px">
          <el-form label-position="left" :model="addProjectForm" ref="addProjectForm" :rules="rules"
                   style="padding: 20px;margin-left: 100px">
            <el-form-item label="项目名称:" label-width="120px" prop="projectName">
              <el-input v-model="addProjectForm.projectName"
                        clearable
                        size="small"
                        style="width: 70%;margin-left: 5px;"
                        placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="项目组名:" label-width="120px" prop="groupIds">
              <!--              <SelectTree-->
              <!--                width="70"-->
              <!--                placeholder="请选择"-->
              <!--                v-model="addProjectForm.groupId"-->
              <!--                :options="groupTree"-->
              <!--                :props="groupProps"-->
              <!--              ></SelectTree>-->
              <el-cascader
                style="width: 70%;margin-left: 5px;"
                v-model="addProjectForm.groupIds"
                :options="groupTree"
                :props="{ checkStrictly: true }"
                clearable></el-cascader>
            </el-form-item>
            <el-form-item label="有效时间:" label-width="120px" prop="validTimeRange">
              <el-date-picker
                style="width: 70%;margin-left: 5px;"
                v-model="addProjectForm.validTimeRange"
                :editable="false"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="推送时间:" label-width="120px" prop="pushTime">
              <el-date-picker
                style="width: 70%;margin-left: 5px;"
                v-model="addProjectForm.pushTime"
                type="datetime"
                placeholder="推送时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                class="user-search-input"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="项目描述:" label-width="120px" prop="description">
              <el-input v-model="addProjectForm.description"
                        clearable
                        type="textarea"
                        :rows="8"
                        style="width: 70%;margin-left: 5px;"
                        placeholder="描述不可超过100个中文字符"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="block" style="height: 200px;text-align: center;margin-top: 20px">
          <el-button type="primary" :loading="nextLoading" @click="backToProject()">取消</el-button>
          <el-button type="primary" :loading="nextLoading" @click="nextStep()">下一步</el-button>
        </div>
      </div>
      <div v-if="step==1">
        <div style="border: 1px solid #ebeef5; height:480px; width:90%;margin-left: 5%;margin-top: 20px">
          <el-form label-position="left"
                   style="padding: 20px;margin-left: 100px;margin-top: 50px">
            <el-form-item label="分类范围:" label-width="120px" prop="categoryId">
              <el-cascader
                style="width: 70%;margin-left: 5px;"
                v-model="addCategoryForm.categoryIds"
                :options="categoryTree"
                :props="{ checkStrictly: true }"
                clearable></el-cascader>
            </el-form-item>
          </el-form>

        </div>
        <div class="block" style="height: 200px;text-align: center;margin-top: 20px">
          <el-button type="primary" :loading="nextLoading" @click="backStep()">上一步</el-button>
          <el-button type="primary" :loading="nextLoading" @click="nextStep()">下一步</el-button>
        </div>
      </div>
      <div v-if="step==2">
        <div style="border: 1px solid #ebeef5; height:480px; width:90%;margin-left: 5%;margin-top: 20px">
          <!--          <div>-->
          <!--            <el-select v-model="type" style="width: 130px;margin-left: 5px;" size="small"-->
          <!--                       class="user-search-input" clearable placeholder="请选择状态">-->
          <!--              <el-option-->
          <!--                @change="changeType(type)"-->
          <!--                v-for="item in typeList"-->
          <!--                :key="item.value"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value"-->
          <!--              />-->
          <!--            </el-select>-->
          <!--          </div>-->
          <div class="pro-tran" style="margin-left: 5%;margin-top: 10px;height: 100%">
            <el-transfer
              :titles="['待选资源', '已选资源']"
              filterable
              filter-placeholder="请输入资源名称"
              v-model="selectedResource"
              :data="resourceList"
              :props="{
                  key: 'resourceId',
                  label: 'row'
                }">
            </el-transfer>
          </div>
        </div>
        <div class="block" style="height: 200px;text-align: center;margin-top: 20px">
          <el-button type="primary" :loading="nextLoading" @click="backStep()">上一步</el-button>
          <el-button type="primary" :loading="nextLoading" @click="nextStep()">下一步</el-button>
        </div>
      </div>
      <div v-if="step==3">
        <div style="border: 1px solid #ebeef5; height:480px; width:90%;margin-left: 5%;margin-top: 20px">
          <div class="user-pro-tran" style="margin-left: 5%;margin-top: 10px;height: 100%">
            <el-transfer
              :titles="['待选标注人', '已选择标注人']"
              filterable
              filter-placeholder="账号或姓名"
              v-model="selectedMarkPerson"
              :data="markPersonList"
              :props="{
                  key: 'userId',
                  label: 'row'
                }">
            </el-transfer>
            <div style="color: gray;margin-top: 10px">
              <div>说明:</div>
              <div>相同类型的资源包会在满足条件的标注人之间随机平均分配.</div>
              <div>例如:</div>
              <div>文本标注资源包有10个资源,共有2个标注人满足条件,则每人分配5个文本资源</div>
              <div>图片标注资源包有20个资源,有三个人满足条件,则每个人分配7/7/6个图片资源</div>
            </div>
          </div>
        </div>
        <div class="block" style="height: 200px;text-align: center;margin-top: 20px">
          <el-button type="primary" :loading="nextLoading" @click="backStep()">上一步</el-button>
          <el-button type="primary" :loading="nextLoading" @click="nextStep()">下一步</el-button>
        </div>
      </div>
      <div v-if="step==4">
        <div style="border: 1px solid #ebeef5; height:480px; width:90%;margin-left: 5%;margin-top: 20px">
          <div style="width: 90%;text-align: center">
            <h1>标注任务生成预览</h1>
          </div>
          <div style="width: 90%;margin-left: 5%">
            <el-table
              size="small"
              :data="taskList"
              border
              height="380"
              fit
              highlight-current-row
            >
              <el-table-column label="任务ID" prop="taskId" align="center" min-width="100"/>
              <el-table-column label="任务名称" prop="taskName" align="center" min-width="100"/>
              <el-table-column label="账号" prop="account" align="center" min-width="100"></el-table-column>
              <el-table-column label="姓名" prop="userName" align="center" min-width="100"/>
              <el-table-column label="标注类型" prop="typeName" align="center" min-width="100"/>
              <el-table-column label="本次标注数量" prop="dataNum" align="center" min-width="100"/>
            </el-table>
          </div>
        </div>
        <div class="block" style="height: 200px;text-align: center;margin-top: 20px">
          <el-button type="primary" :loading="nextLoading" @click="backStep()">上一步</el-button>
          <el-button type="primary" :loading="nextLoading" @click="completeProject">完成</el-button>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script>
import moment from 'moment';
import {
  getGroupTree,
  addProject,
  addProCategory,
  addProResource,
  addProUsers,
  assignComplete,
  deleteProject
} from "@/api/project";
import SelectTree from "@/components/SelectTree";
import {getCateTree} from "@/api/category";
import {getNotAssignedList} from "@/api/resource";
import {getMarkPersonList} from "@/api/system/user";


export default {
  name: "AddProjectPage",
  components: {
    SelectTree
  },
  data() {
    return {
      projectId: null,
      step: 0,
      addProjectForm: {
        projectName: '',
        groupId: null,
        groupIds: [],
        beginTime: null,
        endTime: null,
        pushTime: null,
        validTimeRange: [],
        description: '',
        isEdit: null,
        projectId: null
      },
      addCategoryForm: {
        projectId: null,
        categoryId: '',
        categoryIds: [],
      },
      addResourceForm: {
        projectId: null,
        resourceIds: []
      },
      addUserForm: {
        projectId: null,
        userIds: []
      },
      completeForm: {
        projectId: null,
        taskIds: []
      },
      rules: {
        projectName: [
          {required: true, message: '项目名不能为空,长度为1-45', trigger: 'blur', min: 1, max: 45}
        ],
        groupIds: [
          {required: true, message: '项目分组不能为空', trigger: 'change'},
        ],
        validTimeRange: [
          {required: true, message: '有效时间不能为空', trigger: 'change'},
        ],
        pushTime: [
          {required: true, message: '推送时间不能为空', trigger: 'change'},
        ]
      },
      treeLoading: false,
      nextLoading: false,
      groupTree: [],
      categoryTree: [],
      resourceList: [],
      originResourceList: [],
      markPersonList: [],
      selectedResource: [],
      selectedMarkPerson: [],
      typeList: [
        {value: 100, label: '所有'},
        {value: 0, label: '文本'},
        {value: 1, label: '图片'},
        {value: 2, label: '视频'}
      ],
      type: 100,
      groupProps: {
        value: "groupId",
        label: "groupName",
        children: "children",
      },
      categoryProps: {
        value: "categoryId",
        label: "categoryName",
        children: "children",
      },
      taskList: []
    }
  },
  mounted() {
    this.fetchGroupTree()
    this.getCategoryTree()
    this.fetchResourceList()
    this.fetchMarkPerson()
  },
  methods: {
    //查询树结构
    fetchGroupTree() {
      this.treeLoading = true
      getGroupTree().then(res => {
        this.groupTree = res.result
        this.treeLoading = false
      }, err => {
        this.treeLoading = false
      })
    },
    //查询分类树
    getCategoryTree() {
      this.treeLoading = true
      getCateTree().then(res => {
        this.categoryTree = res.result
        this.treeLoading = false
      }, () => {
        this.treeLoading = false
      })
    },
    //查询待选资源
    fetchResourceList() {
      this.selectedResource = []
      getNotAssignedList(0).then(res => {
        this.resourceList = res.result
        this.originResourceList = res.result
        this.resourceList.forEach(item => {
          let row = item.name + '  |  ' + item.typeName
          item.row = row
        })
      }, err => {

      })
    },
    changeType(type) {
      this.resourceList = []
      if (type == 100) {
        this.originResourceList.forEach(item => {
          let row = item.name + '  |  ' + item.typeName
          item.row = row
          this.resourceList.push(item)
        })
      } else {
        this.originResourceList.forEach(item => {
          if (item.type == type) {
            let row = item.name + '  |  ' + item.typeName
            item.row = row
            this.resourceList.push(item)
          }
        })
      }
    },
    //查询待选标注员
    fetchMarkPerson() {
      this.selectedMarkPerson = []
      getMarkPersonList(0).then(res => {
        this.markPersonList = res.result
        this.markPersonList.forEach(item => {
          let row = item.account + '  |  ' + item.userName + '  |  ' + item.userTypeName + '  |  ' + item.taskNum
          item.row = row
        })
      })
    },
    nextStep() {
      if (this.step == 0) {
        //新增
        this.nextLoading = true
        this.$refs.addProjectForm.validate((valid) => {
          if (valid) {
            this.addProjectForm.groupId = this.addProjectForm.groupIds[this.addProjectForm.groupIds.length - 1]
            this.addProjectForm.beginTime = moment(this.addProjectForm.validTimeRange[0]).format('yyyy-MM-DD 00:00:00');
            this.addProjectForm.endTime = moment(this.addProjectForm.validTimeRange[1]).format('yyyy-MM-DD 23:59:59');
            if (this.addProjectForm.projectName.trim() == '') {
              this.$message.error('项目名称填写有误')
              this.nextLoading = false
              return false
            }
            if (this.projectId == null || this.projectId == '') {
              this.addProjectForm.isEdit = 0
            } else {
              this.addProjectForm.isEdit = 1
              this.addProjectForm.projectId = this.projectId
            }
            addProject(this.addProjectForm).then(res => {
              this.nextLoading = false
              this.$message.success('新增项目基础信息成功')
              this.projectId = res.result
              this.getCategoryTree()
              this.step++
            }, err => {
              this.nextLoading = false
            })
          } else {
            this.nextLoading = false
            return false
          }
        });
      } else if (this.step == 1) {
        this.nextLoading = true
        if (this.addCategoryForm.categoryIds == null || this.addCategoryForm.categoryIds == [] || this.addCategoryForm.categoryIds.length < 1) {
          this.$message.error('请选择分类')
          this.nextLoading = false
          return false
        }
        this.addCategoryForm.categoryId = this.addCategoryForm.categoryIds[this.addCategoryForm.categoryIds.length - 1]
        this.addCategoryForm.projectId = this.projectId
        addProCategory(this.addCategoryForm).then(res => {
          this.nextLoading = false
          this.$message.success('配置分类成功')
          this.step++
        }, err => {
          this.nextLoading = false
        })
      } else if (this.step == 2) {
        this.nextLoading = true
        if (this.selectedResource == null || this.selectedResource.length == 0) {
          this.$message.error('请选择资源')
          this.nextLoading = false
          return false
        }
        this.addResourceForm.projectId = this.projectId
        this.addResourceForm.resourceIds = this.selectedResource
        addProResource(this.addResourceForm).then(res => {
          this.nextLoading = false
          this.$message.success('选择资源成功')
          this.step++
        }, err => {
          this.nextLoading = false
          this.fetchResourceList()
        })
      } else if (this.step == 3) {
        this.nextLoading = true
        if (this.selectedMarkPerson == null || this.selectedMarkPerson.length == 0) {
          this.$message.error('请选择标注人')
          this.nextLoading = false
          return false
        }
        this.addUserForm.projectId = this.projectId
        this.addUserForm.userIds = this.selectedMarkPerson
        addProUsers(this.addUserForm).then(res => {
          this.nextLoading = false
          this.$message.success('选择标注人成功')
          this.taskList = res.result
          this.step++
        }, err => {
          this.nextLoading = false
          this.fetchMarkPerson()
        })
      }
    },
    //上一步
    backStep() {
      //todo 退回到选择资源时  是否需要将已选择的资源恢复成没有分配
      this.step--
    },
    //取消
    backToProject() {
      //删除项目及其相关数据,修改资源分配状态
      if (this.projectId != null && this.projectId != '') {
        deleteProject(this.projectId).then(res => {
          this.$message.success('已取消')
          this.cancel(true)
        }, err => {

        })
      } else {
        this.cancel(true)
      }

    },
    cancel(val) {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.push({name: 'ProjectManagement', params: {flush: val}})
      })
    },
    //完成项目
    completeProject() {
      this.nextLoading = true
      this.completeForm.projectId = this.projectId
      let taskIds = []
      this.taskList.forEach(item => {
        taskIds.push(item.taskId)
      })
      this.completeForm.taskIds = taskIds
      assignComplete(this.completeForm, this.completeForm.projectId).then(res => {
        this.nextLoading = false
        this.$message.success('创建项目完成')
        this.cancel(true)
      }, err => {
        this.nextLoading = false
      })
    },

  }
}
</script>

<style scoped>
.pro-tran >>> .el-transfer-panel {
  width: 40%;
}

.pro-tran >>> .el-transfer-panel__body {
  height: 360px;
}

.pro-tran >>> .el-transfer-panel__list.is-filterable {
  height: 300px;
  padding-top: 0;
}

.user-pro-tran >>> .el-transfer-panel {
  width: 40%;
}

.user-pro-tran >>> .el-transfer-panel__body {
  height: 260px;
}

.user-pro-tran >>> .el-transfer-panel__list.is-filterable {
  height: 200px;
  padding-top: 0;
}
</style>

<style>

</style>
