<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">
      <!-- 指标地区cut -->
      <div class="chart_right_area" v-if="$route.query.type==='area'">
        指标：
        <cityPicker
          :level="jishuArea"
          :selectpattern="selectpatternArea"
          :city-data="cityDataArea"
          :default-city="cityDefaultNameArea"
          @choice-caller="choiceCallerArea"
        ></cityPicker>
      </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"
          ></cityPicker>
          <div class="bottom" v-if="showInputStu" @click="showKuangCat">
            <input type="text" placeholder="请输入时间" v-model="timeUsrr" />
            <span>确认</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入下拉组件
import cityPicker from '@/components/cityPicker/CityPicker.vue'
export default {
  name: 'chartsCut',
  props: {
    // 渲染图表所需数据
    defaultDataRight: {
      type: Object,
      required: false
    }
  },
  components: {
    cityPicker: cityPicker
  },
  data () {
    return {
      // 控制下拉框显示隐藏
      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: '最近13个月',
      // 筛选数据
      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
    }
  },
  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
    }
  },
  methods: {
    // 点击切换图表
    cutChartsTap (ind) {
      // console.log(ind)
      this.$emit('cutStatic', ind)
    },
    // 被选中时触发
    choiceCallerArea (resu) {
      console.log(resu, '5+656565')
      console.log(this.cityDefaultName)
    },
    // 被选中时触发
    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.$emit('comTime', resu[2].name)
      // this.showInputStu = !this.showInputStu
    },
    changesInputStu () {
      console.log(12569)
      this.showInputStu = !this.showInputStu
    },
    // 点击非下拉框内容时改变下拉状态（下拉怡然显示）
    showKuangCat () {
      console.log(1250)
      this.isHideProp = 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.$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)
      })
    }

  },
  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;
          }
        }
      }
    }
  }
}
</style>
