<template>
  <div>
    <page-view :title="false">
      <div slot="headerContent">
      </div>
      <div>
        <a-card class="datastatisticstop" :bordered="false">
          <data-statistics-top></data-statistics-top>
        </a-card>

        <a-card :bordered="false">
          <div class="taskDataCount">
            <div style="width: 400px">
              <a-input-search
                placeholder="请输入任务标题"
                @search="onSearch"
                enterButton></a-input-search>
            </div>
<!--            <div class="tdc_option">-->
<!--              <div class="tdc_option_item">-->
<!--                <span>任务分组 : </span>-->
<!--                <a-select defaultValue="lucy" style="width: 120px" @change="handleChange">-->
<!--                  <a-select-option value="jack">Jack</a-select-option>-->
<!--                  <a-select-option value="lucy">Lucy</a-select-option>-->
<!--                  <a-select-option value="disabled" disabled>Disabled</a-select-option>-->
<!--                  <a-select-option value="Yiminghe">yiminghe</a-select-option>-->
<!--                </a-select>-->
<!--              </div>-->
<!--              <div class="tdc_option_item">-->
<!--                <span>任务类型 : </span>-->
<!--                <a-select defaultValue="lucy" style="width: 120px" @change="handleChange">-->
<!--                  <a-select-option value="jack">Jack</a-select-option>-->
<!--                  <a-select-option value="lucy">Lucy</a-select-option>-->
<!--                  <a-select-option value="disabled" disabled>Disabled</a-select-option>-->
<!--                  <a-select-option value="Yiminghe">yiminghe</a-select-option>-->
<!--                </a-select>-->
<!--              </div>-->
<!--              <div class="tdc_option_item">-->
<!--                <span>选择日期 : </span>-->
<!--                <a-range-picker v-model="dateValue"/>-->
<!--              </div>-->
<!--            </div>-->
            <div class="tdc_table">
              <a-table :columns="columns" :dataSource="data" bordered>
                <template slot="operation" slot-scope="text, record">
                  <span @click="goDetail(record)">查看详情</span>
                </template>
              </a-table>
            </div>
          </div>
        </a-card>
        <a-drawer
          :title="currentRowData.workTitle"
          placement="right"
          :width="720"
          @close="onClose"
          :closable="false"
          :visible="visible"
          v-if="visible"
        >
          <div class="formItem">
            <span style="margin-right: 50px">工单编号</span>
            <span>{{DeatilData.workBase.workNo || '暂无数据'}}</span>
          </div>
          <div class="formItem">
            <span style="margin-right: 50px">工单状态</span>
            <span>{{getStateLabel(DeatilData.workBase.workStatus) || '暂无数据'}}</span>
          </div>
          <div v-for="(item) in DeatilData.workTemplateData" class="formItem">
            <span style="margin-right: 50px">{{item.fieldNm || '暂无数据'}}</span>
            <span>{{item.fieldValue || '暂无数据'}}</span>
          </div>
          <div style="display: flex" v-if="isHaveRecoed">
            <span>工单进度</span>
            <el-timeline style="margin-left: 50px;padding: 0">
              <el-timeline-item
                v-for="(activity, index) in DeatilData.workRecordsList"
                :key="index"
                size="large"
                :timestamp="activity.handleTime">
                <span>{{activity.hadlePerson}}</span>
                {{activity.handleContent}}
              </el-timeline-item>
            </el-timeline>
          </div>
          <div v-if="!isHaveRecoed">
            <span>无审批记录</span>
          </div>
        </a-drawer>
      </div>
    </page-view>
  </div>
</template>

<script>
  import { PageView } from '@/layouts';
  import dataStatisticsTop from './components/data-statistics-top';
  import { taskList } from '@/api/taskStatistics';

  const columns = [
    {
      title: '任务状态',
      dataIndex: 'workStatus',
      scopedSlots: { customRender: 'name' },
    },{
      title: '任务标题',
      dataIndex: 'workTitle',
      scopedSlots: { customRender: 'name' },
    }, {
      title: '任务描述',
      dataIndex: 'workContent',
    }, {
      title: '任务耗时',
      dataIndex: 'costTime',
    }, {
      title: '创建时间',
      dataIndex: 'startTime',
    }, {
      title: '创建人',
      dataIndex: 'createUser.name',
    }, {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' },
    }];

  const data = [];

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

  export default {
    name: "task-data-statistics",
    components: {
      PageView,
      dataStatisticsTop
    },
    data() {
      return {
        dateValue: [],
        data: [],
        columns,
        rowSelection,
        visible: false,
        currentRowData: {},
        DeatilData: {},
        isHaveRecoed: false
      }
    },
    methods: {
      getStateLabel(state) {
        // if(this.currentState != 2){
        //   state = this.currentState
        // }
        console.log(state);
        if (state === 0) {
          return '草稿';
        } else if (state === 1) {
          return '执行中 ';
        } else if (state === 2) {
          return '审批中';
        } else if (state === 3) {
          return '已完成';
        }
      },
      handleChange() {

      },
      getTableData() {
        taskList().then(res => {
          console.log(res);
          this.data = res.data;
        });
      },
      onSearch(value) {
        taskList({"searchCondition": value}).then(res => {
          console.log(res);
          this.data = res.data;
        });
      },
      getWorkInfo(workId) {
        this.$http({
          url: '/task/task-info/statisticsTaskContent',
          method: 'get',
          params: {
            workId: workId
          }
        }).then(res => {
          console.log(res);
          if (res.data.workRecordsList.length == 0) {
            this.isHaveRecoed = false
          } else {
            this.isHaveRecoed = true
          }
          this.DeatilData = res.data
          this.visible = true
        })
      },
      goDetail(val) {
        this.currentRowData = val
        console.log(val);
        this.getWorkInfo(val.workId)
      },
      onClose() {
        this.visible = false
      },
    },
    mounted() {
      this.getTableData()
    }
  }
</script>

<style lang="less" scoped>
  .taskDataCount {
    min-height: 100vh;
    background: #ffffff;

    .tdc_option {
      display: flex;
      margin-top: 30px;

      .tdc_option_item {
        margin-left: 30px;
      }
    }

    .tdc_table {
      margin-top: 30px;
    }
  }

  .formItem {
    margin-bottom: 20px;
  }

  .datastatisticstop {
    margin-bottom: 10px;
    /*height: 200px;*/
  }
</style>
