<template>
  <div class="chartsCut">
    <div v-show="$store.state.transdtr&&$store.state.transBefore">
      <div
        v-for="(item,index) in listImg"
        :key="index"
        class="chart_left"
        @click="cutChartsTap(index)"
      >
        <img :src="item.url" alt />
      </div>
    </div>
    <div class="chart_right">
      <div
        class="chart_right_area"
        v-if="$route.query.type==='area'&&!$store.state.areaDimensionState"
      >
        {{stateChangeSDF?'指标：':'地区：'}}
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
          style="width:12rem"
          size="small"
        ></el-cascader>
      </div>
      <!-- 根据时间筛选 -->
      <div class="chart_right_time" v-if="!$store.state.areaDimensionState">
        时间：
        <div class="chart_right_cont">
          <PullDownComponents
            ref="childPullDownComponents"
            :pullDowmData="cityDataTime"
            :initDefaultSelect="cityDefaultNameTime"
            @callBackVal="callBackVal"
            @callBackValOpen="callBackValOpen"
            @callBackValClose="callBackValClose"
            v-if="cityDefaultNameTime"
          ></PullDownComponents>
          <div class="bottom" v-if="showInputStu" @click.stop="showKuangCat">
            <input
              type="text"
              placeholder="请输入时间"
              v-model="timeUsrr"
              @focus="focusShow"
              @blur="focusShow"
            />
            <span @click="trueShuru()">确认</span>
            <div class="explainTrue" v-if="kuangState">
              <br />
              <span style="color:#67bfdc">列：输入格式如下</span>
              <br />月：201901,201902
              <br />
              <br />季：2019A,2019B,
              <br />
              <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2019C,2019D
              <br />
              <br />年：2019,2018
              <br />
              <br />其他：2018-2019
              <br />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart_right" v-if="$route.query.type==='area'&&$store.state.areaDimensionState">
      {{leftLabel[$store.state.noSelecttDimension]}}：
      <el-cascader
        v-model="valueDimension"
        :options="optionsDimension"
        @change="handleChangeDimension"
        style="width:12rem"
        size="small"
      ></el-cascader>
    </div>
  </div>
</template>
<script>
// 引入下拉组件
import PullDownComponents from '@/components/pullDownComponents/PullDownComponents.vue'
export default {
  name: 'chartsCut',
  props: {
    // 渲染图表所需数据
    defaultDataRight: {
      type: Object,
      required: false
    },
    stateDataGetVal: {
      type: Boolean,
      required: true
    },
    labelAreaState: {
      type: Boolean,
      required: false
    },
    // 地区数据维度转换状态
    areaDimensionStateS: {
      type: Boolean,
      required: true
    },
    // 指标地区状态
    labelAreaStateks: {
      type: Boolean,
      required: true
    },
    // 加载状态
    loading: {
      type: Boolean,
      required: true
    }
  },
  components: {
    PullDownComponents: PullDownComponents
  },
  data () {
    return {
      // 提示语logo
      explainLogo: require('../../../static/nav/xl.png'),
      // 控制下拉框显示隐藏
      isHideProp: true,
      // 栏目数据   结构不可变
      cityDataArea: [
        { 'id': '110000', 'name': '-序列-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '居民消费价格', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '入境人数', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '工业', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
      ],
      cityDataAreas: [
        { 'id': '110000', 'name': '-序列-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '居民消费价格', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '入境人数', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        { 'id': '110000', 'name': '工业', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
      ],

      // 栏目级数
      jishuArea: 1,
      // 默认显示栏目
      cityDefaultNameArea: '居民价格',
      // 筛选数据
      selectpatternArea: [
        {
          field: 'userProvinceId',
          placeholder: '居民消费价'
        }
      ],
      // 栏目数据   结构不可变
      cityDataTime: null,
      // 栏目级数
      jishuTime: 1,
      // 默认显示栏目
      cityDefaultNameTime: null,
      // 筛选数据
      selectpatternTime: null,
      listImg: [
        {
          url: require('../../../static/chartsCut/list.png'),
          selectStatic: true
        },
        {
          url: require('../../../static/chartsCut/hengzhuangtu.png'),
          selectStatic: false
        },
        {
          url: require('../../../static/chartsCut/shuzhuangtu.png'),
          selectStatic: false
        },
        {
          url: require('../../../static/chartsCut/bingtu.png'),
          selectStatic: false
        },
        {
          url: require('../../../static/chartsCut/zhexiantu.png'),
          selectStatic: false
        }
      ],
      // 按时间查询
      timeUsrr: '',
      // 时间筛选输入框是否显示
      showInputStu: false,
      // 控制下拉框的显示隐藏
      stateRTY: true,
      // 指标地区转换状态 true为指标 false为地区
      stateChangeSDF: true,
      // 提示框状态
      kuangState: false,
      value: [],
      options: [
        {
          value: 'zhinan',
          label: '指南'
        }
      ],
      leftLabel: {
        'sj': '时间',
        'zb': '指标',
        'dq': '地区'
      },
      valueDimension: [],
      optionsDimension: [
        {
          value: '',
          label: ''
        }
      ]
    }
  },
  watch: {
    // 监听左侧菜单的数据变化
    defaultDataRight: {
      handler (val) {
        // console.log(val, '左侧数据变化chartsCut')
        if (val) {
          // 初始化公共数据
          if (this.$route.query.type !== 'area') {
            this.searchSelect(this.$route.query.type)
          } else {
            this.searchSelect(val.f)
          }
        }
      },
      immediate: true,
      deep: true
    },
    // 监听数据渲染变化
    stateDataGetVal (newVal, oldVal) {
      console.log(this.$store.state.transBefore, '啦啦啦')
      if (!newVal) {
        // this.showLabelArea()
      }
    },
    labelAreaState (newVal, oldVal) {
      console.log(newVal, 'kkkkkkkkkkkkkkkkkkkkkkk120')
      if (newVal && !this.$store.state.advancedSearchState) {
        console.log('kkkkkkkkkkkkkkkkkkkkkkk120')
        // this.showLabelArea()
      }
    },
    labelAreaStateks (newVal, oldVal) {
      if (newVal) {
        this.stateChangeSDF = !this.stateChangeSDF
        // this.showLabelArea()
        if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
          this.$store.state.SelecttDimension.col = 'zb'
        } else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
          this.$store.state.SelecttDimension.col = 'dq'
        }
        console.log(this.$store.state.transBefore, 'bbbbbbbbbbbbbbbbbbb')
        this.$nextTick(() => {
          this.$parent.tellChangeFan(false)
        })
      }
    },
    // 监听地区维度转换数据变换
    areaDimensionStateS (newVal) {
      if (newVal) {
        if (this.$store.state.noSelecttDimension === 'sj') {
          this.optionsDimension = this.$store.state.dataArealabelTime.timeArr.map((item, index) => {
            return {
              value: item,
              label: item
            }
          })
        } else if (this.$store.state.noSelecttDimension === 'dq') {
          this.optionsDimension = this.$store.state.dataArealabelTime.areaArr.map((item, index) => {
            return {
              value: item,
              label: item
            }
          })
        } else if (this.$store.state.noSelecttDimension === 'zb') {
          this.optionsDimension = this.$store.state.dataArealabelTime.quotaArr.map((item, index) => {
            return {
              value: item,
              label: item
            }
          })
        }
        this.valueDimension = this.$store.newSelectChangeData
        // 告诉父组件数据渲染完
        this.$emit('emmitStateAd', false)
      }
      console.log(this.valueDimension, 'this.valueDimension')
    }
  },
  methods: {
    // 地区维度转换筛选
    handleChangeDimension () {
      console.log(this.valueDimension, 'this.valueDimension')
      if (this.valueDimension) {
        this.$parent.changeDimensionTrueChangeArea(this.valueDimension[0])
      }
    },
    // 点击切换图表
    cutChartsTap (ind) {
      // console.log(ind)
      this.$emit('cutStatic', ind)
    },
    // 被选中时触发
    choiceCallerArea (resu) {
      console.log(resu[2], '5+656565')
      // this.$emit('statertfResu', resu[2])
    },
    // 被选中时触发
    choiceCallerTime (resu) {
      console.log(resu, '66666')
      // console.log(this.cityDefaultName)
      // 改变选中值索引
      if (this.$store.state.selectData !== undefined) {
        console.log(this.$store.state.selectData, '被选中的值')
        console.log(resu[2], '被选中的值2')

        this.$store.state.selectData = resu[2].indexID
        this.showInputStu = false
        this.$emit('comTime', resu[2])
      }
      // 将值传给父组件

      // this.showInputStu = !this.showInputStu
    },
    changesInputStu () {
      console.log(12569)
      this.showInputStu = !this.showInputStu
    },
    // 点击非下拉框内容时改变下拉状态（下拉怡然显示）
    showKuangCat () {
      console.log(1250)
      this.isHideProp = false
      this.stateRTY = false
    },
    // 查询下拉筛选条件
    searchSelect (type) {
      this.$axios({
        method: 'GET',
        url: 'data/data/quick',
        params: {
          type: type
        }
      }).then(res => {
        console.log(res, '下拉筛选条件')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.cityDataTime = Object.keys(res.data.data.list).map((item, index) => {
            return { name: Object.values(res.data.data.list)[index], extendData: item }
          })
          // 默认选中第一个
          this.cityDefaultNameTime = { name: this.cityDataTime[0].name, activeIndex: 0 }
          this.$store.state.selectData = this.cityDataTime[0].extendData
          // 告诉父组件我获取到了
          this.$emit('stateTell', true)
          if (!this.$route.query.type !== 'area') {
            this.$emit('update:loading', false)
          }
          // 调用父组件的chuFachildChartCont方法渲染
          // this.$parent.chuFachildChartCont()
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    stateInfor (val) {
      if (val) {
        this.stateRTY = val
      } else {
        this.showInputStu = val
      }
    },
    // 指标地区数据渲染
    showLabelArea () {
      console.log(this.stateChangeSDF, this.$store.state.dataArealabelTime, '走走走')
      if (this.$store.state.classifyIdDataState) {
        if (!this.$store.state.advancedSearchState) { // 非高级查询
          if (this.stateChangeSDF) { // 指标
            this.options = this.$store.state.dataArealabelTime.quotaArr.map((item, index) => {
              return {
                value: item,
                label: item
              }
            })
            this.options.unshift({
              value: '序列',
              label: '序列'
            })
            this.value = [this.options[1].value]
            console.log(this.value, 'this.options')
            // 告诉父组件已经完成任务
            this.$emit('stateDFGHJ', true)
            this.$emit('statertfResu', this.value[0])
          } else { // 地区
            this.options = this.$store.state.dataArealabelTime.areaArr.map((item, index) => {
              return {
                value: item,
                label: item
              }
            })
            this.options.unshift({
              value: '序列',
              label: '序列'
            })
            this.value = [this.options[1].value]
            console.log(this.value, 'this.options')
            // 告诉父组件已经完成任务
            this.$emit('stateDFGHJ', true)
            this.$emit('statertfResu', this.value[0])
          }
        } else { // 高级查询
          if (this.$route.query.type !== 'area') {
            this.$emit('stateDFGHJ', true)
          } else {
            if (this.stateChangeSDF) { // 指标
              this.options = this.$store.state.dataArealabelTime.quotaArr.map((item, index) => {
                return {
                  value: item,
                  label: item
                }
              })
              this.options.unshift({
                value: '序列',
                label: '序列'
              })
              this.value = [this.options[1].value]
              console.log(this.value, 'this.options')
              // 告诉父组件已经完成任务
              this.$emit('stateDFGHJ', true)
              this.$emit('statertfResu', this.value[0])
            } else { // 地区
              this.options = this.$store.state.dataArealabelTime.areaArr.map((item, index) => {
                return {
                  value: item,
                  label: item
                }
              })
              this.options.unshift({
                value: '序列',
                label: '序列'
              })
              this.value = [this.options[1].value]
              console.log(this.value, 'this.options')
              // 告诉父组件已经完成任务
              this.$emit('stateDFGHJ', true)
              this.$emit('statertfResu', this.value[0])
            }
          }
        }
      }
    },
    // 聚焦显示提示的搜索框
    focusShow () {
      this.kuangState = !this.kuangState
    },
    // 确定输入
    trueShuru () {
      if (this.timeUsrr !== '') {
        switch (this.$route.query.type) {
          case 'monthly':
            if (!(this.timeUsrr.length === 6 || this.timeUsrr.length === 13)) {
              console.log(this.timeUsrr.length, true)
              this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                confirmButtonText: '确定'
              })
              return
            }
            // 对于1个输入查询的验证
            if (this.timeUsrr.length === 6) {
              if (!(/^[0-9]+$/.test(this.timeUsrr) && this.timeUsrr[this.timeUsrr.length - 2] < 2)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              } else if (this.timeUsrr[this.timeUsrr.length - 2] === 1 && this.timeUsrr[this.timeUsrr.length - 1] > 2) {
                console.log(9996)
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            // 对于范围输入的验证
            if (this.timeUsrr.length === 13) {
              if (!(this.timeUsrr.length === 13 && /^[0-9]+$/.test(this.timeUsrr.split('-')[0]) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1]) && this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 2] < 2 && this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 2] < 2)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              } else if ((this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 2] === 1 && this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 1] > 2) || (this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 2] === 1 && this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 1] > 2)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            this.$store.state.selectData = this.timeUsrr
            console.log(this.$store.state.selectData, '时间')
            // 调用父组件（Dataweb）中的changeBrother方法来调用ChartCont组件中的brotherFuncShowData方法
            this.$parent.changeBrother()
            this.timeUsrr = ''
            this.childFuncChangeDown()
            break
          case 'quarter':
            if (!(this.timeUsrr.length === 5 || this.timeUsrr.length === 11)) {
              this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                confirmButtonText: '确定'
              })
              return
            }
            let arr = ['A', 'B', 'C', 'D']
            // 对于一个季度的验证
            if (this.timeUsrr.length === 5) {
              if (!(/^[0-9]+$/.test(this.timeUsrr.substring(0, 4)) && arr.indexOf(this.timeUsrr[this.timeUsrr.length - 1]) !== -1)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            // 对于季度范围的验证
            if (this.timeUsrr.length === 11) {
              if (!(/^[0-9]+$/.test(this.timeUsrr.split('-')[0].substring(0, 4)) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1].substring(0, 4)) && arr.indexOf(this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 1]) !== -1 && arr.indexOf(this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 1]) !== -1)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            this.$store.state.selectData = this.timeUsrr
            this.$parent.changeBrother()
            this.timeUsrr = ''
            this.childFuncChangeDown()
            break
          case 'year':
            if (!(this.timeUsrr.length === 4 || this.timeUsrr.length === 9)) {
              this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                confirmButtonText: '确定'
              })
              return
            }
            // 对于一个时间的验证
            if (this.timeUsrr.length === 4) {
              if (!(/^[0-9]+$/.test(this.timeUsrr))) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            // 对于时间范围的验证
            if (this.timeUsrr.length === 9) {
              if (!(/^[0-9]+$/.test(this.timeUsrr.split('-')[0]) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1]))) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            this.$store.state.selectData = this.timeUsrr
            this.$parent.changeBrother()
            this.timeUsrr = ''
            this.childFuncChangeDown()
            break
          case 'area':
            let arrs = ['A', 'B', 'C', 'D']
            if (!(this.timeUsrr.length === 4 || this.timeUsrr.length === 5 || this.timeUsrr.length === 6 || this.timeUsrr.length === 9 || this.timeUsrr.length === 11 || this.timeUsrr.length === 13)) {
              console.log(this.timeUsrr.length, true)
              this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                confirmButtonText: '确定'
              })
              return
            }
            // 对于1个输入查询的验证
            if (this.timeUsrr.length === 6) {
              if (!(/^[0-9]+$/.test(this.timeUsrr) && this.timeUsrr[this.timeUsrr.length - 2] < 2)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              } else if (this.timeUsrr[this.timeUsrr.length - 2] === 1 && this.timeUsrr[this.timeUsrr.length - 1] > 2) {
                console.log(9996)
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            // 对于范围输入的验证
            if (this.timeUsrr.length === 13) {
              if (!(this.timeUsrr.length === 13 && /^[0-9]+$/.test(this.timeUsrr.split('-')[0]) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1]) && this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 2] < 2 && this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 2] < 2)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              } else if ((this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 2] === 1 && this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 1] > 2) || (this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 2] === 1 && this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 1] > 2)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            // 对于一个季度的验证
            if (this.timeUsrr.length === 5) {
              if (!(/^[0-9]+$/.test(this.timeUsrr.substring(0, 4)) && arrs.indexOf(this.timeUsrr[this.timeUsrr.length - 1]) !== -1)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            // 对于季度范围的验证
            if (this.timeUsrr.length === 11) {
              if (!(/^[0-9]+$/.test(this.timeUsrr.split('-')[0].substring(0, 4)) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1].substring(0, 4)) && arrs.indexOf(this.timeUsrr.split('-')[0][this.timeUsrr.split('-')[0].length - 1]) !== -1 && arrs.indexOf(this.timeUsrr.split('-')[1][this.timeUsrr.split('-')[1].length - 1]) !== -1)) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            // 对于一个时间的验证
            if (this.timeUsrr.length === 4) {
              if (!(/^[0-9]+$/.test(this.timeUsrr))) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            // 对于时间范围的验证
            if (this.timeUsrr.length === 9) {
              if (!(/^[0-9]+$/.test(this.timeUsrr.split('-')[0]) && /^[0-9]+$/.test(this.timeUsrr.split('-')[1]))) {
                this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
                  confirmButtonText: '确定'
                })
                return
              }
            }
            this.$store.state.selectData = this.timeUsrr
            this.$parent.changeBrother()
            this.timeUsrr = ''
            this.childFuncChangeDown()
            break
        }
      } else {
        // alert('您查询的时间格式有误，请重新输入！')
        this.$alert('您查询的时间格式有误，请重新输入！', '温馨提示', {
          confirmButtonText: '确定'
        })
      }
    },
    // 选中
    handleChange (value) {
      console.log(value)
      console.log(this.value, 'this.value')
      if (value[0] === '序列') {
        this.stateChangeSDF = !this.stateChangeSDF
        this.$store.state.newSelectDaaState = this.stateChangeSDF
        this.showLabelArea()
        if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
          this.$store.state.SelecttDimension.col = 'zb'
        } else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
          this.$store.state.SelecttDimension.col = 'dq'
        }
      } else {
        this.$emit('statertfResu', value[0])
      }
    },
    // 调用子组件方法改变下拉框的显示隐藏
    childFuncChangeDown () {
      let dataNer = JSON.parse(JSON.stringify(this.cityDataTime))
      dataNer[3] = { name: this.$store.state.selectData, extendData: this.$store.state.selectData }
      this.cityDataTime = dataNer
      console.log(this.cityDataTime, 'this.cityDataTime')
      // 默认选中最后一个
      this.cityDefaultNameTime = { name: this.cityDataTime[3].name, activeIndex: 3 }
      this.$store.state.selectData = this.cityDataTime[3].extendData
    },
    // 当前选中的时间列表
    callBackVal (res) {
      console.log(res.extendData, '开始')
      // 调用父组件的chuFachildChartCont方法渲染
      this.$store.state.selectData = res.extendData
      this.$parent.chuFachildChartCont()
      if (this.$store.state.selectData !== undefined) {
        console.log(this.$store.state.selectData, '被选中的值')
        console.log(res, '被选中的值2')
        this.$store.state.selectData = res.extendData
        this.$emit('comTime', res)
      }
    },
    callBackValOpen (res) { // 展开回调
      console.log(res, '展开')
      this.changesInputStu()
    },
    callBackValClose (res) { // 关闭回调
      console.log(res, '关闭')
      this.changesInputStu()
    },
    // 高级查询指标地区序列化
    serializedData () {
      // this.showLabelArea()
    }
  },
  mounted () {
    this.cityDataArea = this.cityDataAreas
    this.cityDataTime = this.cityDataAreas
    // this.showLabelArea()
  }
}
</script>
<style lang="scss" scoped>
.chartsCut {
  padding: 0.75rem 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  & > div:nth-child(1) {
    width: 26.875rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    // border: 1px solid red;
    & > .chart_left {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      // border: 0.0625rem solid red;
      & > img {
        height: 1.625rem;
        width: 1.625rem;
      }
      & > img:hover {
        cursor: pointer;
      }
    }
  }
  & > .chart_right {
    width: 37.5rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    // border: 0.0625rem solid red;
    font-size: 1.125rem;
    font-weight: normal;
    font-stretch: normal;
    // line-height: 22px;
    letter-spacing: 0.125rem;
    color: #333333;
    // border: 1px solid red;
    & > .chart_right_area {
      margin-right: 0.525rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    & > .chart_right_time {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > .chart_right_cont {
        position: relative;
        & > .bottom {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          width: 12.285rem;
          height: 2.25rem;
          border: 0.0625rem solid #cccccc;
          background-color: #fff;
          border-radius: 0.375rem;
          position: absolute;
          top: 430%;
          left: 0;
          right: 0;
          z-index: 1;
          & > input {
            width: 6.285rem;
          }
          & > span {
            padding: 0.375rem 0.75rem;
            background-color: #67bfdc;
            color: #fff;
            font-size: 1rem;
            letter-spacing: 0.25rem;
            border-radius: 0.375rem;
          }
          & > span:hover {
            cursor: pointer;
          }
          & > .explainTrue {
            position: absolute;
            top: 1.8rem;
            width: 18.75rem;
            height: 22.5rem;
            background-image: url("../../../static/nav/xl.png");
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
