<style>
  .diy-component-edit .myOrder_navlist {
    flex-wrap: wrap;
    width: 500px;
    line-height: normal;
  }

  .diy-component-edit .myOrder_navitem {
    width: 20%;
    border: 1px solid #e2e2e2;
    margin-left: -1px;
    text-align: center;
    font-size: 12px;
    color: #333;
    cursor: pointer;
  }

</style>
<template>
  <div :class="{'active':orderData.isCked}">
    <div class="diy-component-options" v-if="orderData.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">
      <div style="border: 1px solid #eee;border-width: 1px 0;" :style="cStyle">
        <div style="padding: 20px 30px;border-bottom: 1px solid #e2e2e2;">我的订单</div>
        <div flex="">
          <div v-for="(item,index) in data.navs" flex="cross:center" style="width: 20%;" :key="index">
            <div style="text-align: center;width: 100%;padding: 20px 0;">
              <div>
                <img :src="getIconLink(item.picUrl)" style="width: 50px;height: 50px;">
              </div>
              <div style="color: #333; font-size: 24px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                {{item.text}}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="diy-component-edit" v-if="orderData.isCked">
      <el-form @submit.native.prevent label-width="100px">
        <el-form-item label="导航菜单">
          <div class="myOrder_navlist" flex>
            <div class="myOrder_navitem" v-for="(nav,subIndex) in data.navs" :key="subIndex"
              @click="getImgChoice(subIndex)">
              <div style="width: 100px;padding: 10px 0;">
                <div><img :src="getIconLink(nav.picUrl)" style="width: 25px;height: 25px;"></div>
                <div>{{nav.text}}</div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker size="small" v-model="data.backgroundColor"></el-color-picker>
          <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.backgroundColor"></el-input>
        </el-form-item>
      </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: ["orderData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        choicImg: false,
        data: this.orderData.data,
        ckedIndex: -1,
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        this.data.navs[this.ckedIndex].picUrl = msg.url;
        this.choicImg = false;
      },
      //点击选图片
      getImgChoice(index) {
        this.choicImg = true;
        this.ckedIndex = index;
      }
    },
    computed: {
      cStyle() {
        if (this.data.backgroundColor) {
          return `background: ${this.data.backgroundColor};`
        } else {
          return ``
        }
      },
    },
    mounted() {

    }
  };

</script>
