<template>
  <div class="chartsCut">
    <div
      v-for="(item,index) in listImg"
      :key="index"
      class="chart_left"
      @click="cutChartsTap(index)"
    >
      <img :src="item.url" alt />
    </div>
    <div class="chart_right" v-if="!areaDimensionStateS">
      <!-- 指标地区cut -->
      <!-- <div class="chart_right_area" v-if="$route.query.type!=='area'">
        {{stateChangeSDF?'指标：':'地区：'}}
        <cityPicker
          :level="jishuArea"
          :selectpattern="selectpatternArea"
          :city-data="cityDataArea"
          :default-city="cityDefaultNameArea"
          @choice-caller="choiceCallerArea"
        ></cityPicker>
      </div>-->
      <div class="chart_right_area" v-if="$route.query.type==='area'">
        {{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="cityDataTime">
        时间：
        <div class="chart_right_cont">
          <cityPicker
            :level="jishuTime"
            :selectpattern="selectpatternTime"
            :city-data="cityDataTime"
            :default-city="cityDefaultNameTime"
            @choice-caller="choiceCallerTime"
            @visible-change="changesInputStu"
            :isHideProp="isHideProp"
            @stateInfor="stateInfor"
            :stateRTY="stateRTY"
          ></cityPicker>
          <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="areaDimensionStateS&&this.$store.state.transBefore">
      {{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 cityPicker from '@/components/cityPicker/CityPicker.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
    }
  },
  components: {
    cityPicker: cityPicker
  },
  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: '最近1个月',
      // 筛选数据
      selectpatternTime: [
        {
          field: 'userProvinceId',
          placeholder: '最近13个月'
        }
      ],
      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) {
      if (newVal) {
        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.transBefore.timeArr.map((item, index) => {
            return {
              value: item,
              label: item
            }
          })
          this.valueDimension = [this.optionsDimension[0].value]
        } else if (this.$store.state.noSelecttDimension === 'dq') {
          this.optionsDimension = this.$store.state.transBefore.areaName.map((item, index) => {
            return {
              value: item,
              label: item
            }
          })
          this.valueDimension = [this.optionsDimension[0].value]
        } else if (this.$store.state.noSelecttDimension === 'zb') {
          this.optionsDimension = this.$store.state.transBefore.termsName.map((item, index) => {
            return {
              value: item,
              label: item
            }
          })
          this.valueDimension = [this.optionsDimension[0].value]
        }
        // 告诉父组件数据渲染完
        this.$emit('emmitStateAd', false)
      }
    }
  },
  methods: {
    // 地区维度转换筛选
    handleChangeDimension () {
      console.log(this.valueDimension, 'this.valueDimension')
    },
    // 点击切换图表
    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, '被选中的值')

        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) {
          // console.log(Object.keys(res.data.data.list))
          // console.log(Object.values(res.data.data.list))
          this.cityDataTime = Object.keys(res.data.data.list).map((item, index) => {
            return { 'id': '110000', 'name': Object.values(res.data.data.list)[index], 'parentId': '100000', 'shortName': '北京', 'cityCode': '', indexID: item }
          })
          // 默认选中第一个
          this.cityDefaultNameTime = this.cityDataTime[0].name
          this.$store.state.selectData = this.cityDataTime[0].indexID
          // console.log(this.$store.state.selectData, 'this.cityDataTime[0].indexID')
          // 告诉父组件我获取到了
          this.$emit('stateTell', true)
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    stateInfor (val) {
      if (val) {
        this.stateRTY = val
      } else {
        this.showInputStu = val
      }
    },
    // 指标地区数据渲染
    showLabelArea () {
      console.log(this.stateChangeSDF, '走走走')
      if (this.stateChangeSDF) { // 指标
        console.log(this.$store.state.transBefore, 'thisthisthisthisthis')
        this.cityDataArea = this.$store.state.transBefore.termsName.map((item, index) => {
          return { 'id': '110000', 'name': item, 'parentId': '100000', 'shortName': '北京', 'cityCode': '', type: 1 }
        })
        this.cityDataArea.unshift({ 'id': '110000', 'name': '-序列-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '', type: 1 })
        this.cityDefaultNameArea = this.cityDataArea[1].name
        this.selectpatternArea.placeholder = this.cityDataArea[1].name

        this.options = this.$store.state.transBefore.termsName.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.transBefore.areaName.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[this.timeUsrr.length - 2] < 2 && this.timeUsrr.length < 7 && /^[0-9]+$/.test(this.timeUsrr)) {
              if (this.timeUsrr[this.timeUsrr.length - 2] === 1 && this.timeUsrr[this.timeUsrr.length - 1] > 2) {
                alert('您查询的时间格式有误，请重新输入！')
              } else {
                this.$store.state.selectData = this.timeUsrr
              }
            } else {
              alert('您查询的时间格式有误，请重新输入！111')
            }
            break
          case 'quarter':
            let arr = ['A', 'B', 'C', 'D']
            if (arr.indexOf(this.timeUsrr[this.timeUsrr.length - 1]) !== -1 && this.timeUsrr.length < 6 && /^[0-9]+$/.test(this.timeUsrr.substring(0, 4))) {
              this.$store.state.selectData = this.timeUsrr
            } else {
              alert('您查询的时间格式有误，请重新输入！111')
            }
            break
          case 'year':
            break
          case 'area':
            break
        }
      } else {
        alert('您查询的时间格式有误，请重新输入！')
      }
    },
    // 选中
    handleChange (value) {
      console.log(value)
      console.log(this.value, 'this.value')
      this.$emit('statertfResu', value[0])
    }
  },
  mounted () {
    this.cityDataArea = this.cityDataAreas
    this.cityDataTime = this.cityDataAreas
  }
}
</script>
<style lang="scss" scoped>
.chartsCut {
  padding: 0.75rem 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  & > .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;
    & > .chart_right_area {
      margin-right: 4.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>
