<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">-</span>
          <span v-if="row.type != 5 && row.type != 6 && chainState==1">{{row.title}}</span>
          <el-input v-if="row.type != 5 && row.type != 6 && chainState==0" placeholder="请输入" clearable v-model="row.title" :disabled="chainState?true:false"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="350">
        <template v-slot="{row,$index}">
          <!--
          <span v-if="($index == 0 || $index == 1) && type == 'goods'">文本</span>
          -->
          <el-select class="w100" v-model="row.type" :disabled="chainState?true:false" @change="changeType(row,$index)">
          <!-- <el-select class="w100" v-model="row.type" :disabled="chainState?true:false" @change="changeType(row,$index)" v-if="($index != 0 && $index != 1) || type !== 'goods'"></el-select>-->
            <el-option v-for="(item, index) in typeList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="内容">
        <template v-slot="{row,$index}">
          <!-- <span v-if="($index==0 || $index==1) && type == 'goods'">{{row.content?row.content:'-'}}</span> -->
          <!-- <template v-if="($index!=0 && $index!=1) || type !== 'goods' "> -->
          <template>
            <!--未选择-->
            <template v-if="!row.type">
              <span style="color: #F56C6C;">请选择类型</span>
            </template>
            <!--图片-->
            <template v-if="row.type == 1">
              <imageUpload class="setting-imageUpload" v-model="row.content" :limit="6" :disabled="chainState?true:false" />
            </template>
            <!--视频-->
            <template v-if="row.type == 2">
              <videoUpload class="setting-videoUpload" v-model="row.content" :value="row.content" :disabled="chainState?true:false" />
            </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" :disabled="chainState?true:false"></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="请输入链接" :disabled="chainState?true:false"
                  v-model="row.linkText"></el-input>
              </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" :disabled="chainState?true:false"></el-input>
              </div>
            </template>
            <!--地图-->
            <template v-if="row.type == 7">
              <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" :disabled="chainState?true:false" @click="chooseMaps(row,$index)">选择地点</el-button>
            </template>
            <!--大图-->
            <template v-if="row.type == 8">
              <imageUpload class="setting-imageUpload" v-model="row.content" :limit="3" :disabled="chainState?true:false"/>
            </template>
            <!--PDF-->
            <template v-if="row.type == 9">
              <fileUpload class="" v-model="row.content" :limit="1" :fileType="fileType" :isShowTip="false" :disabled="chainState?true:false" />
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="{row,$index}">
          <div class="flex-acenter">
            <el-popconfirm title="确定删除吗？" @confirm="operateDetails.splice($index,1)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
            <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" v-if="chainState===0">
      <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>
  </div>
</template>

<script>
  import imageUpload from '@/components/ImageUpload';
  import videoUpload from '@/components/VideoUpload';
  import fileUpload from '@/components/FileUpload';
  import amap from '@/components/Customer/amap';
import { isBoolean } from 'mathjs';
  export default {
    props: {
      operateDetails: {
        type: Array,
        default: [],
      },
      typeList: {
        type: Array,
        default: [],
      },
      type: {
        type: String,
        default: '',
      },
      chainState: {
        type: Number,
        default: 0,
      },
    },
    components: {
      imageUpload,
      videoUpload,
      fileUpload,
      amap
    },
    data() {
      return {
        videoType: ['video/mp4'],
        fileType: ['pdf'],
        mapIndex: -1, //打开地图的下标
        // 高德地图相关
        Nowlnglat: [], //经纬度传值
        showMap: false, //是否展示地图
        lng: 113.03,
        lat: 28.13,
        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: [],
        });
      },
      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') {
            const newDetail = Object.assign({}, this.operateDetails[index], {content: [], mapContent: []});
            this.$set(this.operateDetails, index, newDetail)
          }
        });
        if(type !== '7') {
          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){
        // this.operateDetails[index].content.splice(mapIndex, 1);
        this.operateDetails[index].mapContent.splice(mapIndex, 1);
      },
      // 选择地址
      chooseMaps(row, index) {
        this.showMap = true;
        this.mapIndex = index;
      },

      //上移
      moveUp(index){
        console.log('上移',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){
        console.log('下移',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)
        this.operateDetails[this.mapIndex].mapContent.push(mapInfo);
      },
      getMap(e) {
        this.mapInfo = e;
      },
      handleClose(tagIndex,index){
        this.operateDetails[index].content.splice(tagIndex,1);
      },

    },
  }
</script>

<style>
</style>
