<template>
    <div class="tdjy">
      <p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的招标项目，未公开的不含在内</p>
      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
      <div v-if="!isSkeleton" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国公招项目统计</span>
          </div>
        </div>
        <div class="content_box">
          <div class="box-left" style="width: 60%;">
            <div id="echarts1" style="height: 300px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="xmtjList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="280"
              :summary-method="getSummaries"
              fit
              highlight-current-row
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="type" label="年份"  :formatter="formatStatus"/>
              <el-table-column prop="count" label="招标数量" align="right" :formatter="formatStatus" sortable>
                <template slot-scope="scope">{{ scope.row.count }}个</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div v-if="!isSkeleton" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国各地区招标统计TOP10</span>
            <el-select @change="iptAdaptive(inputID1,true,1)" style="margin-right: 8px" :class="[`select-adaptive-${inputID1}`]" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
            </el-select>
            <el-select v-model="years1" @change="iptAdaptive(inputID2,true,1)" multiple collapse-tags filterable :class="[`select-adaptive-${inputID2}`]" class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <div class="content_box" v-if="topList.length > 0 && !isSkeleton">
          <div class="box-left" style="width: 60%;">
            <div id="echarts2" style="height: 300px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="topList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="280"
              :summary-method="getSummaries"
              fit
              highlight-current-row
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="province" label="地区" :formatter="formatStatus"/>
              <el-table-column prop="count" label="招标数量" align="right" :formatter="formatStatus" sortable>
                <template slot-scope="scope">{{ scope.row.count }}个</template>
              </el-table-column>
              <el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="100">
                <template slot-scope="scope">{{ scope.row.rate }}%</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="empty" v-if="topList.length === 0 && !isSkeleton">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
      <div v-if="!isSkeleton" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国各年度招标月份统计</span>
            <el-select v-model="years2" @change="iptAdaptive(inputID3,'',2)" :class="[`select-adaptive-${inputID3}`]" style="width: 80px;" collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <div class="content_box" v-if="zbyfList.length > 0 && !isSkeleton">
          <div class="box-left" style="width: 60%;">
            <div id="echarts3" style="height: 300px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="zbyfList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="290"
              :summary-method="getSummaries"
              fit
              highlight-current-row
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="label" label="时间"  :formatter="formatStatus"/>
              <el-table-column prop="count" label="招标数量" align="right" :formatter="formatStatus" sortable>
                <template slot-scope="scope">{{ scope.row.count }}个</template>
              </el-table-column>
              <el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="100">
                <template slot-scope="scope">{{ scope.row.rate }}%</template>
              </el-table-column>
            </el-table>
          </div>

        </div>
        <div class="empty" v-if="zbyfList.length === 0 && !isSkeleton">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  import dataRegion from '@/assets/json/dataRegion'
  import { countNewsBidByYear,countNewsBidByProvince,countNewsBidByMonth } from '@/api/macro/macro'
  import skeleton from '../../component/skeleton'
  import { v4 } from "uuid";
  export default {
    name: 'NationalEconomies',
    components: {
      skeleton
    },
    data() {
      return {
        myChart1:'',
        myChart2:'',
        myChart3:'',
        myChart4:'',
        addressList:[],
        address:[],
        years1:[2023],
        years2:2023,
        yearOptions:[],
        xmtjList:[],
        topList:[],
        zbyfList:[],
        isSkeleton:true,
        gyflState:true,
        tdytState:true,
        inputID1:this.getUid(),
        inputID2:this.getUid(),
        inputID3:this.getUid(),
      }
    },
    created() {
      this.getPlaceholder()
      this.dataRegion()
      this.yearsData()
      this.getcountNewsBidByYear()
    },
    mounted() {
    },
    beforeDestroy(){

    },
    methods: {
      getcountNewsBidByYear(){
        this.isSkeleton=true;
        countNewsBidByYear().then(res => {
          this.isSkeleton=false;
          this.xmtjList=res.data.provinceDate;
          this.$nextTick(() => {
            this.initChart1(res.data.provinceDate)
          })
          this.getCountNewsBidByProvince()
          this.getCountNewsBidByMonth()
        })
      },
      getCountNewsBidByProvince(){
        let params={
          yearStr:this.years1.join(",")
        }
        if(this.address.length > 0){
          params.provinceId=this.address.join(",")
        }
        // this.isSkeleton = true
        countNewsBidByProvince(params).then(res => {
          // this.isSkeleton = false
          this.topList=res.data.provinceDate;
          if(res.data.provinceDate.length > 0){
            this.$nextTick(() => {
              this.initChart2(res.data.provinceDate)
            })
          }
        })
      },
      getCountNewsBidByMonth(){
        countNewsBidByMonth({yearStr:this.years2}).then(res => {
          this.zbyfList=res.data.monthDate;
          if(res.data.monthDate.length > 0){
            this.$nextTick(() => {
              this.initChart3(res.data.monthDate)
            })
          }
        })
      },
      initChart1(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts1"))
          let seriesData=[]
          let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
          // let typeNameList=data[0].typeList.map(item => item.type);
          let typeNameList=[ '房建工程', '市政工程', '水利工程', '机电工程', '公路工程', '电力工程', '石油化工工程', '冶金工程', '矿山工程', '通信工程', '铁路工程', '港口与航道工程','其他','空白'];
          let item={}
          for(var i=0; i<data.length; i++){
            for(var j=0; j<data[i].typeList.length; j++){
              item[typeNameList[j]] = [];
            }
          }
          for(var i=0; i<data.length; i++) {
            for (var j = 0; j < data[i].typeList.length; j++) {
              if(data[i].typeList[j].type === typeNameList[0]){
                item[typeNameList[0]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[1]){
                item[typeNameList[1]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[2]){
                item[typeNameList[2]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[3]){
                item[typeNameList[3]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[4]){
                item[typeNameList[4]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[5]){
                item[typeNameList[5]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[6]){
                item[typeNameList[6]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[7]){
                item[typeNameList[7]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[8]){
                item[typeNameList[8]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[9]){
                item[typeNameList[9]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[10]){
                item[typeNameList[10]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[11]){
                item[typeNameList[11]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[12]){
                item[typeNameList[12]].push(data[i].typeList[j].count)
              }
            }
          }
          for(var i=0; i<typeNameList.length; i++) {
            seriesData.push({
              name:typeNameList[i],
              smooth: false, //平滑
              type:"line",
              symbolSize: 6, //折线拐点大小
              itemStyle: {
                normal: {
                  color: color[i], //图例颜色
                  borderWidth: 4,
                  borderColor: color[i],
                  lineStyle: { color: color[i], width: 2 }
                }
              },
              data:item[typeNameList[i]],
            });
          }
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                label: {
                  backgroundColor: '#FFFFFF'
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                interval: 0
              },
              data: data.map(item => item.type),
            },
            yAxis: {
              type: 'value',
            },
            grid: {
              top:30,
              left:80,
              right:40,
              bottom:30,
            },
            color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
            series: seriesData
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart2(data) {
        this.$nextTick(() => {
          // console.log(typeList)
          let myChart = echarts.init(document.getElementById("echarts2"))
          let seriesData=[]
          let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
          // let typeNameList=data[0].typeList.map(item => item.type);
          let typeNameList=[ '房建工程', '市政工程', '水利工程', '机电工程', '公路工程', '电力工程', '石油化工工程', '冶金工程', '矿山工程', '通信工程', '铁路工程', '港口与航道工程','其他','空白'];
          let item={}
          for(var i=0; i<data.length; i++){
            for(var j=0; j<data[i].typeList.length; j++){
              item[typeNameList[j]] = [];
            }
          }
          for(var i=0; i<data.length; i++) {
            for (var j = 0; j < data[i].typeList.length; j++) {
              if(data[i].typeList[j].type === typeNameList[0]){
                item[typeNameList[0]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[1]){
                item[typeNameList[1]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[2]){
                item[typeNameList[2]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[3]){
                item[typeNameList[3]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[4]){
                item[typeNameList[4]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[5]){
                item[typeNameList[5]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[6]){
                item[typeNameList[6]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[7]){
                item[typeNameList[7]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[8]){
                item[typeNameList[8]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[9]){
                item[typeNameList[9]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[10]){
                item[typeNameList[10]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[11]){
                item[typeNameList[11]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[12]){
                item[typeNameList[12]].push(data[i].typeList[j].count)
              }
            }
          }
          for(var i=0; i<typeNameList.length; i++) {
            seriesData.push({
              name:typeNameList[i],
              smooth: false, //平滑
              type:"line",
              symbolSize: 6, //折线拐点大小
              itemStyle: {
                normal: {
                  color: color[i], //图例颜色
                  borderWidth: 4,
                  borderColor: color[i],
                  lineStyle: { color: color[i], width: 2 }
                }
              },
              data:item[typeNameList[i]],
            });
          }
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                label: {
                  backgroundColor: '#FFFFFF'
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                interval: 0
              },
              data: data.map(item => item.province),
            },
            yAxis: {
              type: 'value',
            },
            grid: {
              top:30,
              left:80,
              right:40,
              bottom:30,
            },
            color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
            series: seriesData
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart3(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts3"))
          let seriesData=[]
          let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
          let typeNameList=[ '房建工程', '市政工程', '水利工程', '机电工程', '公路工程', '电力工程', '石油化工工程', '冶金工程', '矿山工程', '通信工程', '铁路工程', '港口与航道工程','其他','空白'];
          // let typeNameList=data[0].typeList.map(item => item.type);
          let item={}
          for(var i=0; i<data.length; i++){
            for(var j=0; j<data[i].typeList.length; j++){
              item[typeNameList[j]] = [];
            }
          }
          for(var i=0; i<data.length; i++) {
            for (var j = 0; j < data[i].typeList.length; j++) {
              if(data[i].typeList[j].type === typeNameList[0]){
                item[typeNameList[0]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[1]){
                item[typeNameList[1]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[2]){
                item[typeNameList[2]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[3]){
                item[typeNameList[3]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[4]){
                item[typeNameList[4]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[5]){
                item[typeNameList[5]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[6]){
                item[typeNameList[6]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[7]){
                item[typeNameList[7]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[8]){
                item[typeNameList[8]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[9]){
                item[typeNameList[9]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[10]){
                item[typeNameList[10]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[11]){
                item[typeNameList[11]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[12]){
                item[typeNameList[12]].push(data[i].typeList[j].count)
              }
            }
          }
          for(var i=0; i<typeNameList.length; i++) {
            seriesData.push({
              name:typeNameList[i],
              smooth: false, //平滑
              type:"line",
              symbolSize: 6, //折线拐点大小
              itemStyle: {
                normal: {
                  color: color[i], //图例颜色
                  borderWidth: 4,
                  borderColor: color[i],
                  lineStyle: { color: color[i], width: 2 }
                }
              },
              data:item[typeNameList[i]],
            });
          }
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                label: {
                  backgroundColor: '#FFFFFF'
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                // show: true,
                // interval: 0
              },
              data: data.map(item => item.label),
            },
            yAxis: {
              type: 'value',
            },
            grid: {
              top:30,
              left:80,
              right:40,
              bottom:30,
            },
            color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
            series: seriesData
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      //地区
      async dataRegion() {
        var str = [];
        for (let x = 0; x < 3; x++) {
          for (let i = 0; i < dataRegion.length; i++) {
            if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
              str.push({
                'id': dataRegion[i].id,
                "label": dataRegion[i].regionName,
                "short": dataRegion[i].short,
                "value": dataRegion[i].parentId,
                "children": []
              });
            }
          }
        }
        this.addressList = str;
      },
      handleYears(key){
        switch (key) {
          case 1:
            this.getCountNewsBidByProvince()
            break;
          case 2:
            this.getCountNewsBidByMonth()
            break;
        }
      },
      handleSearch(){
        // console.log(this.address)
      },
      yearsData(){
        let mydate=new Date();
        let Year = mydate.getFullYear();
        let startyear=mydate.getFullYear()-4;
        let Years=[];
        for(var i=startyear;i<=Year;i++){
          Years.push(i);
        }
        this.yearOptions=Years.reverse()
      },
      formatStatus: function(row, column, cellValue) {
        return cellValue? cellValue : '-'
      },
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index === 1) {
            sums[index] = '-';
            return;
          }
          if (index === 3) {
            sums[index] = '100%';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return Number(prev) + Number(curr)
            } else {
              return prev;
            }
          }, 0);

          if (index === 2) {
            sums[index] = Number(sums[index]).toFixed(0)+'个';
            return;
          }
        });
        return sums;
      },
      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 + 50;
              textContainer.remove();
              dom.style.setProperty("width", `${containerWidth}px`);
            });
          }
        } catch (error) {

        }
      },
      iptAdaptive(uid, multiple = false, key) {
        multiple ? this.multipleAdaptiveHandle(uid,key) : this.iptAdaptiveHandle(uid,key);
      },
      getUid() {
        return v4();
      },
      // 多选处理
      async multipleAdaptiveHandle(uid,key) {
        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.handleYears(key);
              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 + 30;
            textContainer.remove();
            dom.style.setProperty("width", `${containerWidth}px`);
            this.handleYears(key);
          }

        } catch (error) {
          console.log(error);
        }
      },
      // 单选处理
      async iptAdaptiveHandle(uid,key) {
        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.handleYears(key);
        } catch (error) {

        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .land_date_picker{
    position: absolute!important;
    visibility: hidden;
    left: -645px;
    top: 145px;
  }
  ::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
    display: none;
  }
  .color_text{
    background: #F3F4F5;
    border-radius: 4px;
    color: #0081FF;
  }
  .tdjy{
    @import "@/assets/styles/search-common.scss";
    .text_p{
      color: #999999;
      font-size: 14px;
      margin: 0;
    }
    .empty{
      margin: 0 auto;
      height: 300px;
      text-align: center;
      .img{
        width: 108px;
        height: 108px;
        margin-bottom: 24px;
        margin-top: 70px;
      }
      .p1{
        color: #333333;
        font-size: 16px;
      }
    }
    .query-params{
      .common-title{
        margin-right: 24px;
      }
      ::v-deep .form-content-width{
        width: 95px;
        .el-select__input{
          width: 10px !important;
          max-width: 10px !important;
          margin-left:0;
        }
        .el-input{
          .el-input__inner{
            border: 0;
          }
        }
        .is-focus{
          .el-input__inner{
            background: #F4F6F9;
          }
        }
        .el-select__tags {
          flex-wrap: inherit;
          .el-tag{
            /*max-width: 130px;*/
          }
        }
      }
      ::v-deep .el-cascader{
        width: 220px;
        .el-cascader__tags{
          flex-wrap: inherit;
          .el-tag{
            max-width: 70px;
          }
        }
      }
    }
    .td_content{
      background: #ffffff;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px 52px 16px 16px;
    }
    .content_box{
      display: flex;
      justify-content: space-between;
      .box-left{
        width: 60%;
      }
      .box-right{
        width: 33%;
        float: right;
        ::v-deep .el-table{
          .sort-caret.ascending{
            border-bottom-color: rgba(0,129,255,0.5);
          }
          .ascending .sort-caret.ascending{
            border-bottom-color: #0081FF;
          }
          .sort-caret.descending{
            border-top-color: rgba(0,129,255,0.5);
          }
          .descending .sort-caret.descending{
            border-top-color: #0081FF;
          }

          .el-table__header-wrapper{
            background: #F0F3FA;
            th{
              background: #F0F3FA;
              /*text-align: left;*/
            }
          }
          .el-table__footer-wrapper{
            background: #F0F3FA;
          }
          th {
            font-size: 13px !important;
            font-weight: 400 !important;
          }
          .cell {
            padding-right: 12px !important;
            padding-left: 12px !important;
            line-height: 18px;
          }
          .el-table__fixed-header-wrapper{
            th{
              background: #F0F3FA;
            }
          }
          td.el-table__cell{
            border-bottom: 0;
          }
          tr{
            &.current-row>td{
              background-color: initial;
            }
            &:nth-child(2n) {
              background: #F8FBFF;
            }
          }
          .el-table__cell{
            height: 40px;
            padding: 0;
            line-height: 40px;
          }
          .el-table__body tr:hover > td.el-table__cell{
            background: #DCEBFF;
          }
          ::-webkit-scrollbar-track-piece {
            //滚动条凹槽的颜色，还可以设置边框属性
            background-color: #F3F4F5;
            height: 16px;
            padding: 0 4px;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F3F4F5;
            border-radius: 6px;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            height: 8px;
            margin: 0 4px;
            background: rgba(98,110,126,0.2);
            border: 4px solid rgba(98,110,126,0.2);;
            &:hover{
              background: #566380;
            }
          }
          .has-gutter{
            tr{
              th:nth-last-child(2){
                border-right:0;
              }
              td:nth-last-child(2){
                border-right:0;
              }
            }
          }
          .el-table__cell.gutter{
            background: #F0F3FA;
          }
          .el-table__row{
            td:last-child{
              .cell{
                padding-right: 12px !important;
              }
            }
          }
        }
      }
    }

    ::v-deep .el-input--medium{
      .el-input__icon{
        line-height: 32px;
      }
    }
  }
</style>
