<template>
  <div class="meta-container">
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.name"
          clearable
          size="small"
          placeholder="输入图元名称搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <date-range-picker v-model="query.baseCreateTime" class="date-item" />
        <el-select
          v-model="query.shapeType"
          clearable
          size="small"
          placeholder="图元形状"
          class="filter-item"
          style="width: 120px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item of shapeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!--表单渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crudCU"
      :title="crud.status.title"
      width="1200px"
    >
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
            <el-form-item label="图元名称" prop="name">
              <el-input v-model="form.name" size="small" class="filter-item" style="width: 280px" />
            </el-form-item>
            <el-form-item label="编号" prop="code">
              <el-input v-model="form.code" size="small" class="filter-item" style="width: 280px" />
            </el-form-item>
            <el-form-item label="形状" prop="shapeType">
              <el-select
                v-model="form.shapeType"
                clearable
                size="small"
                placeholder="请选择形状"
                class="filter-item"
                style="width: 280px"
                @change="changeShape"
              >
                <el-option
                  v-for="item of shapeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :label="shapeSizeLabel"
              prop="shapeSize"
              v-if="form.shapeType === 0 || form.shapeType === 2 || form.shapeType === 7"
            >
              <el-input
                v-model="form.shapeSize"
                size="small"
                class="filter-item"
                style="width: 280px"
                :disabled="form.shapeType === 7"
              />
            </el-form-item>
            <el-form-item
              :label="lineSizeLabel"
              prop="lineSize"
              v-if="
                form.shapeType === 3 ||
                  form.shapeType === 5 ||
                  form.shapeType === 7 ||
                  form.shapeType === 8
              "
            >
              <el-input
                v-model="form.lineSize"
                size="small"
                class="filter-item"
                style="width: 280px"
              />
            </el-form-item>
            <el-form-item
              label="线段透明度"
              prop="lineOpacity"
              v-if="
                form.shapeType === 3 ||
                  form.shapeType === 5 ||
                  form.shapeType === 7 ||
                  form.shapeType === 8
              "
            >
              <el-input
                v-model="form.lineOpacity"
                size="small"
                class="filter-item"
                style="width: 280px"
              />
            </el-form-item>
            <el-form-item label="离地高度" prop="z">
              <el-input v-model="form.z" size="small" class="filter-item" style="width: 280px" />
            </el-form-item>
            <el-form-item
              label="图元高度"
              prop="height"
              v-if="form.shapeType === 7 || form.shapeType === 5 || form.shapeType === 8"
            >
              <el-input
                v-model="form.height"
                size="small"
                class="filter-item"
                style="width: 280px"
              />
            </el-form-item>
            <el-form-item label="颜色" prop="color" v-if="form.shapeType !== 0">
              <el-color-picker
                v-model="form.color"
                size="small"
                class="filter-item"
                style="width: 280px"
              ></el-color-picker>
            </el-form-item>
            <el-form-item
              label="是否填充"
              prop="isFill"
              v-if="form.shapeType === 7 || form.shapeType === 5 || form.shapeType === 8"
            >
              <el-switch
                v-model="form.isFill"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                class="filter-item"
                style="width: 280px"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="填充颜色" prop="fillColor" v-if="form.isFill === 1">
              <el-color-picker
                v-model="form.fillColor"
                size="small"
                class="filter-item"
                style="width: 280px"
              ></el-color-picker>
            </el-form-item>
            <el-form-item label="填充透明度" prop="fillOpacity" v-if="form.isFill === 1">
              <el-input
                v-model="form.fillOpacity"
                size="small"
                class="filter-item"
                style="width: 280px"
              />
            </el-form-item>
            <el-form-item label="图片" prop="imageUrl" v-if="form.shapeType === 0">
              <el-select
                v-model="form.imageUrl"
                clearable
                filterable
                size="small"
                placeholder="请选择图标"
                class="filter-item"
                style="width: 280px"
              >
                <el-option
                  v-for="item in iconOptions"
                  :key="item.id"
                  :label="item.typeStr + ' / ' + item.name"
                  :value="item.path"
                >
                  <span style="float: left">{{ item.typeStr + ' / ' + item.name }}</span>
                  <img
                    style="float:right;width: 34px;height:34px;"
                    :src="VUE_APP_BASE_API + item.path"
                  />
                </el-option>
              </el-select>
              <el-image
                style="width:60px;height:60px"
                v-if="form.imageUrl"
                fit="contain"
                :src="VUE_APP_BASE_API + form.imageUrl"
                :preview-src-list="[VUE_APP_BASE_API + form.imageUrl]"
              />
            </el-form-item>
            <el-form-item label="图元描述" prop="desc">
              <el-input
                type="textarea"
                :rows="3"
                v-model="form.desc"
                class="filter-item"
                style="width: 280px"
              />
            </el-form-item>
            <div v-for="(item, index) of form.dataList" :key="index" style="margin-top:10px">
              <el-form-item label="名称">
                <el-input
                  v-model="item.name"
                  size="small"
                  class="filter-item"
                  style="width: 280px"
                />
              </el-form-item>
              <el-form-item label="内容">
                <el-input
                  v-model="item.value"
                  size="small"
                  class="filter-item"
                  style="width: 280px"
                />
              </el-form-item>
              <div style="width:380px;text-align:right">
                <el-button
                  type="danger"
                  size="mini"
                  @click="deleteDetail(index)"
                  v-if="form.dataList.length > 1 || index > 0"
                >
                  删除
                </el-button>
                <el-button
                  v-if="index == form.dataList.length - 1"
                  type="primary"
                  size="mini"
                  @click="addDetail"
                >
                  增加
                </el-button>
              </div>
            </div>
          </el-form>
        </el-col>
        <el-col :span="16">
          <visual-map v-if="crudCU" ref="visualMap" :form="form" :shapeOptions="shapeOptions" />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
      :empty-text="crud.query.layerID ? '暂无数据' : '请选择图层查看图元信息'"
    >
      <el-table-column :selectable="checkboxT" type="selection" width="55" align="center" />
      <el-table-column
        v-for="item in userTableOptions"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <span v-if="item.prop == 'shapeType'">
            {{ shapeOptions.find(t => t.value === scope.row.shapeType).label }}
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkPer(['admin', 'user:edit', 'user:del'])"
        label="操作"
        width="125"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import DateRangePicker from '@/components/DateRangePicker'
import crudElement from '@/api/visual/element'
import { userTableOptions } from '../tableConfig'
import VisualMap from './visualMap'
import { initData } from '@/api/data'

const defaultForm = {
  id: '',
  name: '',
  code: '',
  shapeType: '',
  shapeSize: '',
  lineSize: 3,
  lineOpacity: 1,
  z: 0,
  height: 0,
  color: '#fff',
  isFill: 0,
  fillColor: '#fff',
  fillOpacity: 1,
  imageID: '',
  imageUrl: '',
  dataList: [{ name: '', value: '' }],
  pointList: []
}
export default {
  name: 'mapMeta',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: {
    ...crudComps,
    DateRangePicker,
    VisualMap
  },
  cruds() {
    return CRUD({
      title: '图元',
      url: 'visualization/element/getList',
      crudMethod: { ...crudElement }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'user:add'],
        edit: ['admin', 'user:edit'],
        del: ['admin', 'user:del']
      },
      userTableOptions,
      rules: {
        name: [{ required: true, message: '请输入图元名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入图元编号', trigger: 'blur' }],
        shapeType: [{ required: true, message: '请选择图元形状', trigger: ['blur', 'change'] }],
        color: [{ required: true, message: '请选择颜色', trigger: ['blur', 'change'] }],
        imageUrl: [{ required: true, message: '请选择图标', trigger: ['blur', 'change'] }]
      },
      shapeOptions: [
        { label: '图片', value: 0, shapeType: 'image', mode: 'Point', max: 1, min: 1 },
        { label: '点', value: 2, shapeType: 'point', mode: 'Point', max: 1, min: 1 },
        { label: '线', value: 3, shapeType: 'line', mode: 'LineString', max: 999, min: 2 },
        // { label: '三角形', value: 4, shapeType: 'triangle', mode: 'Polygon', max: 3, min: 3 },
        { label: '矩形', value: 5, shapeType: 'rectangle', mode: 'Rectangle', max: 4, min: 4 },
        // { label: '正方形', value: 6, shapeType: 'square', mode: 'Rectangle', max: 4, min: 4 },
        { label: '圆形', value: 7, shapeType: 'round', mode: 'Circle', max: 1, min: 1 },
        { label: '多边形', value: 8, shapeType: 'polygon', mode: 'Polygon', max: 999, min: 3 },
        { label: '文字', value: 9, shapeType: 'polygon', mode: 'Label', max: 1, min: 1 }
      ],
      drawToolOption: [
        'Point',
        'LineString',
        'Polygon',
        'Circle',
        'Ellipse',
        'Rectangle',
        'FreeHandLineString',
        'FreeHandPolygon'
      ],
      iconOptions: []
    }
  },
  created() {},
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
    shapeSizeLabel() {
      const { shapeType } = this.form
      if (shapeType === 0) {
        return '缩放比例'
      } else if (shapeType === 2 || shapeType === 7) {
        return '半径'
      }
    },
    lineSizeLabel() {
      const { shapeType } = this.form
      if (shapeType === 3) {
        return '线宽'
      } else if (shapeType === 5 || shapeType === 7 || shapeType === 8) {
        return '边线宽'
      }
    },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    }
  },
  created() {
    this.getIcons()
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.beforeToAdd](crud, form) {
      if (!crud.query.layerID) {
        this.$message.warning('请先选择图层！')
        return false
      } else {
        form.layerID = crud.query.layerID
      }
    },
    // 提交前做的操作
    [CRUD.HOOK.afterValidateCU](crud) {
      // 选择label类型时的处理
      if (this.form.shapeType === 9) {
        let { baseRelativeCoordinate0, shapeLayer } = this.$refs.visualMap
        let geometries = shapeLayer.getGeometries()
        if (geometries.length) {
          let {
            _coordinates: { x, y },
            _content
          } = geometries[0]
          this.form.pointList = [
            {
              x: Math.round(x) + baseRelativeCoordinate0.x,
              y: -Math.round(y) - baseRelativeCoordinate0.y
            }
          ]
          this.form.labelText = _content
        }
      }
      // console.log(this.form)
      // return false
      if (!!this.form.pointList.length) {
        this.form.pointList.forEach(item => {
          item.z = this.form.z
        })
      }
    },
    checkboxT(row, rowIndex) {
      return true
      // return row.id !== this.userInfo.id
    },
    addDetail() {
      const obj = { name: '', value: '' }
      this.form.dataList.push(obj)
    },
    deleteDetail(index) {
      this.form.dataList.splice(index, 1)
    },
    changeShape(val) {
      this.$refs.visualMap.shapeLayer.clear()
      val === 9 && this.$refs.visualMap.setLabelLayer()
    },
    async getIcons() {
      try {
        const res = await initData('system/icon/getListJson', {})
        this.iconOptions = res.data.content
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
