<template>
  <div class="question-wrap">
    <div class="question-top">
      <div class="question-info">
        <span>待分配问题数:{{ countFree }}</span>
        <span>待回答提问数:{{ countWait }}</span>
      </div>
      <div class="question-select">
        <el-select v-model="statusType" clearable placeholder="提问状态" style="width: 260px"
          @change="handleSelect('status')">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-cascader placeholder="回答者" v-model="answers" collapse-tags clearable style="width: 260px"
          :options="answerOptionsAll" :props="{ ...answerOptionsProp, multiple: true }"
          @change="handleSelect('answers')"></el-cascader>
      </div>
    </div>
    <div class="question-table">
      <el-table :data="tableData" border v-loading="tableLoading" :key="reflesh" @sort-change="sortChangeHandle">
        <el-table-column v-for="item in tableColumns" :key="item.label" :label="item.label" :prop="item.key"
          :min-width="item.minWidth" align="center" :sortable="item.key==='ClickNum' ? 'custom' : false"
          >
          <template slot-scope="{ row }">
            <!-- <div v-if="item.key === 'answer' && (row.ReplyStatus < 3 && !row.isSent || row.NeedRedistribute)">
              <el-cascader v-model="row.answer" :options="answerOptions" :props="answerOptionsProp"
                @change="handleAnswerChange(row)"></el-cascader>
            </div> -->
            <span v-if="item.key === 'answer'">
              {{ row.answerText }}
            </span>
            <span v-else-if="item.key === 'RealName'&&row.UserHasDetail" @click="userInfo(row)"
              style="cursor: pointer;color:rgb(64, 153, 239);">
              {{ row[item.key] }}
              {{ row.UserQaCount ? `(${row.UserQaCount})` : '' }}
            </span>
            <span v-else-if="item.key === 'RealName'&&!row.UserHasDetail">
              {{ row[item.key] }}
              {{ row.UserQaCount ? `(${row.UserQaCount})` : '' }}
            </span>
            <span v-else-if="item.key === 'ReplyStatus'">
              {{ questionStatusMap[row[item.key]] }}
            </span>
            <span v-else-if="item.key === 'ReplyTime'">
              {{ row.ReplyStatus === 3 ? row.ReplyTime : "" }}
            </span>
            <span v-else-if="item.key === 'ClickNum'">
              <span v-if="row.ClickNum > 0" @click="clicksEvent(row)" style="cursor: pointer;color:rgb(64, 153, 239);"> {{
                  row.ClickNum
              }}</span>
              <span v-else>{{ '--' }}</span>
            </span>
            <div style="display: flex; justify-content: center; cursor: pointer;color:rgb(64, 153, 239)"
              v-else-if="item.key === 'QuestionContent'" @click="showQuestionDetail(row)">
              {{ row[item.key] }}
              <span style="
                  margin-left: 5px;
                  min-width: 16px;
                  max-width:16px;
                  height: 16px;
                  align-self: center;
                " @click.stop="showEdit(row)" v-if="row.MsgSendStatus === 0 && row.ReplyStatus < 3">
                <img style="width: 100%" :src="require('@/assets/img/icons/editquestion.png')" alt="" />
              </span>
            </div>
            <span v-else>{{ row[item.key] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.ReplyStatus===4" style="color:#409EFF;display:inline-block;cursor: pointer" @click="stopReasonDialog=true,stopReason=row.StopReason">终止原因</span>
            <!-- <span v-if="row.ReplyStatus===2" style="color:#409EFF;display:inline-block;cursor: pointer" @click="handleShowmoveAnswerDialog(row)">转移并通知</span> -->
            <!-- <span v-if="row.ReplyStatus < 3 && !row.isSent" @click="sentMsg(row)" style="cursor: pointer" :style="{
              color: row.answer ? 'rgb(64, 153, 239)' : 'gray',
              cursor: row.answer ? 'pointer' : 'not-allowed',
            }">发送通知</span> -->
            <el-popover placement="top" width="160" v-model="row.deletePopVisible"
              :ref="`pop_${row.CommunityQuestionId}`">
              <p>该操作不可撤销,确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="row.deletePopVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="handleDeleteAuth(row)">确定</el-button>
              </div>
              <span style="cursor: pointer; color: #d1433a" slot="reference">删除</span>
            </el-popover>
            
          </template>
        </el-table-column>
        <div slot="empty" style="lineheight: 44px; margin: 60px 0; color: #999">
          <img src="~@/assets/img/cus_m/nodata.png" alt=""
            style="display: block; width: 160px; height: 128px; margin: auto" />
          <span>暂无数据</span>
        </div>
      </el-table>
      <el-pagination layout="total,prev,pager,next,jumper" background :current-page="page_no"
        @current-change="handleCurrentChange" :page-size="pageSize" :total="total"
        style="text-align: end; margin-top: 20px">
      </el-pagination>
    </div>
    <el-dialog v-if="isEditShow" :visible.sync="isEditShow" :close-on-click-modal="false" :modal-append-to-body="false"
      @close="isEditShow = false" width="889px" v-dialogDrag center>
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px">问题编辑</span>
      </div>
      <div class="dialog-container">
        <div class="input-item">
          <el-input type="textarea" :rows="12" placeholder="请输入提问内容" v-model="currentEdit.text" required resize="none">
          </el-input>
        </div>
        <div class="hint">
          <span>注:请把问题描述控制在{{maxNum}}个字以内</span>
          <span>超出字数:<span style="color: #c94040ff">{{
              currentEdit.text.length - maxNum > 0
                ? currentEdit.text.length - maxNum
                : 0
          }}</span>字</span>
        </div>
      </div>
      <div slot="footer" class="foot-container">
        <el-button type="primary" @click="handleEditQuestion">确 定</el-button>
        <el-button @click="isEditShow = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag :append-to-body="true" :visible.sync="userInfoDialog" width="500px" title="提问者详情" center>
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px">提问者详情</span>
      </div>
      <div>
        <div class="detail-wrap">
          <div class="main">
            <table class="table-wrap" style="border:none !important;">
              <tbody>
                <tr>
                  <td class="table-item" style="width:25%;text-align: right;">提问者内容：</td>
                  <td class="table-item" style="width: 75%; text-align:left;">{{userDetail.QuestionContent}}</td>
                </tr>
                <tr>
                  <td class="table-item" style="width:25%;text-align: right;">提问者姓名：</td>
                  <td class="table-item" style="width: 75%; text-align:left;">{{userDetail.RealName}}</td>
                </tr>
                <tr>
                  <td class="table-item" style="width:25%;text-align: right;">公司名称：</td>
                  <td class="table-item" style="width: 75%; text-align:left;">{{userDetail.CompanyName}}</td>
                </tr>
                <tr>
                  <td class="table-item" style="width:25%;text-align: right;">客户状态：</td>
                  <td class="table-item" style="width: 75%; text-align:left;">{{userDetail.CompanyStatus}}</td>
                </tr>
                <tr>
                  <td class="table-item" style="width:25%;text-align: right;">所属销售：</td>
                  <td class="table-item" style="width: 75%; text-align:left;">{{userDetail.SellerName}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div slot="footer" class="foot-container">
        <el-button type="primary" @click="userInfoDialog = false">知道了</el-button>
      </div>
    </el-dialog>

    <el-dialog v-dialogDrag :append-to-body="true" :visible.sync="clickNumDialog" width="840px" title="点击量详情" center>
      <div slot="title" style="display: flex; alignitems: center">
        <span style="fontsize: 16px">点击量详情</span>
      </div>
      <div>
        <div>点击量：{{clickNum}}</div>
        <div>提问内容：{{clickQuestionContent}}</div>
        <div>
          <el-table :data="clickLogsData" style="width: 100%; margin: 20px 0 30px" border>
            <el-table-column prop="RealName" label="用户姓名" align="center"> </el-table-column>
            <el-table-column prop="CompanyName" label="公司名称" align="center"> </el-table-column>
            <el-table-column prop="CompanyStatus" label="客户状态" align="center"> </el-table-column>
            <el-table-column prop="ClickNum" label="点击次数" align="center"> </el-table-column>
            <el-table-column prop="SourceAgent" label="点击来源" align="center">
             <template slot-scope="scope">
              <span v-if="scope.row.SourceAgent==1">小程序</span>
              <span v-else>pc</span>
             </template>
            </el-table-column>
            <el-table-column prop="LastCreateTime" label="最后一次点击时间" align="center" min-width="140"> </el-table-column>
          </el-table>
        </div>
         <!-- 分页 -->
         <div style="text-align: end;margin-bottom:24px;">
            <el-pagination small layout="prev,pager,next,jumper" :current-page="clickLogsCurrentIndex"
                @current-change="clickLogsPageChange" :page-size="clickLogsPageSize" :total="clickLogsTotal" class="pagination-wrap">
            </el-pagination>
         </div>
            
      </div>
    </el-dialog>
    <!-- 问答详情弹窗 -->
    <el-dialog v-dialogDrag :append-to-body="true" :visible.sync="questionInfoDialog" width="800px" title="提问详情" center>
      <div class="question-detail-wrap" v-if="questionInfo">
        <div class="left" >
          <div class="item">
            <span class="lable">提问人</span>
            <span>{{questionInfo.RealName}}</span>
          </div>
          <div class="item">
            <span class="lable">提问时间</span>
            <span>{{questionInfo.CreateTime}}</span>
          </div>
          <div class="item">
            <span class="lable">提问内容</span>
            <div style="padding:10px;background:#ededed">{{questionInfo.QuestionContent}}</div>
          </div>
        </div>
        <div class="right">
          <div style="margin-bottom:20px">问答流程</div>
          <el-timeline>
            <el-timeline-item 
              :timestamp="item.CreateTime" 
              placement="bottom" 
              color="#409EFF" 
              v-for="item in questionInfo.ProcessList" 
              :key="item.CreateTime"
            >
              <p>{{item.Remark}}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>
    <!-- 终止原因 -->
    <el-dialog v-dialogDrag :append-to-body="true" :visible.sync="stopReasonDialog" width="400px" title="终止原因" center>
      <div style="padding-bottom:30px">
        <p style="margin-bottom:20px">{{stopReason}}</p>
        <div style="text-align:center">
          <el-button type="primary" @click="stopReasonDialog=false">知道了</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 转移回答者弹窗 -->
    <el-dialog v-dialogDrag :append-to-body="true" :visible.sync="moveAnswerDialog" width="550px" title="问题转移并通知" center>
      <div>
        <div>
          <span>选择研究员</span>
          <el-cascader
            style="width:400px"
            v-model="moveAnswerId"
            :options="moveAnswerOpt"
          ></el-cascader>
        </div>
        <div style="text-align:center;margin:30px 0">
          <el-button type="primary" @click="handleConfirmTrans">确定</el-button>
          <el-button type="primary" plain @click="moveAnswerDialog=false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { departInterence, InteractionInterence } from "@/api/api.js";
export default {
  data() {
    return {
      statusType: "", //提问状态筛选框
      answers: [], //回答者筛选框
      ReplierIds: "",
      countFree: 0,
      countWait: 0,
      statusOptions: [],
      answerOptions: [],//不包含被禁用的研究员
      answerOptionsAll: [],//所有研究员
      answerOptionsProp: {
        value: "admin_id",
        label: "admin_name",
        children: "children",
      }, //回答者选择配置
      tableData: [],
      tableLoading: false,
      page_no: 1,
      pageSize: 10,
      total: 0,
      tableColumns: [
        {
          label: "提问内容",
          key: "QuestionContent",
          minWidth: 170,
        },
        {
          label: "提问人",
          key: "RealName",
        },
        {
          label: "提问时间",
          key: "CreateTime",
        },
        {
          label: "提问状态",
          key: "ReplyStatus",
        },
        {
          label: "回答者",
          key: "answer",
          minWidth: 150,
        },
        {
          label: "回答时间",
          key: "ReplyTime",
        },
        {
          label: "点击量",
          key: "ClickNum",
        },
      ],
      questionStatusMap: {
        // 1: "待分配",
        2: "待回答",
        3: "已回答",
        4: "已终止",
      },
      deletePopVisible: false,
      isEditShow: false,
      currentEdit: {
        text: "",
        id: 0,
      },
      reflesh: 0,
      userInfoDialog: false,
      clickNumDialog: false,
      clickLogsData: [],
      clickNum:0,
      clickQuestionContent:'',
      clickLogsTotal:0,
      clickLogsCurrentIndex:1,
      clickLogsPageSize:10,
      questionId:0,
      userDetail:{},
      SortParam:'',//点击量排序
      SortType:'',

      maxNum:28,//字数限制

      questionInfoDialog:false,
      questionInfo:null,

      stopReasonDialog:false,
      stopReason:'',

      moveAnswerDialog:false,
      moveQuestionId:0,
      moveAnswerOpt:[],
      moveAnswerId:[],
    };
  },
  methods: {
    //删除问题
    handleDeleteAuth(item) {
      InteractionInterence.deleteQuestion({
        QuestionId: item.CommunityQuestionId
      }).then(res => {
        if (res.Ret === 200) {
          this.$message.success('删除成功');
          this.getTableData();
        }
      })
    },
    handleSelect(type) {
      this.page_no = 1;
      if (type === "status") {
        this.getTableData();
      } else {
        let temp = [];
        this.answers.forEach((item) => {
          temp.push(item[item.length - 1]);
        });
        this.ReplierIds = _.uniq(temp).join(",");
        this.getTableData();
      }
    },
    /**
     * 获取级联选择器回显
     * @param {options}  options 树形数组格式(answerOptions)
     * @param {answerId} answerId 回答者的id,字段为admin_id
     * @param {keyWord} keyWord 返回项的key
     * @return [0,1,2] (keyWord=admin_id) 或 ['宏观组','利率债','xx'] (keyWord=admin_name)
     */
    getAnswer(options, answerId, keyWord = "admin_id") {
      const getAnswerOption = (list, value) => {
        for (let i in list) {
          if (list[i].admin_id == value) {
            return [list[i]];
          }
          if (list[i].children) {
            let node = getAnswerOption(list[i].children, value);
            if (node !== undefined) {
              return node.concat(list[i]);
            }
          }
        }
      };
      const answer = getAnswerOption(options, answerId);
      return answer.map((i) => i[keyWord]).reverse();
    },
    async getTableData() {
      this.tableLoading = true;
      const res = await InteractionInterence.getQuestionList({
        ReplyStatus: this.statusType,
        ReplierIds: this.ReplierIds,
        CurrentIndex: this.page_no,
        PageSize: this.pageSize,
        SortParam:this.SortParam,
        SortType:this.SortType
      });
      if (res.Ret === 200) {
        const { List, Paging, Count } = res.Data;
        this.tableData = List;
        this.tableData && this.processTableData();
        this.page_no = Paging.CurrentIndex;
        this.total = Paging.Totals;
        if (Count) {
          this.countFree = Count.free;
          this.countWait = Count.wait;
        }
      } else if (res.Ret === 403) {
        //无权查看
        this.tableData = []
      }
      this.tableLoading = false;
    },
    //处理table数据,方便answer的回显
    processTableData() {
      this.tableData.forEach((item) => {
        if (item.MsgSendStatus === 0) {
          item.isSent = false;
        } else {
          item.isSent = true;
        }
        //未回答且没发送通知的问题:回答者一栏显示级联选择器
        if (item.ReplierAdminId && !item.isSent || item.NeedRedistribute) {
          //item.answer = this.getAnswer(this.answerOptions, item.ReplierAdminId);
          item.answer = [item.ResearchGroupFirstId, item.ResearchGroupSecondId, item.ReplierAdminId]
        }
        //未分配的提问,回答者一栏显示级联选择器
        if (!item.ReplierAdminId) {
          item.answer = []
        }
        //已发送通知或已回答的问题:回答者一栏显示文字
        if (item.isSent && !item.NeedRedistribute || item.ReplyStatus === 3) {
          /* item.answerText = this.getAnswer(
            this.answerOptions,
            item.ReplierAdminId,
            "admin_name"
          ).join("/"); */
          item.answerText = item.ResearchGroupFirstName + '/' + item.ResearchGroupSecondName + '/' + item.ReplierRealName
        }
      });
    },
    //分配回答者
    async handleAnswerChange(item) {
      console.log("item", item);
      if (item.QuestionContent.length > this.maxNum) {
        this.$message.warning("字数超限，请修改问题后重试");
        this.tableData.map((i) => {
          if (item.CommunityQuestionId === i.CommunityQuestionId) {
            i.answer = [];
          }
        });
        this.reflesh++;
        return;
      }
      const AdminId = item.answer[item.answer.length - 1];
      const ResearchGroupFirstId = item.answer[0];
      const ResearchGroupSecondId = item.answer[1];
      const res = await InteractionInterence.distributeAnswer({
        QuestionId: item.CommunityQuestionId,
        AdminId,
        ResearchGroupFirstId,
        ResearchGroupSecondId,
      });
      if (res.Ret === 200) {
        if (res.Msg === '操作成功') {
          //回答者已关注公众号的情况
          this.$message.success("分配成功!");
        } else {
          //回答者未关注公众号的情况
          this.$message.error("该研究员未关注公众号，无法收到消息通知")
        }
      }
      this.getTableData();
    },
    //发送通知
    sentMsg(item) {
      if (!item.answer) return;
      InteractionInterence.sendMsg({
        QuestionId: item.CommunityQuestionId,
      }).then((res) => {
        if (res.Ret === 200) {
          this.$message.success("发送通知成功");
          this.getTableData();
        }
      });
    },
    //获取answerOptions
    async getResearchGroupList(include = 0) {
      /* const res = await departInterence.getResearchGroupList({
        Include: include
      }); */
      const res = await departInterence.getTagTree({
        IncludeDisableMember: include,
        HasResearcher:1
      });
      if (res.Ret === 200) {
        //每一级的value:admin_id,label:admin_name固定,方便级联选择器回显;
        //第二级的researcher_list复制一份为children
        const { Data } = res;
        const temp = _.cloneDeep(Data);
        temp.forEach((item) => {
          item.admin_id = item.tag_id;
          item.admin_name =  item.tag_name;
          if (item.tags) {
            item.children = _.cloneDeep(item.tags)
            item.children.map((i) => {
              i.admin_id = i.tag_id;
              i.admin_name = i.tag_name;
              i.children = _.cloneDeep(i.researcher_list);
            });
          }
        });
        if (include === 1) {
          this.answerOptionsAll = temp;
        } else {
          this.answerOptions = temp;
        }

      }
    },
    //获取statusOptions
    getStatusOptions() {
      for (let i in this.questionStatusMap) {
        this.statusOptions.push({ value: i, label: this.questionStatusMap[i] });
      }
    },
    //显示编辑问题描述弹窗
    showEdit(item) {
      this.isEditShow = true;
      this.currentEdit = {
        id: item.CommunityQuestionId,
        text: item.QuestionContent,
      };
    },
    //提交编辑问题
    handleEditQuestion() {
      const { id, text } = this.currentEdit;
      if (text.length > this.maxNum) {
        this.$message.warning("字数超出最长限制");
        return;
      }
      InteractionInterence.editQuestion({
        QuestionId: id,
        QuestionContent: text,
      }).then((res) => {
        if (res.Ret === 200) {
          this.$message.success("编辑成功");
          this.isEditShow = false;
          this.getTableData();
        }
      });
    },
    //页码改变
    handleCurrentChange(page) {
      this.page_no = page;
      this.getTableData();
    },
    //提问者详情
    userInfo(row) {
      InteractionInterence.questionUser({
        QuestionId: row.CommunityQuestionId,
      }).then(res => {
        if (res.Ret === 200) {
          this.userDetail=res.Data;
          this.userInfoDialog = true;
        } else if (res.Ret === 403) {
          //无权查看
          this.userDetail={}
          this.userInfoDialog = false;
        }
      });
    },
    clicksEvent(row) {
      this.questionId=row.CommunityQuestionId
      this.clickLogsData = [];
      this.clickNum=row.ClickNum;
      this.clickQuestionContent=row.QuestionContent;
      this.clickNumDialog = true;
      this.getClickLogsData()
    },

    getClickLogsData(){
       InteractionInterence.questionClickLogs({
        QuestionId: this.questionId,
        CurrentIndex: this.clickLogsCurrentIndex,
        PageSize: this.clickLogsPageSize,
      }).then(res => {
        if (res.Ret === 200) {
          this.clickLogsData = res.Data.List;
          this.clickLogsCurrentIndex = res.Data.Paging.CurrentIndex;
          this.clickLogsTotal = res.Data.Paging.Totals;
        } else if (res.Ret === 403) {
          //无权查看
          this.clickLogsData = []
        }
      });
    },

    clickLogsPageChange(currentIndex){
      this.clickLogsCurrentIndex = currentIndex;
      this.getClickLogsData();
    },
    //table排序变化
    sortChangeHandle({ prop,order }){
      console.log(prop,order)
      //this.page_no = 1;
      this.SortType = order==='ascending'?'asc':order==='descending'?'desc':''
      if(this.SortType.length){
        this.SortParam=prop
      }else{
        this.SortParam=''
      }
      this.getTableData()
    },

    async showQuestionDetail(e){
      const res=await InteractionInterence.questionDetail({QuestionId:e.CommunityQuestionId})
      if(res.Ret===200){
        this.questionInfo=res.Data
        this.questionInfoDialog=true
      }
    },

    async handleShowmoveAnswerDialog(e){
      const res = await departInterence.getTagTree({
        IncludeDisableMember: 0,
        HasResearcher:1,
        CommunityQuestionId:e.CommunityQuestionId
      });
      if(res.Ret===200){
        const arr=res.Data||[]
        this.moveAnswerOpt=arr.map(item=>{
          let obj={
            ...item,
            label:item.tag_name,
            value:item.tag_id,
            children:[]
          }
          const arr1=item.tags||[]
          obj.children=arr1.map(item2=>{
            let obj2={
              ...item2,
              label:item2.tag_name,
              value:item2.tag_id,
              children:[]
            }
            const arr2=item2.researcher_list||[]
            obj2.children=arr2.map(item3=>{
              return {
                ...item3,
                label:item3.admin_name,
                value:item3.admin_id,
                disabled:!item3.allow_select
              }
            })
            return obj2
          })
          return obj
        })
        this.moveQuestionId=e.CommunityQuestionId
        this.moveAnswerDialog=true
      }
    },
    // 确认转移
    async handleConfirmTrans(){
      const res=await InteractionInterence.questionTransfer({
        QuestionId: this.moveQuestionId,
        AdminId: this.moveAnswerId[2],
        ResearchGroupFirstId: this.moveAnswerId[0],
        ResearchGroupSecondId: this.moveAnswerId[1]
      })
      if(res.Ret==200){
        this.$message.success('转移成功')
        this.moveAnswerId=[]
        this.moveAnswerDialog=false
        this.getTableData();
      }
    }
  },
  async mounted() {
    await this.getResearchGroupList(1);
    // await this.getResearchGroupList();
    this.getStatusOptions();
    this.getTableData();
  },
};
</script>

<style scoped lang="scss">
.question-wrap {
  /*  height: calc(100vh - 120px); */
  background-color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 30px 20px;
  box-sizing: border-box;

  .question-top {
    display: flex;
    justify-content: space-between;
  }

  .question-table {
    margin-top: 20px;
  }

  .dialog-container {
    .hint {
      display: flex;
      justify-content: space-between;

      span {
        color: #999999ff;
      }
    }
  }
}

.detail-wrap {
  //max-height: 70vh;
  //overflow-y: scroll;
  display: flex;
  justify-content: space-between;

  .main {
    width: 100%;

    .table-wrap {
      border: 0;
      width: 100%;
      // text-align: center;
      border-top: 1px solid #dcdfe6;
      border-left: 1px solid #dcdfe6;

      .table-item {
        border: none !important;
        padding: 14px 10px;
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        position: relative;
      }
    }
  }
}

.question-detail-wrap{
  display: flex;
  padding-bottom: 30px;
  .left{
    flex:1;
    .item{
      display: flex;
      margin-bottom: 20px;
      .lable{
        width: 80px;
      }
    }
  }
  .right{
    flex: 1;
    border-left: 1px solid #ededed;
    height: 400px;
    overflow-y: auto;
    padding-left: 20px;
  }
}
</style>
