<template>
  <div class="app-container">
    <van-nav-bar title="案件" fixed placeholder />
    <template  v-if="loginType">
      <div style="display: flex;padding: 0 3% 0.2rem;">
        <form action="#" style="flex: 0.75;">
          <van-search
            v-model="queryParams.caseOrPartyName"
            placeholder="案件名称或当事人姓名"
            :search="handleQuery"
            v-on:input="handleQuery"
          >
          </van-search>
        </form>
        <van-button type="info" @click="sheetShow = true"  style="flex: 0.25;border-radius: 30PX;height: 0.95rem;">
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_ssbt.png" size="17" style="vertical-align: middle;margin-right: 5px;" />筛选
        </van-button>
      </div>
      <van-row style="padding: 0.2rem 3%;" v-show="showSxtj">
        <van-col :span="20"><p style="line-height: 20px;font-size: 14px;color: #878787;">筛选条件：{{showType}} {{showCaseStatus}} {{showCaseProgress}}</p></van-col>
        <van-col :span="4" align="right"><van-icon name="close" size="20" @click="resetQuery"/></van-col>
      </van-row>
      <van-action-sheet v-model="sheetShow" title="筛选" duration="0.2" close-icon="arrow-down">
          <div class="sheetContent">
            <van-field
              readonly
              clickable
              name="picker"
              v-model="showType"
              label="当事人类型"
              placeholder="点击选择当事人类型"
              @click="showDsrlx = true"
            />
            <van-popup v-model="showDsrlx" position="bottom">
              <van-picker
                show-toolbar
                :columns="typeColumns"
                @confirm="onConfirmDsrlx"
                @cancel="showDsrlx = false"
              />
            </van-popup>
            <van-field
              readonly
              clickable
              name="picker"
              v-model="showCaseStatus"
              label="案件状态"
              placeholder="点击选择案件状态"
              @click="showAjzt = true"
            />
            <van-popup v-model="showAjzt" position="bottom">
              <van-picker
                show-toolbar
                :columns="caseStatusColumns"
                @confirm="onConfirmAjzt"
                @cancel="showAjzt = false"
              />
            </van-popup>
            <van-field
              readonly
              clickable
              name="picker"
              v-model="showCaseProgress"
              label="案件执法进度"
              placeholder="点击选择案件执法进度"
              @click="showAjzfjd = true"
            />
            <van-popup v-model="showAjzfjd" position="bottom">
              <van-picker
                show-toolbar
                :columns="caseProgressColumns"
                @confirm="onConfirmAjzfjd"
                @cancel="showAjzfjd = false"
              />
            </van-popup>
  <!--          <p class="sheetTitle">当事人类型</p>-->
  <!--          <van-row>-->
  <!--            <van-col :span="6"><p class="active">全部</p></van-col>-->
  <!--            <van-col :span="12"><p>个人/个体工商户</p></van-col>-->
  <!--            <van-col :span="6"><p>企业</p></van-col>-->
  <!--          </van-row>-->
  <!--          <p class="sheetTitle">案件状态</p>-->
  <!--          <van-row>-->
  <!--            <van-col :span="6"><p class="active">全部</p></van-col>-->
  <!--            <van-col :span="6"><p>进行中</p></van-col>-->
  <!--            <van-col :span="6"><p>结束</p></van-col>-->
  <!--            <van-col :span="6"><p>中断</p></van-col>-->
  <!--          </van-row>-->
  <!--          <p class="sheetTitle">案件执法进度</p>-->
  <!--          <van-row>-->
  <!--            <van-col :span="6"><p class="active">全部</p></van-col>-->
  <!--            <van-col :span="6"><p>登记</p></van-col>-->
  <!--            <van-col :span="6"><p>勘察</p></van-col>-->
  <!--            <van-col :span="6"><p>立案</p></van-col>-->
  <!--          </van-row>-->
  <!--          <van-row>-->
  <!--            <van-col :span="6"><p>取证</p></van-col>-->
  <!--            <van-col :span="6"><p>处理</p></van-col>-->
  <!--            <van-col :span="6"><p>裁决</p></van-col>-->
  <!--            <van-col :span="6"><p>执行</p></van-col>-->
  <!--          </van-row>-->
  <!--          <van-row>-->
  <!--            <van-col :span="6"><p>备案</p></van-col>-->
  <!--            <van-col :span="6"><p>结案</p></van-col>-->
  <!--          </van-row>-->
          </div>
          <van-row>
            <van-col :span="12" align="center"><van-button type="default" style="width: 90%;height: 1.2rem;border-radius: 4PX;" @click="resetQuery">重置</van-button></van-col>
            <van-col :span="12" align="center"><van-button type="info" style="width: 90%;height: 1.2rem;border-radius: 4PX;" @click="handleQuery">确定</van-button></van-col>
          </van-row>
        </van-action-sheet>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getUser"
      >
        <van-swipe-cell v-for="(item,index) in caseList" :key="index">
          <van-cell :title="item.caseName" :value="22222" center :to="{name:'caseDetail',query:{id:item.id,caseProgress:item.caseProgress}}">
            <template #icon>
              <van-icon name="../../../static/images/lawEnforcement/icon/icon_aj.png" size="30" color="#539FFD" style="margin-right: 10px;" />
            </template>
            <template #label>
              <p>{{item.caseNumPart1}}农{{item.caseNumPart2}}[{{item.caseNumPart3}}]{{item.caseNum}}号<i style="margin-right: 0.5rem;"></i>{{item.name}}</p>
            </template>
            <template #default>
              <p>{{item.caseStatus}}</p>
              <p style="color: #1D6FE9;">{{selectDictLabel(caseProgressOptions, item.caseProgress)}}</p>
            </template>
          </van-cell>
        </van-swipe-cell>
      </van-list>
    </template>
    <van-empty v-else description="请登录查看更多内容" >
      <van-button icon="friends" color="#1D6FE9" style="padding: 0 30PX;border-radius: 5PX" to="/lawEnforcement/login">
        立即登录
      </van-button>
    </van-empty>
    <law></law>
  </div>
</template>
<script>
import { getUserProfile , listCase , getPersonalByUserId , getCompanyByUserId } from "@/api/lawEnforcement/index";
import law from "@/components/common/law_footer";
import Cookies from "js-cookie";
export default {
  name: "index",
  components: {
    law
  },
  data() {
    return {
      value:'',
      radio:'',
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      sheetShow: false,
      showDsrlx: false,
      showAjzt: false,
      showAjzfjd: false,
      showSxtj: false,
      loginType:true,
      // 查询参数
      queryParams: {
        // 分页
        pageNum: 1,
        pageSize: 10,
        // 查询排序
        orderByColumn: "id",
        isAsc: "desc",
        caseNum: null,
        type: null,
        caseStatus: null,
        caseProgress: null,
        caseOrPartyName: '',
      },
      //新闻集合
      newList:[],
      // 案件登记表格数据
      caseList: [],
      caseStatusOptions:[],
      caseProgressOptions:[],
      typeOptions:[],
      typeColumns:[],
      caseStatusColumns:[],
      caseProgressColumns:[],
      showType : '',
      showCaseStatus : '',
      showCaseProgress : '',
    };
  },
  created() {
    this.getDicts("enforce_body_type").then(response => {
      this.typeOptions = response.data;
      for (var i = 0 ; i < response.data.length ; i++){
        this.typeColumns.push({text: response.data[i].dictLabel, value: response.data[i].dictValue})

      }
    });
    this.getDicts("case_status").then(response => {
      this.caseStatusOptions = response.data;
      for (var i = 0 ; i < response.data.length ; i++){
        this.caseStatusColumns.push({text: response.data[i].dictLabel, value: response.data[i].dictValue})
      }
    });
    this.getDicts("case_node").then(response => {
      this.caseProgressOptions = response.data;
      for (var i = 0 ; i < response.data.length ; i++){
        this.caseProgressColumns.push({text: response.data[i].dictLabel, value: response.data[i].dictValue})
      }
    });
  },
  methods: {
    getUser() {
      if(!Cookies.get("User-Token")){
        this.loginType = false ;
        this.loading = false;
        this.finished = true;
        return
      }
      getUserProfile().then(response => {
        this.loginType = true;
        if (response.data.roles.length < 1){
          this.tabShow = false;
        }else{
          response.data.roles.forEach(res=>{
            if (res.roleKey == 'personal_user'){//个体用户
              getPersonalByUserId(response.data.userId).then( item => {
                console.log(item.id)
                if (item.data.id != undefined && item.data.id != null && item.data.id != ``){
                  console.log('aaa')
                  this.queryParams.type = "1";
                  this.queryParams.bodyId = item.data.id;
                  this.getList();
                }else{
                  this.loading = false;
                  this.finished = true;
                }

              })
            } else if (res.roleKey == 'company_user'){//企业用户
              getCompanyByUserId(response.data.userId).then( item => {
                console.log(item.id)
                if (item.data.id != undefined && item.data.id != null && item.data.id != ``){
                  console.log('bbb')
                  this.queryParams.type = "2";
                  this.queryParams.bodyId = item.data.id;
                  this.getList();
                }else{
                  this.loading = false;
                  this.finished = true;
                }
              })
            } else {
              console.log("ccc")
              this.getList();
            }
          })
        }
      });
    },
    getList(){
      this.loginType = true ;
      this.loading = true;
      listCase(this.queryParams).then(response => {
        for (var i = 0; i < response.rows.length; i++) {
          response.rows[i].caseStatus = this.selectDictLabel(this.caseStatusOptions, response.rows[i].caseStatus);
          this.caseList.push(response.rows[i])
        }
        if(this.caseList.length >= response.total){
          this.finished = true;
          return;
        }
        this.queryParams.pageNum += 1 ;
        this.loading = false;
      });
    },
    goDetail(id){
      console.log(id)
      window.location = 'news/newDetail?id='+id;
    },
    onConfirmDsrlx(data){
      this.queryParams.type = data.value;
      this.showType = data.text;
      this.showDsrlx = false;
    },
    onConfirmAjzt(data){
      this.queryParams.caseStatus = data.value;
      this.showCaseStatus = data.text
      this.showAjzt = false;
    },
    onConfirmAjzfjd(data){
      this.queryParams.caseProgress = data.value;
      this.showCaseProgress = data.text
      this.showAjzfjd = false;
    },
    resetQuery(){
      this.queryParams = {
        // 分页
        pageNum: 1,
        pageSize: 10,
        // 查询排序
        orderByColumn: "id",
        isAsc: "desc",
        caseNum: null,
        type: null,
        caseStatus: null,
        caseProgress: null,
      };
      this.showType = '';
      this.showCaseStatus = '';
      this.showCaseProgress = '';
      this.showSxtj = false;
      this.getList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if(this.showType != '' || this.showCaseStatus != '' || this.showCaseProgress != ''){
        this.showSxtj = true;
      }
      this.caseList = [];
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.app-container {
  padding: 0.2rem 3%;
}
/deep/ .van-action-sheet__content{
  padding-bottom: 0.5rem;
}
.sheetContent{
  padding: 10PX 1% 0;
  margin-bottom: 0.5rem;
  .sheetTitle{
    font-size: 0.42rem;
    background-color: transparent;
    width:auto;
    color: #333333;
    border:none;
    margin-bottom: 10PX;
    padding: 0 15px;
  }
  /deep/ .van-row{
    margin-bottom: 10PX;
  }
  /deep/ .van-col{
    text-align: center;
    padding: 0 15px;
  }
  .active{
    background-color: #1D6FE9;
    color: #FFFFFF;
    border: none;
  }
  p{
    font-size: 0.42rem;
    padding: 0.2rem 0;
    color: #666666;
    border-radius: 4PX;
    border: 1px solid #B4B0B0;
  }
}
/deep/ .van-action-sheet__header{
  border-bottom: 8PX solid #eeeeee;
}
/deep/.van-swipe-cell{
  margin-bottom: 0.2rem;
  border-radius: 0.2rem;
  overflow: hidden;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
/deep/ .van-search__content{
  background-color: #ffffff;
  border-radius: 20PX;
  border: 1px solid #cccccc;
  margin-right: 2%;
}
/deep/ .van-search__action{
  background-color: #1D6FE9;
  border-radius: 20PX;
  text-align: center;
  color: #ffffff;
}
/deep/ .van-search{
  background-color: transparent;
  padding: 0;
}
.van-cell__title{
  color: #666666;
}
/deep/ .van-nav-bar--fixed{
  background: url("../../../../static/images/lawEnforcement/head_bg.png") 100%;
}
/deep/.van-cell__title{
  flex: 0.7;
}
/deep/.van-cell__title span{
  font-family: Arial;
  font-size: 0.4rem;
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
  overflow: hidden;
}
/deep/.van-cell__value{
  flex: 0.3;
}
/deep/ .van-nav-bar__title{
  display: flex;
  max-width: initial;
  color: #ffffff;
  p{
    line-height: 30Px;
    margin-left: 6Px;
    font-size: 21Px;
    color: #D60303;
    font-family: SourceHanSansCNBold;
  }
}
/deep/ .van-tabs__content{
  width: 96%;
  margin: 0 auto;
}
/deep/ van-tab__pane-wrapper{
  padding: 0 2%;
}
/deep/ .van-tab{
  border: none;
  color: #1D6FE9;
}
/deep/ .van-tab--active{
  border-radius: 30Px;
  box-shadow: 0px 5px 5px #ccc;
  background-color: #FE1313!important;
}
/deep/ .van-tabs--card>.van-tabs__wrap{
  height: 0.9rem;
  margin: 10Px 0;
}
/deep/ .van-tab__pane{
  background: #FFF;
  border-radius: 8Px;
  overflow: hidden;
}
/deep/ .van-tabs__nav--card{
  padding: 3Px 2%;
  border: none;
  border-radius: 1rem;
  height: 0.9rem;
}
.bannerTit{
  position: absolute;
  bottom: 10px;
  background: rgba(255,255,255,0.3);
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #fff;
  overflow: hidden;
  padding: 0 3%;
  font-size: 16Px;
}
.link{
  color: #000;
}
.my-swipe {
  border-radius: 8Px;
}
.my-swipe .van-swipe-item .van-image{
  width: 100%;
}
.van-grid-item p{
  margin-top: 10px;
}
.newTit{
  font-size: 0.45rem;
  margin: 0.4rem 0;
  font-family: Source Han Sans SC, Source Han Sans SC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333333;
}
.newContent{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
}
.search-icon {
  line-height: inherit;
  margin-left: 10px;
}
</style>
