<template>

  <div class="position-re">
    <div>
      <el-breadcrumb separator="/" class="my-breadcrumb">
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
        <el-breadcrumb-item>报错反馈列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
    <div class="detail-main">
      <div class="table-part">
        <diy-el-form ref="formRef" v-show="currentOpObj.timeType == '2'"  v-model:model-form="forms" :forms="formConfig">
          <template #searchBtn>
            <el-button  type="primary" :icon="Search" @click="initSearch">查询</el-button>
          </template>
        </diy-el-form>
        <span class="iconfont icon-danlieliebiao xyxx-icon" @click="showAllHeader"></span>
        <my-table border
                  :table-data="tableData"
                  @clickTableTr="clickTableTr"
                  :headers="headerConfig">
          <template #DATE_MATTER_TYPE="{data}">
            <span>{{getXXSXName(forms.UNITTYPE)}}</span>
          </template>
        </my-table>
        <ele-pagination  ref="refEl"
                         @sizeOrPageChange="handleSizeChange"
                         class="page"
                         :default-page-size="pageSize"
                         :layout="'slot,sizes,prev,pager,next'"
                         :total-count="totalCount">
          <template #default>
            <div class="m-s">
              显示第 {{pageSize * (pageIndex -1) + 1 }} 到第 {{pageSize * pageIndex}} 条记录，总共 {{totalCount}} 条记录 共显示

            </div>
          </template>
        </ele-pagination>
      </div>

      <div class="detail-time">
        <span>信息管理时间轴</span>
      </div>

      <div style="width:90%;height:200px;margin-top:200px;padding:0px;margin-left:10%;margin-top: 100px;">

        <el-popover  style="display:inline-block;height:50px;padding:0px;margin:0px;"
                    :visible="true"
                    placement="top"
                    :title="ywscContent.title"
                    :width="240"
        >
          <div v-html="ywscContent.content"></div>
          <template #reference>
            <button  :style="{background:ywsc}"  type="button" class="btn btn-default btn-circle"></button>
          </template>
        </el-popover>
        <div class="grad"  :style="{backgroundImage:ywsc_grad}" style="display:inline-block;width:15%;padding:0px;margin:0px;z-index:1"> </div>
        <el-popover  style="display:inline-block;height:50px;padding:0px;margin:0px;"
                    :visible="true"
                    placement="bottom"
                    :title="rqzjContent.title"
                    :width="240"
        >
          <div v-html="rqzjContent.content"></div>
          <template #reference>
            <button  :style="{background:rqzj}"  type="button" class="btn btn-default btn-circle"></button>
          </template>
        </el-popover>
        <div class="grad" :style="{backgroundImage:rqzj_grad}"  style="display:inline-block;width:15%;padding:0px;margin:0px;z-index:1;"></div>
        <el-popover  style="display:inline-block;height:50px;padding:0px;margin:0px;"
                    :visible="true"
                     placement="top"
                    :title="rgxjhContent.title"
                    :width="240"
        >
          <div v-html="rgxjhContent.content"></div>
          <template #reference>
            <button  :style="{background:rgxjh}" type="button" class="btn btn-default btn-circle"></button>
          </template>
        </el-popover>
        <div class="grad"  :style="{backgroundImage:rgxjh_grad}"  style="display:inline-block;width:15%;padding:0px;margin:0px;z-index:1;"></div>
        <el-popover  style="display:inline-block;height:50px;padding:0px;margin:0px;"
                    :visible="true"
                    placement="bottom"
                    :title="ptzjContent.title"
                    :width="240"
        >
          <div v-html="ptzjContent.content"></div>
          <template #reference>
            <button :style="{background:ptzj}" type="button" class="btn btn-default btn-circle"></button>
          </template>
        </el-popover>
        <div class="grad" :style="{backgroundImage:ptzj_grad}"  style="display:inline-block;width:15%;padding:0px;margin:0px;z-index:1;"></div>
        <el-popover  style="display:inline-block;height:50px;padding:0px;margin:0px;"
                    :visible="true"
                     placement="top"
                    :title="rsxyContent.title"
                    :width="240"
        >
          <div v-html="rsxyContent.content"></div>
          <template #reference>
            <button  :style="{background:rsxy}" type="button" class="btn btn-default btn-circle"></button>
          </template>
        </el-popover>
        <template v-show="shqsj_grad_display" >
          <div class="grad" :style="{backgroundImage:shqsj_grad}"  style="display:inline-block;width:15%;padding:0px;margin:0px;z-index:1;"></div>
        </template>
        <template v-show="dsjzx_show">
          <el-popover  style="display:inline-block;height:50px;padding:0px;margin:0px;"
                      :visible="dsjzx_show"
                      placement="bottom"
                      :title="shqsjContent.title"
                      :width="240"
          >
            <div v-html="shqsjContent.content"></div>
            <template #reference>
              <button  :style="{background:shqsj}" type="button" class="btn btn-default btn-circle"></button>
            </template>
          </el-popover>
        </template>



      </div>


    </div>
  </div>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref} from "vue";
import {
  queryEntityHeader, queryEntityTableInfo
} from "@/service/credit-information/commission-credit-information-manage/commission-credit-information-manage";
import {commissionCreditInformationManageEdit} from "@/data/all-form";
import {Search, SoldOut, Plus} from "@element-plus/icons-vue"
import ElePagination from "@/components/common/ElePagination.vue";
import {usePagination} from "@/units/use-method/usePagination";
import DiyElForm from "@/components/common/DiyElForm.vue";
import $ from 'jquery';
import {getDateToString_zhh,isEmptyCheck} from "@/units/use-method/veritification-tools";
import {InsertSyslog} from "@/units/use-method/user-log";
export default {
  name: "CommissionCreditInformationManageEdit",
  components: {DiyElForm, ElePagination, MyTable},
  computed: {
    Search() {
      return Search
    },
    Plus(){
      return Plus
    }
  },
  props:{
    currentOpObj:{

    },
    operationType:{

    }
  },
  setup(props,{emit}){
    const originHeader = [
      {
        label:"信息事项名称",
        prop:"DATE_MATTER_TYPE",
      },
      {
        label:"错误信息",
        prop:"MARK_ERROR_INFO",
      },
      {
        label:"数据业务时间",
        prop:"MARK_BUSINESS_TIME",
      },
      {
        label:"委质检时间",
        prop:"MARK_UPDATE_TIME",
      },
      {
        label:"入大数据中心时间",
        prop:"MARK_EXCHANGE_TIME_DM",
      },
    ];
    let fullHeader = [];
    let showFullHeader = false;
    const formRef = ref(null);
    const forms = ref({});
    const formConfig = ref({...commissionCreditInformationManageEdit});
    const headerConfig = ref([...originHeader]);
    const {pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl}  = usePagination(getTableData.bind(null))

    const ywscContent = ref({
      content:"",
      title:"节点:业务生成"
    });
    const ywsc = ref(null);
    const ywsc_grad = ref(null);
    const rqzjContent = ref({
      content:"",
      title:"节点:导入前置机"
    });
    const rqzj = ref(null);
    const rqzj_grad = ref(null);
    const rgxjhContent = ref({
      content:"",
      title:"节点:入共享交换"
    });
    const rgxjh = ref(null);
    const rgxjh_grad = ref(null);
    const ptzjContent = ref({
      content:"",
      title:"共享平台质检"
    });
    const ptzj = ref(null);
    const ptzj_grad = ref(null);
    const rsxyContent = ref({
      content:"",
      title:"归集大数据中心时间"
    });
    const rsxy = ref(null);
    const shqsj_grad = ref(null);
    const shqsj_grad_display = ref(false);
    const shqsjContent = ref({
      content:"",
      title:"大数据中心退回时间"
    });
    const shqsj = ref(null);
    const dsjzx_show = ref(false);

    function getHeader(){  //动态获取表头
      queryEntityHeader({
        unitCode:props.currentOpObj.unitCode,
        type:'1'
      }).then(res =>{
        let tempData = res.msg[0].Rows;
        debugger
        for(let i=0;i<tempData.length;i++){
          for(let j =0;j<headerConfig.value.length;j++){
            if(tempData[i].COLUMN_NAME == headerConfig.value[j].prop){
              tempData.splice(i,1);
              i--;
            }
          }
        }
        fullHeader =  originHeader.concat(
            tempData.map(i => ({
              ...i,
              label:i.COLUMN_NAME,
              prop:i.COLUMN_NAME,
            }))
        );
      })
    }
    function showAllHeader(){
      showFullHeader = !showFullHeader;
      if(showFullHeader){
        headerConfig.value = fullHeader;
      }else{
        headerConfig.value = originHeader;
      }
    }
    function getTableData(){
      let matterType = "";
      if(props.currentOpObj.timeType == '2'){
        matterType = forms.value.UNITTYPE;
      }
      queryEntityTableInfo({
        unitCode:props.currentOpObj.unitCode,
        matterType:matterType,
        timeType:props.currentOpObj.timeType,
        dateType:props.currentOpObj.dateType,
        businessTime:props.currentOpObj.businessTime.toString().split(" ")[0],
        tableName:props.currentOpObj.tableName,
        pageIndex:pageIndex.value,
        pageSize:pageSize.value
      }).then(res =>{
        let msg = res.msg[0];
        InsertSyslog(localStorage.getItem("xyxx_usercode"),localStorage.getItem("xyxx_unitcode"), "信息查询", "委信用信息管理查询成功", "委信用信息管理", "")
        if(msg.TotalRowCount  > 0){
          let tempData = msg.Rows;
          tableData.value = tempData;
          setCharts(tempData[0]); //初始化显示第一条
          totalCount.value = res.msg[0].TotalRowCount;
        }else{
          tableData.value = [];
          setCharts({}); //初始化显示第一条
          totalCount.value = res.msg[0].TotalRowCount;
        }
      })
    }
    function getXXSXName(val){
      switch (val){
        case "1":
          return "许可";
          break;
        case "2":
          return "处罚";
          break;
        case "3":
          return "逾期";
          break;
      }
    }
    function clickTableTr(row){
      setCharts(row);
    }
    function setCharts(json_rows){
      ywscContent.value.title = "节点:业务生成";
      ywscContent.value.content = "业务时间:" + getDateToString_zhh(new Date(json_rows["MARK_BUSINESS_TIME"]));
      if (isEmptyCheck(json_rows["MARK_BUSINESS_TIME"])) {
        ywscContent.value.content = "业务时间:"
      }
      //$("#ywsc").attr("data-content", $("#ywsc").attr("data-content") + "<br/>业务事项:对xxxx事项进行处罚");

      rqzjContent.value.title = "节点:导入前置机";
      rqzjContent.value.content = "归集时间:" + getDateToString_zhh(new Date(json_rows["MARK_FRONT_TIME"]));
      if (isEmptyCheck(json_rows["MARK_FRONT_TIME"])) {
        rqzjContent.value.content = "归集时间:"
      }

      rgxjhContent.value.title = "节点:入共享交换";
      rgxjhContent.value.content = "归集时间:" + getDateToString_zhh(new Date(json_rows["MARK_UPDATE_TIME"]));
      if (isEmptyCheck(json_rows["MARK_UPDATE_TIME"])) {
        rgxjhContent.value.content = "归集时间:"
      }

      let zjjg = 0;
      if (json_rows["MARK_ZJBS"] != null) {
        zjjg = json_rows["MARK_ZJBS"].toString().substr(0, 1);
      }

      ptzjContent.value.title = "节点:共享平台质检";
      if(zjjg > 0){
        var curTime = new Date(json_rows["MARK_UPDATE_TIME"]);
        var addHour = curTime.setHours(curTime.getHours() + 1);
        debugger
        ptzjContent.value.content = "归集时间:" + getDateToString_zhh(new Date(addHour));
        if(zjjg == 1){
          ptzjContent.value.content =  ptzjContent.value.content + "</br>质检结果:质检通过"
        }else{
          ptzjContent.value.content =  ptzjContent.value.content + "</br>质检结果:质检未通过"
        }
      }else{
        ptzjContent.value.content = "质检时间:";
        ptzjContent.value.content = ptzjContent.value.content + "</br>质检结果:"
      }


      if (isEmptyCheck(json_rows["MARK_UPDATE_TIME"])) {
        ptzjContent.value.content = "归集时间:"
      }

      //入市信用时间
      rsxyContent.value.title = "节点:入大数据中心时间";
      if (isEmptyCheck(json_rows["MARK_EXCHANGE_TIME_DM"])) {
        rsxyContent.value.content = "归集时间:"
      } else {
        rsxyContent.value.content = "归集时间:" + getDateToString_zhh(new Date(json_rows["MARK_EXCHANGE_TIME_DM"]));
      }


      zjjg = 0;
      if (json_rows["MARK_ZJBS"] != null) {
        zjjg = json_rows["MARK_ZJBS"].toString().substr(1, 1);
      }

      shqsjContent.value.title = "节点:大数据中心退回时间";
      if(zjjg > 0){
        if (isEmptyCheck(json_rows["MARK_FINISH_TIME_DM"])) {
          rsxyContent.value.content = "退回时间:";
          rsxyContent.value.visible = false;
          shqsj_grad_display.value= false;
          dsjzx_show.value =false;
        } else {
          shqsj_grad_display.value= true;
          dsjzx_show.value =true;
          shqsjContent.value.content = "退回时间:" + getDateToString_zhh(new Date(json_rows["MARK_FINISH_TIME_DM"]));
          shqsjContent.value.visible = true;
        }

        if (zjjg == 1) {
          shqsjContent.value.content = shqsjContent.value.content  + "</br>质检结果:质检通过";
        } else {
          shqsjContent.value.content = shqsjContent.value.content  + "</br>质检结果:质检未通过";
        }
      }else{
        if (isEmptyCheck(json_rows["MARK_FINISH_TIME_DM"])) {
          shqsjContent.value.visible = false;
          shqsj_grad_display.value= false;
          dsjzx_show.value =false;
          shqsjContent.value.content = "退回时间:"
        } else {
          shqsjContent.value.visible = true;
          shqsj_grad_display.value= true;
          dsjzx_show.value =true;
          shqsjContent.value.content = "退回时间:" + getDateToString_zhh(new Date(json_rows["MARK_FINISH_TIME_DM"]));
        }
      }


      //$('.btn-circle').popover('destroy');
      //$('.btn-circle').popover('toggle');
      ywscContent.value.visible = true;
      rqzjContent.value.visible = true;
      rgxjhContent.value.visible = true;
      ptzjContent.value.visible = true;
      rsxyContent.value.visible = true;
      //$('.btn-circle').popover('show');
      setBootonColor(json_rows);
    }
    function setBootonColor(json_rows) {
      //background-image: linear-gradient(to right,#c5c8ce,#c5c8ce);
      // $(".grad").css("background-color", "#c5c8ce");
      // $(".grad").css("background-image", "linear-gradient(to right,#c5c8ce,#c5c8ce)");
      //按钮为红色
      // $(".btn-circle").css("background", "#FFFFFF");
      debugger
      ywsc_grad.value ="linear-gradient(to right,#c5c8ce,#c5c8ce)";
      rqzj_grad.value ="linear-gradient(to right,#c5c8ce,#c5c8ce)";
      rgxjh_grad.value ="linear-gradient(to right,#c5c8ce,#c5c8ce)";
      ptzj_grad.value ="linear-gradient(to right,#c5c8ce,#c5c8ce)";
      shqsj_grad.value ="linear-gradient(to right,#c5c8ce,#c5c8ce)";


      ywsc.value = "#FFFFFF";
      rqzj.value = "#FFFFFF";
      rgxjh.value = "#FFFFFF";
      ptzj.value = "#FFFFFF";
      rsxy.value = "#FFFFFF";
      shqsj.value = "#FFFFFF";

      if (isEmptyCheck(json_rows["MARK_BUSINESS_TIME"])) {
        return;
      }
      //入库节点
      //$("#ywsc").css("background", "#19be6b");
      ywsc.value = "#19be6b";
      //入前置机时间
      if (isEmptyCheck(json_rows["MARK_FRONT_TIME"])) {
        return;
      }
      var temptime = new Date(json_rows["MARK_FRONT_TIME"]).getTime() - new Date(json_rows["MARK_BUSINESS_TIME"]).getTime();
      temptime = temptime / 1000 / 60 / 60;

      //时间判断是否超过24小时
      if (temptime < 12) {
        //浅蓝
        // var testObject = document.getElementById("ywsc_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#66B3FF,#66B3FF)';
        ywsc_grad.value = 'linear-gradient(to right,#66B3FF,#66B3FF)'
        //$("#rqzj").css("background", "#19be6b");

        rqzj.value ="#19be6b"
      } else if (temptime > 24) {
        //深蓝
        // var testObject = document.getElementById("ywsc_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0066CC,#0066CC)';

        ywsc_grad.value = 'linear-gradient(to right,#0066CC,#0066CC)';
        //按钮为红色
        // $("#rqzj").css("background", "#19be6b");
        rqzj.value ="#19be6b"
      } else {
        //蓝
        // var testObject = document.getElementById("ywsc_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0000FF,#0000FF)';
        ywsc_grad.value = 'linear-gradient(to right,#0000FF,#0000FF)';

        //$("#rqzj").css("background", "#19be6b");
        rqzj.value ="#19be6b"
      }
      //入共享交换时间
      if (isEmptyCheck(json_rows["MARK_UPDATE_TIME"])) {
        return;
      }
      var temptime = new Date(json_rows["MARK_UPDATE_TIME"]).getTime() - new Date(json_rows["MARK_FRONT_TIME"]).getTime();
      temptime = temptime / 1000 / 60 / 60;
      //时间判断是否超过24小时
      if (temptime < 12) {
        //浅蓝
        // var testObject = document.getElementById("rqzj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#66B3FF,#66B3FF)';
        rqzj_grad.value = 'linear-gradient(to right,#66B3FF,#66B3FF)';

        // $("#rgxjh").css("background", "#19be6b");
        rgxjh.value = "#19be6b"
      } else if (temptime > 24) {
        //深蓝
        // var testObject = document.getElementById("rqzj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0066CC,#0066CC)';
        rqzj_grad.value = 'linear-gradient(to right,#0066CC,#0066CC)';

        rgxjh.value = "#19be6b"
        //按钮为红色
        //$("#rgxjh").css("background", "#19be6b");
      } else {
        //蓝
        // var testObject = document.getElementById("rqzj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0000FF,#0000FF)';
        rqzj_grad.value = 'linear-gradient(to right,#0000FF,#0000FF)';

        rgxjh.value = "#19be6b"
        //$("#rgxjh").css("background", "#19be6b");
      }
      //质检时间

      var curTime = new Date(json_rows["MARK_UPDATE_TIME"]);
      var addHour = curTime.setHours(curTime.getHours() + 1);

      var temptime = new Date(addHour).getTime() - new Date(json_rows["MARK_UPDATE_TIME"]).getTime();
      temptime = temptime / 1000 / 60 / 60;
      //判断质检状态
      var zjjg = 0;
      if (json_rows["MARK_ZJBS"] != null) {
        zjjg = json_rows["MARK_ZJBS"].toString().substr(0, 1);
      }
      if (zjjg == 0) {
        return;
      }
      if (zjjg == "2") {
        ptzj.value = "#FF0000";
        // $("#ptzj").css("background", "#FF0000");
      } else {
        ptzj.value = "#19be6b"
        // $("#ptzj").css("background", "#19be6b");
      }
      //时间判断是否超过24小时
      if (temptime < 12) {
        //浅蓝
        // var testObject = document.getElementById("rgxjh_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#66B3FF,#66B3FF)';
        rgxjh_grad.value ='linear-gradient(to right,#66B3FF,#66B3FF)';
      } else if (temptime > 24) {
        //深蓝
        // var testObject = document.getElementById("rgxjh_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0066CC,#0066CC)';
        rgxjh_grad.value ='linear-gradient(to right,#0066CC,#0066CC)';
        //按钮为红色
        //$("#ptzj").css("background", "#FF0000");
      } else {
        //蓝
        // var testObject = document.getElementById("rgxjh_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0000FF,#0000FF)';
        rgxjh_grad.value ='linear-gradient(to right,#0000FF,#0000FF)';
      }

      //入市信用时间
      if (isEmptyCheck(json_rows["MARK_EXCHANGE_TIME_DM"])) {
        return;
      }
      var temptime = new Date(json_rows["MARK_EXCHANGE_TIME_DM"]).getTime() - new Date(addHour).getTime();
      temptime = temptime / 1000 / 60 / 60;

      //时间判断是否超过24小时
      if (temptime < 12) {
        //浅蓝
        // var testObject = document.getElementById("ptzj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#66B3FF,#66B3FF)';
        ptzj_grad.value = 'linear-gradient(to right,#66B3FF,#66B3FF)'
        // $("#rsxy").css("background", "#19be6b");
        rsxy.value = "#19be6b"
      } else if (temptime > 24) {
        //深蓝
        // var testObject = document.getElementById("ptzj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0066CC,#0066CC)';
        ptzj_grad.value = "linear-gradient(to right,#0066CC,#0066CC)"
        //按钮为红色
        // $("#rsxy").css("background", "#FF0000");
        rsxy.value = "#FF0000"
      } else {
        //蓝
        // var testObject = document.getElementById("ptzj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0000FF,#0000FF)';
        ptzj_grad.value = "linear-gradient(to right,#0000FF,#0000FF)"
        // $("#rsxy").css("background", "#19be6b");
        rsxy.value = "#19be6b"
      }

      //市信用未提供  市信用质检时间    暂时直接修改  连接线背景颜色
      var zjjg = 0;
      if (json_rows["MARK_ZJBS"] != null) {
        zjjg = json_rows["MARK_ZJBS"].toString().substr(1, 1);
      }
      if (zjjg == 2) {
        //深蓝
        // var testObject = document.getElementById("shqsj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0066CC,#0066CC)';
        shqsj_grad.value = "linear-gradient(to right,#0066CC,#0066CC)"
        //按钮为红色
        // $("#shqsj").css("background", "#FF0000");
        shqsj.value = "#FF0000"
        return;
      }

      //市信用时间获取时间
      if (isEmptyCheck(json_rows["MARK_FINISH_TIME_DM"])) {
        // var testObjectX = document.getElementById("shqsj_grad");
        // testObjectX.style.display = "none";
        shqsj_grad_display.value= false;
        // var testObjectX = document.getElementById("dsjzx_show");
        // testObjectX.style.display = "none";
        dsjzx_show.value=false;
        return;
      } else {
        // var testObjectX = document.getElementById("shqsj_grad");
        // testObjectX.style.display = "inline-block";
        shqsj_grad_display.value= true;
        // var testObjectX = document.getElementById("dsjzx_show");
        // testObjectX.style.display = "inline-block";
        dsjzx_show.value=true;
      }

      var temptime = new Date(json_rows["MARK_FINISH_TIME_DM"]).getTime() - new Date(json_rows["MARK_EXCHANGE_TIME_DM"]).getTime()
      temptime = temptime / 1000 / 60 / 60;

      //时间判断是否超过24小时
      if (temptime < 12) {
        //浅蓝
        // var testObject = document.getElementById("shqsj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#66B3FF,#66B3FF)';
        shqsj_grad.value = "linear-gradient(to right,#66B3FF,#66B3FF)"
        // $("#shqsj").css("background", "#19be6b");
        shqsj.value = "#19be6b"
      } else if (temptime > 24) {
        //深蓝
        // var testObject = document.getElementById("shqsj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0066CC,#0066CC)';
        shqsj_grad.value = "linear-gradient(to right,#0066CC,#0066CC)"
        //按钮为红色
        //$("#shqsj").css("background", "#FF0000");
        shqsj.value = "#FF0000";
      } else {
        //蓝
        // var testObject = document.getElementById("shqsj_grad");
        // testObject.style.backgroundImage = 'linear-gradient(to right,#0000FF,#0000FF)';
        shqsj_grad.value = "linear-gradient(to right,#0000FF,#0000FF)"

        // $("#shqsj").css("background", "#19be6b");
        shqsj.value = "#19be6b";
        debugger
      }
    }
    onBeforeMount(()=>{
      getHeader();
      getTableData();
      let unitTypeItem = formConfig.value.formItemsArr.find(i => i.modelValue ==="UNITTYPE");
      unitTypeItem.events = {
        'change'(){
          getTableData()
        }
      }
    })
    return{
      formRef,
      forms,
      formConfig,
      headerConfig,
      pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,initSearch,
      showAllHeader,
      getXXSXName,
      clickTableTr,


      ywscContent,
      ywsc,
      ywsc_grad,
      rqzjContent,
      rqzj,
      rqzj_grad,
      rgxjhContent,
      rgxjh,
      rgxjh_grad,
      ptzjContent,
      ptzj,
      ptzj_grad,
      rsxyContent,
      rsxy,
      shqsj_grad,
      shqsj_grad_display,
      shqsjContent,
      shqsj,
      dsjzx_show
    }
  }
}
</script>

<style scoped lang="scss">
.xyxx-icon{
  font-size: 24px;
  float: right;
}
.detail-main{
  padding: 30px 20px;
}
.grad {
  z-index:-1;
  height:7px;
  background-color:#c5c8ce;
  background-image: linear-gradient(to right,#c5c8ce,#c5c8ce);
}
.table-part{
  height: 600px;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn {
  border-radius: 3px;
}
.btn-default {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
}
.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
}
.grid{
  background-color:#c5c8ce;
  background-image:linear-gradient(to right,#c5c8ce,#c5c8ce);
}
.btn-circle{
  background:#FFFFFF
}
.state-white{
  background-color:#c5c8ce;
}
.state-blue{
  background-color:#19be6b;
}
.state-red{
  background-color: #FF0000;
}
.detail-time{
  font-size: 14px;
  line-height: 1;
  padding-bottom: 30px;
}
</style>