<style>

  .sidaoEdit .dirBackground {
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .sidaoEdit .dirBackground img {
    width: 100%;
    height: 100%;
  }

  .sidaoEdit .img-edge-cover {
    width: 100%;
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
  }

   .sidaoContent .dir_Content {
    border-radius: 10px;
    min-height:600px;
    background-color: #fff;
    padding: 20px;
  }

   .sidaoContent .dir_comItem {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E2E2E2;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }

   .sidaoContent .dir_normal {
    color: #929292;
    margin-bottom: 15px;
  }

   .sidaoContent .dir_big {
    font-size: 14px;
    color: #1C1E1F;
    font-weight: bold;
  }

   .sidaoContent .dir_chaochu {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

   .sidaoContent .dir_Button {
    width: 100%;
    height: 70px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 70px;
    margin-top: 20px;
  }

</style>
<template>
  <div :class="{'active':sidaoData.isCked}">
    <div class="diy-component-options" v-if="sidaoData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview sidaoContent">
        <div class="dir_Content"
          :style="{marginLeft:sidaoData.data.PaddingLeft+'px',
        marginRight:sidaoData.data.PaddingRight+'px',marginTop:sidaoData.data.PaddingTop+'px',marginBottom:sidaoData.data.PaddingBottom+'px'}">
          <div class="dir_comItem">
            <div v-if="sidaoData.data.IsShowCity==1">
              <div class="dir_normal">取车城市</div>
              <div class="dir_big">成都</div>
            </div>
            <div style="width:160px;" v-if="sidaoData.data.IsShowAddress==1">
              <div class="dir_normal">接送位置</div>
              <div class="dir_big dir_chaochu">锦江区阳光新业2号楼2302</div>
            </div>
            <div style="width:125px;">
              <template v-if="sidaoData.data.IsShowCarpooling==1">
                <div class="dir_normal">是否拼车</div>
                <el-switch active-value="100" inactive-value="0">
                </el-switch>
              </template>
            </div>
          </div>
          <div class="dir_comItem">
            <div>
              <template v-if="sidaoData.data.IsShowGuideCarGoodsType==1">
                <div class="dir_normal">出行类型</div>
                <div class="dir_big">接机</div>
              </template>
            </div>
            <div style="width:160px;text-align:center;">
              <template v-if="sidaoData.data.IsShowCarClass==1">
                <div class="dir_normal">车辆类型</div>
                <div class="dir_big">跑车</div>
              </template>
            </div>
            <div style="width:125px;">
              <template v-if="sidaoData.data.IsShowTravelGuestNum==1">
                <div class="dir_normal">出行人数</div>
                <div class="dir_big">5</div>
              </template>
            </div>
          </div>
          <div class="dir_comItem" v-if="sidaoData.data.IsShowDate==1">
            <div>
              <div class="dir_big" style="margin-bottom:15px;">09月01日</div>
              <div class="dir_normal">周二 20:30</div>
            </div>
            <div style="width:145px;text-align:center;">
              <div class="dir_normal" style="margin:15px 0 0 0;">2天</div>
              <img :src="domainManager().ImageUrl + '/Static/dir_arrow.png'" />
            </div>
            <div>
              <div class="dir_big" style="margin-bottom:15px;">09月03日</div>
              <div class="dir_normal">周二 20:30</div>
            </div>
          </div>
          <div class="dir_bottom">
            <div style="display:flex;align-items:center;margin:40px 0;">
              <img style="width:13px;height:10px;margin-right:5px;" :src="sidaoData.data.TipsIco" alt="" />
              <span style="color:#121212;font-size:12px;">{{sidaoData.data.Tips}}</span>
            </div>
            <div class="dir_Button"
              :style="{'background':sidaoData.data.ButtonColor,'color':sidaoData.data.ButtonTextColor,'borderRadius':sidaoData.data.ButtonFilletPX+'px'}">
              {{sidaoData.data.ButtonText}}
            </div>
          </div>
        </div>
    </div>
    <div class="diy-component-edit sidaoEdit" v-if="sidaoData.isCked">
      <el-form label-width="150px">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="图标提示" size="small">
              <div>
                <el-tooltip class="item" effect="dark" content="建议尺寸:13*10" placement="top-start">
                  <el-button size="mini" @click="choicImg=true,imgType=2">选择文件</el-button>
                </el-tooltip>
              </div>
              <div class="dirBackground">
                <img v-if="sidaoData.data.TipsIco" :src="sidaoData.data.TipsIco" alt="" />
                <img v-else :src="domainManager().ImageUrl + '/Static/dir_icon.png'" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="文字提示" size="small">
              <el-input v-model="sidaoData.data.Tips"></el-input>
            </el-form-item>
            <el-form-item label="按钮文本" size="small">
              <el-input v-model="sidaoData.data.ButtonText"></el-input>
            </el-form-item>
            <el-form-item label="按钮圆角" size="small">
              <el-input type="number" v-model="sidaoData.data.ButtonFilletPX"></el-input>
            </el-form-item>
            <el-form-item label="按钮文字颜色" size="small">
              <el-color-picker v-model="sidaoData.data.ButtonTextColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="按钮颜色" size="small">
              <el-color-picker v-model="sidaoData.data.ButtonColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="上边距">
              <el-input type="number" size="small" :min="0" v-model="sidaoData.data.PaddingTop">
                <template slot="append">px</template>
              </el-input>
            </el-form-item>
            <el-form-item label="下边距">
              <el-input type="number" size="small" :min="0" v-model="sidaoData.data.PaddingBottom">
                <template slot="append">px</template>
              </el-input>
            </el-form-item>
            <el-form-item label="左边距">
              <el-input type="number" size="small" :min="0" v-model="sidaoData.data.PaddingLeft">
                <template slot="append">px</template>
              </el-input>
            </el-form-item>
            <el-form-item label="右边距">
              <el-input type="number" size="small" :min="0" v-model="sidaoData.data.PaddingRight">
                <template slot="append">px</template>
              </el-input>
            </el-form-item>
            <el-form-item label="显示城市" size="small" style="display:none;">
              <el-switch v-model="sidaoData.data.IsShowCity" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="显示是否拼车" size="small" style="display:none;">
              <el-switch v-model="sidaoData.data.IsShowCarpooling" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="显示车辆类型" size="small" style="display:none;">
              <el-switch v-model="sidaoData.data.IsShowCarClass" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="显示时间筛选" size="small" style="display:none;">
              <el-switch v-model="sidaoData.data.IsShowDate" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="显示地址" size="small" style="display:none;">
              <el-switch v-model="sidaoData.data.IsShowAddress" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="显示出行类型" size="small" style="display:none;">
              <el-switch v-model="sidaoData.data.IsShowGuideCarGoodsType" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="显示出行人数" size="small" style="display:none;">
              <el-switch v-model="sidaoData.data.IsShowTravelGuestNum" :active-value="1" :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    props: ["sidaoData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        choicImg: false,
        data: this.sidaoData.data,
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        this.sidaoData.data.TipsIco = this.getIconLink(msg.url);
        this.choicImg = false;
      },
    },
    computed: {

    },
    mounted() {

    }
  };

</script>
