<template>
  <div>
    <template v-for="(seriesValue, seriesKey) in queryParam">
      <a-row class="row-class">
        <!--領(lǐng)域-businessArea-->
        <a-col :span="2" class="left-msg">業(yè)務(wù)領(lǐng)域:</a-col>
        <a-col :span="2">
          <a-select v-model="seriesValue['businessArea']" class="select-width">
            <a-select-option :value="businessAreaItem.value"
                             v-for="(businessAreaItem, businessAreaIndex) in queryParamModule" :key="businessAreaIndex">
              {{ businessAreaItem.name }}
            </a-select-option>
          </a-select>
        </a-col>
        <!--主題-topic-->
        <template v-if="seriesValue['businessArea']">
          <a-col :span="1" class="left-msg">主題:</a-col>
          <a-col :span="2">
            <a-select v-model="seriesValue['topic']" class="select-width">
              <a-select-option :value="topicItem.value"
                               v-for="(topicItem, topicIndex) in forTopic(seriesKey)"
                               :key="topicIndex">
                {{ topicItem.name }}
              </a-select-option>
            </a-select>
          </a-col>
        </template>
        <!-- 維度-xType -->
        <template v-if="seriesValue['topic']">
          <a-col :span="1" class="left-msg">維度:</a-col>
          <a-col :span="2">
            <a-select v-model="seriesValue['xType']" class="select-width">
              <a-select-option :value="xTypeItem.value"
                               v-for="(xTypeItem, xTypeIndex) in forXType(seriesKey)"
                               :key="xTypeIndex">
                {{ xTypeItem.name }}
              </a-select-option>
            </a-select>
          </a-col>
        </template>
        <!-- 指標(biāo)-target -->
        <template v-if="seriesValue['topic']">
          <a-col :span="1" class="left-msg">指標(biāo):</a-col>
          <a-col :span="2">
            <a-select v-model="seriesValue['target']" class="select-width">
              <a-select-option :value="targetItem.value"
                               v-for="(targetItem, targetIndex) in forTarget(seriesKey)"
                               :key="targetIndex">
                {{ targetItem.name }}
              </a-select-option>
            </a-select>
          </a-col>
        </template>
      </a-row>
    </template>

    <a-row class="row-class">
      <a-col :span="2" class="left-msg">圖表:</a-col>
      <a-col :span="22">
        <a-radio-group v-model="chart">
          <a-radio :value="index" v-for="(item, index) in { 'a' : '線性圖', 'b' : '柱狀圖','c':'條形圖','d':'餅圖'}" :key="index">
            {{ item }}
          </a-radio>
        </a-radio-group>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="22">
      </a-col>
      <a-col :span="2">
        <a-button type="primary" @click="onSubmit">統(tǒng)計</a-button>
      </a-col>
    </a-row>

  </div>
</template>

<script>
export default {
  name: 'headTab',
  watch: {},
  created () {

    Object.keys(this.queryParam).forEach(item => {

      this.watchCallBack.push(this.$watch(`queryParam.${item}.businessArea`, function (v) {
        if (v) {
          this.$set(this.queryParam[item], 'topic', undefined)
          this.$set(this.queryParam[item], 'xType', undefined)
          this.$set(this.queryParam[item], 'target', undefined)
        }
      }, { deep: true, immediate: true }));
      this.watchCallBack.push(this.$watch(`queryParam.${item}.topic`, function (v) {
        if (v) {
          this.$set(this.queryParam[item], 'xType', undefined)
          this.$set(this.queryParam[item], 'target', undefined)
        }
      }, { deep: true, immediate: true }));

    })

  },
  computed: {
    forTopic () {
      return (series) => {
        return this.queryParamModule[this.queryParam[series]['businessArea'] - 1]['topic']
      }
    },
    forXType () {
      return (series) => {
        return this.queryParamModule[this.queryParam[series]['businessArea'] - 1]['topic'][this.queryParam[series]['topic'] - 1]['xType']
      }
    },
    forTarget () {
      return (series) => {
        return this.queryParamModule[this.queryParam[series]['businessArea'] - 1]['topic'][this.queryParam[series]['topic'] - 1]['target']
      }
    }
  },
  data () {
    return {
      watchCallBack: [],
      queryParamModule: [
        /*
          用戶領(lǐng)域-businessArea-1
          主題-topic    維度-xType    指標(biāo)-target
          平臺訪問-1      日期-1        訪問人數(shù)-1
                      月份-2        注冊人數(shù)-2
                      溯源人數(shù)-3
                      抽獎人數(shù)-4
                      閱讀人數(shù)-5

          會員分布-2      省份-1        會員人數(shù)-1
                      產(chǎn)品-2
                      農(nóng)作物-3
         */
        {
          'name': '用戶領(lǐng)域',
          'value': '1',
          'topic': [
            {
              'name': '平臺訪問',
              'value': '1',
              'xType': [
                { 'name': '日期', 'value': '1' },
                { 'name': '月份', 'value': '2' },
                { 'name': '溯源人數(shù)', 'value': '3' },
                { 'name': '抽獎人數(shù)', 'value': '4' },
                { 'name': '閱讀人數(shù)', 'value': '5' }
              ],
              'target': [
                { 'name': '訪問人數(shù)', 'value': '1' },
                { 'name': '注冊人數(shù)', 'value': '2' }
              ]
            },
            {
              'name': '會員分布',
              'value': '2',
              'xType': [
                { 'name': '省份', 'value': '1' },
                { 'name': '產(chǎn)品', 'value': '2' },
                { 'name': '農(nóng)作物', 'value': '3' }
              ],
              'target': [
                { 'name': '會員人數(shù)', 'value': '1' }
              ]
            }
          ]
        }
        /*
        渠道領(lǐng)域-businessArea-2
        主題-topic    維度-xType    指標(biāo)-target
        渠道分析-1  省份-1    門店數(shù)量-1


        溯源分析-2  日期-1    溯源次數(shù)-1
          月份-2
          產(chǎn)品-3
          經(jīng)銷商-4
          產(chǎn)品分類-5
         */
      ],
      chart: '',
      queryParam: {
        data1Request: {
          businessArea: undefined,
          topic: undefined,
          xType: undefined,
          target: undefined
        },
        data2Request: {
          businessArea: undefined,
          topic: undefined,
          xType: undefined,
          target: undefined
        }
      }
    }
  },
  methods: {

    onSubmit () {
      let series = ['businessArea', 'topic', 'xType', 'target']
      let pass1 = series.every(value => {
        return this.queryParam.data1Request[value] != undefined
      })
      if (!pass1) {
        this.$message.info('請選擇完整')
        return false
      }
      this.$emit('onSubmit', this.queryParam)
    }
  },
  beforeDestroy () {
    this.watchCallBack.forEach(item => item());
  }
}
</script>

<style scoped>
.left-msg {
  color: #000;
  text-align: right;
  padding-right: 10px;
}

.row-class {
  min-height: 32px;
  margin: 8px 0;
  display: flex;
  align-items: center;
}

.select-width {
  width: 140px;
}
</style>