<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :selectable='false'
      :show-export="false"
      :show-custom-column="false"
      quick-search-props="name"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          @click="handelAdd"
          type="primary"
          icon='el-icon-plus'
        >添加</el-button>
        <el-button size="small" icon='el-icon-plus'>
          <a
            target="_blank"
            href="https://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4"
          >添加更多地图</a></el-button>
        <el-button size="small" icon='el-icon-brush'>
          <a
            target="_blank"
            href=" http://geojson.io/#map"
          >画地图</a></el-button>
      </template>

      <ht-table-column
        type="index"
        width="50"
        align="center"
        label="序号"
      />
      <ht-table-column
        prop="name"
        label="地图名称"
        :show-overflow-tooltip="true"
      />
      <ht-table-column
        label="操作"
        fixed="right"
        width="150"
      >
        <template v-slot="{row}">
          <el-button
            type="text"
            @click="handelEdit(row)"
          >
            <i class="el-icon-edit">编辑</i>
          </el-button>
          <el-button
            type="text"
            @click="handelDelete(row.id)"
          >
            <i class="el-icon-delete">删除</i>
          </el-button>
        </template>
      </ht-table-column>
    </ht-table>
    <!-- 修改弹框 -->
    <el-dialog
      :title="type === 'edit' ? '编辑' : '添加'"
      :visible.sync="dialogVisibleAdd"
      width="40%"
      :before-close="handleClose"
      v-if='dialogVisibleAdd'
    >
      <el-form
        ref='form'
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item
          label="地图名称"
          prop="name"
        >
          <!-- <ht-input
            v-model="form.name"
            :validate="{'required':true}"
          /> -->
          <el-input
            v-model="form.name"
            placeholder="请输入地图名称"
          />
        </el-form-item>
        <el-form-item label="地图数据">
          <el-input
            type="textarea"
            rows="15"
            v-model="form.mapData"
            placeholder="地图数据为json数据"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="save"
        >{{type === 'edit' ? '修改' : '保存'}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import report from '@/api/report.js'
import req from '@/request.js'
export default {
  name: 'table-code',
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      dialogVisibleAdd: false,
      form: {
        name: '',
        mapData: '',
        id: ''
      },
      type: '',
      rules: {
        name: [{required: true, message: '请输入地图名称', trigger: 'blur'}]
      }
    }
  },
  mounted() {},
  methods: {
    loadData(param, cb) {
      report
        .getMapManagement(param)
        .then(response => {
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
          this.data = response.rows
          // console.log(response.rows)
        })
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    },
    handleClose(done) {
      this.form = {
        name: '',
        mapData: '',
        id: ''
      }
      done()
    },
    handleCancel() {
      this.form = {
        name: '',
        mapData: '',
        id: ''
      }
      this.dialogVisibleAdd = false
    },
    //编辑修改
    handelEdit(data) {
      this.type = 'edit'
      this.dialogVisibleAdd = true
      this.form.id = data.id
      this.form.name = data.name
      this.form.mapData = data.mapData
    },
    //删除
    handelDelete(id) {
      report.mapDelete(id).then(res => {
        this.loadData()
      })
    },
    //添加
    handelAdd() {
      this.type = 'add'
      this.dialogVisibleAdd = true
    },
    //保存添加修改
    save() {
      this.$refs.form.validate(bool => {
        if (bool) {
          report.mapEditSave(this.form).then(res => {
            this.loadData()
            this.form = {
              name: '',
              mapData: '',
              id: ''
            }
            this.dialogVisibleAdd = false
          })
        }
      })
    }
  }
}
</script>