<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.createTimeStart"
                  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.createTimeStart"
                  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.createUserName"
                class="search-input"
                size="small"
                v-throttle="() => {search.current = 1, getList()}"
                placeholder="请输入任务名称"
                clearable
                @clear="search.current = 1, search.createUserName = '', 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
              label="状态"
              slot="state">
            <template v-slot="{ row }">
              <span class="start">启用</span>
            </template>
          </el-table-column>

          <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text">详情</el-button>
                <el-button type="text">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog title="评分规则" :visible.sync="dialog" width="800px">
      <el-form ref="formRef" :model="form" label-width="120px">
        <el-form-item label="事件类型：">
          <el-input v-model="form.type" clearable placeholder="请输入任务名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="任务开始时间：">
          <el-date-picker
              v-model="form.createTimeStart"
              type="date"
              size="small"
              clearable
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务结束时间：">
          <el-date-picker
              v-model="form.createTimeStart"
              type="date"
              size="small"
              style="width: 100%"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发布人：">佩奇</el-form-item>
        <el-form-item label="任务描述：">
          <el-input v-model="form.desc" clearable placeholder="请输入任务描述" type="textarea" :rows="3" show-word-limit :maxlength="200"></el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </div>
</template>

<script>
export default {
  name: "AppraiseTask",
  data() {
    return {
      search:{},
      total: 10,
      colConfigs: [
        {type: "selection"},
        { prop: 'integralUserName',  label: '任务名称', align: 'center' },
        { prop: 'areaName',  label: '发布人', align: 'center' },
        { prop: 'girdName',  label: '发布时间', align: 'center' },
        { prop: 'createTime',  label: '任务发布时间', align: 'center' },
        { prop: 'createTime',  label: '任务结束时间', align: 'center' },
      ],
      tableData: [],
      dialog:false,
      form:{}
    }
  },
  methods: {
    getList(){

    },
    handleAdd() {
      this.dialog = true
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
