<template>
  <basic-container class="editElement">
    <div class="header">
      提示：鼠标右键功能：更换匹配元素字段、新增元素字段、删除匹配元素字段、公式配置&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 红色：代表匹配不成功、蓝色代表推荐匹配元素字段、绿色代表匹配成功
    </div>
    <el-row
      :gutter="20"
      class="martop20"
    >
      <el-col :span="16">
        <div
          class='parent'
          id='parent'
        >
        </div>

      </el-col>
      <el-col
        :span="8"
        v-show="AddNewElementField == '替换元素'"
      >
        <el-select
          style="width:400px;"
          v-model="value"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.eName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <div class="tihuan">替换为：</div>
        <el-input
          :disabled="true"
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="value"
        >
        </el-input>
        <div class="martop20">
          <el-button
            type="info"
            @click="cancelReplace()"
          >取消</el-button>
          <el-button
            type="primary"
            :disabled="tag"
            @click="saveReplace()"
          >保存</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 弹框 -->
    <div
      @mouseout="mouseout22"
      @mousemove="mousemove22"
      v-if="cascaderPanel"
    >
      <el-cascader-panel
        :style="{width:'360px',position: 'absolute',top:top+'px',left:left+'px','background-color':'#fff',margin:'40px',}"
        :props="{ expandTrigger: 'hover' }"
        :options="options2"
        @change="takuangchangge"
      ></el-cascader-panel>
    </div>

    <el-dialog
      title="添加新元素字段"
      :visible="AddNewElementField=='新增元素'"
      width="60%"
      :before-close="handleClose"
      :modal-append-to-body="false"
      style="z-index: 999999;"
    >
      <div>
        <i
          @click="addyuansu"
          class="el-icon-circle-plus marbottom10"
          style="color:red; font-size:24px; float: right;cursor: pointer;"
        ></i>
        <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="清表元素名称"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.eName"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="元素数据类型"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.eType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dataType"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="date"
            label="长度"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.date"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="date"
            align="center"
            width="120"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                @click="deleteziduan(scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose()">取 消</el-button>
        <el-button
          type="primary"
          :disabled="tableData.length===0"
          @click="pushNewElementField()"
        >确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getExcelHtml } from '@/api/exctab/excelmodel'
import { getElementInfoByTabId, submit, dictionarydataType, submitBatch } from '@/api/exctab/editelement'
import Vue from 'vue'
export default {
  data () {
    return {
      dataType: [],//数据类型
      tag: false,
      table: {

      },//table表鼠标右键事件
      AddNewElementField: '',
      setTimeout: '',
      top: 0,
      left: 0,
      cascaderPanel: false,
      options: [],
      value: '',
      tableData: [],//table表
      options2: [{
        value: '编辑元素字段',
        label: '编辑元素字段',
        children: [{
          value: '替换元素',
          label: '替换元素'
        }, {
          value: '新增元素',
          label: '新增元素'
        }, {
          value: '删除文本信息',
          label: '删除文本信息'
        }]
      }, {
        value: '公式配置',
        label: '公式配置',
      }],
    }
  },
  mounted () {
    this.cop()
  },
  created () {
    this.getElementInfoByTabId()
  },
  methods: {
    takuangchangge (value) {//切换事件
      if (value[value.length - 1] == '替换元素') {
        this.AddNewElementField = '替换元素'
        this.cascaderPanel = false
        clearTimeout(this.setTimeout)
      } else if (value[value.length - 1] == '新增元素') {
        if (this.dataType.length == 0) {
          this.dictionarydataType()
        }
        this.tableData = []
        this.AddNewElementField = '新增元素'//打开新增元素弹框
        this.cascaderPanel = false
        clearTimeout(this.setTimeout)
      } else if (value[value.length - 1] == '删除文本信息') {
        this.deleteelement()
        this.cascaderPanel = false
        clearTimeout(this.setTimeout)
      } else if (value[value.length - 1] == '公式配置') {
        this.cascaderPanel = false
        clearTimeout(this.setTimeout)
      }
    },
    mouseout22 () {//鼠标移出事件
      clearTimeout(this.setTimeout)
      this.setTimeout = setTimeout(() => {
        this.cascaderPanel = false
      }, 500)
    },
    mousemove22 () {//鼠标移入事件
      clearTimeout(this.setTimeout)
      this.setTimeout = setTimeout(() => {
        this.cascaderPanel = true
      }, 500)
    },
    RightClick2 (tr, td, x1, x2, y1, y2) {
      // console.log(window.event.clientX, window.event.clientY);
      this.table = {
        tr,
        td
      }
      this.top = window.event.clientY - 80
      this.left = window.event.clientX - 300
      // console.log(tr, td, x1, x2, y1, y2);
      this.cascaderPanel = true
      clearTimeout(this.setTimeout)
      this.setTimeout = setTimeout(() => {
        this.cascaderPanel = false
      }, 3000)
    },
    deleteelement () {//删除元素提示
      let _that = this
      this.$confirm('确认删除该元素？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _that.submit({
          name: '/',
          tabId: this.$route.query.pkeyId,
          tdIndex: this.table.td,
          trIndex: this.table.tr,
        })
      }).catch(() => {
        _that.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async cop () {
      let _that = this
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('editElement'),
        methods: {
          RightClick (tr, td, x1, x2, y1, y2) {//鼠标右键事件
            _that.RightClick2(tr, td, x1, x2, y1, y2)
          },
        }
      })
      var component = new MyComponent().$mount()
      let na = document.getElementById('parent')
      document.getElementById('parent').appendChild(component.$el);
    },
    async copss () {
      var MyComponent = await Vue.extend({
        template: localStorage.getItem('editElement')
      })
      var component = new MyComponent().$mount()
      let na = document.getElementById('parent')
      na.innerHTML = `<div
        class='parent'
        id='parent'
      ></div>`
      document.getElementById('parent').appendChild(component.$el);
    },
    async dictionarydataType () {
      const { data: res } = await dictionarydataType()
      console.log(res);
      if (res.code == 200) {
        this.dataType = res.data
      }
    },
    //#region 左侧替换元素
    cancelReplace () {//替换元素取消按钮
      this.AddNewElementField = ''
    },
    saveReplace () {//保存按钮
      if (this.value) {
        this.tag = true
        this.submit({
          id: this.value,
          tabId: this.$route.query.pkeyId,
          tdIndex: this.table.td,
          trIndex: this.table.tr,
        })
      } else {
        this.$message({
          type: "error",
          message: "请选择要替换的元素"
        })
      }
    },
    async getElementInfoByTabId () {//获取字段信息
      const { data: res } = await getElementInfoByTabId({ tabId: this.$route.query.id })
      console.log(res);
      if (res.code === 200) {
        this.options = res.data
      }
    },
    async submit (da) {//保存替换元素
      const { data: res } = await submit(da)
      console.log(res);
      if (res.code == 200) {
        const { data: res } = await getExcelHtml({ excelId: this.$route.query.excelId })
        console.log(res);
        if (res.code === 200) {
          this.tag = false
          this.value = ''
          this.options = []
          localStorage.setItem('editElement', res.data)
          this.getElementInfoByTabId()
          this.copss()
        }
      }
    },
    //#endregion

    //#region 弹框事件
    handleClose () {
      this.tableData = []
      this.AddNewElementField = ''
    },
    addyuansu () {//新增元素
      this.tableData.unshift({ eName: '', eType: '' })
    },
    deleteziduan (key) {//删除新增元素弹框字段
      this.tableData.splice(key, 1)
    },
    pushNewElementField () {//确定添加按钮
      if (this.tableData) {
        let tag = true
        this.tableData.forEach(val => {
          if (!val | !val | !val) {
            tag = false
          }
        })
        if (tag) {
          this.submitBatch({
            initTableName: this.$route.query.initTableName,
            id: this.$route.query.id,
            listData: this.tableData,
          })
        } else {
          this.$message({
            type: 'eroor',
            message: '请填写所有字段'
          });
        }
      }
    },
    async submitBatch (da) {
      const { data: res } = await submitBatch(da)
      console.log(res);
      if (res.code == 200) {

      }
    }
    //#endregion
  },
  watch: {
    'options' () {
      if (this.options) {
        this.options2 = [{
          value: '编辑元素字段',
          label: '编辑元素字段',
          children: [{
            value: '替换元素',
            label: '替换元素'
          }, {
            value: '新增元素',
            label: '新增元素'
          }, {
            value: '删除文本信息',
            label: '删除文本信息'
          }]
        }, {
          value: '公式配置',
          label: '公式配置',
        }]
      } else {
        this.options2 = [{
          value: '编辑元素字段',
          label: '编辑元素字段',
          children: [{
            value: '新增元素',
            label: '新增元素'
          }, {
            value: '删除文本信息',
            label: '删除文本信息'
          }]
        }, {
          value: '公式配置',
          label: '公式配置',
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.editElement {
  .header {
    color: rgb(240, 114, 10);
  }
  .tihuan {
    margin-top: 15px;
    margin-bottom: 10px;
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: rgb(16, 16, 16);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 20px;
    text-decoration: none;
  }
}
</style>