
<script lang="ts">
export default {
  name: 'interaction' // 互动管理
};
</script>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import Page from '@/components/Pagination/page.vue';
import {queryAppQuestionAnswerPage,updateAppQuestionAnswer} from '@/api/appmanage'
import { ElMessage} from "element-plus";
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
const searchval = ref('')
const dialogVisible = ref(false)
const chooseinfo:any = ref({})
const textarea = ref('')
const contentdata:any = ref([])
const contentdatas:any = ref([])
const isSwitch = ref(false)
  onMounted(() => {
    getData();
    getunData()
  });
//搜索
function getData(){
  const params:any = {
    current: queryInfo.value.current,
    size:queryInfo.value.size,
    status:'02',
    name:searchval.value
  }
  if(userStore.institutionId !=null&&userStore.institutionId !=''){
    params.institutionId  = userStore.institutionId
  }
  queryAppQuestionAnswerPage(params).then((res:any) => {
    contentdata.value = res.data.records
    queryInfo.value.total = res.data.total
  })
}
function getunData(){
  const params:any = {
    current: queryInfo.value.current,
    size:9999,
    status:'01',
  }
  if(userStore.institutionId !=null&&userStore.institutionId !=''){
    params.institutionId  = userStore.institutionId
  }
  queryAppQuestionAnswerPage(params).then((res:any) => {
    contentdatas.value = res.data.records
    queryInfo.value.total = res.data.total
  })
}
//点击回答按钮
function answerclick(val:any){
  isSwitch.value = false
  chooseinfo.value = val
  dialogVisible.value = true
}
function handleClose(){
  dialogVisible.value = false
}
//确认按钮
function answersubmit(){
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  const params = chooseinfo.value
  params.answer = textarea.value
  params.questionStatus = '02'
  updateAppQuestionAnswer(params).then((res:any) => {
    ElMessage({
        message: "回答成功",
        type: "success",
      });
      getData()
      getunData()
      dialogVisible.value = false
      isSwitch.value = false
  })
}
function dateFormat(row: any) { // 时间方法
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
</script>
<template>
  <div class="interaction-box">
    <div class="interaction-box-left">
        <div class="box-left-top">
            <el-input v-model="searchval" placeholder="请输入关键字" style="width:240px" clearable />
            <el-button type="primary" class="ml-[10px]" @click="getData">搜索</el-button>
        </div>
        <div class="box-left-bottom">
            <div class="problem-box" v-for="(item,index) in contentdata"  :key="index">
              <div class="problem-text">{{ item.question }}</div>
              <div class="answer-text">{{ item.answer }}</div>
              <div class="flex">
                <div class="tel-text">{{ item.mobile }}</div>
                <div class="time-text">{{ dateFormat(item.answer_time) }}</div>
              </div>
            </div>
        </div>
        <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
          @pagination="getData" />
    </div>
    <div class="interaction-box-right">
        <div class="box-right-top">
            <div class="unproblem-title">未解决问题</div>
            <div class="unproblem-line"></div>
        </div>
        <div class="box-right-bottom">
            <div class="problem-box mt-[18px]" v-for="(items,indexs) in contentdatas"  :key="indexs">
              <div class="problem-text">{{ items.question }}</div>
              <div class="flex mt-[5px] items-center justify-between">
                <div class="flex">
                   <div class="tel-text">{{ items.mobile }}</div>
                   <div class="time-text">{{ dateFormat(items.question_time) }}</div>
                </div>
                <div>
                    <div class="answer-button" @click="answerclick(items)">回答</div>
                </div>
              </div>
            </div>
        </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" :close-on-click-modal="false" title="回答" :before-close="handleClose" width="40%" draggable append-to-body>
    <div>
      <div class="dialog-title">{{chooseinfo.question}}</div>
      <el-input  v-model="textarea" :autosize="{ minRows: 18 }" type="textarea" class="mb-[20px]"/>
    </div>
    <span class="dialog-footer flex justify-end">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="answersubmit">确定</el-button>
    </span>
</el-dialog>
</template>
<style scoped  lang="scss">
.interaction-box{
    width: 100%;
    display: flex;
    height: calc(100vh - 130px);
    .interaction-box-left{
        width: 70%;
        height: 100%;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(219, 225, 236, 0.498039215686275);
        padding: 20px;
        .box-left-top{
         height: 50px;
        }
        .box-left-bottom{
          height: calc(100vh - 270px);
          overflow: auto;
        }
    }
    .interaction-box-right{
        width: 30%; 
        height: 100%;
        margin-left: 15px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(219, 225, 236, 0.498039215686275);
        padding: 20px;
        .box-right-top{
            border-bottom: 1px solid #ececec;
            position: relative;
          .unproblem-title{
            font-weight: 700;
            font-style: normal;
            font-size: 16px;
            color: #1B1B1B;
            padding-bottom: 13px;
          }
          .unproblem-line{
            height: 3px;
            width: 84px;
            background: #4099ff;
            position: absolute;
            bottom:-2px;
          }
        }
        .box-right-bottom{
            height: calc(100vh - 205px);
            overflow: auto;
        }
    }
}
.problem-text{
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #363636;
    line-height: 24px;
    padding-bottom: 10px;
    background: url('../../assets/appmanage/Q.png') no-repeat;
    padding-left: 30px;
    background-position: 2px 4px;
    min-height: 20px;
    }
.answer-text{
    font-style: normal;
    font-size: 14px;
    color: #363636;
    line-height: 24px;
    padding-bottom: 10px;
    background: url('../../assets/appmanage/A.png') no-repeat;
    padding-left: 30px;
    background-position: 2px 2px; 
    min-height: 30px;
}
.tel-text{
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #949494;
    background: url('../../assets/appmanage/tel.png') no-repeat;
    padding-left: 25px;
    background-position: 2px 3px;
}
.time-text{
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #949494;
    background: url('../../assets/appmanage/time.png') no-repeat;
    padding-left: 25px;
    background-position: 2px 3px;
     margin-left: 35px;
 }
    .problem-box{
    padding-bottom: 15px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 20px;
    }
    .answer-button{
        width: 50px;
        height: 30px;
        line-height: 30px;
        background: inherit;
        background-color: rgba(255, 153, 0, 1);
        color: #fff;
        border-radius: 5px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
    }
    .dialog-title{
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #363636;
        line-height: 24px;
        background: url('../../assets/appmanage/Q.png') no-repeat;
        padding-left: 30px;
        background-position: 2px 4px;
        margin-bottom: 30px;
    }
</style>
