<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
            <a-form-model-item label="显示名称:" prop="title" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input style="width:170px" v-model="model.title"> </a-input>
            </a-form-model-item>
            <a-form-model-item label="数据来源:" prop="dataSource" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <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" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <colorPicker v-model="model.color" style="width: 174px"/>
            </a-form-model-item>
             <a-form-model-item label="数据单位:" prop="unit" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-input style="width:170px" v-model="model.unit"> </a-input>
            </a-form-model-item>
            <a-form-model-item label="起始最小值:" prop="minNum" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number style="width: 174px" v-model="model.minNum"></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="起始最大值:" prop="maxNum" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number style="width: 174px" v-model="model.maxNum"></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="是否自动扩展:" prop="spread" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <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="扩展(最小):" prop="minSpread" :labelCol="labelCol" :wrapperCol="wrapperCol">
                 <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="扩展(最大):" prop="maxSpread" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <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="lineStyle" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <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="背景:" prop="background" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <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>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { addLine,duplicateCheckDataSource } from '@/api/api'
import {randomNumber} from '@/utils/util'
  export default {
    name: 'LineModal',
    data() {
      return {
        value: 1,
        title: '操作',
        visible: false,
        model: {
          title: undefined,
          dataSource: undefined,
          color: '#000',
          minNum: undefined,
          maxNum: undefined,
          unit: undefined,
          spread: undefined,
          minSpread:undefined,
          maxSpread:undefined,
          lineStyle: undefined,
          background: undefined
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        validatorRules: {
          title: [{ required: true, message: '不能为空!' }],
          width: [{ required: true, message: '不能为空!' }],
          fix: [{ required: true, message: '不能为空!' }],
          dataSource: [{ required: true, message: '不能为空!' },
                       {validator: this.validateDataSource}
                      ],
          color: [{ required: true, message: '不能为空!' }],
          minNum: [{ required: true, message: '不能为空!' }],
          maxNum: [{ required: true, message: '不能为空!' }],
          spread: [{ required: true, message: '不能为空!' }],
          lineStyle: [{ required: true, message: '不能为空!' }],
          background: [{ required: true, message: '不能为空!' }],
          unit: [{ required: true, message: '不能为空!' }]
          }
      }
    },
    created() {
    },
    methods: {
      add(trackId) {
        this.visible = true
        //this.model = Object.assign({}, '')
        this.clearModel()
        let ids=trackId.split('-')
        this.model.trackId=ids[1]
        this.model.templateId=ids[0]
      },
      handleChange(value){
        let lable=''
         this.$refs.dict.dictOptions.forEach(ele => {
            if(ele.value==value)
            {
              lable=ele.title
            }
          })
       if(this.model.title===''||this.model.title===undefined){
         this.model.title=lable
       }
      },
      clearModel(){
        this.model= {
          title: undefined,
          dataSource: undefined,
          color: '#000',
          minNum: 10,
          maxNum: 10,
          unit: undefined,
          spread: '1',
          minSpread:'a',
          maxSpread:'a',
          lineStyle: 'smooth',
          background: 'value'
        }
      },
      // 确定
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            this.model.title = (this.model.title || '').trim()
            let obj
            obj = addLine(this.model)
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$store.commit('line_config_options', 'init'+'_'+randomNumber(8))
                that.$emit('ok',res.result.templateId+'-'+res.result.trackId+'-'+res.result.id)
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }else{
            return false;
          }
        })
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.$refs.form.resetFields();
      },
      validateDataSource(rule, value, callback){
        var params = {
          trackId: this.model.trackId,
          id:'',
          dataSource: value
        };
        duplicateCheckDataSource(params).then((res) => {
          if (res.success) {
          callback()
        } else {
          callback("此数据源已存在!")
        }
      })
      },
    }
  }
</script>
<style scoped>
.m-colorPicker /deep/ .box.open{
  z-index: 1000;
}
.m-colorPicker /deep/ .colorBtn{
  width:175px;
  height: 20px;
}
</style>