<template>
  <div>
    <!-- 基本信息start -->
    <el-form ref="baseInfoForm" :model="tmpBlock" class="block-basic-form" label-width="85px" label-suffix="：">
      <el-row :gutter="15">
        <el-col :span="4">
        <el-form-item label="" prop="type" label-width="0px">
          <!--<el-radio-group v-model="tmpBlock.type">-->
          <!--<el-radio disabled v-for="item in blockTypes" :label="item.ID" :key="item.ID">{{item.name}}</el-radio>-->
          <!--</el-radio-group>-->
          <el-select v-model="tmpBlock.type" :disabled="!isDetail" placeholder="类型">
            <el-option v-for="item in blockTypes" :key="item.ID" :label="item.name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>

        </el-col>
        <el-col :span="9">
      <el-form-item label="名称" prop="name" class="name" :verify="['NotNull', 'Length<25']">
        <el-input :disabled="disabledEdit" type="text" v-model="tmpBlock.name" auto-complete="off" class="w330">
        </el-input>
      </el-form-item>
      <el-form-item label="宽度" prop="width" class="width" :verify="['Number']">
        <el-input :disabled="disabledEdit" type="text" v-model="tmpBlock.width" auto-complete="off" class="w330">
        </el-input>
      </el-form-item>
      <el-form-item label="权重" prop="weightRange" v-if="tmpBlock.type === 'Manual'">
        <el-slider
          v-model="weightRangeValue"
          range
          :max="100"
          class="w330"
        >
        </el-slider>
      </el-form-item>
        </el-col>
        <el-col :span="11">
      <el-form-item label="代码" prop="code" class="code" :verify="['NotNull', 'Length<25','Regex=^\\w+$|代码只能是数字或英文字母']">
        <el-input :disabled="disabledEdit" type="text" v-model="tmpBlock.code" auto-complete="off" class="w330">
          <template slot="prepend"></template>
        </el-input>
      </el-form-item>
      <el-form-item label="路径" prop="path" class="path" :verify="['NotNull']">
        <path-picker :path.sync="tmpBlock.path" select-title="选择区块路径" :disabled="disabledEdit" class="block-path-picker">
          <i class="fa fa-plus" slot="button"></i>
        </path-picker>
      </el-form-item>
        <el-form-item label="接受推荐" prop="recommendType" class="recommendType" v-show="tmpBlock.type === 'Manual'">
          <el-select placeholder="" v-model="tmpBlock.recommendType" class="w330">
            <el-option label="作为待选稿" :value="1"></el-option>
            <el-option label="作为列表项" :value="2"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import PathPicker from '../../contentcore/components/PathPicker.vue'
export default {
  components: {
    'path-picker': PathPicker
  },
  props: {
    dataModel: Object,
    disabledEdit: Boolean,
    saveFlag: Boolean,
    isDetail: Boolean
  },
  data() {
    return {
      weightRangeValue: [],
      blockTypes: [],
      tmpBlock: {
        type: 'Manual',
        name: '',
        code: '',
        width: '',
        path: 'include/block/',
        minWeight: '',
        maxWeight: '',
        weightrange: '',
        recommendType: 1
      }
    }
  },
  methods: {
    // 获取区块类型数据
    async initBlockEdit() {
      let data = await axios.get(`/ui/blocklist/blocktypes`)
      this.blockTypes = data.data.data
    },
    loadData() {
      this.tmpBlock = this.dataModel
      this.weightRangeValue = [this.tmpBlock.minWeight, this.tmpBlock.maxWeight]
    }
  },
  watch: {
    dataModel() {
      this.$refs.baseInfoForm.resetFields()
      this.loadData()
    },
    'tmpBlock.type': {
      handler: function(val, oldVal) {
        this.$emit('blockTypeChange', val)
      }
    },
    saveFlag(value) {
      if (value) {
        let validateForm = () => {
          return new Promise((resolve, reject) => {
            this.$refs['baseInfoForm'].validate(valid => {
              if (valid) {
                this.tmpBlock.minWeight = this.weightRangeValue[0]
                this.tmpBlock.maxWeight = this.weightRangeValue[1]
                return resolve(true)
              }
              return reject(new Error(false))
            })
          })
        }

        validateForm()
          .then(() => {
            this.$emit('validate', true)
          })
          .catch(e => {
            this.$emit('validate', false)
          })
      }
    }

  },
  created() {
    this.loadData()
    this.initBlockEdit()
  }
}
</script>

<style scoped>
  .w330 {
    width: 230px;
  }

  .block-basic-form .el-form-item {
    border-bottom: 0 none;
  }

</style>
<style>
  .block-path-picker .input {
    width:230px !important;
  }

  .block-path-picker button > span > i{
    padding:0px;
  }
</style>
