<template>
  <!--监控动态-->
    <div class="app-container MonitoringDynamics">
      <div class="search">
        <div class="search-item" style="line-height: 32px;margin-top: 0;padding-bottom: 8px;">
          <div class="label">监控对象</div>
          <el-input class="name" placeholder="请输入监控对象名称" v-model="companyName">
            <el-button slot="append" @click="handleKeyword()">搜索</el-button>
          </el-input>
        </div>
        <div class="search-item">
          <div class="label">更新时间</div>
          <div class="checkbox">
            <el-radio-group v-model="radio">
              <el-radio v-for="item in radioList" @change="radioBtn" :label="item.type">{{item.label}}</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="radio==6"
              v-model="date"
              type="daterange"
              value-format="yyyy-MM-dd"
              unlink-panels
              size="small"
              @change="changePicker"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="search-item" style="line-height: 32px;">
          <div class="label">监控类型</div>
          <div class="main-right">
            <div class="select-popper">
              <span :class="{ color_text: sffx.length }">司法风险{{sffx.length > 0 ? sffx.length:''}}<i class="el-icon-caret-bottom"></i></span>
              <el-select ref="tenderTypeSelect" v-model="sffx" class="select-multiple" collapse-tags multiple placeholder="请选择">
                <el-option v-for="(i,index) in selectList" :key="index" :label="i.dimensionName" :value="i.dimensionName">
                  <el-checkbox style="width: 100%;" :label="i.dimensionName" @change="changeSffx(i)">{{i.dimensionName}}</el-checkbox>
                </el-option>
              </el-select>
            </div>
            <div class="select-popper">
              <span :class="{ color_text: gsfx.length }">工商风险{{gsfx.length > 0 ? gsfx.length:''}}<i class="el-icon-caret-bottom"></i></span>
              <el-select ref="tenderTypeSelect" v-model="gsfx" class="select-multiple" collapse-tags multiple placeholder="请选择">
                <el-option v-for="(i,index) in selectList1" :key="index" :label="i.dimensionName" :value="i.dimensionName">
                  <el-checkbox style="width: 100%;" :label="i.dimensionName" @change="changeGsfx(i)">{{i.dimensionName}}</el-checkbox>
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="search-item">
          <div class="label">风险级别</div>
          <div class="main-right">
            <div class="checkbox">
              <div class="checkbox-content-qx">
                <el-checkbox v-model="checkFx" @change="checkFxjbBtn">全部</el-checkbox>
              </div>
              <el-checkbox-group v-model="fxjbType" class="keyword_checkbox" @change="checkFxjb1Btn">
                <el-checkbox v-for="item in fxjb" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>

      </div>
      <div class="content">
        <div class="total" v-if="tableDataTotal > 0  && !isSkeleton">共 {{tableDataTotal}} 条</div>
        <div class="table-item">
          <div v-if="tableDataTotal > 0  && !isSkeleton">
            <el-table
              :data="tableData"
              element-loading-text="Loading"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left" fixed>
                <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column label="监控对象" prop="companyName" align="left" width="250"></el-table-column>
              <el-table-column label="风险级别" prop="riskLevel" align="left" width="120"></el-table-column>
              <el-table-column label="监控类型" prop="dimensionName" align="left" width="150"></el-table-column>
              <el-table-column label="动态内容" prop="details" align="left">
                <template slot-scope="scope">
                  <div v-for="(item,index) in scope.row.Array" :key="index">
                    <div>
                      <span style="color: #999;">{{item.key}}：</span>
                      <span>{{item.value}}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="更新时间" prop="createTime" align="left" width="150"></el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="150"
              >
                <template slot-scope="scope">
                  <span style="cursor: pointer;color:#0081FF;" @click="handleDetail(scope.row)">查看详情</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
          <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
            <img class="img" src="@/assets/images/project/empty.png">
            <div class="p1">暂未发现企业风险动态信息</div>
            <!--<div class="p2">建议调整关键词或筛选条件，重新搜索</div>-->
          </div>
        </div>
        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize">
          <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" custom-class='dialog-claim' :title="title" width="720px" :close-on-click-modal="false">
        <div class="dialog-content">
          <template v-if="title=='开庭公告详情'">
            <info-table class="info-tab" :list="defaultList0" :obj="detail" :labelWidth="labelWidth">
              <template v-slot:relatedCompanies="row">
                <p v-for="i in row.data.relatedCompanies">
                  {{i.role}}:<br/>
                  {{i.name}}
                </p>
              </template>
            </info-table>
          </template>
          <template v-if="title=='失信被执行人详情'">
            <info-table class="info-tab" :list="defaultList1" :obj="detail" :labelWidth="labelWidth"></info-table>
          </template>
          <template v-if="title=='法院公告详情'">
            <info-table class="info-tab" :list="defaultList2" :obj="detail" :labelWidth="labelWidth"></info-table>
          </template>
          <template v-if="title=='经营异常详情'">
            <info-table class="info-tab" :list="defaultList3" :obj="detail" :labelWidth="labelWidth"></info-table>
          </template>
          <template v-if="title=='股权冻结详情'">
            <info-table class="info-tab" :list="defaultList4" :obj="detail" :labelWidth="labelWidth"></info-table>
          </template>
          <template v-if="title=='裁判文书详情'">
            <info-table class="info-tab" :list="defaultList5" :obj="detail" :labelWidth="labelWidth">
              <template v-slot:relatedCompanies="row">
                <p v-for="i in row.data.relatedCompanies">
                  {{i.role}}:<br/>
                  {{i.name}}
                </p>
              </template>
            </info-table>
          </template>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { v4 } from "uuid";
  import {changeTime} from "@/assets/js/common.js"
  import { dynamicPage,companyDetail,rulesSelect } from '@/api/monitoring/monitoring'
  import InfoTable from '../detail/party-a/component/infoTable';
  import skeleton from '../component/skeleton'
  export default {
    name: 'MonitoringDynamics',
    components: {
      InfoTable,skeleton
    },
    data() {
      return {
        isSkeleton:true,
        radio:null,
        date:'',
        radioList:[
          {
            type:null,
            label:'全部'
          },
          {
            type:1,
            label:'今天'
          },
          {
            type:2,
            label:'近三天'
          },
          {
            type:3,
            label:'近一周'
          },
          {
            type:4,
            label:'近半月'
          },
          {
            type:5,
            label:'近一个月'
          },
          {
            type:6,
            label:'自定义日期'
          },
        ],
        fxjb:[
          {
            value:'低风险',
            label:'低风险'
          },
          {
            value:'中风险',
            label:'中风险'
          },
          {
            value:'高风险',
            label:'高风险'
          },
        ],
        checkFx: true,
        fxlxType:[],
        jkType:[
          {
            value:'1',
            label:'司法风险'
          },
          {
            value:'2',
            label:'工商变更'
          },
        ],
        selectList:[],
        selectList1:[],
        sffx:[],
        gsfx:[],
        queryParams:{
          pageNum:1,
          pageSize:10,
          condition:{}
        },
        type:[],
        gsbgType:[],
        companyName:'',
        fxjbType:[],
        inputID1: this.getUid(),
        inputID2: this.getUid(),
        tableData:[],
        tableDataTotal:0,
        dialogVisible:false,
        labelWidth: 140,
        //开庭公告详情
        defaultList0:[
          { name: '案由', prop: 'causeAction' },
          { name: '案号', prop: 'caseNo' },
          { name: '开庭时间', prop: 'hearingDate' },
          { name: '承办部门', prop: 'department' },
          { name: '审判长/主判人', prop: 'judge'},
          { name: '当事人', prop: 'relatedCompanies',slot: true},
          { name: '法院', prop: 'court'},
          { name: '法庭', prop: 'tribunal'},
          { name: '公告内容', prop: 'content', style: true },
        ],
        //失信被执行人详情
        defaultList1:[
          { name: '失信被执行人行为具体情形', prop: 'executionDesc', style: true  },
          { name: '履行情况', prop: 'finalDuty' },
          { name: '立案文号', prop: 'caseNumber' },
          { name: '立案日期', prop: 'date' },
          { name: '执行依据文号', prop: 'docNumber'},
          { name: '执行法院', prop: 'court'},
        ],
        //法院公告详情
        defaultList2:[
          { name: '当事人', prop: 'people',style: true  },
          { name: '身份', prop: 'role' },
          { name: '公共类型', prop: 'type' },
          { name: '公告日期', prop: 'date' },
          { name: '公告法院', prop: 'court',style: true},
          { name: '案由', prop: 'caseReason',style: true},
        ],
        //经营异常详情
        defaultList3:[
          { name: '列入日期', prop: 'inDate'},
          { name: '移出日期', prop: 'outDate' },
          { name: '列入经营异常原因', prop: 'outReason',style: true },
          { name: '做出决定机关（移入）', prop: 'department' },
          { name: '做出决定机关（移出）', prop: 'outDepartment'},
          { name: '移出经营移除名录原因', prop: 'outReason',style: true},
        ],
        //股权冻结详情
        defaultList4:[
          { name: '执行法院', prop: 'executiveCourt'},
          { name: '执行事项', prop: 'assistItem' },
          { name: '执行裁定文书号', prop: 'adjudicateNo'},
          { name: '执行通知文号', prop: 'number' },
          { name: '被执行人', prop: 'beExecutedPerson'},
          { name: '被执行人持有股权、其他投资权益数额', prop: 'amount'},
          { name: '冻结期限自', prop: 'freezeStartDate'},
          { name: '冻结期限至', prop: 'freezeEndDate'},
          { name: '冻结期限', prop: 'freezeYearMonth'},
          { name: '公示日期', prop: 'publicDate'},
        ],
        //裁判文书详情
        defaultList5:[
          { name: '案由', prop: 'causeAction'},
          { name: '执行案号', prop: 'causeNo' },
          { name: '身份', prop: 'role'},
          { name: '当事人', prop: 'relatedCompanies',slot: true },
          { name: '案件金额', prop: 'subAmount'},
          { name: '判决日期', prop: 'date'},
          { name: '判决结果', prop: 'judgeresult',style: true},
        ],
        title:'法院公告详情',
        detail:{}
      }
    },
    created() {
      this.getPlaceholder()
      this.querySubmit()
      rulesSelect().then(res => {
        this.selectList=res.data;
        for(let i in res.data){
          if(res.data[i].dimensionName === '司法风险'){
            this.selectList=res.data[i].children
          }
          if(res.data[i].dimensionName === '工商风险'){
            this.selectList1=res.data[i].children
          }
        }
      })
    },
    methods: {
      async querySubmit() {
        let endTime = new Date()
        let params={
          pageNum:this.queryParams.pageNum,
          pageSize:this.queryParams.pageSize,
          condition:this.queryParams.condition
        }
        if(this.radio ===  1){
          params.condition.beginTime=this.formatDate(endTime)
          params.condition.endTime=this.formatDate(endTime)
        }
        if(this.companyName){
          params.condition.companyName=this.companyName
        }
        if(this.fxjbType.length > 0){
          params.condition.riskLevel=this.fxjbType
        }else {
          delete params.condition.riskLevel
        }
        if(this.sffx.length > 0 && this.gsfx.length > 0){
          params.condition.riskType='司法风险,工商风险'
          params.condition.dimension=this.sffx.concat(this.gsfx)
        }
        if(this.sffx.length > 0 && this.gsfx.length === 0){
          params.condition.riskType='司法风险'
          params.condition.dimension=this.sffx
        }
        if(this.sffx.length === 0 && this.gsfx.length > 0){
          params.condition.riskType='工商风险'
          params.condition.dimension=this.gsfx
        }
        if(this.sffx.length === 0 && this.gsfx.length === 0){
          delete params.condition.riskType
          delete params.condition.dimension
        }
        dynamicPage(params).then(res => {
          this.isSkeleton = false;
          this.tableData=res.rows;
          this.tableDataTotal=res.total;
          this.tableData.forEach(el => {
            el.createTime = changeTime(el.createTime)
            // 把动态内容从json字符串改为对象
            el.details = JSON.parse(el.details)
            // 对象转为键值对数组
            let arr = Object.entries(el.details)
            // 新建一个属性数组
            el.Array = []
            for(let [i,j] of arr){
              el.Array.push({key:i,value:j})
            }
          })
        })
      },
      getDetail(name,id) {
        companyDetail({dimensionName:name,sourceId:id}).then(res => {
          console.log(res)
          this.dialogVisible=true;
          this.detail=res.data;
        })
      },
      changeSffx(val) {
        if (this.sffx.indexOf(val.dimensionName) == -1) {
          this.sffx.push(val.dimensionName)
        } else {
          this.sffx.splice(this.sffx.indexOf(val.dimensionName), 1)
        }
        this.queryParams.pageNum=1
        this.queryParams.pageSize=10
        this.querySubmit()
      },
      changeGsfx(val) {
        if (this.gsfx.indexOf(val.dimensionName) == -1) {
          this.gsfx.push(val.dimensionName)
        } else {
          this.gsfx.splice(this.gsfx.indexOf(val.dimensionName), 1)
        }
        this.queryParams.pageNum=1
        this.queryParams.pageSize=10
        this.querySubmit()
      },
      checkFxjbBtn(val) {
        this.fxjbType = [];
        this.checkFx = true;
        this.queryParams.pageNum=1
        this.queryParams.pageSize=10
        this.querySubmit()
      },
      checkFxjb1Btn(val){
        if (val.length > 0) {
          this.checkFx = false;
        } else if (val.length == 0) {
          this.checkFx = true;
          this.fxjbType = [];
        }
        this.queryParams.pageNum=1
        this.queryParams.pageSize=10
        this.querySubmit()
      },
      handleDetail(item){
        switch (item.dimensionName) {
          case '新增开庭公告':
            this.title='开庭公告详情'
            this.getDetail(item.dimensionName,item.sourceId)
            break;
          case '新增法院公告':
            this.title='法院公告详情'
            this.getDetail(item.dimensionName,item.sourceId)
            break;
          case '新增裁判文书':
            this.title='裁判文书详情'
            this.getDetail(item.dimensionName,item.sourceId)
            break;
          case '新增经营异常':
            this.title='经营异常详情'
            this.getDetail(item.dimensionName,item.sourceId)
            break;
          case '新增失信被执行人':
            this.title='失信被执行人详情'
            this.getDetail(item.dimensionName,item.sourceId)
            break;
          case '新增股权冻结':
            this.title='股权冻结详情'
            this.getDetail(item.dimensionName,item.sourceId)
            break;
          default:
            this.$message.success("暂无详情");
            break;
        }
      },
      handleKeyword(){
        this.queryParams.pageNum=1
        this.queryParams.pageSize=10
        this.querySubmit()
      },
      radioBtn(val){
        let endTime = new Date()
        this.queryParams.pageNum=1
        this.queryParams.pageSize=10
        switch (val) {
          case 1:
            this.queryParams.condition.beginTime=this.formatDate(endTime)
            this.queryParams.condition.endTime=this.formatDate(endTime)
            this.querySubmit()
            break;
          case 2:
            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 3))
            this.queryParams.condition.endTime = this.formatDate(endTime)
            this.querySubmit()
            break;
          case 3:
            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 7))
            this.queryParams.condition.endTime = this.formatDate(endTime)
            this.querySubmit()
            break;
          case 4:
            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 15))
            this.queryParams.condition.endTime = this.formatDate(endTime)
            this.querySubmit()
            break;
          case 5:
            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 30))
            this.queryParams.condition.endTime = this.formatDate(endTime)
            this.querySubmit()
            break;
          case 6:
            this.date=[]
            break;
          default:
            this.queryParams.condition.beginTime=''
            this.queryParams.condition.endTime=''
            this.querySubmit()
            break;
        }
      },
      // 重置页数
      handleSizeChange(val) {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = val
        this.querySubmit()
      },
      // 跳转指定页数
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.querySubmit()
        window.scrollTo(0, 0);
      },
      // 时间选择改变后的回调
      changePicker(value) {
        if(value && value.length) {
          this.queryParams.condition.beginTime = value[0]
          this.queryParams.condition.endTime = value[1]
        }
        this.queryParams.pageNum=1
        this.queryParams.pageSize=10
        this.querySubmit()
      },
      // 时间格式化
      formatDate(timeStr) {
        let date = new Date(Number(timeStr));
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, 0);
        let day = String(date.getDate()).padStart(2, 0);
        return `${year}-${month}-${day}`;
      },
      async getPlaceholder() {
        try {
          await this.$nextTick();
          const doms = document.querySelectorAll("[class*='select-adaptive-']");
          if (doms?.length) {
            doms.forEach(dom => {
              const realStyles = window.getComputedStyle(dom);
              const ipt = dom.querySelector("input");
              const text = ipt.getAttribute("placeholder");
              const textContainer = document.createElement("span");
              textContainer.style.setProperty("visibility", "hidden");
              textContainer.style.setProperty("display", "inline-block");
              textContainer.style.setProperty("font-size", "14px");
              const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
              hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
              textContainer.style.setProperty("box-sizing", "border-box");
              textContainer.textContent = text;
              document.body.append(textContainer);
              // 加上按钮宽度 以及按钮左外边距
              let containerWidth = textContainer.offsetWidth + 30;
              textContainer.remove();
              dom.style.setProperty("width", `${containerWidth}px`);
            });
          }
        } catch (error) {

        }
      },
      iptAdaptive(uid, multiple = false, name) {
        multiple ? this.multipleAdaptiveHandle(uid, name) : this.iptAdaptiveHandle(uid, name);
      },
      getUid() {
        return v4();
      },
      // 多选处理
      async multipleAdaptiveHandle(uid, name) {
        try {
          await this.$nextTick();
          const dom = document.querySelector(`.select-adaptive-${uid}`);
          const iptChild = dom.querySelector(".el-input__inner");
          if (dom) {
            const textContainer = document.createElement("span");
            const textName = `text-${uid}`;
            textContainer.classList.add(textName);
            const selectChildren = dom.querySelectorAll(".el-tag");
            if (selectChildren.length) {
              let width = 0;
              selectChildren.forEach(item => {
                const text = item.textContent;
                const itemInfo = window.getComputedStyle(item);
                textContainer.style.setProperty("visibility", "hidden");
                textContainer.style.setProperty("display", "inline-block");
                textContainer.style.setProperty("font-size", "14px");
                textContainer.style.setProperty("padding", itemInfo.padding);
                textContainer.style.setProperty("box-sizing", "border-box");
                textContainer.textContent = text;
                document.body.append(textContainer);
                width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
                textContainer.remove();
              });
              dom.style.setProperty("width", `${width + 50}px`);
              // this.handleSearch(name);
              return;
            }
            textContainer.style.setProperty("visibility", "hidden");
            textContainer.style.setProperty("display", "inline-block");
            textContainer.style.setProperty("font-size", "14px");
            textContainer.style.setProperty("padding", "0px 8px");
            textContainer.style.setProperty("box-sizing", "border-box");
            textContainer.textContent = iptChild.getAttribute("placeholder");
            document.body.append(textContainer);
            let containerWidth = textContainer.offsetWidth + 12 + 8;
            // let containerWidth = 130;
            textContainer.remove();
            dom.style.setProperty("width", `${containerWidth}px`);
            // this.handleSearch(name);
          }

        } catch (error) {
          console.log(error);
        }
      },
      // 单选处理
      async iptAdaptiveHandle(uid, name) {
        try {
          await this.$nextTick();
          const dom = document.querySelector(`.select-adaptive-${uid}`);
          const realStyles = window.getComputedStyle(dom);
          if (dom) {
            const iptChild = dom.querySelector(".el-input__inner");
            const textContainer = document.createElement("span");
            const textName = `text-${uid}`;
            textContainer.classList.add(textName);
            textContainer.style.setProperty("visibility", "hidden");
            textContainer.style.setProperty("display", "inline-block");
            textContainer.style.setProperty("font-size", "14px");
            const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
            hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
            textContainer.style.setProperty("box-sizing", "border-box");
            textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
            document.body.append(textContainer);
            let containerWidth = textContainer.offsetWidth + 50;

            textContainer.remove();
            dom.style.setProperty("width", `${containerWidth}px`);
          }
          // this.handleSearch(name);
        } catch (error) {

        }
      },
    }
  }
</script>
<style lang="scss">
  .el-select-dropdown__item.selected,
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
    color: #3181fa;
    font-size: 0;
  }
</style>
<style lang="scss" scoped>
  .MonitoringDynamics{
    .search{
      background: #FFFFFF;
      padding: 25px 16px;
      border-radius: 4px;
      .search-item{
        display: -webkit-box;
        align-items: flex-start;
        line-height: 20px;
        margin-top: 8px;
      }
      .label{
        margin-right: 12px;
        font-size: 14px;
        color: rgba(35,35,35,0.8);
      }
      .color_text {
        color: #0081ff;
      }
      ::v-deep .name{
        width: 405px;
        height: 32px;
        margin-left: 12px;
        border-radius: 2px;
        border: 1px solid #DCDFE6;
        .el-input__inner{
          border: 0;
          height: 32px;
        }
        .el-input-group__append{
          border: 0;
          background: #F5F5F5;
          width: 60px;
          color: #0081FF;
          text-align: center;
        }
        .el-input-group__append:hover{
          background:#F5F5F5;
        }
      }
      .main-right {
        width: calc(100% - 112px);
        .select-popper {
          text-align: center;
          display: inline-block;
          position: relative;
          color: #333333;
          font-size: 14px;
          cursor: pointer;
          margin: 0px 12px;
          margin-bottom: 16px;
        }

        .select-popper .select-popper-img {
          width: 24px;
          height: 12px;
          position: absolute;
          top: -10px;
          right: 2px;
        }
        .select-multiple {
          position: absolute;
          left: 0;
          top: -6px;
          opacity: 0;
          line-height: 22px;
          ::v-deep .el-input {
            width: 100%;
            line-height: 22px;
            .el-input__inner {
              color: rgba(35,35,35,0.8);
              width: 100%;
              height: 22px !important;
            }
          }
          .el-tag__close.el-icon-close {
            display: none;
          }
        }
      }
      .checkbox{
        display: flex;
        align-items: flex-start;
        padding-left: 12px;
        position: relative;
        .checkbox-content-qx{
          margin-right: 24px;
        }
        .keyword_checkbox{
          ::v-deep .el-checkbox{
            margin-right: 24px;
          }
        }
        ::v-deep .el-radio{
          color: rgba(35,35,35,0.8);
        }
        ::v-deep .el-checkbox__label{
          color: rgba(35,35,35,0.8);
        }
        ::v-deep .el-checkbox{
          margin-right: 10px;
        }
        ::v-deep .el-date-editor{
          position: absolute;
          left: 602px;
          top: -7px
        }
        ::v-deep .el-select{
          .el-input{
            .el-input__inner{
              height: 32px;
              line-height: 32px;
              border-radius: 4px;
              border: 0;
              padding-left: 0px;
              padding-right: 8px;
              &::placeholder{
                color: rgba(35,35,35,0.8) !important;
              }
            }
            .el-input__suffix{
              top:2px;
            }
          }

        }
      }
    }
    .content{
      background: #FFFFFF;
      border-radius: 4px;
      margin-top: 16px;
      padding: 16px;
      .total{
        color: rgba(35,35,35,0.8);
        font-size: 12px;
        padding-bottom: 16px;
        display: flex;
        align-items: center;
        &:before {
          content: "";
          display: inline-block;
          width: 2px;
          height: 2px;
          background: rgba(35,35,35,.4);
          margin-right: 4px;
        }
      }
      .empty{
        margin: 0 auto;
        height: 550px;
        text-align: center;
        .img{
          width: 108px;
          height: 108px;
          margin-bottom: 24px;
          margin-top: 150px;
        }
        .p1{
          color: #333333;
          font-size: 16px;
        }
        .p2{
          color: #999999;
          font-size: 14px;
          margin-top: 8px;
        }
      }
    }
    ::v-deep .dialog-claim{
      .el-dialog__header{
        display: block;
        padding:16px 20px;
        border-bottom: 1px solid #EEEEEE;
        font-size: 16px;
        font-weight: 700;
        color: #232323;
      }
      .el-dialog__body {
        padding: 24px 20px;
      }
    }
  }
</style>
