<template>
    <div>
        <template>
            <Form :model="formItem" :label-width="120" style="margin-top: 50px">
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="上级区域：">
                            <Select v-model="formItem.parent_id" ref="AreaSelect" filterable clearable>
                                <Option v-for="(item,index) in AreaList" :value="item.id" :key="index">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="区域名称：">
                            <Input clearable v-model="formItem.name"></Input>
                        </FormItem>
                        <FormItem label="区域编码：">
                            <Input clearable v-model="formItem.code"></Input>
                        </FormItem>
                        <FormItem label="区域类型：">
                            <Select clearable v-model="formItem.type">
                                <Option v-for="item in countryList" :value="item.value" :key="item.value">
                                    {{item.label}}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem label="排序：">
                            <Input clearable v-model="formItem.sort"></Input>
                        </FormItem>
                        <FormItem label="备注：">
                            <Input v-model="formItem.remarks" type="textarea"
                                   :autosize="{minRows: 2,maxRows: 5}"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <Row>
                <Col span="10" offset="3">
                    <Button type="primary" @click="save" :loading="loading" style="margin-right: 20px">保存</Button>
                    <Button @click="quxiao">取消</Button>
                </Col>
            </Row>
        </template>
    </div>
</template>

<script>
import { save, getById } from '../../../../../api/system/sys-area-list'
export default {
  name: 'addForm',
  props: {
    AreaList: {
      type: Array,
      default: () => {
        return []
      }
    },
    row: {
      type: Object,
      default: () => {
        return {}
      }
    },
    updaterow: {
      type: Object,
      default: () => {
        return {}
      }
    },
    optionState: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      formItem: {
        parent_id: '',
        name: '',
        code: '',
        type: '',
        sort: '',
        remarks: ''
      },
      countryList: [
        {
          value: '1',
          label: '国家'
        },
        {
          value: '2',
          label: '省份丶直辖市'
        },
        {
          value: '3',
          label: '地市'
        },
        {
          value: '4',
          label: '区县'
        }
      ],
      loading: false
    }
  },
  methods: {
    quxiao () {
      this.$emit('changeTpye', 0)
    },
    save () {
      this.loading = true
      let data = this.formItem
      save(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.loading = false
          this.$Message.success({
            content: '保存成功！'
          })
          this.$emit('changeTpye')
        } else {
          this.$Message.error({
            content: '保存失败\n' + ret.data.errmsg
          })
          this.loading = false
        }
      })
    },
    getById (value) {
      if (value !== undefined) {
        let data = {
          id: value
        }
        getById(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.formItem = ret.data.data
          } else {
            this.$Message.error({
              content: '获取失败\n' + ret.data.errmsg
            })
          }
        })
      } else {
        this.formItem = {}
      }
    }
  },
  mounted () {
  },
  watch: {
    row (row) {
      this.formItem.parent_id = row.id
      this.formItem.type = row.type
    },
    updaterow (updaterow) {
      this.getById(updaterow.id)
    }
  }
}
</script>

<style scoped>

</style>
