<template>
  <div class="vdr_mark">
    <vue-draggable-resizable
      class="vdrmark"
      :w="300"
      :h="500"
      style="z-index: 1;"
      :minw="300"
      :minh="250"
      :active="true"
      :drag-cancel="'.cancel'"
      :handles="['br']"
      @deactivated="onDeactivated"
      :parent="true"
      :resizable="false"
      :x="modelView_x"
      :y="35"
    >
      <div class="div_tree" style="width:100%;height:100%;">
        <div class="tree_top">
          <span>标记</span>
          <img class="top_img" @click="hide" src="@/assets/shanchu.png">
        </div>
        <div class="cancel">
          <el-input
            class="tree_input"
            placeholder="输入关键字查询"
            v-model="filterText"
            suffix-icon="el-icon-search"
            @clear="clears"
            clearable
          ></el-input>
          <img class="cancel_img" @click="adds" src="@/assets/bianji.png">
        </div>
        <div
          class="filtertree"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-scrollbar style="height:100%;width: 100%;">
            <div
              style="text-align: center;margin-top: 30px;"
              v-if="list.length === 0 && seasrchs"
            >没有查询到数据!</div>
            <div
              class="div_formark"
              v-for="item of list"
              :key="item.id"
              @click="threeChange"
              @contextmenu.prevent="right_menu(item,$event)"
            >
              <div class="formark_left">
                <img
                  @click="trueImgUrl(item)"
                  style="width:100%;height:100%;cursor: pointer;"
                  :src="item.imgUrl"
                >
              </div>
              <div class="formark_right">
                <div>
                  <span class="right_spanone right_left">{{item.title}}</span>
                  <span class="right_spantwo text_right">{{item.problemNo}}</span>
                </div>
                <div>
                  <span
                    class="right_spantwo right_left div_span_left"
                  >{{item.userName}}</span>
                  <span style="padding-top: 10px;" class="right_spantwo text_right">{{item.commitTime}}</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </vue-draggable-resizable>
    <div
      class="right_menu"
      v-if="ShowTreeMenu"
      :style="{'left':onContextmenuTarget.x,'top':onContextmenuTarget.y}"
      ref="treeRight"
    >
      <div style="height:100%;width:100%;">
        <button class="right_button" @click="markDetail">详情</button>
        <button class="right_button" @click="markEdit">编辑</button>
        <button class="right_button" @click="markDelete">删除</button>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="100%"
      height="100%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="dialog_div" v-if="imgUrl">
        <img :src="TrueImgUrl" style="width:100%;height:100%;">
      </div>
      <div v-else class="dialog_div">
        <div class="dialog_left">
          <img :src="formLabelAlign.imgUrl" style="width:100%;height:100%;">
        </div>
        <div class="dialog_right">
          <div v-if="editT" style="width:100%;height:100%;">
            <el-form
              ref="formLabelAlign"
              :rules="fromRules"
              label-position="right"
              label-width="80px"
              :model="formLabelAlign"
            >
              <el-form-item label="标题" prop="title">
                <el-input maxlength="20" placeholder="请输入标题" v-model="formLabelAlign.title"></el-input>
              </el-form-item>
              <el-form-item label="问题描述" prop="cameraData">
                <el-input
                  type="textarea"
                  :rows="3"
                  resize="none"
                  maxlength="100"
                  placeholder="请输入问题描述"
                  v-model="formLabelAlign.cameraData"
                ></el-input>
              </el-form-item>
              <el-form-item label="标记人">
                <el-input disabled v-model="formLabelAlign.userName"></el-input>
              </el-form-item>
              <el-form-item label="标记时间">
                <el-input disabled v-model="formLabelAlign.commitTime"></el-input>
              </el-form-item>
              <el-form-item label="问题编号">
                <el-input placeholder="请输入问题编号" maxlength="20" v-model="formLabelAlign.problemNo"></el-input>
              </el-form-item>
              <el-form-item label="问题定位">
                <el-input
                  placeholder="请输入问题定位"
                  maxlength="20"
                  v-model="formLabelAlign.problemLocation"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button class="edits" type="primary" @click="save">保 存</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </div>
          <div v-else style="width:100%;height:100%;">
            <div class="right_top">
              <p class="top_one">{{formLabelAlign.title}}</p>
              <p class="top_two">{{formLabelAlign.cameraData}}</p>
            </div>
            <div class="right_main" style="padding-top: 20px;">
              <table style="width:100%">
                <tbody>
                  <tr class="table_tr">
                    <td class="tr_left">标记人</td>
                    <td class="tr_right">{{formLabelAlign.userName}}</td>
                  </tr>
                  <tr class="table_tr">
                    <td class="tr_left">标记时间</td>
                    <td class="tr_right">{{formLabelAlign.commitTime}}</td>
                  </tr>
                  <tr class="table_tr">
                    <td class="tr_left">问题编号</td>
                    <td class="tr_right">{{formLabelAlign.problemNo}}</td>
                  </tr>
                  <tr class="table_tr">
                    <td class="tr_left">问题定位</td>
                    <td class="tr_right">{{formLabelAlign.problemLocation}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div slot="footer" class="dialog-footer" v-if="editT">
              <el-button class="edits" type="primary" @click="edits">编 辑</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  data() {
    return {
      // 横轴坐标（左上角0点）
      modelView_x: 1000,
      seasrchs: false,
      loading: false,
      TrueImgUrl: '',
      imgUrl: false,
      onContextmenuTarget: {
        x: 0,
        y: 0
      },
      editY: true,
      ShowTreeMenu: false,
      filterText: '',
      list: [],
      dialogVisible: false,
      editT: true,
      from: {},
      formLabelAlign: {
        userId: sessionStorage.getItem('userid'),
        cameraData: '',
        title: '',
        userName: sessionStorage.getItem('username'),
        problemLocation: '',
        problemNo: '',
        imgUrl: '',
        commitTime: '',
        projectId: '',
        viewId: ''
      },
      fromRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { max: 20, message: '长度在20个字符内', trigger: 'blur' }
        ],
        cameraData: [
          { required: true, message: '请输入问题描述', trigger: 'blur' },
          { max: 100, message: '长度在100个字符内', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    filterText(val) {
      // 输入框过滤搜索
      if (!val) {
        this.search();
      } else {
        this.list = this.list.filter(item => (~item.title.indexOf(val)));
      }
    },
    getModelInfoX(val) {
      this.modelView_x = Number(val) - 500;
    },
  },
  created: function() {
    this.modelView_x = Number(this.$store.state.modelview.viewX) - 500;
  },
  computed: {
    getModelInfoX() {
      return this.$store.state.modelview.viewX;
    },
  },
  methods: {
    onDeactivated() { },
    clears() {
      // 搜索清空
      this.search();
    },
    handleClose(done) {
      // 关闭弹窗
      done();
      this.search();
      if (!this.imgUrl) {
        if (this.$refs.formLabelAlign !== undefined) {
          this.$refs.formLabelAlign.resetFields();
        }
      }
      this.imgUrl = false;
    },
    trueImgUrl(item) {
      // 弹窗左边图片展示
      this.TrueImgUrl = '';
      this.TrueImgUrl = item.imgUrl;
      this.dialogVisible = true;
      this.imgUrl = true;
    },
    markDetail() {
      // 标记详情
      this.editY = true;
      this.editT = false;
      this.ShowTreeMenu = false;
      this.dialogVisible = true;
    },
    markEdit() {
      // 标记编辑
      this.editY = true;
      this.editT = true;
      this.ShowTreeMenu = false;
      this.dialogVisible = true;
    },
    markDelete() {
      // 标记删除
      this.ShowTreeMenu = false;
      this.$confirm(`是否要删除标记 ${this.formLabelAlign.id}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      })
        .then(() => {
          this.$axios(`/modelView/deleteTag`, { 'id': this.formLabelAlign.id }, 'GET')
            .then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.search();
            })
            .catch(resultMsg => {
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    right_menu(item, $event) {
      // 鼠标右键
      this.ShowTreeMenu = true;
      this.formLabelAlign.cameraData = item.cameraData;
      this.formLabelAlign.commitTime = item.commitTime;
      this.formLabelAlign.imgUrl = item.imgUrl;
      this.formLabelAlign.problemLocation = item.problemLocation;
      this.formLabelAlign.problemNo = item.problemNo;
      this.formLabelAlign.projectId = item.projectId;
      this.formLabelAlign.title = item.title;
      this.formLabelAlign.userName = item.userName;
      this.formLabelAlign.viewId = item.viewId;
      this.formLabelAlign.id = item.id;
      setTimeout(() => {
        const currentHeiht = document.body.clientHeight;
        const plusHeight = this.$refs.treeRight.offsetHeight;
        if (currentHeiht - 220 <= $event.pageY) {
          this.onContextmenuTarget.x = $event.pageX + 'px';
          this.onContextmenuTarget.y = $event.pageY - plusHeight + 'px';
        } else {
          this.onContextmenuTarget.x = $event.pageX + 'px';
          this.onContextmenuTarget.y = $event.pageY + 'px';
        }
      }, 0);
    },
    threeChange() {
      // 鼠标左键
      this.ShowTreeMenu = false;
    },
    search() {
      // 列表查询接口
      this.loading = true;
      const projectId = sessionStorage.getItem('projectId')
        ? sessionStorage.getItem('projectId')
        : '';
      this.$axios('/modelView/queryTagList', { projectId: projectId }, 'POST')
        .then(res => {
          this.seasrchs = true;
          this.loading = false;
          this.list = [];
          this.list = res.data.value;
        })
        .catch(resultMsg => {
          this.seasrchs = true;
          this.loading = false;
        });
    },
    hide() {
      // 视点关闭
      this.$emit('WebMarkSwitch', false);
      this.$eventHub.$emit('bus-WebMarkSwitch', false);
    },
    save() {
      // 保存
      this.$refs.formLabelAlign.validate(valid => {
        if (!valid) {
          return true;
        }
        let url = '';
        if (this.editY) {
          this.from = {};
          url = '/modelView/editTag';
          this.from.id = this.formLabelAlign.id;
          this.from.userId = sessionStorage.getItem('userid');
          this.from.cameraData = this.formLabelAlign.cameraData;
          this.from.title = this.formLabelAlign.title;
          this.from.problemNo = this.formLabelAlign.problemNo;
          this.from.problemLocation = this.formLabelAlign.problemLocation;
          this.newDates();
          this.from.commitTime = this.formLabelAlign.commitTime;
        } else {
          this.from = {};
          url = '/modelView/addTag';
          this.from = this.formLabelAlign;
          this.newDates();
          delete this.from.id;
          // 新增不能传ID
          delete this.from.userName;
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$axios(url, this.from, 'POST')
          .then(res => {
            loading.close();
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.dialogVisible = false;
            this.search();
          })
          .catch(resultMsg => {
            loading.close();
          });
      });
    },
    newDates() {
      // 取当前时间
      const now = new Date();
      this.formLabelAlign.commitTime = moment(now)
        .format('YYYY-MM-DD HH:mm:ss')
        .toString();
    },
    adds() {
      // 新增
      const userName = sessionStorage.getItem('username') ? sessionStorage.getItem('username') : '';
      const userid = sessionStorage.getItem('userid') ? sessionStorage.getItem('userid') : '';
      this.formLabelAlign = {
        userId: userid,
        cameraData: '',
        title: '',
        userName: userName,
        problemLocation: '',
        problemNo: '',
        imgUrl: this.$store.state.modelview.snapshot,
        commitTime: '',
        projectId: sessionStorage.getItem('projectId'),
        viewId: this.$store.state.tree.viewId
      };
      this.newDates();
      this.editY = false;
      this.editT = true;
      this.dialogVisible = true;
    },
    cancel() {
      // 弹窗取消
      if (this.editY) {
        this.dialogVisible = false;
        this.search();
      } else {
        this.$confirm('是否要丢弃此次标记？', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          center: true
        })
          .then(() => {
            if (this.$refs.formLabelAlign !== undefined) {
              this.$refs.formLabelAlign.resetFields();
            }
            this.$message({
              type: 'success',
              message: '丢弃成功!'
            });
            this.dialogVisible = false;
            this.search();
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消丢弃'
            });
          });
      }
    },
    edits() {
      // 弹窗编辑
      this.editY = true;
      this.editT = true;
    }
  },
  beforeMount: function() { },
  mounted: function() {
    this.formLabelAlign.userName = sessionStorage.getItem('userName');
    this.formLabelAlign.imgUrl = this.$store.state.modelview.snapshot;
    this.search();
  },
  beforeDestroy: function() { },
  destroyed: function() { },
  directives: {}
};
</script>
