<template>
  <div class="mod-config">
    <el-row>
      <el-col :span="24">
        <el-button @click="getDataList()" type="primary">查询</el-button>
        <download-excel
          :fields="fields()"
          type="xls"
          :name="exportName"
          :fetch="createExportData"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ '导出' }}
        </download-excel>
        <el-button  @click="addOrUpdateHandle()" type="primary">发起任务
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" label-position="top" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-row>
            <el-col :span="24">
              <el-form-item label="责任部门">
                <el-input style="width: 120px" v-model="dataForm.department" clearable></el-input>
              </el-form-item>
              <el-form-item label="责任人">
                <el-input style="width: 120px" v-model="dataForm.responsiblePerson" clearable></el-input>
              </el-form-item>
              <el-form-item label="最终状态">
                <el-select v-model="dataForm.finalStatus" style="width: 120px">
                  <el-option label="未完成" value="未完成"></el-option>
                  <el-option label="已完成" value="已完成"></el-option>
                  <el-option label="全部" value=""></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发起日期">
                <el-date-picker style="width: 120px" v-model="dataForm.startDate"
                                value-format='yyyy-MM-dd 00:00:00'
                                format='yyyy-MM-dd'
                ></el-date-picker>
                -
                <el-date-picker style="width: 120px" v-model="dataForm.endDate"
                                value-format='yyyy-MM-dd 23:59:59'
                                format='yyyy-MM-dd'
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="margin-top: -5px" :span="24">
              <el-form-item label="客户">
                <el-input style="width: 120px" v-model="dataForm.customer" clearable></el-input>
              </el-form-item>
              <el-form-item label="项目">
                <el-input style="width: 120px" v-model="dataForm.project" clearable></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="dataForm.status" style="width: 120px">
                  <el-option label="未受理" value="未受理"></el-option>
                  <el-option label="已受理" value="已受理"></el-option>
                  <el-option label="全部" value=""></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="要求完成日期">
                <el-date-picker style="width: 120px" v-model="dataForm.finishStartDate"
                                value-format='yyyy-MM-dd 00:00:00'
                                format='yyyy-MM-dd'
                ></el-date-picker>
                -
                <el-date-picker style="width: 120px" v-model="dataForm.finishEndDate"
                                value-format='yyyy-MM-dd 23:59:59'
                                format='yyyy-MM-dd'
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="dataList"
          border
          :height="height"
          v-loading="dataListLoading"
          :row-class-name="tableRowClassName"
          @selection-change="selectionChangeHandle"
          highlight-current-row
          style="width: 100%;">
          <el-table-column
            v-for="(item,index) in columnList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="'center'"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
              <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                 style="width: 100px; height: 80px"/></span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="300"
            label="操作">
            <template slot-scope="scope">
              <el-link type="text" size="small" @click="addOrUpdateHandle(scope.row.taskId)">修改 |</el-link>
              <el-link type="text" size="small" @click="updateStatusDialog(scope.row)">更改最终状态 |</el-link>
              <el-link type="text" size="small" @click="chatHistoryDialog(scope.row)">沟通 |</el-link>
              <el-link type="text" size="small" @click="annex(scope.row)">附件 |</el-link>
<!--              <el-link type="text" size="small" @click="annex(scope.row.id)"> 沟通附件</el-link>-->
              <el-link  type="text" size="small"
                       @click="deleteHandle(scope.row.id)">删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog
      v-drag
      :title="'更改状态'"
      :close-on-click-modal="false"
      width="139px"
      :visible.sync="statusVisible">
      <el-form :model="dataForm" :inline="true" label-position="top"
               label-width="80px">
        <el-form-item label="状态">
          <el-select v-model="selectRow.finalStatus" style="width: 120px">
            <el-option label="未完成" value="未完成"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateStatus()">确定</el-button>
        <el-button type="primary" @click="statusVisible = false">取消</el-button>
    </span>
    </el-dialog>
    <!-- 沟通记录 -->
    <chat-history v-if="chatHistoryVisible" ref="chatHistory" ></chat-history>
    <!-- 文件列表 -->
    <task-file-list v-if="taskFileVisible" ref="taskFileList"></task-file-list>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>

  import ChatHistory from './chat-history.vue'
  import {getTaskDetailList,updateTaskDetail} from '@/api/taskmanage/tasklist.js'
  import TaskFileList from './task-file-upload-list.vue'
  import AddOrUpdate from "./tasklist-add-or-update";

  export default {
    data() {
      return {
        height: 200,
        dataForm: {
          site: this.$store.state.user.site,
          customer: '',
          taskHeader: '',
          project: '',
          taskDescription: '',
          taskInitiator: this.$store.state.user.name,
          finalStatus: '',
          department: '',
          responsiblePerson: '',
          startDate: '',
          endDate: '',
          finishStartDate: '',
          finishEndDate: '',
          status: '',
        },
        // 展示列集
        columnList: [
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "taskStartDate",
            columnLabel: "发起日期",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "taskInitiator",
            columnLabel: "任务发起人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "customer",
            columnLabel: "客户",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "project",
            columnLabel: "项目",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "taskHeader",
            columnLabel: "任务主题",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },

          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "taskDescription",
            columnLabel: "任务描述",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "department",
            columnLabel: "责任部门",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "responsiblePerson",
            columnLabel: "责任人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "requiredCompletionDate",
            columnLabel: "要求完成日期",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "status",
            columnLabel: "状态",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "finalStatus",
            columnLabel: "最终状态",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "createdBy",
            columnLabel: "创建人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "createdDate",
            columnLabel: "创建时间",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 140,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "updatedBy",
            columnLabel: "修改人",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: null,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
          {
            tableId: "ProjectInfo",
            tableName: this.$route.meta.title,
            columnProp: "updatedDate",
            columnLabel: "修改时间",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            columnWidth: 140,
            format: null,
            functionId: this.$route.meta.menuId,
            sortLv: 0,
            status: true,
            fixed: '',
            serialNumber: null,
            columnType: null,
            align: null
          },
        ],
        dataList: [],
        selectRow: {
          id: 0,
          finalStatus: '',
        },
        dataListLoading: false,
        dataListSelections: [],
        chatHistoryVisible: false,
        statusVisible: false,
        taskFileVisible: false,
        addOrUpdateVisible: false,
        exportName: this.$route.meta.title + this.dayjs().format('YYYYMMDDHHmmss')
      }
    },
    components: {
      ChatHistory,
      TaskFileList,
      AddOrUpdate,
    },
    activated() {
      // this.getDataList()
    },
    mounted() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 200;
      })
    },
    methods: {
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        getTaskDetailList(this.dataForm).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      // 更改状态模态框
      updateStatusDialog(row) {
        this.selectRow.finalStatus = row.finalStatus
        this.selectRow.id = row.id
        this.statusVisible = true;
      },
      // 更改状态提交
      updateStatus() {
        updateTaskDetail(this.selectRow).then(({data}) =>{
          if (data && data.code == 0 ){
            this.statusVisible = false
            this.$message.success(data.msg)
            this.getDataList()
          }else {
            this.$message.warning(data.msg)
          }
        })
      },
      // 沟通记录
      chatHistoryDialog(id){
        this.chatHistoryVisible = true
        this.$nextTick(() => {
          this.$refs.chatHistory.init(id)
        })
      },
      // 附件
      annex(row) {
        this.taskFileVisible = true
        let dto = {
          fileTypeCode: 'TASK',
          orderRef3:row.taskId,
          orderRef2:row.id
        }
        this.$nextTick(() => {
          this.$refs.taskFileList.init(dto)
        })
      },
      // 删除
      deleteHandle(id) {
        var ids = id
        this.$confirm(`确定进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/taskmanage/taskDetail/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message.success('操作成功')
              this.getDataList()
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (row.chatLastType == '有新回复'&&row.finalStatus=='未完成') {
          return 'newChat'
        }
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 导出
      fields() {
        let json = "{"
        this.columnList.forEach((item, index) => {
          if (index == this.columnList.length - 1) {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
          } else {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
          }
        })
        json += "}"
        let s = eval("(" + json + ")")
        return s
      },
      createExportData() {
        // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
        return this.dataList;
      },
    }
  }
</script>
<style>
  .mod-config .newChat {
    background-color: #00d9ff;
  }
</style>
