<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增点位场馆' : '编辑点位场馆'"
      :form="form" :rules="rules" @submit="submit">
      <template v-slot:activity_list_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px">*</span>
            项目 ：
          </div>
          <div class="xy-table-item-content">
            <el-select  style="width: 300px" v-model="form.activity_list_id" placeholder="请选择">
              <el-option
                v-for="item in listActivity"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px">*</span>
            名称 ：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" clearable placeholder="请输入名称" style="width: 300px"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:image_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">封面图 ：</div>
          <div class="xy-table-item-content">
            <el-upload style="width: 300px" class="upload-demo" :action="action" :on-success="
                (response, file, fileList) =>
                  successHandle(response, file, fileList, 'image_id')
              " :before-upload="uploadBefore" :file-list="image_id" :on-remove="
                (file, fileList) => removeHande(file, fileList, 'image_id')
              " :limit="1" list-type="picture-card">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:lat>
        <div class="xy-table-item">
          <div class="xy-table-item-label">纬度 ：</div>
          <div class="xy-table-item-content">
            <el-input-number v-model="form.lat" clearable placeholder="请输入纬度" style="width: 300px"
              :controls="false"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:lng>
        <div class="xy-table-item">
          <div class="xy-table-item-label">经度 ：</div>
          <div class="xy-table-item-content">
            <el-input-number v-model="form.lng" clearable placeholder="请输入经度" style="width: 300px"
              :controls="false"></el-input-number>
          </div>
        </div>
      </template>
      <template #jiaodu>
        <div class="xy-table-item">
          <div class="xy-table-item-label">旋转角度 ：</div>
          <div class="xy-table-item-content">
            <el-input-number v-model="form.jiaodu" clearable :precision="2" placeholder="请输入旋转角度" style="width: 300px"
              :controls="false"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:x>
        <div class="xy-table-item">
          <div class="xy-table-item-label">x轴位置 ：</div>
          <div class="xy-table-item-content xy-table-item-price-per">
            <el-input-number v-model="form.x" clearable :precision="2" placeholder="请输入x轴位置" style="width: 300px"
              :controls="false"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:y>
        <div class="xy-table-item">
          <div class="xy-table-item-label">y轴位置 ：</div>
          <div class="xy-table-item-content xy-table-item-price-per">
            <el-input-number v-model="form.y" :precision="2" clearable placeholder="请输入y轴位置" style="width: 300px"
              :controls="false"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:video_image_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">视频封面图 ：</div>
          <div class="xy-table-item-content">
            <el-upload style="width: 300px" class="upload-demo" :action="action" :on-success="
                (response, file, fileList) =>
                  successHandle(response, file, fileList, 'video_image_id')
              " :before-upload="uploadBefore" :file-list="video_image_id" :on-remove="
                (file, fileList) => removeHande(file, fileList, 'video_image_id')
              " :limit="1" list-type="picture-card">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </div>
        </div>
      </template>

      <template v-slot:video_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">视频 ：</div>
          <div class="xy-table-item-content">
            <el-upload style="width: 300px" ref="upload" multiple :on-success="
                (response, file, fileList) =>
                  successHandle(response, file, fileList, 'video_id')
              " :before-upload="uploadBefore" accept=".mp4,.avi,.wmv,.mp3" :action="action" :file-list="video_id"
              :auto-upload="false" :on-remove="
                (file, fileList) => removeHande(file, fileList, 'video_id')
              ">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px" size="small" type="success"
                @click="$refs['upload'].submit()">开始上传</el-button>
              <div slot="tip" class="el-upload__tip">
                支持文件格式：.mp4 .avi .wmv .mp3
                <br />单个文件不能超过300M
              </div>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">内容 ：</div>
          <div class="xy-table-item-content">
            <tinymce style="width: 700px;" v-model="form.content"></tinymce>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
  import {
    show,
    save
  } from "@/api/index";
  import { index as activityIndex } from "@/api/activity/index";
  import tinymce from "@/components/XyTinymce"
  export default {
    components: {
      tinymce
    },
    props: {},
    data() {
      return {
        isShow: false,
        id: "",
        type: "",
        image_id: [],
        video_image_id: [],
        action: process.env.VUE_APP_UPLOAD_API,
        video_id: [],
        listActivity:[],
        form: {
          activity_list_id: '',
          name: "",
          image_id: "",
          lat: "",
          lng: "",
          x: "",
          y: "",
          jiaodu: "",
          video_id: "",
          video_image_id: "",
          content: "",
        },
        rules: {
          name: [{
            required: true,
            message: "请填写名称",
          }, ],
        },
      };
    },
    methods: {
      async loadActivity() {
        const res = await activityIndex({
          page: 1,
          page_size: 999,
        });
        this.listActivity = res.data;
      },
      show() {
        this.isShow = true;
      },
      hidden() {
        this.isShow = false;
      },
      init() {
        for (let key in this.form) {
          if (this.form[key] instanceof Array) {
            this.form[key] = [];
          } else {
            this.form[key] = "";
          }
        }
        this.$refs["dialog"].clearValidate();
      },
      setId(id) {
        if (typeof id == "number") {
          this.id = id;
        } else {
          console.error("error typeof id: " + typeof id);
        }
      },
      getId() {
        return this.id;
      },
      setType(type = "add") {
        let types = ["add", "editor"];
        if (types.includes(type)) {
          this.type = type;
        } else {
          console.warn("Unknown type: " + type);
        }
      },
      setForm(key = [], value = []) {
        if (key instanceof Array) {
          key.forEach((key, index) => {
            this.form[key] = value[index] ?? "";
          });
        }
        if (typeof key === "string") {
          this.form[key] = value;
        }
        if (!key) {
          this.init();
        }
      },

      //上传
      successHandle(response, file, fileList, key) {
        this[key] = fileList;
      },
      removeHande(file, fileList, key) {
        console.log("fileList", fileList)
        console.log("key", key)
        this[key] = fileList;
        this.form[key] = "";
      },
      uploadBefore(file) {
        console.log(file);
        if (file.size / 1000 > 300 * 1024) {
          this.$message({
            type: "warning",
            message: "上传大小超过300MB！",
          });
          return false;
        }
      },

      async getDetail() {
        const res = await show({
          id: this.id,
          table_name: "map_points",
          with_relations: ['video', 'image', "videoImage"]
        });
        this.$integrateData(this.form, res);
        this.image_id = res.image ? [{
          url: res.image?.url,
          name: res.image?.original_name,
          response: res.image
        }] : []
        this.video_id = res.video ? [{
          url: res.video?.url,
          name: res.video?.original_name,
          response: res.video
        }] : []


        this.video_image_id = res.video_image ? [{
          url: res.video_image?.url,
          name: res.video_image?.original_name,
          response: res.video_image
        }] : [];
      },

      submit() {

        if (this.type === "add") {
          if (this.form.hasOwnProperty("id")) {
            delete this.form.id;
          }
        }
        if (this.type === "editor") {
          Object.defineProperty(this.form, "id", {
            value: this.id,
            enumerable: true,
            configurable: true,
            writable: true,
          });
        }
        this.form.image_id = this.image_id.length == 0 ? "" : (this.image_id[0]?.response?.id);
        this.form.video_id = this.video_id.length == 0 ? "" : (this.video_id[0]?.response?.id);
        this.form.video_image_id = this.video_image_id.length == 0 ? "" : (this.video_image_id[0]?.response?.id);
        save(Object.assign(this.form, {
          table_name: "map_points"
        })).then(
          (res) => {
            this.$message({
              type: "success",
              message: this.type === "add" ? "新增点位场馆" : "编辑点位场馆" + "成功",
            });
            this.isShow = false;
            this.$emit("refresh");
          }
        );
      },
    },
    created(){
      this.loadActivity()
    },
    watch: {
      isShow(val) {
        if (val) {
          console.log("form",this.form.activity_list_id)
          if (this.type === "editor") {
            this.getDetail();
          }
        } else {
          this.id = "";
          this.type = "";
          this.image_id = [];
          this.video_id = [];
          this.video_image_id = [];
          this.init();
          this.$refs["dialog"].clearValidate();
          delete this.form.id;
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .el-input__inner {
    text-align: left;
  }

  .xy-table-item-price-per {
    position: relative;

    &::after {
      position: absolute;
      right: 10px;
      top: 0;
      content: "%";
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 46px;
      z-index: 2;
    }
  }
</style>
