<template>
    <div class="main-content__div">
      <div class="table-box__div" v-cloak v-loading="loadingFlag">
        <el-form  class="demo-form-inline">
          <el-form-item label="性质">
            <el-select v-model="natureID" clearable  placeholder="请选择" @change="ChangeNature">
              <el-option
                v-for="item in NatureList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="进度">
            <el-select v-model="natureLevelID" clearable  placeholder="请选择">
              <el-option
                v-for="item in NatureLevelList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="letterTypeID" clearable  placeholder="请选择" @change="ChangeType">
              <el-option
                v-for="item in LetterTypeList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型说明">
            <el-select v-model="typeLevelID" clearable  placeholder="请选择">
              <el-option
                v-for="item in LetterTypeLevelList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="statusID" clearable  placeholder="请选择">
              <el-option
                v-for="item in StatusList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
           <!-- 搜索按钮 -->
           <el-form-item>
            <el-button type="primary" size="small" @click="searchFrom()">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <div class="table-box__div" v-cloak v-loading="loadingFlag">
      
        <el-table
          size="mini"
          :data="tableData"
          :empty-text="tableDataLoadingText"
          style="width: 100%;font-size: 15px;"
          :header-cell-style="{background:'#FAFAFA'}"
        >
          <el-table-column label="编号" width="100" prop="id"></el-table-column>
          <el-table-column label="标题" prop="title" width="250"></el-table-column>
          <el-table-column label="性质" prop="nature_name" width="100"></el-table-column>
          <el-table-column label="进度" prop="nature_level_name" width="100"></el-table-column>
          <el-table-column label="类型" prop="type_name" width="100"></el-table-column>
          <el-table-column label="类型说明" prop="type_level_name" width="100"></el-table-column>  
          <el-table-column label="判决书"  width="80">
            <template  v-slot="scope">
              <div v-if="scope.row.judgment">有</div>
            </template>
          </el-table-column>
          <el-table-column label="录音录像" prop="audio_and_video" width="100">
            <template v-slot="scope">
                <div v-if="scope.row.audio_and_video">有</div>
            </template>
          </el-table-column>
          <el-table-column label="合同" prop="contract" width="50">
            <template v-slot="scope">
              <div v-if="scope.row.contract">有</div>
            </template>
          </el-table-column>
          <el-table-column label="资质" prop="qualifications" width="50">
            <template v-slot="scope">
              <div v-if="scope.row.qualifications">有</div>
            </template>
          </el-table-column>
          <el-table-column label="涉案标的额" prop="money" width="150"></el-table-column>
          <el-table-column label="姓名" prop="name" width="100"></el-table-column>
          <el-table-column label="电话" prop="mobile" width="120"></el-table-column>
          <el-table-column label="状态" prop="status_name" width="100"></el-table-column>
          <el-table-column label="创建时间" prop="created_at" width="200"></el-table-column>
          <el-table-column   prop="" label="操作" align="center"  fixed="right" width="150">
                  <template v-slot="scope">
                    <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
                      <!-- <span class="btn"  @click="updateClick(scope.row, scope.$index)">详情</span> -->
                      <span class="btn"  @click="updateClick(scope.row, scope.$index)">编辑</span>
                    </div>
                  </template>
                </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" v-show="pagination" style="margin-top: 10px;float: right;">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(tableCount)">
          </el-pagination>
        </div>
      </div>
    </div>
  <Dialog title="温馨提示" content="您确认要删除该资讯吗？"
          @close="DialogShow = false"
          @submitSureClick="submitSureClickDel"
          @DialogFalse="DialogShow = false"
          :innerVisible="DialogShow">
  </Dialog>
  <DialogSlot
      title="编辑"
      @close="ArticleDialogShow = false"
      @DialogClose="ArticleDialogShow = false"
      :innerVisible="ArticleDialogShow"
      @colesClick="ArticleDialogShow  = false"
  >
    <editFrom
        @colesClick="ArticleDialogShow = false"
        :ArticleDataForm="ArticleDataForm"
         :isloading="isloading"
        @ArticleSubmitClick="ArticleSubmitClick"
        @closeDlg="closeDlg"
        >
    </editFrom>
  </DialogSlot>
  </template>
  <script>
  import Dialog from "../../components/dialog";
  import editFrom from "./components/edit";
  import DialogSlot from "../../components/DialogSlot";
  export default {
    components: {
      Dialog,
      editFrom,
      DialogSlot
    },
    data() {
      return {
        statusID:'',
        letterTypeID:'',
        typeLevelID:'',
        natureLevelID:'',
        natureID:'',
        NatureLevelList:[],//；性质进度
        LetterTypeList:[],//类型列表
        LetterTypeLevelList:[],
        NatureList:[], //性质列表
        StatusList:[], //状态列表
        //  分类列表数据
        tableData: [],
        //  加载中数据提示
        tableDataLoadingText:"拼命加载中······",
        //  是否显示分页
        pagination:false,
        //  每页显示的条数
        pageSize:10,
        //  当前页
        currentPage:1,
        //  分类列表数据总条数
        tableCount:0,
  
        loadingFlag: false,
        isShowSource: false, // 是否显示来源列
        id:0,
        DialogShow: false, //控制删除弹窗
        ArticleDataForm: {},
        ArticleTableData: [],
        isloading:false, //提交按钮状态
        ArticleDialogShow: false, // 控制保存弹窗
        pid:0,
        keyword:''
      }
    },
    mounted() {
     
    },
    methods: {
      ChangeNature(){
        this.NatureList.forEach(item => {
          if(item.id==this.natureID){
            this.NatureLevelList = item.children
          }
        });
        this.natureLevelID = ''
      },
      ChangeType(){
        this.LetterTypeList.forEach(item => {
          if(item.id==this.letterTypeID){
            this.LetterTypeLevelList = item.children
          }
        });
        this.typeLevelID = ''
      },
      // 获取投诉列表信息
      getList:function(){
        let _t = this;
        _t.loadingFlag = true;
        let parames = {
            'page':this.currentPage,
            'pageSize':this.pageSize,
            'nature':this.natureID,
            'nature_level':this.natureLevelID,
            'type':this.letterTypeID,
            'status':this.statusID,
            'is_admin':'1'
           
        }
        console.log("参数：",parames)
        this.$api.publicApi.getComplaint(parames).then(res=>{
                _t.loadingFlag = false;
                if(res.code==200){
                  if(res.data.rows.length==0){
                    _t.tableData = [];
                    _t.tableCount = 0;
                    this.$message.error("还没有数据")
                    return
                  }
                    _t.tableData = res.data.rows;
                    _t.tableCount = res.data.count;
                     //总条数大于每页显示的条数时显示分页
                    if( _t.tableCount > _t.pageSize ){
                     _t.pagination = true;
                    }
                    if( _t.tableData.length==0 ){
                     _t.tableDataLoadingText = "暂无数据";
                    }
                }else{
                    this.$message.error(res.message)
                }
            })
      },
      getNatureList:function(){
        let _t = this;
        let parames = {
            'type':1,
        }
        console.log("参数：",parames)
        this.$api.publicApi.getLetterType(parames).then(res=>{
              
                if(res.code==200){
                  if(res.data.length==0){
                    this.$message.error("还没有数据")
                    return
                  }
                    _t.NatureList = res.data;

                    console.log(_t.NatureList);
                 
                }else{
                    this.$message.error(res.message)
                }
            })
      },
      getTypeList:function(){
        let _t = this;
        let parames = {
            'type':2,
        }
        console.log("参数：",parames)
        this.$api.publicApi.getLetterType(parames).then(res=>{
                if(res.code==200){
                  if(res.data.length==0){
                    this.$message.error("还没有数据")
                    return
                  }
                  _t.LetterTypeList = res.data;
                }else{
                    this.$message.error(res.message)
                }
            })
      },
      getStatusList:function(){
        let _t = this;
        let parames = {
            'type':10,
        }
        console.log("参数：",parames)
        this.$api.publicApi.getLetterType(parames).then(res=>{
                if(res.code==200){
                  if(res.data.length==0){
                    this.$message.error("还没有数据")
                    return
                  }
                  _t.StatusList = res.data;
                }else{
                    this.$message.error(res.message)
                }
            })
      },
      // 点击翻页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      // 查看下一级
      nextClick( id ){
        let _t = this;
        _t.id = id
        _t.currentPage = 1
        _t.pageSize = 10
       this.getList()
      },
      addClick(){
        this.ArticleDataForm = {}
        this.ArticleDialogShow = true
      },
      //更新分类
      updateClick(row,index){
        //验证操作人信息 和 登陆人信息是否匹配 匹配才可修改
        let parames = {
          'id':row.id
        }
        this.$api.publicApi.checkMeasure(parames).then(res=>{
           if(res.code == 200){
              this.ArticleDataForm = row
              this.rowIndex = index
              this.ArticleDialogShow = true
           }else{
              this.$message.error("已经被其他人处理")
           }
        })
        
        console.log(row)
     

      },
      // ArticleDialogShow(){
      //   this.isloading = false
      // },
      closeDlg(val){
          this.ArticleDialogShow = false
          this.isloading = false
      },
      ArticleSubmitClick(data){
        let _t = this
        console.log("提交数据",data)
        let parames = data
        parames.is_admin = 1
        _t.isloading = true
        //有id更新，没有新增
        if(parames.id){
          this.$api.publicApi.upComplaint(parames).then(res=>{
                _t.loadingFlag = false;
                if(res.code==200){
                  _t.tableData[_t.rowIndex] = parames
                     console.log("修改成功")
                     this.getList()
                }else{
                    this.$message.error("修改失败")
                }
                this.ArticleDialogShow = false
                this.isloading = false
            })
        }else{
          this.$api.news.addArticle(parames).then(res=>{
                _t.loadingFlag = false;
                if(res.code==200){
                     console.log("创建成功")
                    this.getList()
                }else{
                    this.$message.error(res.message)
                }
                this.ArticleDialogShow = false
                this.isloading = false
            })
        }
       
      },
      searchFrom(){
        this.currentPage = 1
        this.pageSize = 10
        this.getList()
      },


    },
    created() {
        this.pid = this.$route.params.Id;
        this.getList();
        this.getNatureList();
        this.getTypeList();
        this.getStatusList();
    }
  }
  </script>
  
  <style >
  .demo-form-inline{
      display: flex;
  }
  .demo-form-inline .el-form-item{
    margin: 0 20px;
  }
  </style>