<template>
  <div class="app-container">
    <el-dialog
      append-to-body
      :close-on-click-modal=false
      :before-close="crudDraw.cancelDr"
      :visible="crudDraw.status.dr > 0"
      :width="width"
      :title="title"
      :crud-tag="dataType"
    >
      <el-row>
        <el-col :span="13">
          <relative-map
            ref="relativeMap"
            v-model="batchMapData"
            :buildFloor=buildFloor
            :drawShow=true
            drawMode="Polygon"
            width="60%"
            height="60%"
          />
        </el-col>
        <el-col :span="1">
          <el-button type="text" size="mini" @click="saveDraw()">保存</el-button>  
        </el-col>
        <el-col :span="10">
            <div class="head-container">
              <div v-if="crud.props.searchToggle">
                <el-select
                  v-model="query.status"
                  clearable
                  size="small"
                  placeholder="选择状态"
                  class="filter-item"
                  style="width: 100px"
                  @change="crud.toQuery"
                >
                  <el-option
                    v-for="item in 2"
                    :key="item"
                    :label="item == '1' ? '已设置' : '未设置'"
                    :value="item"
                  />
                </el-select>
                <el-input
                  v-model="query.name"
                  clearable
                  size="small"
                  placeholder="输入标签名称"
                  style="width: 180px"
                  class="filter-item"
                  @keyup.enter.native="crud.toQuery"
                />
                <rrOperation />
              </div>
                <crudOperation :permission="permission"/>
            </div>
            <el-table
              ref="table"
              v-loading="crud.loading"
              :data="crud.data"
              style="width: 100%;"
              @selection-change="crud.selectionChangeHandler"
            >
              <el-table-column
                v-for="item in tbOption"
                :key="item.prop"
                :label="item.label"
                :prop="item.prop"
                :width="item.width"
                :align="item.align"
                :fixed="item.fixed"
                :sortable="item.sortable"
              >
              </el-table-column>
              <el-table-column
                v-if="checkPer(['admin', 'batchMap:del'])"
                label="操作"
                width="130"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <div style="display:flex;">
                    <el-button type="text" size="mini" style="margin-right:5px;" @click="handleLabelLocation(scope.row)">修改</el-button>
                    <el-button type="text" size="mini" style="margin-right:10px;" @click="resetLabelLocation(scope.row)">重置</el-button>
                    <udOperation :data="scope.row" :permission="permission" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer-batchMap">
        <el-button @click="closeBatchMap()">关闭</el-button>
      </div>
    </el-dialog>
  </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 { patrolLabelBatchTableOptions } from '../tableConfig'
//import VisualMap from '@/components/RelativeMap'
import { initData } from '@/api/data'
import RelativeMap from '@/components/RelativeMap'

const defaultForm = {
  id: null,
  code: '',
  name: '',
  desc: '',
  location:'',
  GPSRail: [],
  NFCCode: '',
  QRCode: '',
  Rail: [],
  RFIDCode: '',
  BarCode:'',
  scenePicUrl:[],
  points:[],
  reset:false,

  tbOption:null,
  typeURL:'',
}

export default {
  name: 'BatchMap',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps,DateRangePicker,RelativeMap },
  props: {
    title: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default:'60%',
    },
    dataType: {
      type: String,
      default: '',
    },
    checkFlag: {
      type: String,
      default: "1",
    },
    mapData: {
      type: Array,
      default: () =>[],
    },
    openOrClose: {
      type: Boolean,
      default: false,
    },
    crudDraw: {
      type: Object,
      default: () =>{},
    },
  },
  cruds() {
    return CRUD({
      title:'批量标注',
      url: 'positioning/rail/getPageListJson',
      // url: this.typeURL,
      crudMethod: { ...crudElement },
      optShow: { add: false, edit: false, del: false, reset: true },
    })
  },
  data() {
    return {
      batchMapData:[],
      buildFloor: {},
      permission: {
        add: ['admin', 'batchMap:add'],
        edit: ['admin', 'batchMap:edit'],
        del: ['admin', 'batchMap:del'],
        draw: ['admin', 'batchMap:del']
      },
      patrolLabelBatchTableOptions,
      rules: {
        content: [{ required: true, message: '请输入巡检项目', trigger: 'blur' }],
        standard: [{ required: true, message: '请输入巡检标准', trigger: 'blur' }],
      },
      dataTypeList:[
        {label:"文本",value:"1"},
        {label:"状态",value:"2"},
        {label:"数值",value:"3"},
        {label:"位号",value:"4"},
      ],
      unitList:[
        {label:"pH值",value:"1"},
        {label:"液位(mm)",value:"2"},
        {label:"压力(KPa)",value:"3"},
        {label:"气体(ppm)",value:"4"},
        {label:"浓度(%LEL)",value:"5"},
        {label:"液位(%)",value:"6"},
      ],
      symbolList:[
        {label:"><",value:"1"},
        {label:"≥≤",value:"2"},
        {label:">",value:"3"},
        {label:"<",value:"4"},
        {label:"≥",value:"5"},
        {label:"≤",value:"6"},
      ],
      dataTypeTableOptions:[
        {selcetType:"patrolLabel",tableOptions:patrolLabelBatchTableOptions,url:'positioning/rail/getPageListJson'},
        // {selcetType:"person",tableOptions:selectUserTableOptions,url:'system/person/getPageListJson'},
        // {selcetType:"area",tableOptions:selectAreaTableOptions,url:'system/area/getPageListJson'},
        // {selcetType:"dept",tableOptions:selectDepartmentTableOptions,url:'system/dept/getPageListJson'},
        // {selcetType:"patrolObject",tableOptions:selectPatrolObjectTableOptions,url:'system/dept/getPageListJson'},
        // {selcetType:"checkPoint",tableOptions:selectCheckPointTableOptions,url:'system/dept/getPageListJson'},
        // {selcetType:"dangerOrigin",tableOptions:selectDangerOriginTableOptions,url:'system/dept/getPageListJson'},
      ],
      objectTypeList:[]
    }
  },
  created() {
    this.selectOption()
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    }
  },
  watch:{
    batchMapData(newValue, oldValue) {
      // this.form.Rail = JSON.stringify(this.batchMapData[0].geometries[0])
      this.buildFloor = {
        buildId: this.batchMapData[0].buildId,
        floorNo: this.batchMapData[0].floorNo,
      }
      this.form.points = this.batchMapData[0].geometries[0].points
      console.log(this.form.points);
    },
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.beforeToAdd](crud, form) {
      
    },
    // 提交前做的操作
    [CRUD.HOOK.afterValidateCU](crud) {
      
    },
    checkboxT(row, rowIndex) {
      return true
      // return row.id !== this.userInfo.id
    },
    selectOption(){
      for (let i = 0; i < this.dataTypeTableOptions.length; i++) {
        if(this.dataType == this.dataTypeTableOptions[i].selcetType){
          this.tbOption = this.dataTypeTableOptions[i].tableOptions
          this.typeURL = this.dataTypeTableOptions[i].url
          console.log(this.tbOption)
          console.log(this.typeURL)
        }
      }
    },
    handleLabelLocation(row) {
      console.log(row);
      this.form = row
      this.syncDataLabelAndMap(this.form)
    },
    resetLabelLocation(row){
      console.log(row);
      this.form = row
      this.form.reset = true
      this.syncDataLabelAndMap(this.form)
    },
    async syncDataLabelAndMap(datas){
      // console.log(datas);
      if (datas.reset) {
        this.batchMapData = []
      }else{
        this.batchMapData = [
          {
            buildId: datas.buildId,
            floorNo: datas.floorNo,
            geometries: [
              {
                type: 'Polygon',
                points: datas.points,
              },
            ],
          },
        ] 
      }
      //同步数据至当前form，用于后续提交
      console.log(this.batchMapData);
    },
    saveDraw(){
      //提交修改
      // console.log(this.form.points);
    },
    async closeBatchMap(){
      // console.log(this.$refs.batchMap);
      // console.log(value);
      // if (this.$refs.batchMap.map) this.$refs.batchMap.map.remove()
      this.crudDraw.cancelDr()
    },
  }
}
</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>
