<template>
  <div>
    <el-form ref="form" label-position="top" :model="formData">
      <el-checkbox v-model="expandAll">全部展开</el-checkbox>
      <el-checkbox v-model="absLayout">绝对布局</el-checkbox>
      <hr />
      <template v-for="(item,index) in attrs">
        <el-divider
          class="divider-style"
          content-position="left"
          :key="index"
          @click="changeGroupName(item.content3)"
        >{{item.content3}}</el-divider>
        <div
          v-for="(v,i) in item.children"
          :key="index + '_' + i"
          v-show="item.content3 == groupName || expandAll"
        >
          <!--单选-->
          <template v-if="v.content1 == 'radio'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-radio-group v-model="formData[v.dictCode]">
                <template v-for="(vs,vk) in parseStr(v.content2)">
                  <el-radio-button :label="vs.value" :key="vk">{{vs.name}}</el-radio-button>
                </template>
              </el-radio-group>
            </el-form-item>
          </template>
          <!--下拉-->
          <template v-else-if="v.content1 == 'select'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-select v-model="formData[v.dictCode]" placeholder="请选择">
                <el-option
                  v-for="vs in parseStr(v.content2)"
                  :key="vs.value"
                  :label="vs.name"
                  :value="vs.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
          <!--数字-->
          <template v-else-if="v.content1 == 'number'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-input-number v-model="formData[v.dictCode]" :step="1"></el-input-number>
            </el-form-item>
          </template>
          <!--数字-->
          <template v-else-if="v.content1 == 'view'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-select v-model="formData[v.dictCode]">
                <el-option
                  v-for="(ds, i) in GLOBAL.fwebdesigner.dsList.filter(obj=>{
                                   return (
                                     obj.methodType == 'GET'
                                    && obj.dsPath.indexOf('/list') > -1)
												    		})"
                  :value="ds.dsCode"
                  :label="ds.name"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
          <!--单颜色选择-->
          <template v-else-if="v.content1 == 'colorpicker'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-color-picker v-if="['tooltipBackgroudColor','backgroudColor','evenBgColor','headBgColor','bodyBgColor'].includes(v.dictCode)"
                v-model="formData[v.dictCode]" show-alpha>
              </el-color-picker>
              <el-color-picker v-else v-model="formData[v.dictCode]"></el-color-picker>
            </el-form-item>
          </template>
          <!--多颜色选择-->
          <template v-else-if="v.content1 == 'colorpickerlist'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropColorpickList
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropColorpickList>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--边距设置-->
          <template v-else-if="v.content1 == '4padding'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input disabled v-model="formData[v.dictCode]"></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropFourPadding
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropFourPadding>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--图形圆角半径设置-->
          <template v-else-if="v.content1 == '4radius'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input disabled v-model="formData[v.dictCode]"></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropFourRadius
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropFourRadius>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--表格-->
          <template v-else-if="v.content1 == 'TableCol'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDTableCol
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDTableCol>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--表格-->
          <template v-else-if="v.content1 == 'TableColSuperHeader'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDTableColSuperHeader
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDTableColSuperHeader>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--XY轴-->
          <template v-else-if="v.content1 == 'XYBind'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropXYBind
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropXYBind>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--Line XY轴-->
          <template v-else-if="v.content1 == 'XYBindLine'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropXYBindLine
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropXYBindLine>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--xy轴绑定，横向柱图-->
          <template v-else-if="v.content1 == 'XYBindFlipBar'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropXYBindFlipBar
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropXYBindFlipBar>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--字段绑定-->
          <template v-else-if="v.content1 == 'FieldBind'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropFieldBind
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropFieldBind>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!-- XY轴简单字段绑定 -->
          <template v-else-if="v.content1 == 'XYBindSimple'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropXYBindSimple
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropXYBindSimple>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!-- 简单字段绑定横向 -->
          <template v-else-if="v.content1 == 'XYBindFlipBarSimple'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropXYBindFlipBarSimple
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropXYBindFlipBarSimple>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--仪表盘颜色占比选择-->
          <template v-else-if="v.content1 == 'GaugeColorpick'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropGaugeColorpick
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropGaugeColorpick>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--渐变色柱图选择-->
          <template v-else-if="v.content1 == 'gradientsColorpicker'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropGradientsColorpicker
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropGradientsColorpicker>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--雷达图绑定-->
          <template v-else-if="v.content1 == 'RadarBind'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropRadarBind
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropRadarBind>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--多个文本标签属性设置-->
          <template v-else-if="v.content1 == 'MulitSeriesLabel'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropMulitSeriesLabel
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropMulitSeriesLabel>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!--嵌套饼图属性设置-->
          <template v-else-if="v.content1 == 'NestPieRadius'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropNestPieRadius
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropNestPieRadius>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <!-- XY轴简单字段绑定--气泡大小 -->
          <template v-else-if="v.content1 == 'FDPropXYBindSimpleScatter'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-row :gutter="5">
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 3}"
                    disabled
                    v-model="formData[v.dictCode]"
                  ></el-input>
                </el-col>
                <el-col :span="6">
                  <FDPropXYBindSimpleScatter
                    @set-value="setValue"
                    :model-data="formData[v.dictCode]"
                    :dict-code="v.dictCode"
                  ></FDPropXYBindSimpleScatter>
                </el-col>
              </el-row>
            </el-form-item>
          </template>
          <template v-else-if="v.content1 == 'picChoose'">
            <el-form-item :label="v.name" :key="v.dictCode" v-show="propShow(v.content4)">
              <el-button @click="handleclick(v.content1, v.dictCode)">配置</el-button>
            </el-form-item>
          </template>

          <!--文本-->
          <template v-else>
            <el-form-item
              :label="v.name"
              :key="v.dictCode"
              v-show="v.content1 !='hidden' && propShow(v.content4)"
            >
              <el-input v-model="formData[v.dictCode]"></el-input>
            </el-form-item>
          </template>
        </div>
      </template>
    </el-form>
    <el-dialog
      :title="dialogTitleCfg[dialogType]"
      :visible.sync="dialogTableVisible"
      v-if="dialogTableVisible"
      :width="dialogWidth[dialogType]"
      :destroy-on-close="true"
      top="80px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div :style="(dialogType == 'btnExtend') ? 'height: 500px;' : 'height: 420px;'">
        <el-scrollbar style="height:100%">
          <FDPropPicChoose
            v-if="dialogType == 'picChoose'"
            @saveDialogValue="saveDialogValue"
            @closeDialog="closeDialog"
            :currentPropValue="currentPropValue"
          ></FDPropPicChoose>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FDPropColorpickList from "@/components/prop/FDPropColorpickList";
import FDTableCol from "@/components/prop/FDTableCol";
import FDPropFourPadding from "@/components/prop/FDPropFourPadding";
import FDPropFourRadius from "@/components/prop/FDPropFourRadius";
import FDPropXYBind from "@/components/prop/FDPropXYBind";
import FDPropXYBindFlipBar from "@/components/prop/FDPropXYBindFlipBar";
import FDPropFieldBind from "@/components/prop/FDPropFieldBind";
import FDPropRadarBind from "@/components/prop/FDPropRadarBind";
import FDPropMulitSeriesLabel from "@/components/prop/FDPropMulitSeriesLabel";
import FDPropNestPieRadius from "@/components/prop/FDPropNestPieRadius";
import FDPropXYBindSimple from "@/components/prop/FDPropXYBindSimple";
import FDPropXYBindFlipBarSimple from "@/components/prop/FDPropXYBindFlipBarSimple";
import FDPropGaugeColorpick from "@/components/prop/FDPropGaugeColorpick";
import FDPropGradientsColorpicker from "@/components/prop/FDPropGradientsColorpicker";
import FDPropXYBindSimpleScatter from "@/components/prop/FDPropXYBindSimpleScatter";
import FDPropPicChoose from "@/components/prop/FDPropPicChoose.vue";
import FDTableColSuperHeader from '@/components/prop/FDTableColSuperHeader.vue'
import FDPropXYBindLine from '@/components/prop/FDPropXYBindLine'
export default {
  name: "Attribute",
  components: {
    FDPropColorpickList,
    FDPropFourPadding,
    FDPropFourRadius,
    FDPropXYBind,
    FDPropXYBindFlipBar,
    FDPropFieldBind,
    FDTableCol,
    FDPropRadarBind,
    FDPropMulitSeriesLabel,
    FDPropNestPieRadius,
    FDPropXYBindSimple,
    FDPropXYBindFlipBarSimple,
    FDPropGaugeColorpick,
    FDPropGradientsColorpicker,
    FDPropXYBindSimpleScatter,
    FDPropPicChoose,
    FDTableColSuperHeader,
    FDPropXYBindLine
  },
  data() {
    return {
      currentProp: "",
      currentPropValue: "",
      dialogType: "",
      dialogTableVisible: false,
      groupName: null,
      expandAll: true,
      absLayout: false,
      dialogTitleCfg: {
        picChoose: "图片资源选择",
      },
      dialogWidth: {
        picChoose: "60%",
      },
    };
  },
  computed: {
    formData: {
      get() {
        return this.GLOBAL.fwebdesigner.selectedCom;
      },
    },
    attrs: {
      get() {
        let me = this;
        let arr = this.$store.state.attrconfig;
        var map = {},
          dest = [];

        for (var i = 0; i < arr.length; i++) {
          var ai = arr[i];

          if (!ai.content3) ai.content3 = "基础配置";

          if (!map[ai.content3]) {
            dest.push({
              content3: ai.content3,
              serial_number: ai.serial_number,
              children: [ai],
            });
            map[ai.content3] = ai;
          } else {
            for (var j = 0; j < dest.length; j++) {
              var dj = dest[j];
              if (dj.content3 == ai.content3) {
                dj.children.push(ai);
                break;
              }
            }
          }
        }

        return dest;
      },
    },
  },
  watch: {
    formData: {
      handler: function (newVal, oldVal) {
        this.GLOBAL.fwebdesigner.selectedCom = this.formData;
      },
      deep: true,
    },
  },
  created() {},
  methods: {
    propShow(content4) {
      if (!content4) return true;

      let obj = JSON.parse(content4);
      let prop = obj["prop"];
      let value = obj["value"];
      return this.formData[prop] == value;
    },
    parseStr(str) {
      if (typeof str == "string") {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == "object" && obj) {
            return eval(obj.options);
          } else {
            return str;
          }
        } catch (e) {
          console.log("error：" + str + "!!!" + e);
          return false;
        }
      } else {
        return str;
      }
    },
    setValue(dictCode, value) {
      this.$set(this.formData, dictCode, value);
    },
    changeGroupName(value) {
      if (this.groupName != value) {
        this.groupName = value;
      } else {
        this.groupName = null;
      }
    },
    handleclick(dialogType, data) {
      if (dialogType) {
        this.dialogType = dialogType;
      }

      this.currentProp = data;
      this.currentPropValue = null;
      this.dialogTableVisible = true;
    },
    saveDialogValue(dialogValue) {
      this.setValue(this.currentProp,dialogValue);
      this.closeDialog();
    },
    closeDialog() {
      this.dialogTableVisible = false;
    },
  },
};
</script>
<style lang="scss">
.el-divider {
  div {
    font-weight: bold;
    cursor: pointer;
    font-size: 15px;
  }
}
</style>
