<template>
    <div>
      <el-dialog title="任务列表" :visible.sync="showTask" width="1000px" >
        <el-table
              :row-key="taskList.id"
              :data="taskList"
              v-loading="loading"
              max-height="330"
              style="height: 600px;"
            >
              <el-table-column type="expand">
                <template style="width:80%;" slot-scope="scope">
                  <div>
                    <el-table border
                        :data="scope.row.children"
                        row-key="id"
                        ref="multiTable">
                      <el-table-column label="协同人" align="center" prop="collaborator"> </el-table-column>
                      <el-table-column label="抄送人" align="center" prop="persons">
                        <template slot-scope="scope">
                            <span v-for="item in scope.row.persons">{{item}}&nbsp;&nbsp;&nbsp;</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="发送人" align="center" prop="sender"> </el-table-column>
                      <el-table-column label="发送时间" align="center" prop="sendTime"> </el-table-column>
                      <el-table-column label="状态" align="center" prop="state">
                        <template slot-scope="scope">
                           <span>{{state[scope.row.state]}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="完成时间" align="center" prop="completionTime"> </el-table-column>
                      <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                          <el-button type="primary" @click="check(scope.row.id)">查看</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="任务名称" align="left">
                <template slot-scope="scope">
                  <span>{{scope.row.name}}</span>
                </template>
              </el-table-column>
        </el-table>
      </el-dialog>
    </div>
</template>

<script>
export default {
  data() {
    return {
      taskList: [
        {
          id: 1,
          name: '任务一',
          children: [
            {
              collaborator: '沈永艺',
              persons: ['甲', '乙'],
              sender: '朱鎏',
              sendTime: '2022-10-12 09:38',
              state: 0,
              completionTime: ''
            },
            {
              collaborator: '李仁杰',
              sender: '朱鎏',
              sendTime: '2022-10-12 09:38',
              state: 1,
              completionTime: '2022-10-12 10:16'
            },
          ]
        }
      ],
      state: ['协同中', '完成'],
      showTask: false,
      loading:false
    }
  },
  methods: {
    check(id) {
      const router = this.$router.resolve({
        path: '/chooseTask',

      })
      window.open(router.href, '_blank');
    }
  },
}
</script>