<template>
  <div class="setting-operateInfo">
    <el-table style="width: 100%" ref="table" :data="operateDetails">
      <el-table-column prop="title" label="标题" width="350">
        <template v-slot="{row}">
          <span v-if="row.type == 5 || row.type == 6 || row.type == 11 || row.type == 12 || row.type == 13 || row.type == 14 || row.type == 15">-</span>
          <el-input v-else placeholder="请输入" clearable v-model="row.title"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="350">
        <template v-slot="{row, $index}">
          <el-select class="w100" v-model="row.type" @change="changeType(row, $index)">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="内容">
        <template v-slot="{row,$index}">
          <template>
            <!--未选择-->
            <template v-if="!row.type">
              <span style="color: #F56C6C;">请选择类型</span>
            </template>
            <!-- 图片 / 无标图片 -->
            <template v-if="row.type == 1 || row.type == 11">
              <imageUpload class="setting-imageUpload" v-model="row.content" :limit="6" :fileSize="20" />
            </template>
            <!-- 视频 / 无标视频-->
            <template v-if="row.type == 2 || row.type == 13">
              <videoUpload class="setting-videoUpload" v-model="row.content" :value="row.content" />
            </template>
            <!--文本/无标-->
            <template v-if="row.type == 3 || row.type == 5">
              <div class="flex-acenter w100">
                <el-input style="width: 300px;" placeholder="请输入内容" v-model="row.content"></el-input>
                <i @click="changeLink(row, $index)" class="el-icon-paperclip setting-icon-paperclip"></i>
                <el-input v-if="row.showLink" style="width: 300px;" placeholder="请输入链接" v-model="row.linkText" />
              </div>
            </template>
            <!--长文本/无标-->
            <template v-if="row.type == 4 || row.type == 6">
              <div class="flex-acenter w100">
                <el-input placeholder="请输入内容" type="textarea" :rows="2" v-model="row.content" />
              </div>
            </template>
            <!-- 地图 / 无标地图 -->
            <template v-if="row.type == 7 || row.type == 14">
              <span v-for="(item, index) in row.mapContent" :key="index">
                <el-tag
                  @close="closeMaps($index, index)"
                  closable
                >
                  {{ item.address }}
                </el-tag>
              </span>
              <el-button v-if="row.mapContent && row.mapContent.length < 2" @click="chooseMaps(row, $index)">选择地点</el-button>
            </template>
            <!-- 大图 / 无标大图 -->
            <template v-if="row.type == 8 || row.type == 12">
              <imageUpload class="setting-imageUpload" v-model="row.content" :limit="3" :fileSize="20" />
            </template>
            <!--PDF-->
            <template v-if="row.type == 9">
              <fileUpload class="" v-model="row.content" :limit="1" :fileType="fileType" :isShowTip="false" />
            </template>
            <!-- 地图坐标 / 无标地图坐标 -->
            <template v-if="row.type == 10 || row.type == 15">
              <span v-for="(item, index) in row.mapContent" :key="index">
                <el-tag
                  @close="closeMaps($index, index)"
                  closable
                >
                  {{ item.address }}
                </el-tag>
              </span>
              <el-button v-if="row.mapContent && row.mapContent.length < 2" @click="fillPointMaps($index)">填写地点坐标</el-button>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="{$index}">
          <div class="flex-acenter">
            <!--
            <el-popconfirm title="确定删除吗？" @confirm="operateDetails.splice($index, 1)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
            -->
            <el-button slot="reference" type="text" @click="operateDetails.splice($index, 1)">删除</el-button>
            <div class="flex-col flex-allcenter" style="margin-left: 10px;">
              <i class="el-icon-caret-top operate-icon" @click="moveUp($index)" :class="[$index!=0?'operate-active':'']"></i>
              <i class="el-icon-caret-bottom operate-icon" @click="moveDown($index)" :class="[operateDetails.length != 1 && operateDetails.length-1 != $index ?'operate-active':'']"></i>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="setting-btn-area" @click="addOptions">
      <i style="font-size: 14px;" class="el-icon-plus"></i>
      <div class="buttonText">添加一行数据</div>
    </div>
    <el-dialog title="位置" :visible.sync="showMap" width="900px" id="map">
      <amap @mapDing="getMap" :Nowlnglat="Nowlnglat"></amap>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showMap = false" class="button-minwidth">取消</el-button>
        <el-button type="primary" @click="submitMap()" class="button-minwidth">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="填写坐标" :visible.sync="showPointMap" width="400px" id="pointMap">
      <div style="display: flex;flex-direction: column;align-items: flex-start;">
        <div style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;">
          <el-input v-model="mapInfo.lng" placeholder="经度" />
          <el-input v-model="mapInfo.lat" placeholder="纬度" style="margin-left: 10px;" />
        </div>
        <el-input v-model="mapInfo.address" placeholder="地址" maxlength="64"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closePointMap()" class="button-minwidth">取消</el-button>
        <el-button type="primary" @click="submitPointMap()" class="button-minwidth">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import imageUpload from '@/components/ImageUpload';
  import videoUpload from '@/components/VideoUpload';
  import fileUpload from '@/components/FileUpload';
  import amap from '@/components/Customer/amap';
  export default {
    props: {
      operateDetails: {
        type: Array,
        default: function () {
          return [];
        },
      },
      typeList: {
        type: Array,
        default: [],
      },
      type: {
        type: String,
        default: '',
      },
    },
    components: {
      imageUpload,
      videoUpload,
      fileUpload,
      amap
    },
    data() {
      return {
        videoType: ['video/mp4'],
        fileType: ['pdf'],
        mapIndex: -1, //打开地图的下标
        // 高德地图相关
        Nowlnglat: [], //经纬度传值
        showMap: false, //是否展示地图
        showPointMap: false, //是否展示填写坐标
        mapInfo: {},
      }
    },
    created() {},
    mounted() {},
    watch:{
      operateDetails: {
        handler: function(newValue, oldValue) {
          newValue.map(item => {
            item.type = String(item.type);
          });
        },
        immediate: true
      }
    },
    computed:{

    },
    methods: {
      addOptions() {
        this.operateDetails.push({
          title: '',
          type: '',
          content: '',
          mapContent: [],
        });
        this.$emit('update:operateDetails', this.operateDetails);
      },
      filterType(type) {
        let label;
        this.typeList.map(item => {
          if (item.value == type) label = item.label;
        });
        return label;
      },
      // 选择类型
      changeType(row, index) {
        let type = this.operateDetails[index].type;
        this.$nextTick(() => {
          if(type === '7' || type === '10' || type === '14' || type === '15') {
            const newDetail = Object.assign({}, this.operateDetails[index], {content: [], mapContent: []});
            this.$set(this.operateDetails, index, newDetail)
          }
        });
        if(type !== '7' && type !== '10' && type !== '14' && type !== '15') {
          const newDetail = Object.assign({}, this.operateDetails[index], {content: '', mapContent: ''});
          this.$set(this.operateDetails, index, newDetail)
        }
      },
      // 文本链接是否展示
      changeLink(row, index) {
        this.$set(this.operateDetails[index], 'showLink', !row.showLink);
      },
      // 关闭地图已选点
      closeMaps(index, mapIndex) {
        const operateDetails = [...this.operateDetails];
        operateDetails[index].mapContent.splice(mapIndex, 1);
        this.$emit("update:operateDetails", operateDetails);
      },
      // 选择地址
      chooseMaps(row, index) {
        this.showMap = true;
        this.mapIndex = index;
      },
      //上移
      moveUp(index) {
        if (index > 0) {
          let upDate = this.operateDetails[index - 1];
          this.operateDetails.splice(index - 1, 1);
          this.operateDetails.splice(index,0, upDate);
          this.operateDetails.map((item,index)=>item.sort = index);
        }
      },

      //下移
      moveDown(index) {
        if(index < this.operateDetails.length - 1) {
          let downDate = this.operateDetails[index + 1];
          this.operateDetails.splice(index + 1, 1);
          this.operateDetails.splice(index,0, downDate);
          this.operateDetails.map((item,index)=>item.sort = index);
        }
      },

      // ----------------------- 地图相关事件 -----------------------
      submitMap() {
        this.showMap = false;
        let mapInfo = JSON.parse(JSON.stringify(this.mapInfo));
        // console.log(this.operateDetails[this.mapIndex].mapContent);
        const operateDetails = [...this.operateDetails];
        operateDetails[this.mapIndex].mapContent.push(mapInfo);
        this.$emit("update:operateDetails", operateDetails);
      },
      getMap(e) {
        this.mapInfo = e;
      },
      handleClose(tagIndex,index) {
        const operateDetails = [...this.operateDetails];
        operateDetails[index].content.splice(tagIndex, 1);
        this.$emit("update:operateDetails", operateDetails);
      },

      // 填写坐标地址
      fillPointMaps(index) {
        this.mapInfo = {};
        this.showPointMap = true;
        this.mapIndex = index;
      },
      submitPointMap() {
        // 校验经纬度
        if (!this.mapInfo.lng || !this.mapInfo.lat) {
          this.$message.error('请填写经纬度');
          return;
        }
        if (isNaN(Number(this.mapInfo.lng)) || isNaN(Number(this.mapInfo.lat))
            || Number(this.mapInfo.lng) < -180 || Number(this.mapInfo.lng) > 180 || Number(this.mapInfo.lat) < -90 || Number(this.mapInfo.lat) > 90) {
          this.$message.error('请填写正确的经纬度, 经度范围:-180~180, 纬度范围:-90~90');
          return;
        }
        // 校验地址
        if (!this.mapInfo.address || this.mapInfo.address.trim() === '') {
          this.$message.error('请填写地址');
          return;
        }
        const operateDetails = [...this.operateDetails];
        console.log(operateDetails[this.mapIndex]);
        operateDetails[this.mapIndex].mapContent.push({ ...this.mapInfo });
        this.$emit("update:operateDetails", operateDetails);
        this.showPointMap = false;
      },
      closePointMap() {
        this.showPointMap = false;
      },
    },
  }
</script>

<style>
</style>
