<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="请输入监控对象名称">
            <el-button slot="append">搜索</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" :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"
              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="checkbox">
            <el-checkbox @change="checkJklxBtn('司法风险')"></el-checkbox>
            <el-select v-model="queryParams.type" @change="iptAdaptive(inputID1,true,'changeSelect1')"
                       :class="[`select-adaptive-${inputID1}`,queryParams.type.length > 1 ? 'selectTag' : '']" multiple collapse-tags clearable
                       placeholder="司法风险">
              <el-option v-for="(item,index) in sffxList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <el-checkbox @change="checkJklxBtn('工商变更')"></el-checkbox>
            <el-select v-model="queryParams.gsbgType" @change="iptAdaptive(inputID2,true,'changeSelect1')"
                       :class="[`select-adaptive-${inputID2}`,queryParams.gsbgType.length > 1 ? 'selectTag' : '']" multiple collapse-tags clearable
                       placeholder="工商变更">
              <el-option v-for="(item,index) in gsbgList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <!--<el-checkbox-group v-model="fxlxType" class="keyword_checkbox" @change="checkJklxBtn">-->
              <!--<el-checkbox v-for="item in jkType" :label="item.value" :key="item.label"></el-checkbox>-->
              <!--<template v-if="item.label=='司法风险'">-->
                <!--<el-select v-model="queryParams.type" @change="iptAdaptive(inputID1,true,'changeSelect1')"-->
                           <!--:class="[`select-adaptive-${inputID1}`,queryParams.type.length > 1 ? 'selectTag' : '']" multiple collapse-tags clearable-->
                           <!--:placeholder="item.label">-->
                  <!--<el-option v-for="(item,index) in sffxList" :key="index" :label="item" :value="item"></el-option>-->
                <!--</el-select>-->
              <!--</template>-->
              <!--<template v-if="item.label=='工商变更'">-->
                <!--<el-select v-model="queryParams.gsbgType" @change="iptAdaptive(inputID2,true,'changeSelect1')"-->
                           <!--:class="[`select-adaptive-${inputID2}`,queryParams.gsbgType.length > 1 ? 'selectTag' : '']" multiple collapse-tags clearable-->
                           <!--:placeholder="item.label">-->
                  <!--<el-option v-for="(item,index) in gsbgList" :key="index" :label="item" :value="item"></el-option>-->
                <!--</el-select>-->
              <!--</template>-->
            <!--</el-checkbox-group>-->
          </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-radio-group v-model="fxjbType" class="keyword_checkbox" @change="checkFxjb1Btn">
                <el-radio v-for="item in fxjb" :label="item.value" :key="item.label">{{item.label}}</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>

      </div>
      <div class="content">
        <div class="total">共 162 条</div>
        <div class="table-item">
          <el-table
            class="fixed-table"
            :data="tableData"
            element-loading-text="Loading"
            border
            highlight-current-row
          >
            <el-table-column label="序号" width="60" align="left" fixed>
              <!--<template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>-->
              <template slot-scope="scope">1</template>
            </el-table-column>
            <el-table-column label="监控对象" prop="name" align="left" width="250">
              <template slot-scope="scope">
                中国中铁股份有限公司
              </template>
            </el-table-column>
            <el-table-column label="风险级别" prop="fxjb" align="left" width="120">
              <template slot-scope="scope">
                正向
              </template>
            </el-table-column>
            <el-table-column label="监控类型" prop="jklx" align="left" width="150">
              <template slot-scope="scope">
                新增中标业绩
              </template>
            </el-table-column>
            <el-table-column label="动态内容" prop="dtlr" align="left">
              <template slot-scope="scope">
                新增中标业绩
              </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="time" align="left" width="150">
              <template slot-scope="scope">
                2022-09-02
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="150"
              class-name="small-padding fixed-width"
              fixed="right"
            >
              <template slot-scope="scope">
                <span style="cursor: pointer;" @click="handleDetail">查看详情</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" custom-class='dialog-claim' :title="title" width="720px" >
        <div class="dialog-content">
          <template v-if="title=='开庭公告详情'">
            <info-table class="info-tab" :list="defaultList0" :obj="detail" :labelWidth="labelWidth"></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"></info-table>
          </template>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { v4 } from "uuid";
  import InfoTable from '../detail/party-a/component/infoTable';
  export default {
    name: 'MonitoringDynamics',
    components: {
      InfoTable
    },
    data() {
      return {
        radio:1,
        date:'',
        radioList:[
          {
            type:1,
            label:'今天'
          },
          {
            type:2,
            label:'近三天'
          },
          {
            type:3,
            label:'近一周'
          },
          {
            type:4,
            label:'近半月'
          },
          {
            type:5,
            label:'近一个月'
          },
          {
            type:6,
            label:'自定义日期'
          },
        ],
        fxjb:[
          {
            value:'1',
            label:'提示'
          },
          {
            value:'2',
            label:'正向'
          },
          {
            value:'3',
            label:'低风险'
          },
          {
            value:'4',
            label:'中风险'
          },
          {
            value:'5',
            label:'高风险'
          },
        ],
        checkFx: true,
        fxlxType:[],
        jkType:[
          {
            value:'1',
            label:'司法风险'
          },
          {
            value:'2',
            label:'工商变更'
          },
        ],
        sffxList:['开庭公告','裁判文书','法院公告','失信被执行人','被执行人','限制高消费','股权冻结'],
        gsbgList:['法定代表人变更','企业类型变更','注册资本变更','股东变更','对外投资变更','企业名称变更','注册地址变更','经营状态变更','分支机构'],
        queryParams:{
          type:[],
          gsbgType:[],
        },
        fxjbType:'',
        inputID1: this.getUid(),
        inputID2: this.getUid(),
        tableData:[
          {
            name:'中国中铁股份有限公司',
            jklx:'正向',
            kjlx:'新增中标业绩',
            dtlr:'新增中标，中标金额234.45万元：怀化国际陆港商贸服务综合物流枢纽及配套工程建设项目公共配套服务设施（市政绿化提档升级）项目一期EPC',
            time:'2022-09-02',
          }
        ],
        dialogVisible:false,
        labelWidth: 140,
        //开庭公告详情
        defaultList0:[
          { name: '案由', prop: 'a' },
          { name: '案号', prop: 'b' },
          { name: '开庭时间', prop: 'c' },
          { name: '承办部门', prop: 'd' },
          { name: '审判长/主判人', prop: 'e'},
          { name: '当事人', prop: 'f'},
          { name: '法院', prop: 'g'},
          { name: '法庭', prop: 'h'},
          { name: '公告内容', prop: 'j', style: true },
        ],
        //失信被执行人详情
        defaultList1:[
          { name: '失信被执行人行为具体情形', prop: 'a', style: true  },
          { name: '履行情况', prop: 'b' },
          { name: '立案文号', prop: 'c' },
          { name: '立案日期', prop: 'd' },
          { name: '执行依据文号', prop: 'e'},
          { name: '执行法院', prop: 'f'},
        ],
        //法院公告详情
        defaultList2:[
          { name: '原告', prop: 'a',style: true  },
          { name: '被告', prop: 'b' },
          { name: '公共类型', prop: 'c' },
          { name: '公告日期', prop: 'd' },
          { name: '公告法院', prop: 'e',style: true},
          { name: '案由', prop: 'f',style: true},
        ],
        //经营异常详情
        defaultList3:[
          { name: '案号', prop: 'a'},
          { name: '经营异常类型', prop: 'b' },
          { name: '列入经营异常名录原因', prop: 'c',style: true },
          { name: '拖欠天数', prop: 'd' },
          { name: '涉及金额', prop: 'e'},
          { name: '列入日期', prop: 'e'},
          { name: '列入机关', prop: 'e'},
          { name: '数据来源', prop: 'f',style: true},
        ],
        //股权冻结详情
        defaultList4:[
          { name: '标题名称', prop: 'a'},
          { name: '执行事项', prop: 'b' },
          { name: '执行裁定文书号', prop: 'c'},
          { name: '执行通知文号', prop: 'd' },
          { name: '被执行人', prop: 'e'},
          { name: '被执行人持有股权、其他投资权益数额', prop: 'e'},
          { name: '冻结期限自', prop: 'e'},
          { name: '冻结期限至', prop: 'f'},
          { name: '冻结期限', prop: 'f'},
          { name: '公示日期', prop: 'f'},
        ],
        //裁判文书详情
        defaultList5:[
          { name: '案由', prop: 'a'},
          { name: '执行案号', prop: 'b' },
          { name: '身份', prop: 'c'},
          { name: '当事人', prop: 'd' },
          { name: '案件金额', prop: 'e'},
          { name: '判决日期', prop: 'e'},
          { name: '判决结果', prop: 'e',style: true},
        ],
        title:'开庭公告详情',
        detail:{
          a:'民事借贷纠纷',
          b:'（2023）豫44执513号',
          c:'2021-11-20',
          d:'-',
          e:'-',
          f:'原告：Z某某；被告L某某',
          g:'宁乡县人民法院',
          h:'第七审判庭',
          j:'L某某宁乡县中小民间借贷服务有限公司： 本院受理原告C某某诉你民间借贷纠纷一案，现依法向你公告送达起诉状副本、应诉通知书、举证通知书、' +
            '合议庭组成人员通知书及开庭传票等法律文书。自发出公告之日起，经过60日即视为送达。提出答辩状和举证的期限分别为公告期满后15日和30日内。' +
            '并定于举证期满后第3日上午9时00分（遇法定假日顺延）在本院第七审判庭公开开庭审理，逾期将依法缺席裁判。 特此公告 发布日期:20160719',
        }
      }
    },
    created() {
      this.getPlaceholder()
    },
    methods: {
      checkJklxBtn(val) {
        console.log(val)
        if(val === '司法风险'){
          this.queryParams.type=this.queryParams.type.length != this.sffxList.length ? [] : this.sffxList;
          this.iptAdaptive(this.inputID1,true,'changeSelect1')
        }
        if(val==='工商变更'){
          this.queryParams.gsbgType=this.queryParams.gsbgType.length != this.gsbgList.length  ? [] : this.gsbgList;
          this.iptAdaptive(this.inputID2,true,'changeSelect1')
        }else {
          this.queryParams.gsbgType=[]
        }
      },
      checkFxjbBtn(val) {
        this.fxjbType = [];
        this.checkFx = true;
      },
      checkFxjb1Btn(val){
        if (val.length > 0) {
          this.checkFx = false;
        } else if (val.length == 0) {
          this.checkFx = true;
        }
      },
      handleDetail(){
        this.dialogVisible=true;
      },
      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" 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);
      }
      ::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;
        }
      }
      .checkbox{
        display: flex;
        align-items: flex-start;
        padding-left: 12px;
        position: relative;
        .checkbox-content-qx{
          margin-right: 24px;
        }
        ::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;
        }
      }
    }
    ::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>
