<template>
  <div class="box">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="thisEditRow.Id" type="hidden" class="input-with-select" />
      </el-form-item>
      <el-form-item label="模板名称">
        <el-input v-model="thisEditRow.TemplateName" />
      </el-form-item>
      <el-form-item label="模板子类">
        <el-select v-model="thisEditRow.BaseTemplate" placeholder="模板子类" clearable @change="changeBaseName">
          <el-option
            v-for="baseName in baseNames"
            :key="baseName"
            :label="baseName"
            :value="baseName"
          />
        </el-select>
      </el-form-item>
      <div class="header">
        <div class="i1">
          来源
        </div>
        <div class="i3">
          表格标题
        </div>
        <div class="i2">
          绑定值
        </div>
        <div class="i5">
          操作
        </div>
      </div>
      <div class="content">
        <el-form-item v-for="(item,index) in details" :key="index" label-width="100px">
          <el-select v-model="item.FieldType" placeholder="来源" clearable class="i1">
            <el-option
              v-for="type in types"
              :key="type.value"
              :label="type.name"
              :value="type.value"
            />
          </el-select>
          <el-input v-model="item.FieldTitle" class="i3" />
          <el-select v-if="item.FieldType==0" v-model="item.Field" class="i2" clearable placeholder="字段">
            <el-option
              v-for="cloumn in columns"
              :key="cloumn"
              :label="cloumn"
              :value="cloumn"
              :class="anyDetail(cloumn)"
            />
          </el-select>
          <el-input v-if="item.FieldType==1" v-model="item.Field" class="i2" />
          <el-button class="i5" @click="addRow(item)">+</el-button>
          <el-button class="i5" @click="rowRow(item)">-</el-button>
        </el-form-item>
      </div>
      <div class="foot">
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
      <div style="clear:both" />
    </el-form>
  </div>

</template>
<script>
import { _getDetails, _getColumns, _save, _getColumnsAsBaseName, _getBaseName } from '@/api/order/template'
export default {
  name: 'EditOutTemplate',
  props: {
    editRow: {
      type: Object
    }
  },
  data() {
    return {
      details: [],
      columns: [],
      baseNames: [],
      types: [{
        value: 0,
        name: '模板'
      },
      {
        value: 1,
        name: '自定义'
      }],
      thisEditRow: {}
    }
  },
  watch: {
    editRow: {
      handler(newValue, oldValue) {
        this.init(newValue)
      },
      deep: true // 默认值是 false，代表是否深度监听
    }
  },
  methods: {
    init(newValue) {
      this.thisEditRow = JSON.parse(JSON.stringify(newValue))
      _getBaseName().then(res => {
        this.baseNames = res
      })
      if (newValue.Id > 0) {
        this.getSelects(newValue.Id)
      } else {
        this.details = [{ FieldType: 1, Field: '', FieldTitle: '', Id: 1 }]
      }
    },
    changeBaseName() {
      _getColumnsAsBaseName(this.thisEditRow.BaseTemplate).then(res => {
        this.columns = res
      })
    },
    getSelects(id) {
      _getColumns(id).then(res => {
        this.columns = res
      })
      _getDetails(id).then(res => {
        this.details = res
      })
    },
    anyDetail(item) {
      for (var i = 0; i < this.details.length; i++) {
        var detail = this.details[i]
        if (detail.Field == item) { return 'optionD' }
      }
      return ''
    },
    rowRow(row) {
      var index = this.details.indexOf(row)
      if (index !== -1) {
        this.details.splice(index, 1)
      }
    },
    addRow(row) {
      var index = this.details.indexOf(row)
      if (index != -1) {
        index += 1
        this.details.splice(index, 0, { FieldType: 1, Field: '', FieldTitle: '', Id: 1 })
      }
    },
    save() {
      this.thisEditRow.Fields = this.details
      _save(this.thisEditRow).then(res => {
        this.end(true)
      })
    },
    end(success) {
      this.$emit('complete')
    }

  }
}
</script>
<style scoped>
.i0{width:100px;float:left;}
.i1,.i2,.i3
    {float:left;margin-right:10px;}
.i1 {width:150px;}
.i2{width:200px;}
.i3{width:200px;}
.content{height:500px;overflow-y: auto;}
.header{line-height: 36px;height: 36px;}
.foot{margin: auto;width:300px;margin-top:20px; height: 30px;}
.optionD{color:#ccc;}
.el-select-dropdown__item.selected{color:#1890ff;}
</style>
