<template>
  <div>

    <!--基础配置表单-->
    <el-form
      v-if="status !== 'empty' && status !== 'read-only'"
      ref="formInline"
      v-loading="loading"
      :model="formInline"
      :rules="rules"
      class="demo-form-inline"
      size="small"
    >
      <el-input v-show="false" v-model="formInline.pLevel" />

      <el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('map_setting.parent_area')" prop="pCode">
              <el-tree-select
                v-if="treeShow"
                ref="deSelectTree"
                v-model="formInline.pCode"
                :popper-append-to-body="true"
                popover-class="map-class-wrap"
                :data="treeDatas"
                :select-params="selectParams"
                :tree-params="treeParams"
                :filter-node-method="_filterFun"
                :tree-render-fun="_renderFun"
                @searchFun="_searchFun"
                @node-click="changeNode"
                @select-clear="selectClear"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('map_setting.area_code')" prop="code">
              <el-input v-model="formInline.code" :placeholder="$t('map_setting.please_input')" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item :label="$t('map_setting.area_name')" prop="name">
              <el-input v-model="formInline.name" maxlength="30" show-word-limit :placeholder="$t('map_setting.please_input')" />

            </el-form-item>
          </el-col>
        </el-row>

      </el-row>
      <el-row>
        <el-col>
          <el-form-item :label="$t('map_setting.geo_json')">
            <el-upload
              style="float: right;margin-left: 10px"
              class="upload-demo"
              action=""
              accept=".json"
              :on-exceed="handleExceed"
              :before-upload="uploadValidate"
              :on-error="handleError"
              :show-file-list="false"
              :file-list="filesTmp"
              :http-request="uploadMapFile"
            >
              <el-button style="display: inline-block" size="mini" type="success" plain>
                {{ $t('commons.upload') }}
              </el-button>
            </el-upload>
            <el-button
              style="float:right;margin-top: 3px"
              size="mini"
              type="danger"
              plain
              @click="removeFile"
            >
              {{ $t('commons.clear') }}
            </el-button>
            <el-input
              v-model="formInline.fileName"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div>

        <el-button type="success" size="small" @click="save('formInline')">
          {{ $t('commons.save') }}
        </el-button>
      </div>
    </el-form>

    <el-descriptions v-else-if="status === 'read-only'" title="区域信息" :column="1">

      <el-descriptions-item :label="$t('map_setting.area_code')">{{ nodeInfo.code }}</el-descriptions-item>

      <el-descriptions-item :label="$t('map_setting.area_name')">{{ nodeInfo.name }}</el-descriptions-item>

      <el-descriptions-item :label="$t('map_setting.parent_name')">{{ nodeInfo.pname }}</el-descriptions-item>

      <el-descriptions-item :label="$t('map_setting.geo_json')">
        <json-view :data="json" />
      </el-descriptions-item>
    </el-descriptions>

    <el-empty v-else-if="status === 'empty'" description="请在左侧选择区域" />
  </div>
</template>

<script>
import jsonView from 'vue-json-views'
import { geoJson, saveMap } from '@/api/map/map'
import ElTreeSelect from '@/components/ElTreeSelect'

export default {
  name: 'MapSettingRight',
  components: { jsonView, ElTreeSelect },
  props: {
    status: {
      type: String,
      default: 'empty'
    },
    treeDatas: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formInline: { pCode: '', fileName: '' },
      loading: false,
      rules: {
        pCode: [
          { required: true, message: this.$t('map_setting.parent_name') + this.$t('commons.cannot_be_null'), trigger: 'change' }
        ],
        code: [
          { required: true, message: this.$t('map_setting.area_code') + this.$t('commons.cannot_be_null'), trigger: ['change', 'blur'] },
          { pattern: /^\d{9}$/, message: this.$t('map_setting.area_code_tip'), trigger: ['change', 'blur'] }
        ],
        name: [
          { required: true, message: this.$t('map_setting.area_name') + this.$t('commons.cannot_be_null'), trigger: ['change', 'blur'] }
        ],
        fileName: [
          { required: true, message: this.$t('map_setting.geo_json') + this.$t('commons.cannot_be_null'), trigger: 'change' }
        ]
      },
      levelOptions: [
        { value: 1, label: '国家' },
        { value: 2, label: '一级行政区划(省)' },
        { value: 3, label: '二级行政区划(市)' },
        { value: 4, label: '三级行政区划(区县)' },
        { value: 5, label: '四级行政区划(乡镇)' }
      ],
      suffixes: new Set(['json']),
      errList: [],
      filesTmp: [],

      nodeInfo: {
        code: -1,
        name: '',
        level: -1,
        pcode: -1,
        pname: ''
      },
      noGsoJson: { success: false, message: 'no json file' },
      json: {},
      selectParams: {
        clearable: true,
        placeholder: this.$t('commons.please_select') + this.$t('map_setting.parent_name')
      },
      treeParams: {
        showParent: true,
        clickParent: true,
        filterable: true,
        // 只想要子节点，不需要父节点
        leafOnly: false,
        includeHalfChecked: false,
        'check-strictly': false,
        'default-expand-all': false,
        'expand-on-click-node': false,
        'render-content': this._renderFun,
        data: [],
        props: {
          children: 'children',
          label: 'name',
          rootId: '000000000',
          disabled: 'disabled',
          parentId: 'pcode',
          value: 'code'
        }
      },
      treeShow: true
    }
  },
  watch: {

    treeDatas: function(val) {
      this.treeParams.data = val
    }
  },
  created() {
    // this.query()
  },
  methods: {
    handleExceed(files, fileList) {
      this.$warning(this.$t('test_track.case.import.upload_limit_count'))
    },
    handleError() {
      this.$warning(this.$t('test_track.case.import.upload_limit_count'))
    },
    uploadValidate(file) {
      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (!this.suffixes.has(suffix)) {
        this.$warning(this.$t('test_track.case.import.upload_limit_format'))
        return false
      }

      if (file.size / 1024 / 1024 > 30) {
        this.$warning(this.$t('test_track.case.import.upload_limit_size'))
        return false
      }
      this.errList = []
      return true
    },
    uploadMapFile(file) {
      this.$set(this.formInline, 'fileName', file.file.name)
      this.formInline.file = file.file
    },
    removeFile() {
      this.formInline.fileName = null
      this.formInline.file = null
    },
    buildFormData(file, files, param) {
      const formData = new FormData()
      if (file) {
        formData.append('file', file)
      }
      if (files) {
        files.forEach(f => {
          formData.append('files', f)
        })
      }
      formData.append('request', new Blob([JSON.stringify(param)], { type: 'application/json' }))
      return formData
    },
    save(formInline) {
      const param = {
        code: this.formInline.code,
        name: this.formInline.name,
        pcode: this.formInline.pCode,
        plevel: this.formInline.pLevel
      }

      this.$refs[formInline].validate(valid => {
        if (valid) {
          this.saveHandler(param)
        } else {
          // this.result = false
        }
      })
    },
    saveHandler(param) {
      const formData = this.buildFormData(this.formInline.file, null, param)
      saveMap(formData).then(response => {
        const flag = response.success
        if (flag) {
          this.$emit('refresh-tree', param)
          this.$success(this.$t('commons.save_success'))
        } else {
          this.$message.error(this.$t('commons.save_failed'))
        }
      })
    },

    emitAdd(form) {
      this.formInline = JSON.parse(JSON.stringify(form))
      this.treeShow = false
      this.$nextTick(() => {
        this.treeShow = true
      })
    },

    loadForm(form) {
      if (form && form.code) {
        this.nodeInfo = JSON.parse(JSON.stringify(form))
        this.setGeoJson()
      }
    },
    setGeoJson() {
      if (!this.nodeInfo || !this.nodeInfo.code) {
        this.json = JSON.parse(JSON.stringify(this.noGsoJson))
        return
      }
      const cCode = this.nodeInfo.code
      if (this.$store.getters.geoMap[cCode]) {
        const json = this.$store.getters.geoMap[cCode]
        this.json = JSON.parse(JSON.stringify(json))
        return
      }

      geoJson(cCode).then(res => {
        this.$store.dispatch('map/setGeo', {
          key: cCode,
          value: res
        }).then(() => {
          this.json = JSON.parse(JSON.stringify(res))
        })
      })
    },
    _filterFun(value, data, node) {
      if (!value) return true
      return data.id.toString().indexOf(value.toString()) !== -1
    },
    // 树点击
    _nodeClickFun(data, node, vm) {
    },
    // 树过滤
    _searchFun(value) {
      this.$refs.deSelectTree.filterFun(value)
    },
    // 自定义render
    _renderFun(h, { node, data, store }) {
      const { props, clickParent } = this.treeParams
      return (
        <span class={['custom-tree-node', !clickParent && data[props.children] && data[props.children].length ? 'disabled' : null]}>
          <span>{node.label}</span>
        </span>
      )
    },
    changeNode(data, node) {
      if (node.level > 4) {
        this.$error('不支持4级行政级别')
        this.formInline.pLevel = null
        this.formInline.pCode = null
        return
      }
      this.formInline.pLevel = node.level
    }
  }
}
</script>

<style lang="scss" scoped>
.map-class-wrap{
  top: 65px !important;
  left: 0px !important;
}
</style>
