<template>
  <div class="app-container calendar-list-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入帖子Id"
        v-model="listQuery.postId"></el-input>
      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入帖子标题"
        v-model="listQuery.title"></el-input>
      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入姓名"
        v-model="listQuery.userName"></el-input>
      <el-select v-model="listQuery.status" clearable placeholder="审批状态" class="filter-item" style="width: 200px">
        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
      <!-- <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="completeAll">批量审批</el-button> -->
    </div>

    <!-- 查询结果 -->
    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
      element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <!-- <el-table-column type="selection" width="55px"> </el-table-column> -->
      <el-table-column align="center" min-width="100px" label="帖子Id" prop="postId">
      </el-table-column>
      <el-table-column align="center" min-width="200px" label="部门" prop="deptName">
      </el-table-column>
      <el-table-column align="center" min-width="100px" label="姓名" prop="userName">
      </el-table-column>
      <el-table-column align="center" min-width="200px" label="帖子标题" prop="title">
      </el-table-column>
      <el-table-column align="center" min-width="80px" label="积分" prop="integral">
            </el-table-column>
      <el-table-column align="center" min-width="150px" label="回复时间" prop="createTime">
      </el-table-column>
      <el-table-column align="center" min-width="100px" label="审批状态" prop="statusName">
      </el-table-column>
      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleView(scope.row,'view')">查看</el-button>
          <el-button v-if="scope.row.status==1" type="success" size="small" @click="handleView(scope.row,'complete')">处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
      <div class="dialog-body">
        <div class="quesList">
          <div class="listItem" v-for="(item,index) in data" :key="index">
            <div v-if="item.type=='SCQ'">
              <div class="itemTitle">{{ index + 1 }}. {{ item.description }}<el-tag class="elTag" size="small" type="danger">单选</el-tag></div>
              <el-radio-group v-model="item.comment" class="flex-column">
                <el-radio class="myRadio" v-for="(childItem,childIndex) in item.options" :key="childIndex" :label="childItem.id" disabled>{{ childItem.name }}</el-radio>
              </el-radio-group>
            </div>

            <div v-if="item.type=='MCQ'">
              <div class="itemTitle">{{ index + 1 }}. {{ item.description }}<el-tag class="elTag" size="small" type="danger">多选</el-tag></div>
              <el-checkbox-group v-model="item.comment" class="flex-column">
                <el-checkbox class="myRadio" v-for="(childItem,childIndex) in item.options" :key="childIndex" :label="childItem.id" disabled>{{ childItem.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-if="item.type=='SAQ'">
              <div class="itemTitle">{{ index + 1 }}. {{ item.description }}<el-tag class="elTag" size="small" type="danger">问答</el-tag></div>
              <div class="myText">{{ item.comment }}</div>
              <!-- <el-input disabled type="textarea" :rows="6" maxlength="200" show-word-limit placeholder="请输入内容" v-model="item.comment"></el-input> -->
            </div>
          </div>
          <div v-if="dialogStatus=='complete'" class="listItem">
              <div class="itemTitle">审批意见</div>
              <el-input type="textarea" :rows="6" maxlength="200" show-word-limit placeholder="请输入审批意见" v-model="comment"></el-input>
          </div>
        </div>
      </div>
      <div v-if="dialogStatus=='complete'" slot="footer" class="dialog-footer">
                <el-button type="primary" @click="complete(true)">同意</el-button>
                <el-button type="danger" @click="complete(false)">驳回</el-button>
            </div>
    </el-dialog>

  </div>
</template>
  
<style>
.listItem{
  margin-bottom: 30px;
}
.itemTitle {
    margin-bottom: 10px;
    font-weight: 700;
}
.elTag{
    margin-left: 5px;
}
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 200px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
</style>
  
<script>
import { approvalList,getDetailInfo,complete } from "@/api/postManage";
import waves from "@/directive/waves"; // 水波纹指令
import Tinymce from '@/components/Tinymce'

export default {
  components: { Tinymce },
  directives: { waves },
  data() {
    return {
      comment:'',
      data: [
            {
              "id": 1,
              "postId": 1,
              "description": "最帅的人，请选择以下选项",
              "type": "SCQ",
              "createTime": "2023-10-31 16:35:07",
              "modifyTime": "2023-10-31 16:35:07",
              "options": [
                {
                  "id": 1,
                  "postId": 1,
                  "questionId": 1,
                  "name": "金城武",
                  "num": 0
                },
                {
                  "id": 2,
                  "postId": 1,
                  "questionId": 1,
                  "name": "刘德华",
                  "num": 0
                },
                {
                  "id": 3,
                  "postId": 1,
                  "questionId": 1,
                  "name": "张三",
                  "num": 0
                }
              ],
              "comment": 1
            },
            {
              "id": 1,
              "postId": 1,
              "description": "帅的人，请选择以下选项",
              "type": "MCQ",
              "createTime": "2023-10-31 16:35:07",
              "modifyTime": "2023-10-31 16:35:07",
              "options": [
                {
                  "id": 1,
                  "postId": 1,
                  "questionId": 1,
                  "name": "金城武",
                  "num": 0
                },
                {
                  "id": 2,
                  "postId": 1,
                  "questionId": 1,
                  "name": "刘德华",
                  "num": 0
                },
                {
                  "id": 3,
                  "postId": 1,
                  "questionId": 1,
                  "name": "张三",
                  "num": 0
                }
              ],
              "comment": [1,2],
            },
            {
              "id": 2,
              "postId": 1,
              "description": "请问今年是什么年",
              "type": "SAQ",
              "createTime": "2023-11-02 14:34:03",
              "modifyTime": "2023-11-02 14:34:03",
              "options": [],
              "comment": "兔年"
            }
          ],
      typeList: [
        {
          type: 1,
          name: "待审批",
        },
        {
          type: 2,
          name: "作废",
        },
        {
          type: 3,
          name: "通过",
        },
      ],
      list: [
      ],
      delarr: [],
      multipleSelection: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        postId: '',
        title: '',
        userName: '',
        status: '',
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        complete: "审批",
        view: "详情",
      },
      
     
    }
  },
  created() {
    this.getList();
  },
  methods: {
    checked(val){
            if(val.flag == false){
                if(!val.comment){
                    this.$alert("请输入审批内容", "提示", {
                        confirmButtonText: "确定",
                    });
                    return false;
                }
            }
            return true;
        },
    complete(flag) {
            const parms = {
                commentId:this.commentId,
                comment: this.comment,
                flag:flag,
            }
            const isChecked = this.checked(parms);
            if(isChecked){
                this.dialogFormVisible = false;
                complete(parms).then((response) => {
                    this.$notify({
                        title: "成功",
                        message: "操作成功",
                        type: "success",
                        duration: 2000,
                    });
                    this.dialogVisible = false;
                    this.getList();
                })
                .catch(() => { });
            }
            
        },
    getList() {
      this.listLoading = true
      approvalList(this.listQuery).then(response => {
        this.list = response.data.data.items
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleView(row,val){
      this.postId = row.postId;
      this.commentId = row.id;
      let loginId = row.loginId;
      getDetailInfo({postId:row.postId,userId:loginId}).then(response => {
        this.data = response.data.data.data;
        this.data.forEach(item => {
          if (item.type == "MCQ") {
            item.comment = item.comment.split(',');
          }
        });
        this.dialogStatus = val;
        this.dialogFormVisible = true;
      }).catch(() => {})
    },
    completeAll() {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const length = this.multipleSelection.length;

          if (length > 0) {
            for (let i = 0; i < length; i++) {
              this.delarr.push(this.multipleSelection[i].postId);
            }
            const postIds = this.delarr.join(",");
            deleteitem({ postIds: postIds })
              .then(() => {
                this.$notify({
                  title: "成功",
                  message: "删除成功",
                  type: "success",
                  duration: 2000,
                });
                this.getList();
              })
              .catch(() => { });
          } else {
            this.$notify({
              title: "警告提示",
              message: "请选择要删除的信息！",
              type: "warning",
            });
          }
        })
        .catch(() => { });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  }
}
</script>
<style>
.myText {
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    color: #606266;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.myRadio{
    display: flex;
    justify-content: center;
    align-items: center;
    white-space:normal !important;
    margin: 10px !important;
}
.flex-column{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}
.ad-avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.ad-avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.ad-avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.ad-avatar {
  display: block;
}
</style>
  