<template>
  <el-dialog :class="'modelDetailDialog'" v-if="isShow" :visible.sync="isShow" width="800px" top="4%"
    :close-on-click-modal="false" :before-close="dialogBeforeClose">
    <el-form :model="fromDataRender" class="modeldetail" ref="modelDetail_form" label-width="80px" :rules="rules">
      <el-row class="second_title">基本信息</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="第三方ID" prop="threeId">
            <el-input v-model="fromDataRender.threeId" :readonly="!edit" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="第三方表名" prop="tableName">
            <el-input v-model="fromDataRender.tableName" :readonly="!edit" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题" prop="title">
            <el-input v-model="fromDataRender.title" :readonly="!edit" maxlength="20" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="描述" prop="content">
            <el-input v-model="fromDataRender.content" :readonly="!edit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" prop="type">
            <el-select v-model="fromDataRender.type" :readonly="!edit" placeholder="请选择" :disabled="operationType != 0">
              <el-option v-for="item in menuList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="operationType != 0">
          <el-form-item label="图层ID" prop="type">
            <el-input v-model="fromDataRender.id" :readonly="true" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="内容描述" prop="jsonStr">
          <el-input type="textarea" placeholder="请输入内容" v-model="fromDataRender.jsonStr" maxlength="5000"
            show-word-limit :readonly="!edit" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
        </el-form-item>
      </el-row>
      <el-row class="second_title">符号标识</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="几何类型" prop="geometryType">
            <el-select v-model="fromDataRender.geometryType" placeholder="请选择" :readonly="!edit">
              <el-option v-for="item in geoTypeArr" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 颜色 -->
        <el-col :span="11" v-if="fromDataRender.geometryType == 'Point'">
          <el-form-item label="图标颜色" prop="lineColor" style="margin-bottom: 10px">
            <el-color-picker v-model="fromDataRender.fillColor" color-format="hex"></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="fromDataRender.geometryType == 'Point'">
        <div class="picture_store">
          <ul>
            <li v-for="(item, index) in imgArr" :class="{ active: item.active }" :key="index"
              @click="selectedMark(item)" :style="{ backgroundImage: 'url(' + item.src + ')' }" :title="item.name">
              <div>{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </el-row>
      <el-row v-if="fromDataRender.geometryType == 'LineString'">
        <!-- 线宽 -->
        <el-col :span="13">
          <el-form-item label="线宽" prop="lineWidth">
            <el-slider v-model="fromDataRender.lineWidth" :min="1" :max="20" show-input></el-slider>
          </el-form-item>
        </el-col>
        <!-- 颜色 -->
        <el-col :span="11">
          <el-form-item label="颜色" prop="lineColor">
            <el-color-picker v-model="fromDataRender.lineColor" show-alpha color-format="rgb"></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="fromDataRender.geometryType == 'Polygon'">
        <!-- 线宽 -->
        <el-col :span="13">
          <el-form-item label="边框线宽" prop="lineWidth">
            <el-slider v-model="fromDataRender.lineWidth" :min="1" :max="20" show-input></el-slider>
          </el-form-item>
        </el-col>
        <!-- 线颜色 -->
        <el-col :span="5">
          <el-form-item label="边框线颜色" prop="lineColor">
            <el-color-picker v-model="fromDataRender.lineColor" show-alpha color-format="rgb"></el-color-picker>
          </el-form-item>
        </el-col>
        <!-- 面颜色 -->
        <el-col :span="6">
          <el-form-item label="面颜色" prop="fillColor">
            <el-color-picker v-model="fromDataRender.fillColor" show-alpha color-format="rgb"></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="title" class="dialog-title">
      <div class="title">
        <span>{{ title }}</span>
      </div>
    </span>
    <span slot="footer" class="dialog-footer" v-if="edit">
      <el-button @click="dialogBeforeClose">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import api from "@/api/model";
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    edit: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    beforeClose: {
      type: Function,
    },
    updateData: {
      type: Function,
    },
    formData: {
      type: Object,
    },
    operationType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      fromDataRender: {
        alpha: "",
        content: "",
        createDate: "",
        fillColor: "#FF0000",
        geometryType: "Point",
        iconUrl: "",
        id: "",
        jsonStr: "",
        lineWidth: "",
        tableName: "",
        threeId: "",
        title: "",
        type: 0,
        updateDate: "",
      },
      geoTypeArr: [
        {
          name: "点",
          value: "Point",
        },
        {
          name: "线",
          value: "LineString",
        },
        // {
        //   name: "面",
        //   value: "Polygon",
        // },
      ],
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        threeId: [
          { required: true, message: "请填写第三方Id", trigger: "blur" },
        ],
        tableName: [
          { required: true, message: "请填写第三方表名", trigger: "blur" },
        ],
        content: [{ required: true, message: "请填写描述", trigger: "blur" }],
        jsonStr: [{ required: true, message: "请填写描述", trigger: "blur" }],
        type: [
          {
            required: true,
            message: "请选择图层类型",
            trigger: "change",
          },
        ],
      },
      imgArr: [],
      tipShow: false,
      tips: "",
    };
  },
  created() {
    this.getMarkImage();
  },
  methods: {
    // 创建
    sure() {
      let that = this;
      let data;
      this.$refs["modelDetail_form"].validate((valid) => {
        if (valid) {
          if (that.operationType == 0) {
            // 增加
            data = Object.assign({}, that.fromDataRender);
            delete data.id;
            delete data.updateDate;
            delete data.createDate;
            that.addModel(data);
          } else if (that.operationType == 1) {
            // 查看
          } else if (that.operationType == 2) {
            // 编辑
            data = Object.assign({}, that.fromDataRender);
            delete data.updateDate;
            delete data.createDate;
            that.updateModel(data);
          }
        } else {
          return false;
        }
      });
    },

    // 获取点状标注图片
    getMarkImage() {
      let that = this;
      api
        .getMarkImage()
        .then((result) => {
          if (result.code == 200) {
            that.imgArr = result.content.map(function (obj) {
              return {
                src: systemConfig.markImageUrl + obj.value,
                initSrc: obj.value,
                name: obj.key,
                active: false,
              };
            });
          } else {
            result.message = "标注图片获取失败，请重试！";
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 图片选中
    selectedMark(item) {
      if (this.edit) {
        this.fromDataRender.iconUrl = systemConfig.markPrefix + item.initSrc;
        this.imgArr = this.imgArr.map(function (imgItem) {
          imgItem.active = false;
          if (imgItem.initSrc == item.initSrc) {
            imgItem.active = true;
          }
          return imgItem;
        });
      }
    },

    // 创建
    addModel(data) {
      let that = this;
      // 上传loading
      const loading = that.$loading({
        customClass: "allPageLoading",
        lock: true,
        text: "图层新增中，请勿刷新！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      api
        .addModel(data)
        .then((result) => {
          loading.close();
          if (result.code == 200) {
            that.$message({
              type: "success",
              message: "图层增加成功！",
            });
            that.updateData();
            that.dialogBeforeClose();
          } else {
            loading.close();
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },
    // 更新
    updateModel(data) {
      let that = this;
      // 上传loading
      const loading = that.$loading({
        customClass: "allPageLoading",
        lock: true,
        text: "图层更新中，请勿刷新！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      api
        .updateModel(data)
        .then((result) => {
          loading.close();
          if (result.code == 200) {
            that.$message({
              type: "success",
              message: "图层更新成功！",
            });
            that.updateData();
            that.dialogBeforeClose();
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          loading.close();
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 创建数据集窗口关闭前
    dialogBeforeClose() {
      this.fromDataRender = {
        alpha: "",
        content: "",
        createDate: "",
        fillColor: "#FF0000",
        geometryType: "Point",
        iconUrl: "",
        id: "",
        jsonStr: "",
        lineWidth: "",
        tableName: "",
        threeId: "",
        title: "",
        type: 0,
        updateDate: "",
      };
      this.beforeClose();
      this.imgArr.map(function (item) {
        item.active = false;
        return item;
      });
      this.$refs.modelDetail_form.clearValidate();
    },
  },
  computed: {
    menuData() {
      return this.$store.state.menuDataList;
    },
  },
  watch: {
    formData(newVal) {
      let that = this;
      if (newVal) {
        this.fromDataRender = newVal;
        this.pointToImg = setInterval(() => {
          that.imgArr = that.imgArr.map(function (item) {
            if (that.fromDataRender.iconUrl.indexOf(item.initSrc) > -1) {
              item.active = true;
            }
            return item;
          });
          clearInterval(that.pointToImg);
        }, 100);
      }
    },
    menuData: {
      immediate: true,
      handler(newVal, oldName) {
        if (newVal) {
          this.menuList = newVal;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.modelDetailDialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 15px;
  }

  .title {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
  }

  /deep/ .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  /deep/ .el-dialog__footer {
    border-top: 1px solid #eeeeee;
    padding: 10px 20px;
  }

  .el-form-item {
    /deep/ .el-form-item__label {
      width: 100px !important;
    }

    /deep/ .el-form-item__content {
      margin-left: 100px !important;
      line-height: inherit;
    }
  }

  .el-row.second_title {
    line-height: 40px;
    text-indent: 20px;
    font-size: 18px;
  }

  .picture_store {
    height: 160px;
    border: 1px solid #eeeeee;
    padding: 5px 10px;
    overflow: hidden;
    overflow-y: auto;
    margin-bottom: 20px;

    ul {
      overflow: hidden;
    }

    li {
      float: left;
      width: 59px;
      height: 42.6px;
      background-size: 100% 100%;
      background-position-x: center;
      // background-position-y: center;
      background-repeat: no-repeat;
      margin: 10px 5px;
      margin-top: 10px;
      padding-bottom: 30px;
      border: 2px solid transparent;
      position: relative;
      cursor: pointer;

      div {
        position: absolute;
        bottom: -20px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &.active {
        border: 2px solid #eeeeee;
      }
    }
  }
}
</style>