<template>
  <div>
    <ai-list>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">评选任务</el-button>
            <ai-search label="开始时间">
              <el-date-picker
                  v-model="search.startTimeStr"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="选择开始日期"
                  @change="search.current = 1, getList()">
              </el-date-picker>
            </ai-search>
            <ai-search label="结束时间">
              <el-date-picker
                  v-model="search.endTimeStr"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="选择结束日期"
                  @change="search.current = 1, getList()">
              </el-date-picker>
            </ai-search>
          </template>
          <template #right>
            <el-input
                v-model="search.taskName"
                class="search-input"
                size="small"
                v-throttle="() => {search.current = 1, getList()}"
                placeholder="请输入任务名称"
                clearable
                @clear="search.current = 1, search.taskName = '', getList()"
                suffix-icon="iconfont iconSearch">
            </el-input>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="total"
            style="margin-top: 6px;"
            :current.sync="search.current"
            :size.sync="search.size"
            @getList="getList">

          <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text" @click="handleDetail(row)">详情</el-button>
                <el-button type="text" @click="handleDelete(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog title="评分规则" :visible.sync="dialog" width="800px" @closed="onClosed" @confirm="onConfirm">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="任务名称：" prop="taskName">
          <el-input v-model="form.taskName" clearable placeholder="请输入任务名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="任务开始时间：" prop="startTime">
          <el-date-picker
              v-model="form.startTime"
              type="date"
              size="small"
              clearable
              style="width: 100%"
              value-format="yyyy-MM-dd"
              @change="startChange"
              placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务结束时间：" prop="endTime">
          <el-date-picker
              v-model="form.endTime"
              type="date"
              size="small"
              style="width: 100%"
              clearable
              @change="endChange"
              value-format="yyyy-MM-dd"
              placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发布人：">{{user.info && user.info.name}}</el-form-item>
        <el-form-item label="任务描述：" prop="taskDescription">
          <el-input v-model="form.taskDescription" clearable placeholder="请输入任务描述" type="textarea" :rows="3" show-word-limit :maxlength="200"></el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {mapState} from 'vuex'
export default {
  name: "AppraiseTask",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  data() {
    return {
      search:{
        taskName:'',
        startTimeStr:'',
        endTimeStr:'',
        current: 1,
        size: 10,
      },
      total: 10,
      colConfigs: [
        {type: "selection"},
        { prop: 'taskName',  label: '任务名称', align: 'center' },
        { prop: 'userName',  label: '发布人', align: 'center' },
        { prop: 'releaswTime',  label: '发布时间', align: 'center' },
        { prop: 'startTime',  label: '任务开始时间', align: 'center' },
        { prop: 'endTime',  label: '任务结束时间', align: 'center' },
      ],
      tableData: [],
      dialog:false,
      form:{
        startTime:'',
        endTime:''
      },
      rules:{
        taskName:[ { required: true, message: '请输入任务名称', trigger: 'blur' }],
        startTime:[ { required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime:[ { required: true, message: '请选择结束时间', trigger: 'change' }],
        taskDescription:[ { required: true, message: '请输入任务描述', trigger: 'blur' }],
      }
    }
  },

  computed:{
    ...mapState(['user'])
  },

  created() {
    this.getList()
  },

  methods: {
    startChange(e){
      if(e){
        const time = new Date(e).getTime();
        const now = new Date(dayjs(Date.now()).format("YYYY-MM-DD")).getTime()
        if(time < now){
          this.$set(this.form,'startTime','')
          this.$message.error('开始时间不能小于当前时间')
        }
      }
    },

    endChange(e){
      if(e){
        const endTime = new Date(e).getTime();
        const startTime = new Date(this.form.startTime).getTime()
        if(endTime < startTime){
          this.$set(this.form,'endTime','')
          this.$message.error('结束时间不能小于开始时间')
        }
      }
    },

    onConfirm(){
      this.$refs['formRef'].validate(async valid=>{
        if(valid){
          try {
            const {code} = await this.instance.post('/app/apptaskmanage/addOrUpdate',{
              ...this.form,
              startTime:`${this.form.startTime} 00:00:00`,
              endTime:`${this.form.endTime} 23:59:59`,
            })
            if(code===0){
              this.$message.success('保存成功')
              this.dialog = false
              this.getList()
            }
          }catch (e) {
            console.log(e)
          }
        }
      })

    },

    onClosed(){
      this.form = {}
      this.$refs['formRef'].resetFields()
    },

    handleDetail(row){
      this.form = {...row}
      this.dialog = true
    },

    handleDelete({id}){
      this.$confirm("是否确定要删除此数据？").then(async ()=>{
        try {
          const {code} = await this.instance.post('/app/apptaskmanage/delete',null,{
            params:{ids:id}
          })
          if(code===0){
            this.$message.success('删除成功')
            this.getList()
          }
        }catch (e) {
          console.error(e)
        }
      })
    },

    async getList(){
      try {
        const {code,data} = await this.instance.post('/app/apptaskmanage/list',null,{
          params:{
            ...this.search
          }
        })
        if(code===0){
          this.tableData = data.records
          this.total = data.total
        }
      }catch (e) {
        console.error(e)
      }
    },
    handleAdd() {
      this.dialog = true
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
