
<template>
  <div class="page">
    <div>
      <div class="tree-content">
        <a-tree
          show-line
          show-icon
          :tree-data="treeData"
          @select="onSelect"
          :default-selected-keys="['0']"
          :expandedKeys.sync="expandedKeys">
        </a-tree>
      </div>
    </div>
    <div class="right">
      <a-button-group>
        <a-button @click="handleOk">
          保存
        </a-button>
        <a-button @click="addLine">
          新建曲线
        </a-button>
      </a-button-group>
      <div class="form-content">
        <a-form-model layout="inline" ref="form" :model="model" :rules="validatorRules">
          <template v-if="formType=='configure'">
            <a-form-model-item label="显示名称:" prop="configureTitle">
              <a-input
                style="width:170px"
                v-model="model.configureTitle"
              > </a-input>
            </a-form-model-item>
            <a-form-model-item
              label=""
              style="width: 244px"> </a-form-model-item>
            <a-form-model-item label="曲线类型:" prop="yType">
              <a-radio-group v-decorator="['radio-group']" style="width: 174px" v-model="model.yType">
                <a-radio value="time"> 时间 </a-radio>
                <a-radio value="deep"> 深度 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </template>
          <template v-else-if="formType=='track'">
            <a-form-model-item label="显示名称:" prop="trackTitle">
              <a-input style="width:170px" v-model="model.trackTitle"> </a-input>
            </a-form-model-item>
            <a-form-model-item
              label=""
              style="width: 244px"> </a-form-model-item>
            <a-form-model-item label="宽度（像素）:" prop="width">
              <a-input-number style="width: 174px" v-model="model.width"></a-input-number>
            </a-form-model-item>
            <a-form-model-item
              label=""
              style="width: 244px"> </a-form-model-item>
            <a-form-model-item label="宽度是否固定:" prop="fix">
              <a-radio-group v-decorator="['radio-group']" v-model="model.fix">
                <a-radio value="1"> 是 </a-radio>
                <a-radio value="0"> 否 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </template>
          <template v-else-if="formType=='line'">
            <a-form-model-item label="显示名称:" prop="lineTitle">
              <a-input style="width: 174px" v-model="model.lineTitle"> </a-input>
            </a-form-model-item>
           <a-form-model-item label="数据来源:" prop="dataSource">
              <j-dict-select-tag
                ref="dict"
                @change="handleChange"
                placeholder="请选择数据来源"
                dictCode="data_source"
                v-model="model.dataSource"
                style="width: 174px"
              />
            </a-form-model-item>
            <a-form-model-item label="曲线颜色:" prop="color">
             <colorPicker v-model="model.color" style="width: 174px" />
            </a-form-model-item>
            <a-form-model-item
              label="数据单位"
              prop="unit"> <a-input style="width: 174px" v-model="model.unit"> </a-input></a-form-model-item>
            <a-form-model-item label="起始最小值:" prop="minNum">
              <a-input-number style="width: 174px" v-model="model.minNum"></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="起始最大值:" prop="maxNum">
              <a-input-number style="width: 174px" v-model="model.maxNum"></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="是否自动扩展:" prop="spread">
              <a-radio-group v-decorator="['radio-group']" v-model="model.spread">
                <a-radio value="1"> 是 </a-radio>
                <a-radio value="0"> 否 </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item
              label=""
              style="width: 244px"> </a-form-model-item>
            <a-form-model-item label="扩展(最小):">
              <a-radio-group v-decorator="['radio-group']" v-model="model.minSpread">
                <a-radio value="a"> 按10取整 </a-radio>
                <a-radio value="b"> 自定义 </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="扩展(最大):">
              <a-radio-group v-decorator="['radio-group']" v-model="model.maxSpread">
                <a-radio value="a"> 按10取整 </a-radio>
                <a-radio value="b"> 自定义 </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="曲线类型" prop="step">
              <a-radio-group v-decorator="['radio-button']" v-model="model.lineStyle">
                <a-radio-button value="solid"> 折线 </a-radio-button>
                <a-radio-button value="smooth"> 平滑曲线 </a-radio-button>
                <a-radio-button value="step"> 阶梯 </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item
              label=""
              style="width: 244px"> </a-form-model-item>
            <a-form-model-item label="背景:" prop="background">
              <a-radio-group v-decorator="['radio-group']" v-model="model.background">
                <a-radio value="value"> 平均分割 </a-radio>
                <a-radio value="log"> 指数 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </template>
        </a-form-model></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AddOptions',
  props: {
     // 新增的曲线道的key
    chartKey: {
      type: [String, String],
      default: '0-0'
    }
  },
  data () {
    return {
      treeData: [],
      form: this.$form.createForm(this, { name: 'options' }),
      expandedKeys: ['0'],
      formType: 'track', // 当前表单范围
      model: {
        key: undefined,
        configureTitle: undefined,
        yType: undefined,
        trackTitle: undefined,
        width: undefined,
        fix: undefined,
        lineTitle: undefined,
        dataSource: undefined,
        color: '#000',
        minNum: 10,
        maxNum: 10,
        unit: undefined,
        spread: '1',
        minSpread:'a',
        maxSpread:'a',
        lineStyle: 'smooth',
        background: 'value'
      },
      validatorRules: {
          configureTitle: [{ required: true, message: '请输入名称!' }],
          trackTitle: [{ required: true, message: '不能为空!' }],
          width: [{ required: true, message: '不能为空!' }],
          fix: [{ required: true, message: '不能为空!' }],
          lineTitle: [{ required: true, message: '不能为空!' }],
          dataSource: [{ required: true, message: '不能为空!' }],
          color: [{ required: true, message: '不能为空!' }],
          minNum: [{ required: true, message: '不能为空!' }],
          maxNum: [{ required: true, message: '不能为空!' }],
          unit: [{ required: true, message: '不能为空!' }],
          spread: [{ required: true, message: '不能为空!' }],
          lineStyle: [{ required: true, message: '不能为空!' }],
          background: [{ required: true, message: '不能为空!' }]
        }
    }
  },
   computed: {
     ...mapState({
    chartData: state => state.lineConfig.chartData
    })
   },
  created () {
    this.initForm()
  },
  methods: {
    /* 初始化表单 */
    initForm () {
      this.formType = 'track'
      this.clearModel()
      this.initTree()
      this.model.key = '0'
      this.setModel('0')
    },
    initTree () {
      this.treeData = [{ title: '曲线道', key: this.chartKey, fix: '0', id: this.chartKey, width: '10', children: [] }]
      console.log(this.treeData)
    },
    clearModel () {
      this.model = {
        key: undefined,
        configureTitle: undefined,
        yType: undefined,
        trackTitle: undefined,
        width: undefined,
        fix: undefined,
        lineTitle: undefined,
        dataSource: undefined,
        color: '#000',
        minNum: 10,
        maxNum: 10,
        unit: undefined,
        spread: '1',
        minSpread:'a',
        maxSpread:'a',
        lineStyle: 'smooth',
        background: 'value'
      }
    },
    handleChange(value){
        let lable=''
         this.$refs.dict.dictOptions.forEach(ele => {
            if(ele.value==value)
            {
              lable=ele.title
            }
          })
       if(this.model.lineTitle===''||this.model.lineTitle===undefined){
         this.model.lineTitle=lable
       }
    },
    /* 缓存给表单赋值 */
    setModel (key) {
      const currentDate = this.treeData[0]
      if (this.formType === 'track') {
          this.clearModel()
          this.model.trackTitle = currentDate.title
          this.model.width = currentDate.width
          this.model.fix = currentDate.fix
        }
      if (this.formType === 'line') {
        this.clearModel()
        const index = currentDate.children.findIndex(n => n.key === key)
        const lineData = currentDate.children[index]
        this.model.lineTitle = lineData.title
        this.model.dataSource = lineData.dataSource
        this.model.color = lineData.color
        this.model.minNum = lineData.minNum
        this.model.maxNum = lineData.maxNum
        this.model.unit = lineData.unit
        this.model.spread = lineData.spread
        this.model.lineStyle = lineData.lineStyle
        this.model.background = lineData.background
        this.model.key = key
      }
    },
    /* 表单向树赋值 */
    setTreeData (key) {
      const currentDate = this.treeData[0]
      if (this.formType === 'track') {
          currentDate.title = this.model.trackTitle
          currentDate.width = this.model.width
          currentDate.fix = this.model.fix
        }
      if (this.formType === 'line' && key) {
        const index = currentDate.children.findIndex(n => n.key === key)
        const lineData = currentDate.children[index]
        lineData.title = this.model.lineTitle
        lineData.dataSource = this.model.dataSource
        lineData.xData = [15, 50, 56.5, 46.5, 22.1, 2.5, 27.7, 55.7, 76.5, 11, 23, 6, 7, 1, 3]
        lineData.color = this.model.color
        lineData.minNum = this.model.minNum
        lineData.maxNum = this.model.maxNum
        lineData.unit = this.model.unit
        lineData.spread = this.model.spread
        lineData.lineStyle = this.model.lineStyle
        lineData.background = this.model.background
        lineData.name = this.model.lineTitle + '(' + this.model.unit + ')'
      } else if (this.formType === 'line') {
        const lineData = {}
        const lineKey = this.chartKey + '-' + currentDate.children.length
        lineData.title = this.model.lineTitle
        lineData.key = lineKey
        lineData.dataSource = this.model.dataSource
        lineData.xData = [15, 50, 56.5, 46.5, 22.1, 2.5, 27.7, 55.7, 76.5, 11, 23, 6, 7, 1, 3]
        lineData.color = this.model.color
        lineData.minNum = this.model.minNum
        lineData.maxNum = this.model.maxNum
        lineData.unit = this.model.unit
        lineData.spread = this.model.spread
        lineData.lineStyle = this.model.lineStyle
        lineData.background = this.model.background
        lineData.name = this.model.lineTitle + '(' + this.model.unit + ')'
        currentDate.children.push(lineData)
      }
    },
    /* 新建曲线 */
    addLine () {
      this.model.key = null
      this.formType = 'line'
      this.clearModel()
    },
    /* 树节点点击事件 */
    onSelect (selectedKeys, info) {
      if (selectedKeys.length > 0) {
        this.$refs.form.resetFields()
        this.model.key = selectedKeys[0]
        this.getFormType(selectedKeys[0])
        this.setModel(selectedKeys[0])
      }
    },
    /* 根据key判断显示表单类型 */
    getFormType (key) {
       const keyLength=key.split('-').length
      if (keyLength === 1) {
        this.formType = 'configure'
      } else if (keyLength === 2) {
        this.formType = 'track'
      } else if (keyLength === 3) {
        this.formType = 'line'
      }
    },
    /* 保存事件 */
    handleOk () {
        this.$refs.form.validate(valid => {
        if (valid) {
          this.setTreeData(this.model.key)
        }
      })
    }
  }
}
</script>

<style scoped>
.m-colorPicker /deep/ .box.open{
  z-index: 1000;
}
.m-colorPicker /deep/ .colorBtn{
  width:175px;
  height: 20px;
}
.page {
  font-size: 5px;
  width: 100%;
  height: 600px;
  display: flex;
}
.tree-content {
  border: 1px solid black;
  margin-top: 5px;
  height: 533px;
  overflow: scroll;
  width:200px
}
.right {
  margin-left: 20px;
  width: 800px;
}
.form-content {
  border: 1px solid black;
  margin-top: 5px;
  height: 500px;
  padding: 10px;
}
</style>
