<template>
  <div class="app-container">
    <van-nav-bar
      title="投诉回复"
      fixed
      placeholder
      left-arrow
      @click-left="goUserIndex()"
    />
    <van-tabs v-model="active" animated sticky>
      <van-tab title="全部">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getNewList"
        >
          <div class="tabsBox" v-for="(item,index) in schemeList" :key="index">
            <van-cell :title="item.name" :label="item.reply ? '已回复 · ' + item.replyTime:'待回复 '" center>
              <template #default>
                <p style="color: #1D6FE9;"><van-icon name="phone" style="top: 2px" />{{item.phone}}</p>
              </template>
            </van-cell>
            <van-row>
              <van-col :span="5">类型：</van-col>
              <van-col :span="19">{{item.communicateType}}</van-col>
            </van-row>
            <van-row>
              <van-col :span="5">标题：</van-col>
              <van-col :span="19">{{item.title}}</van-col>
            </van-row>
            <van-row>
              <van-col :span="5">内容：</van-col>
              <van-col :span="19">{{item.content}}</van-col>
            </van-row>
            <van-row v-if="item.reply">
              <van-col :span="24" style="border-top: 1px solid #eee"></van-col>
            </van-row>
            <van-row v-if="item.reply">
              <van-col :span="5">回复：</van-col>
              <van-col :span="19">{{item.reply}}</van-col>
            </van-row>
            <van-row v-if="item.reply">
              <van-col :span="5">回复人：</van-col>
              <van-col :span="19">{{item.replyName}}</van-col>
            </van-row>
            <van-row v-if="!item.reply">
              <van-col :span="12"></van-col>
              <van-col :span="12" align="right"><van-button icon="edit" type="danger" class="answerBtn" :to="{name:'reply',query:{id:item.id}}">回复</van-button></van-col>
            </van-row>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="未回复">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getNewList"
        >
          <div class="tabsBox" v-for="(item,index) in schemeList" v-if="!item.reply" :key="index">
            <van-cell :title="item.name" :label="item.reply ? '已回复 · ' + item.replyTime:'待回复 '" center>
              <template #default>
                <p style="color: #1D6FE9;"><van-icon name="phone" style="top: 2px" />{{item.phone}}</p>
              </template>
            </van-cell>
            <van-row>
              <van-col :span="5">类型：</van-col>
              <van-col :span="19">{{item.communicateType}}</van-col>
            </van-row>
            <van-row>
              <van-col :span="5">标题：</van-col>
              <van-col :span="19">{{item.title}}</van-col>
            </van-row>
            <van-row>
              <van-col :span="5">内容：</van-col>
              <van-col :span="19">{{item.content}}</van-col>
            </van-row>

            <van-row v-if="item.reply">
              <van-col :span="24" style="border-top: 1px solid #eee"></van-col>
            </van-row>

            <van-row v-if="!item.reply">
              <van-col :span="12"></van-col>
              <van-col :span="12" align="right"><van-button icon="edit" type="danger" class="answerBtn" :to="{name:'reply',query:{id:item.id}}">回复</van-button></van-col>
            </van-row>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="已回复">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getNewList"
        >
          <div class="tabsBox" v-for="(item,index) in schemeList" v-if="item.reply" :key="index">
            <van-cell :title="item.name" :label="item.reply ? '已回复 · ' + item.replyTime:'待回复 '" center >
              <template #default>
                <p style="color: #1D6FE9;"><van-icon name="phone" style="top: 2px" />{{item.phone}}</p>
              </template>
            </van-cell>
            <van-row>
              <van-col :span="5">类型：</van-col>
              <van-col :span="19">{{item.communicateType}}</van-col>
            </van-row>
            <van-row>
              <van-col :span="5">标题：</van-col>
              <van-col :span="19">{{item.title}}</van-col>
            </van-row>
            <van-row>
              <van-col :span="5">内容：</van-col>
              <van-col :span="19">{{item.content}}</van-col>
            </van-row>

            <van-row v-if="item.reply">
              <van-col :span="24" style="border-top: 1px solid #eee"></van-col>
            </van-row>

            <van-row v-if="item.reply">
              <van-col :span="5">回复：</van-col>
              <van-col :span="19">{{item.reply}}</van-col>
            </van-row>
            <van-row v-if="item.reply">
              <van-col :span="5">回复人：</van-col>
              <van-col :span="19">{{item.replyName}}</van-col>
            </van-row>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { listCommunicate } from "@/api/lawEnforcement/index";
export default {
  name: "index",
  data() {
    return {
      active:0,
      // 查询参数
      queryParams: {
        // 分页
        pageNum: 1,
        pageSize: 10,
        // 查询排序
        orderByColumn: "id",
        isAsc: "desc",
        title: null,
        communicateType: null,
      },
      schemeList:[],
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      communicateOptions:[]
    };
  },
  created() {
    //转出方式字典
    this.getDicts("communicate_type").then(res => {
      this.communicateOptions = res.data;
    });
  },
  methods: {
    goUserIndex(){
      window.location = '/lawEnforcement/user';
    },
    getNewList(){
      this.loading = true;
      listCommunicate(this.queryParams).then(response => {
        console.log(response)
        for (var i = 0; i < response.rows.length; i++) {
          response.rows[i].replyTime = response.rows[i].replyTime == '' ? '' : response.rows[i].replyTime.substr(0,10);
          response.rows[i].communicateType = this.selectDictLabel(this.communicateOptions,response.rows[i].communicateType)
          this.schemeList.push(response.rows[i]);
        }
        if(this.schemeList.length >= response.total){
          this.finished = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.loading = false;
      })
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
/deep/ .van-col--5{
  font-weight: bold;
  color: #1D6FE9;
}
/deep/ .van-tabs__line{
  background-color: #1D6FE9;
}
/deep/ .van-tab--active{
  color: #1D6FE9;
}
/deep/.van-cell__title{
  flex: 0.63;
  line-height: 1;
}
/deep/.van-cell__value{
  flex: 0.37;
  line-height: 1;
}
/deep/.van-cell__label{
  line-height: 1;
}
/deep/.van-cell{
  padding: 0;
  padding-bottom: 10PX;
  border-bottom: 1px solid #eee;
}
/deep/.van-cell::after{
  border: none;
}
/deep/.van-row{
  margin-top: 15PX;
  .van-col{
    font-size: 0.4rem;
  }
}
.tabsBox{
  padding: 5% 4%;
  background-color: #FFF;
  border-radius: 8PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  margin-bottom: 15PX;
}
  .van-tab__pane-wrapper{
    padding: 5% 2%;
  }
  .answerBtn{
    padding: 5PX 15PX;
    height:auto;
  }
</style>
