<template>
  <div class="config-tab">
    <el-form-item label="图层名称" size="mini">
      <el-input :value="app.attrData.label" @input="handleChangeName" />
    </el-form-item>

    <el-form-item label="隐藏" size="mini">
      <el-switch
        v-model="app.attrData.options.mamHidden"
        active-color="#13ce66"
        inactive-color="#ff4949"
      />
    </el-form-item>
    <!-- 是否显示悬浮提示 -->
    <el-form-item label="悬浮" size="mini">
      <el-switch
        v-model="app.attrData.options.tooltip.show"
        active-color="#13ce66"
        inactive-color="#ff4949"
      />
    </el-form-item>

    <el-form-item label="组件元素颜色" size="mini">
      <el-color-picker
        v-model="componentColor"
        show-alpha
        :predefine="predefineColors"
        @change="handleComponentColor"
      />
    </el-form-item>

    <el-form-item label="组件背景色" size="mini">
      <el-color-picker
        v-model="componentBg"
        show-alpha
        :predefine="predefineColors"
        @change="handleComponentBg"
      />
    </el-form-item>

    <el-form-item label="横显示" size="mini">
      <el-switch
        v-model="app.attrData.options.mamCategory"
        active-color="#13ce66"
        inactive-color="#ff4949"
      />
    </el-form-item>

    <div v-if="app.attrData.options.title">
      <el-collapse>
        <el-collapse-item title="标题设置" name="1">
          <el-form-item label="标题">
            <el-input v-model="app.attrData.options.title[0].text" size="mini" />
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker
              v-model="app.attrData.options.title[0].textStyle.color"
              show-alpha
              :predefine="predefineColors"
            />
          </el-form-item>
          <el-form-item v-if="app.attrData.options.title[1]" label="字体颜色2">
            <el-color-picker
              v-model="app.attrData.options.title[1].textStyle.color"
              show-alpha
              :predefine="predefineColors"
            />
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number
              v-model="app.attrData.options.title[0].textStyle.fontSize"
              size="mini"
              controls-position="right"
              :min="16"
              :max="80"
            />
          </el-form-item>
          <el-form-item v-if="app.attrData.options.title[1]" label="字体大小2">
            <el-input-number
              v-model="app.attrData.options.title[1].textStyle.fontSize"
              size="mini"
              controls-position="right"
              :min="16"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="app.attrData.options.title[0].subtext" size="mini" />
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker
              v-model="app.attrData.options.title[0].subtextStyle.color"
              show-alpha
              :predefine="predefineColors"
            />
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number
              v-model="app.attrData.options.title[0].subtextStyle.fontSize"
              size="mini"
              controls-position="right"
              :min="12"
              :max="60"
            />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <!-- 新闻通知栏开始 -->
      <el-collapse v-if="app.attrData.type=='Journalism'">
        <el-collapse-item title="新闻通知设置" name="2">
          <!-- 新闻通知栏的左上角的图标大小控制开始 -->
          <el-form-item label="图标宽度">
            <el-input-number
              v-model="app.attrData.options.title[0].journalismIcon.width"
              size="mini"
              controls-position="right"
              :min="16"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="图标高度">
            <el-input-number
              v-model="app.attrData.options.title[0].journalismIcon.height"
              size="mini"
              controls-position="right"
              :min="16"
              :max="80"
            />
          </el-form-item>
          <!-- 新闻通知栏的左上角的图标大小控制结束 -->
          <el-form-item label="左边距">
            <el-input-number
              v-model="app.attrData.options.contentStyle.cellPaddingLeft"
              size="mini"
              controls-position="right"
              :min="5"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="右边距">
            <el-input-number
              v-model="app.attrData.options.contentStyle.cellPaddingRight"
              size="mini"
              controls-position="right"
              :min="5"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="上边距">
            <el-input-number
              v-model="app.attrData.options.contentStyle.cellPaddingTop"
              size="mini"
              controls-position="right"
              :min="5"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="下边距">
            <el-input-number
              v-model="app.attrData.options.contentStyle.cellPaddingBottom"
              size="mini"
              controls-position="right"
              :min="5"
              :max="80"
            />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <!-- 新闻通知栏结束 -->
      <!-- 翻牌器开始 -->
      <el-collapse v-if="app.attrData.type=='Flup'">
        <el-collapse-item title="翻牌器设置" name="2">
          <el-form-item label="字体大小">
            <el-input-number
              v-model="app.attrData.options.contentStyle.fontSize"
              size="mini"
              controls-position="right"
              :min="16"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="滚动的时间">
            <el-input-number
              v-model="app.attrData.options.content.duration"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="初始值">
            <el-input-number
              v-model="app.attrData.options.content.startVal"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="最终值">
            <el-input-number
              v-model="app.attrData.options.content.endVal"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="小数位数">
            <el-input-number
              v-model="app.attrData.options.content.decimals"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="前缀">
            <el-input
              v-model="app.attrData.options.content.prefix"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="后缀">
            <el-input
              v-model="app.attrData.options.content.suffix"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <!-- 翻牌器结束 -->
      <!-- 文本框开始 -->
      <el-collapse v-if="app.attrData.type=='Textbox'">
        <el-collapse-item title="文本框设置" name="2">
          <el-form-item label="字体大小">
            <el-input-number
              v-model="app.attrData.options.contentStyle.fontSize"
              size="mini"
              controls-position="right"
              :min="16"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="居哪">
            <el-select v-model="app.attrData.options.contentStyle.textAlign" placeholder="请选择">
              <el-option
                v-for="item in app.attrData.options.contentStyle.textAlignArr"
                :key="item.value"
                size="mini"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <!-- 文本框结束 -->
      <!-- 走马灯开始 -->
      <el-collapse v-if="app.attrData.type=='Horselamp'">
        <el-collapse-item title="走马灯设置" name="2">
          <el-form-item label="字体大小">
            <el-input-number
              v-model="app.attrData.options.contentStyle.fontSize"
              size="mini"
              controls-position="right"
              :min="16"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="文案高度">
            <el-input-number
              v-model="app.attrData.options.contentStyle.height"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="文案间距">
            <el-input-number
              v-model="app.attrData.options.contentStyle.marginRight"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <!-- 走马灯结束 -->
      <!-- 实时时间开始 -->
      <el-collapse v-if="app.attrData.type=='Realtime'">
        <el-collapse-item title="实时时间设置" name="2">
          <el-form-item label="字体大小">
            <el-input-number
              v-model="app.attrData.options.contentStyle.fontSize"
              size="mini"
              controls-position="right"
              :min="16"
              :max="80"
            />
          </el-form-item>
          <el-form-item label="居哪">
            <el-select v-model="app.attrData.options.contentStyle.textAlign" placeholder="请选择">
              <el-option
                v-for="item in app.attrData.options.contentStyle.textAlignArr"
                :key="item.value"
                size="mini"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <!-- 实时时间结束 -->
      <!-- 轮播图开始 -->
      <el-collapse v-if="app.attrData.type=='Swiper'">
        <el-collapse-item title="轮播图设置" name="2">
          <el-form-item label="切换时长">
            <el-input-number
              v-model="app.attrData.options.contentStyle.speed"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="自动切换延时">
            <el-input-number
              v-model="app.attrData.options.contentStyle.delay"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <!-- 轮播图结束 -->
      <!-- 表格开始 -->
      <el-collapse v-if="app.attrData.type=='Tablebox'">
        <el-collapse-item title="表格设置" name="2">
          <el-form-item label="斑马线" size="mini">
            <el-switch
              v-model="app.attrData.options.contentStyle.stripe"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="边框" size="mini">
            <el-switch
              v-model="app.attrData.options.contentStyle.border"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number
              v-model="app.attrData.options.contentStyle.height"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="最大高度">
            <el-input-number
              v-model="app.attrData.options.contentStyle.max_height"
              size="mini"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="显示表头">
            <el-switch
              v-model="app.attrData.options.contentStyle.show_header"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="添加表格">
            <el-button type="primary" size="mini" @click.native="tableAdd()">添加</el-button>
          </el-form-item>
          <div class="table-top-title">
            <el-row>
              <el-col :span="6">名称</el-col>
              <el-col :span="6">key值</el-col>
              <el-col :span="12">操作</el-col>
            </el-row>
          </div>
          <div
            class="table-top-content"
            v-for="(item,index) in app.attrData.options.content.tableDataHead"
            :key="index"
          >
            <el-row>
              <el-col :span="6">{{item.label}}</el-col>
              <el-col :span="6">{{item.prop}}</el-col>
              <el-col class="blue-btn" :span="6">
                <el-button type="primary" size="mini" @click="tableEdit(item,index)">编辑</el-button>
              </el-col>
              <el-col class="blue-btn" :span="6">
                <el-button type="primary" size="mini" @click="tableDelete(item,index)">删除</el-button>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
        <!-- 表格添加的模态框开始 -->
        <el-dialog
          title="添加"
          :visible.sync="table.table_dialog"
          width="30%"
          :before-close="handleClose"
        >
          <div>
            <span class="table-title">名称：</span>
            <el-input v-model="table.table_name" placeholder="请输入名称"></el-input>
          </div>
          <div>
            <span class="table-title">key值：</span>
            <el-input v-model="table.table_key" placeholder="请输入key值"></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="table.table_dialog = false">取 消</el-button>
            <el-button type="primary" @click="tableAddOk()">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 表格添加的模态框结束 -->
      </el-collapse>
      <!-- 表格结束 -->
    </div>
  </div>
</template>
<script>
export default {
  name: "ConfigTab",
  inject: ["app"],
  data() {
    return {
      // 颜色才选择器预定义颜色数组
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ],
      componentColor: "",
      componentBg: "",
      table: {
        table_dialog: false, //表格添加模态框的状态控制
        table_name: "", //名称
        table_key: "", //key值,
        table_type: -1, //0是新增 1是编辑
        table_index: -1, //存第几个
        fixed_top: false
      }
    };
  },
  watch: {
    "app.attrData": {
      handler(data) {
        console.log("仪表盘的color", data);
        this.componentColor = data.options.color[0];
        this.componentBg = data.options.backgroundColor;
      },
      deep: true
    }
  },
  methods: {
    handleChangeName(value) {
      //console.log(this.app.attrData)label
      this.$set(this.app.attrData, "name", value);
      //this.$set(this.app.attrData, 'label', value)
    },

    handleComponentColor(value) {
      this.app.attrData["options"]["color"] = [value];
      this.componentColor = value;
    },

    handleComponentBg(value) {
      this.app.attrData["options"]["backgroundColor"] = value;
      this.componentBg = value;
    },
    //表格添加--新增
    tableAdd() {
      this.table.table_type = 0;
      this.table.table_dialog = true;
    },
    //编辑表格
    tableEdit(item, index) {
      this.table.table_index = index;
      this.table.table_type = 1;
      this.table.table_name = item.label;
      this.table.table_key = item.prop;
      this.table.table_dialog = true;
    },
    //删除表格
    tableDelete(item, index) {
      this.table.table_index = index;
      this.table.table_name = item.label;
      this.table.table_key = item.prop;
      //1. 首先我们要得到这个对象
      var delet_json = this.app.attrData.options.content.tableDataHead.filter(
        p => {
          return p.prop == this.table.table_key;
        }
      );

      //2. 其次得到这个对象在数组中对应的索引
      var index = this.app.attrData.options.content.tableDataHead.indexOf(
        delet_json[0]
      );

      //3. 如果存在则将其删除，index > -1 代表存在
      index > -1 &&
        this.app.attrData.options.content.tableDataHead.splice(index, 1);
    },
    //表格添加 --模态框上边的叉号
    handleClose() {
      this.table.table_dialog = false;
    },
    //表格添加 点击下方的确定按钮（模态框的）
    tableAddOk() {
      //先判断  不能有重复的key值
      for (
        var i = 0;
        i < this.app.attrData.options.content.tableDataHead.length;
        i++
      ) {
        console.log("this.table.table_key", this.table.table_key);
        console.log(
          "this.table.table_key",
          this.app.attrData.options.content.tableDataHead[i].prop
        );
        if (
          this.table.table_key ==
          this.app.attrData.options.content.tableDataHead[i].prop
        ) {
          this.$message({
            message: "key值不能重复",
            type: "error"
          });
          return false;
        }
      }
      //0是新增
      if (this.table.table_type == 0) {
        //然后  如果没有添加重复的再往下执行
        var new_json = {
          prop: this.table.table_key,
          label: this.table.table_name
        };
        this.app.attrData.options.content.tableDataHead.push(new_json);

        this.table.table_dialog = false;
        return false;
      }
      //1是编辑
      if (this.table.table_type == 1) {
        var edit_json = this.app.attrData.options.content.tableDataHead.filter(
          p => {
            console.log("p是什么", p);
            return p.prop == this.table.table_key;
          }
        );
        //2. 修改
        edit_json[0].prop = this.table.table_key;
        edit_json[0].label = this.table.table_name;
        console.log("哈哈", this.app.attrData.options.content.tableDataHead);
        //this.$forceUpdate();
        this.table.table_dialog = false;
        return false;
      }
    },
    //固定表头的开关
    tableFixedTop(data) {}
  }
};
</script>
<style lang="scss">
.table-title {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  display: inline-block;
}
.table-top-title {
  font-weight: bold;
  text-align: center;
}
.table-top-content {
  box-sizing: border-box;
  padding: 5px 0;
  text-align: center;
}
.blue-btn {
  color: #409eff;
  cursor: pointer;
}
.cursor {
  cursor: pointer;
}
</style>
