<template>
 <div class="position-re">
   <div class="back" @click="$emit('changeDetailOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
   <my-breadcrumb class="my-breadcrumb" :breadcrumb-arr="bradeArr"></my-breadcrumb>

   <div class="my-detail-main">
     <div class="my-op-btns" >
       <ul class="my-operation-btns">
         <li :title="btn.type" v-for="btn in tableControlBtns" @click="clickOperationBtn(btn)" :class="{'disabled':btn.disabled}"   :key="btn.id">
           <span :class="btn.className"></span>
         </li>
       </ul>
     </div>
     <my-table
       :table-event-obj="{
    'row-click':rowClick
    }"
       :headers="tableHeader"
       border
       :page-size="8"
       :table-data="tableData"
     >

     </my-table>
     <ele-pagination  ref="refEl"

                      @sizeOrPageChange="handleSizeChange"
                      class="page"
                      :default-page-size="pageSize"


                      :total-count="totalCount">

       <template #default>
         <div class="m-s">
           显示第 {{pageSize * (pageIndex -1) + 1 }} 到第 {{pageSize * pageIndex}} 条记录，总共 {{totalCount}} 条记录 共显示

         </div>
       </template>
     </ele-pagination>
     <div class="my-b-title">
       信息管理时间轴
     </div>
     <div class="row" id="flow_img">
       <div class="loadEffect">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <span></span>
       </div>
     </div>
   </div>
 </div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import {dataLifeCycleDetailDetailTableHeader} from "@/data/all-table-header";
import MyTable from "@/components/common/MyTable.vue";
import ElePagination from "@/components/common/ElePagination.vue";
import {usePagination} from "@/unit/use-method/usePagination";

import {
  getLifeCycleDetailDetailTableData,
  getLifeCycleDetailDetailTableHeader
} from "@/service/data-sync-hanlle-watch/data-life-cycle";
import * as d3 from "d3";
import {isEmptyCheck} from "@/unit/validate";
import {getDateToString} from "@/unit/time";

export default {
  name: "DataLifeCycleDetailDetail",
  components: {ElePagination, MyTable, MyBreadcrumb},
  props:{
    detailCurrentOpObj:{

    },
    currentObj:{

    }
  },
  setup(props,{emit}){
    function c(row) {
      let json_rows = row

      // 网页可见区域宽： document.body.clientWidth
      //网页可见区域高： document.body.clientHeight
      var width = document.querySelector("#flow_img").offsetWidth;
      var height = 850;
      document.querySelector("#flow_img").style.height = '850px';
      //#3bbfe4
      d3.select("#flow_img").selectAll('*').remove();
      var svg = d3
        .select("#flow_img")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("fill", "pink");
      //.style("border", "solid 1px red");

      /*a 画圆弧 参数
      (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

      rx ry 是椭圆的两个半轴的长度。

      x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。

      large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。

      sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。

      x y 是圆弧终点的坐标。*/
      var g1 = svg.append("g")
        .attr("transform", "translate(0,0)");
      g1.append("path")
        .attr("d", "M 200 150 L " + (width - 200) + " 150 a5,5 180 0,1 5,5 L " + (width - 200 + 5) + " 270 a5,5 180 0,1 -5,5 L205 275 a5,5 180 0,0 -5,5" +
          "L 200 800 a5,5 180 0,0 5,5 L " + (width - 610)+" 805")
        .attr("stroke", "#C3D0E1")
        .attr("stroke-width", "8")
        .attr("fill", "none");
      g1.append("path")
        .attr("d", "M 200 410 L " + (width - 300) + " 410")
        .attr("stroke", "#C3D0E1")
        .attr("stroke-width", "8")
        .attr("fill", "none");

      g1.append("path")
        .attr("d", "M 200 540 L " + (width - 610) + " 540")
        .attr("stroke", "#C3D0E1")
        .attr("stroke-width", "8")
        .attr("fill", "none");

      g1.append("path")
        .attr("d", "M 200 670 L " + (width - 610) + " 670")
        .attr("stroke", "#C3D0E1")
        .attr("stroke-width", "8")
        .attr("fill", "none");

      //画圆形
      var circle_list = [];

      //
      circle_list.push({
        "cx":(width - 300) / 3,
        "cy": 150,
        "r": 15,
        "fill": "#36639c"
      });
      circle_list.push({
        "cx": (width - 300) / 3 * 2,
        "cy": 150,
        "r": 15,
        "fill": "#36639c"
      });
      circle_list.push({
        "cx": (width - 300) / 3 * 3,
        "cy": 150,
        "r": 15,
        "fill": "#36639c"
      });
      circle_list.push({
        "cx": (width - 200) / 5 * 2,
        "cy": 275,
        "r": 15,
        "fill": "#36639c"
      });
      circle_list.push({
        "cx": (width - 200) / 5 * 4,
        "cy": 275,
        "r": 15,
        "fill": "#36639c"
      });
      circle_list.push({
        "cx": (width - 300) / 3,
        "cy": 410,
        "r": 15,
        "fill": "#36639c"
      });

      circle_list.push({
        "cx": (width - 300) / 3 * 2,
        "cy": 410,
        "r": 15,
        "fill": "#36639c"
      });

      circle_list.push({
        "cx": (width - 300) / 3 * 3,
        "cy": 410,
        "r": 15,
        "fill": "#36639c"
      });


      circle_list.push({
        "cx": (width - 300) / 3,
        "cy": 540,
        "r": 15,
        "fill": "#36639c"
      });

      circle_list.push({
        "cx": (width - 300) / 3 * 2,
        "cy": 670,
        "r": 15,
        "fill": "#36639c"
      });


      circle_list.push({
        "cx": (width - 300) / 3,
        "cy": 670,
        "r": 15,
        "fill": "#36639c"
      });

      circle_list.push({
        "cx": (width - 300) / 3 * 2,
        "cy": 540,
        "r": 15,
        "fill": "#36639c"
      });

      circle_list.push({
        "cx": (width - 300) / 3,
        "cy": 805,
        "r": 15,
        "fill": "#36639c"
      });

      circle_list.push({
        "cx": (width - 300) / 3 * 2,
        "cy": 805,
        "r": 15,
        "fill": "#36639c"
      });


      for (var i = 0 ; i < circle_list.length ; i++) {
        svg.append("circle")
          .attr("cx", circle_list[i]["cx"])
          .attr("cy", circle_list[i]["cy"])
          .attr("r", circle_list[i]["r"])
          .attr("fill", circle_list[i]["fill"]);
      }
      /*
      var circle_1 = svg.append("circle")
              .attr("cx", (width - 300) / 3)
              .attr("cy", 150)
              .attr("r", 15)
              .attr("fill", "#36639c");
      var circle_2 = svg.append("circle")
              .attr("cx", (width - 300) / 3 * 2)
              .attr("cy", 150)
              .attr("r", 15)
              .attr("fill", "#36639c");
      var circle_3 = svg.append("circle")
          .attr("cx", (width - 300) / 3 * 3)
          .attr("cy", 150)
          .attr("r", 15)
          .attr("fill", "#36639c");
      //图标

      var circle_4 = svg.append("circle")
          .attr("cx", (width - 200) / 5 * 2)
          .attr("cy", 275)
          .attr("r", 15)
          .attr("fill", "#36639c");
      var circle_5 = svg.append("circle")
          .attr("cx", (width - 200) / 5 * 4)
          .attr("cy", 275)
          .attr("r", 15)
          .attr("fill", "#36639c");

      //画圆形
      var circle_6 = svg.append("circle")
              .attr("cx", (width - 300) / 3)
              .attr("cy", 410)
              .attr("r", 15)
              .attr("fill", "#36639c");
      var circle_7 = svg.append("circle")
              .attr("cx", (width - 300) / 3 * 2)
              .attr("cy", 410)
              .attr("r", 15)
              .attr("fill", "#36639c");
      var circle_8 = svg.append("circle")
          .attr("cx", (width - 300) / 3 * 3)
          .attr("cy", 410)
          .attr("r", 15)
          .attr("fill", "#36639c");

      //画圆形
      var circle_9 = svg.append("circle")
              .attr("cx", (width - 300) / 3)
              .attr("cy", 540)
              .attr("r", 15)
              .attr("fill", "#36639c");
      var circle_10 = svg.append("circle")
              .attr("cx", (width - 300) / 3 * 2)
              .attr("cy", 540)
              .attr("r", 15)
              .attr("fill", "#36639c")
              .style("border", "solid 1px #919191");*/


      /**添加文本框 边框
       1.设置文本数据，数据添加到  数组中，循环数组，添加图像
       */
      var text_list = [];
      var time_data = {};

      // 业务生成 时间
      if (!isEmptyCheck(row["MARK_BUSINESS_TIME"])) {
        time_data["MARK_BUSINESS_TIME"] = getDateToString(new Date(row["MARK_BUSINESS_TIME"]));
      } else {
        time_data["MARK_BUSINESS_TIME"] = "";
      }
      //入前置机时间
      if (!isEmptyCheck(row["MARK_FRONT_TIME"])) {
        time_data["MARK_FRONT_TIME"] = getDateToString(new Date(row["MARK_FRONT_TIME"]));
      } else {
        time_data["MARK_FRONT_TIME"] = "";
      }
      //入共享交换
      if (!isEmptyCheck(row["MARK_UPDATE_TIME"])) {
        time_data["MARK_UPDATE_TIME"] = getDateToString(new Date(row["MARK_UPDATE_TIME"]));
      } else {
        time_data["MARK_UPDATE_TIME"] = "";
      }
      //平台清洗
      if (!isEmptyCheck(row["MARK_UPDATE_TIME"])) {
        var curTime = new Date(json_rows["MARK_UPDATE_TIME"]);
        var addHour = curTime.setHours(curTime.getHours() + 1);
        time_data["QX_INSERTTIME"] = getDateToString(new Date(addHour));
      } else {
        time_data["QX_INSERTTIME"] = "";
      }
      //平台质检
      if (!isEmptyCheck(row["MARK_UPDATE_TIME"])) {
        var curTime = new Date(json_rows["MARK_UPDATE_TIME"]);
        var addHour = curTime.setHours(curTime.getHours() + 1);
        time_data["ZJ_INSERTTIME"] = getDateToString(new Date(addHour));
      } else {
        time_data["ZJ_INSERTTIME"] = "";
      }

      //入核心库
      if (!isEmptyCheck(row["MARK_UPDATE_TIME"]) && !isEmptyCheck(row["MARK_RKBS"])) {
        if(row["MARK_RKBS"].slice(0,1) === '1'){
          var curTime1 = new Date(json_rows["MARK_UPDATE_TIME"]);
          var addHour1 = curTime.setHours(curTime1.getHours() + 2);
          time_data["ZWXX_INSERT_TIME"] = getDateToString(new Date(addHour1));
        }else{
          time_data["ZWXX_INSERT_TIME"] = "";
        }
      } else {
        time_data["ZWXX_INSERT_TIME"] = "";
      }
      //平台标签
      // if (!isEmptyCheck(row["ZWXX_INSERT_TIME"])) {
      //   time_data["ZWXX_INSERT_TIME"] = getDateToString(new Date(row["ZWXX_INSERT_TIME"]));
      // } else {
      //   time_data["ZWXX_INSERT_TIME"] = "";
      // }
      //入市信用
      if (!isEmptyCheck(row["MARK_EXCHANGE_TIME_SXY"])) {
        time_data["EXCHANGE_TIME_SXY"] = getDateToString(new Date(row["MARK_EXCHANGE_TIME_SXY"]));
      } else {
        time_data["EXCHANGE_TIME_SXY"] = "";
      }

      //市信用完成时间
      if (!isEmptyCheck(row["MARK_FINISH_TIME_SXY"])) {
        time_data["FINISH_TIME_SXY"] = getDateToString(new Date(row["MARK_FINISH_TIME_SXY"]));
      } else {
        time_data["FINISH_TIME_SXY"] = "";
      }

      //入达梦时间
      if (!isEmptyCheck(row["MARK_UPDATE_TIME"]) && !isEmptyCheck(row["MARK_RKBS"])) {
        if(row["MARK_RKBS"].slice(2,3) === '1'){
          var curTime2 = new Date(json_rows["MARK_UPDATE_TIME"]);
          var addHour2 = curTime.setHours(curTime2.getHours() + 2);
          time_data["DM_EXCHANGE_TIME"] = getDateToString(new Date(addHour2));
        }else{
          time_data["DM_EXCHANGE_TIME"] = "";
        }
      } else {
        time_data["DM_EXCHANGE_TIME"] = "";
      }
      if (!isEmptyCheck(row["MARK_FINISH_TIME_DM"])) {
        time_data["FINISH_TIME_DM"] = getDateToString(new Date(row["MARK_FINISH_TIME_DM"]));
      } else {
        time_data["FINISH_TIME_DM"] = "";
      }

      //业务生成文本框  业务生成
      text_list.push({
        "path":"M 220 40 L 420 40 L 420 120 L 220 120 L 220 40",//边框
        "font": "节点：业务生成,业务时间：" + time_data["MARK_BUSINESS_TIME"] + "",//文字表述  ，号分割
        "font-size": "13",//字体大小
        //"font-family": "cursive",//字体样式
        "font-color": "#000000",//字体颜色
        "text-x": 225,//字体位置 x
        "text-y": 50//字体位置 y
      });
      //入前置机
      text_list.push({
        "path": "M 530 40 L 730 40 L 730 120 L 530 120 L 530 40",
        "font": "节点：入前置机,业务时间：" + time_data["MARK_FRONT_TIME"],
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 535,
        "text-y": 50
      });

      //入库共享
      text_list.push({
        "path": "M 840 40 L 1060 40 L 1060 120 L 840 120 L 840 40",
        "font": "节点：入库共享,业务时间：" + time_data["MARK_UPDATE_TIME"],
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 845,
        "text-y": 50
      });
      //平台清洗
      text_list.push({
        "path": "M 320 170 L 520 170 L 520 250 L 320 250 L 320 170",
        "font": "节点：平台清洗,业务时间：" + time_data["QX_INSERTTIME"],
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 325,
        "text-y": 180
      });

      //平台质检
      text_list.push({
        "path": "M 750 170 L 950 170 L 950 250 L 750 250 L 750 170",
        "font": "节点：平台质检,业务时间：" + time_data["ZJ_INSERTTIME"] + ",质检结果：成功",
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 755,
        "text-y": 175
      });
      //如核心库
      text_list.push({
        "path": "M 220 310 L 420 310 L 420 390 L 220 390 L 220 310",
        "font": "节点：入核心库,业务时间：" + time_data["ZWXX_INSERT_TIME"],
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 225,
        "text-y": 320
      });


      //平台标签
      text_list.push({
        "path": "M 530 310 L 730 310 L 730 390 L 530 390 L 530 310",
        "font": "节点：平台标签,业务时间：",
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 535,
        "text-y": 320
      });

      //数据加密
      text_list.push({
        "path": "M 840 310 L 1060 310 L 1060 390 L 840 390 L 840 310",
        "font": "节点：数据加密,业务时间：",
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 845,
        "text-y": 320
      });

      //入大数据中心
      text_list.push({
        "path": "M 220 570 L 420 570 L 420 650 L 220 650 L 220 570",
        "font": "节点：入市信用,业务时间：" + time_data["EXCHANGE_TIME_SXY"],
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 225,
        "text-y": 570
      });
      //大数据中心获取时间
      text_list.push({
        "path": "M 530 570 L 730 570 L 730 650 L 530 650 L 530 570",
        "font": "节点：市信用获取,业务时间：" + time_data["FINISH_TIME_SXY"],
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 535,
        "text-y": 575
      });


      //入市信用
      text_list.push({
        "path": "M 220 440 L 420 440 L 420 520 L 220 520 L 220 440",
        "font": "节点：入大数据中心,业务时间：" + time_data["DM_EXCHANGE_TIME"],
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 225,
        "text-y": 445
      });
      //市信用完成时间
      text_list.push({
        "path": "M 530 440 L 730 440 L 730 520 L 530 520 L 530 440",
        "font": "节点：大数据中心获取,业务时间：" + time_data["FINISH_TIME_DM"],
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 535,
        "text-y": 445
      });


      //入大数据中心
      text_list.push({
        "path": "M 220 700 L 420 700 L 420 780 L 220 780 L 220 700",
        "font": "节点：入档案中心,业务时间：",
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 225,
        "text-y": 705
      });
      //大数据中心获取时间
      text_list.push({
        "path": "M 530 700 L 730 700 L 730 780 L 530 780 L 530 700",
        "font": "节点：档案中心获取,业务时间：",
        "font-size": "13",
        //"font-family": "cursive",
        "font-color": "#000000",
        "text-x": 535,
        "text-y": 705
      });


      for(var i = 0 ; i < text_list.length;i++){
        g1.append("path")
          .attr("d", text_list[i]["path"])
          .attr("stroke", "#919191")
          .attr("stroke-width", "1")
          .attr("fill", "none");

        //设置系统文本
        var text1 = svg.append("text")
          .attr("x", text_list[i]["text-x"])
          .attr("y", text_list[i]["text-y"])
          .attr('stroke', text_list[i]["font-color"])
          .attr("font-family", text_list[i]["font-family"])
          .attr("font-size", text_list[i]["font-size"]);

        var str = text_list[i]["font"];
        var strs = str.split(",");
        text1.selectAll("tspan")
          .data(strs)
          .enter()
          .append("tspan")
          .attr("x", text1.attr("x"))
          .attr("dy", "1.7em")
          .text(function (d) {
            return d;
          });
      }
    }
    function rowClick (row){
      console.log('拿到的row',row)
      d3.select("#flow_img").selectAll('*').remove();
      c(row)
    }
    function clickOperationBtn(btn) {
      if (btn.type ==='详情'){
        getLifeCycleDetailDetailTableHeader(props.detailCurrentOpObj.TABLE_NAME).then(res => {
          try {
            tableHeader.value = dataLifeCycleDetailDetailTableHeader.concat(res.msg[0].Rows.map(i =>({
              ...i,
              prop:i.COLUMN_NAME,
              label:i.COLUMN_NAME,
            })))
          }
          catch {

          }

        })
      }
    }

    const tableControlBtns = ref([
      // {
      //   id:'c9af72ac-bab5-48a4-b119-a9b82ac053a7',
      //   type:'元数据查询',
      //   className:'glyphicon glyphicon-credit-card'
      // },
      {
        id:'ff55c172-2676-4379-afe0-b6b181b08767',
        type:'详情',
        className:'glyphicon glyphicon-list-alt'
      }
    ])
    function getTableData() {
      getLifeCycleDetailDetailTableData({
        PAGEINDEX:pageIndex.value,
        PAGESIZE:pageSize.value,
        sign:props.detailCurrentOpObj.prop.prop,
        time:props.detailCurrentOpObj.RKSJ,
        tablename:props.detailCurrentOpObj.TABLE_NAME,
      }).then(res => {
        tableData.value = res.msg[0].Rows||[]
        totalCount.value = res.msg[0].TotalRowCount
      })
    }
    const {pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl}  = usePagination(getTableData)

    onBeforeMount(() => {
      bradeArr.value = [
        {name:'数据同步治理监控 '},
        {name:'数据全生命周期监控详情'},
      ].concat([
        {name:props.detailCurrentOpObj.prop.label},
      ])
    })

    const tableHeader = ref([...dataLifeCycleDetailDetailTableHeader])
    const bradeArr = ref([

    ])
    return {
      bradeArr,
      tableHeader,
      tableControlBtns,
      pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl,
      clickOperationBtn,
      rowClick
    }
  }
}
</script>

<style scoped lang="scss">
.my-detail-main{
  margin-top: 20px;
}
</style>
