<template>
  <ai-list isTabs>
    <template slot="content">
      <ai-search-bar class="ai-search">
        <template slot="left">
          <ai-select v-model="search.status" placeholder="请选择状态" clearable @change=";(page.current = 1), getList()" :selectList="dict.getDict('workTaskStatus')"></ai-select>
          <el-row class="dateRange" type="flex" align="middle">
            <span class="dateLabel">创建日期</span>
            <el-date-picker size="small" v-model="search.startTime" placeholder="开始日期" @change=";(page.current = 1), getList()" value-format="yyyy-MM-dd" />
            <el-date-picker size="small" v-model="search.lastTime" placeholder="结束日期" @change=";(page.current = 1), getList()" value-format="yyyy-MM-dd" />
          </el-row>
        </template>
        <template slot="right">
           <el-input placeholder="任务标题"  v-model="search.taskTitle"  size="small" @change="(page.current = 1), getList()"  clearable prefix-icon="iconfont iconSearch"/>
        </template>
      </ai-search-bar>
      <el-button style="margin-bottom: 10px;" class="el-button" type="primary" icon="iconfont iconAdd" size="small" @click="toAdd('', 'Add')">创建任务</el-button>
      
      <ai-table class="ai-table" :tableData="tableData" :col-configs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" @getList="getList" :dict="dict">
        <el-table-column slot="taskTitle" label="任务标题">
          <template slot-scope="{ row }">
            <span>{{row.parentTaskCode ? '[子任务]' + row.taskTitle : row.taskTitle}}</span>
          </template>
        </el-table-column>
        <el-table-column slot="lastTime" label="截止日期" width="240">
          <template slot-scope="{ row }">
            <span>{{row.lastTime}}<i  :style="row.isOverTime==0?'color:#FF8822;':'color:#FF4466;'" style="margin-left:8px;font-style:inherit" v-if="row.overTimeStatus">({{row.overTimeStatus}})</i></span>
          </template>
        </el-table-column>
        <el-table-column slot="percent" label="当前进度" align="center" width="120">
          <template slot-scope="{ row }">
            <div>{{row.percent + '%'}}</div>
          </template>
        </el-table-column>
        <el-table-column slot="options" label="操作" align="center" width="200">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toDetail(row)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: 'InitiatorList',
  components: {},
  props: {
    instance: Function,
    dict: Object,
    params: Object,
    taskRole: String
  },
  data() {
    return {
      tableData: [],
      colConfigs: [
        { slot: 'taskTitle', label: '任务标题'},
        {
          prop: "type",
          label: "任务类型",
          width: 120,
          align: "center",
          formart: (type) =>
            this.$dict.getLabel("workTaskType", type),
        },
        { prop: 'createTime', label: '创建日期', width: 120},
        { slot: 'lastTime', label: '截止日期'},
        {
          prop: "status",
          label: "任务状态",
          width: 120,
          align: "center",
          formart: (status) =>
            this.$dict.getLabel("workTaskStatus", status),
        },
        { slot: 'percent', label: '当前进度',align: "center" },
      ],
      page: {
        size: 10,
        current: 1,
        total: 0,
      },
      search: {
        status: '',
        startTime: '',
        lastTime: '',
        taskTitle: '',
      },
    }
  },
  mounted() {
    this.dict.load('workTaskStatus', 'workTaskType').then(() => {
      this.getList()
    })
  },
  methods: {
    getList() {
      this.instance
        .post(`/app/appworktaskinfo/list`, null, {
          params: {
            ...this.page,
            ...this.search,
            taskRole: this.taskRole,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.page.total = res.data.total
            if(this.tableData.length) {
              this.tableData.map((item) => {
                if(item.createTime) {
                  item.createTime = item.createTime.substring(0, 10)
                }
                if(item.lastTime) {
                  item.lastTime = item.lastTime.substring(0, 10)
                }
              })
            }
          }
        })
    },
    toDetail(item) {
      this.$emit('change', {
        type: 'SonDetail',
        params: item
      })
    },
    toAdd() {
      this.$emit('change', {
        type: 'Add',
        params: {
          type: 'Add',
          taskRole: '1',
          id: '',
        }
      })
    },
    // changePage(){}

    reset() {
      Object.keys(this.search).forEach((e) => {
        this.search[e] = ''
      })
      this.search.startTime = null
      this.search.lastTime = null
      this.getList()
    },
  },
}
</script>

<style scoped lang="scss">
.ai-search {
  ::v-deep .dateRange {
    display: flex;
    .dateLabel {
      height: 32px;
      border: 1px solid #d0d4dc;
      line-height: 32px;
      padding: 0 8px;
      background: #f5f5f5;
      font-size: 14px;
    }
  }
}
</style>
