<template>
  <el-tabs
    class="es-tabs"
    v-bind="{ type: mold, ...$attrs }"
    v-on="$listeners"
    v-model="activeName"
    ref="elTab"
    :before-leave="handleBefore"
    :class="{ 'es-tabs-full': isFull }"
    :style="styles"
  >
    <slot>
      <template v-for="(items, indexs) in tabs">
        <el-tab-pane
          v-if="!items.hide"
          :key="indexs"
          :label="items.label"
          :immediate="items.immediate"
          :name="items.name || String(indexs)"
        >
          <template slot="label" v-if="items.title">
            <template v-if="typeof items.title === 'object'">
              <i v-if="items.title.icon" :class="items.title.icon"></i>
              <template v-if="items.title.text">
                {{ items.title.text }}
              </template>
              <el-badge
                v-if="
                  Object.prototype.hasOwnProperty.call(items.title, 'count')
                "
                type="primary"
                :value="items.title.count"
                :max="99"
              >
              </el-badge>
            </template>
            <template v-else>{{ items.title }}</template>
          </template>
          <template slot-scope="{ loaded }">
            <component
              v-if="items.component || items.type == 'component'"
              :is="contents.is || contents.type"
              v-bind="
                handleExclAttribute({
                  data: contents,
                  attrs: ['is', 'type']
                })
              "
            ></component>
            <es-tabs-panel v-else v-bind="items" :show="loaded">
              <template
                slot-scope="{ contents, average, data, title, show, isShow }"
              >
                <template v-if="Array.isArray(contents)">
                  <template v-for="(item, index) in contents">
                    <div class="es-tab-pane-list" :key="index" v-if="average">
                      <div class="es-tab-pane-main">
                        <template v-if="item.htmlType">
                          <template v-if="item.htmlType === 'h1'">
                            <h1
                              v-if="item.html"
                              :style="item.style"
                              v-html="item.html"
                            ></h1>
                            <h1 v-else :style="item.style">
                              {{ item.text }}
                            </h1>
                          </template>
                          <template v-if="item.htmlType === 'h2'">
                            <h2
                              v-if="item.html"
                              :style="item.style"
                              v-html="item.html"
                            ></h2>
                            <h2 v-else :style="item.style">
                              {{ item.text }}
                            </h2>
                          </template>
                          <ul v-if="item.htmlType === 'ul'" :style="item.style">
                            <template v-for="(liItem, liIndex) in data">
                              <li
                                v-if="liitems.html"
                                :key="liIndex"
                                v-html="liitems.html"
                              ></li>
                              <li v-else :key="liIndex">
                                {{ liItem }}
                              </li>
                            </template>
                          </ul>
                          <img
                            v-if="
                              item.htmlType === 'image' ||
                              item.htmlType === 'img'
                            "
                            :src="item.url"
                            :style="item.style"
                          />
                          <template v-if="item.htmlType === 'p'">
                            <p
                              v-if="item.html"
                              :style="item.style"
                              v-html="item.html"
                            ></p>
                            <p v-else :style="item.style">
                              {{ item.text }}
                            </p>
                          </template>
                          <template v-if="item.htmlType === 'div'">
                            <div
                              v-if="item.html"
                              :style="item.style"
                              v-html="item.html"
                            ></div>
                            <div v-else :style="item.style">
                              {{ item.text }}
                            </div>
                          </template>
                        </template>
                        <template v-else>
                          <es-data-table
                            v-if="
                              item.type === 'data-table' ||
                              item.type === 'dataTable' ||
                              item.type === 'flow-list' ||
                              item.type === 'flowList'
                            "
                            v-bind="
                              handleExclAttribute({
                                data: item,
                                attrs: ['events', 'visible', 'type']
                              })
                            "
                            :display="show"
                            :class="{
                              'es-flow-group-data-table':
                                item.type === 'data-table' ||
                                item.type === 'dataTable',
                              'es-flow-list':
                                item.type === 'flow-list' ||
                                item.type === 'flowList'
                            }"
                            v-on="item.events"
                          >
                            <template v-if="item.dialog" slot="dialog">
                              <template v-if="Array.isArray(item.dialog)">
                                <es-dialog
                                  v-for="(ele, ids) in item.dialog"
                                  :isReload="true"
                                  v-bind="
                                    handleExclAttribute({
                                      data: ele,
                                      attrs: ['visible']
                                    })
                                  "
                                  :key="ids"
                                  :visible.sync="ele.visible"
                                  v-on="{ ...ele.events }"
                                >
                                </es-dialog>
                              </template>
                              <es-dialog
                                v-else
                                :isReload="true"
                                v-bind="
                                  handleExclAttribute({
                                    data: item.dialog,
                                    attrs: ['visible']
                                  })
                                "
                                :visible.sync="item.dialog.visible"
                                v-on="{ ...item.dialog.events }"
                              >
                              </es-dialog>
                            </template>
                          </es-data-table>
                          <es-tree-group
                            v-if="
                              item.type === 'tree-group' ||
                              item.type === 'treeGroup'
                            "
                            v-bind="
                              handleExclAttribute({
                                data: item,
                                attrs: ['events', 'visible', 'type']
                              })
                            "
                            :display="show"
                            v-on="{ ...item.events }"
                          ></es-tree-group>
                          <iframe
                            v-if="item.type === 'iframe' && !item.blank"
                            :id="item.id || item.name"
                            :name="item.name"
                            frameborder="0"
                            width="100%"
                            height="100%"
                            :src="
                              handleUrlJoinParams({
                                url: item.url,
                                param: item.param || {}
                              })
                            "
                          ></iframe>
                          <es-upload
                            v-if="item.type === 'attachment'"
                            :file-count.sync="title.count"
                            height="auto"
                            class="es-attachment"
                            v-bind="
                              handleExclAttribute({
                                data: item,
                                attrs: ['events', 'type']
                              })
                            "
                            :display="show"
                            v-on="{ ...item.events }"
                          ></es-upload>
                        </template>
                      </div>
                    </div>
                    <template v-else>
                      <template v-if="item.htmlType === 'h1'">
                        <h1
                          v-if="item.html"
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                          v-html="item.html"
                        ></h1>
                        <h1
                          v-else
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                        >
                          {{ item.text }}
                        </h1>
                      </template>
                      <template v-if="item.htmlType === 'h2'">
                        <h2
                          v-if="item.html"
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                          v-html="item.html"
                        ></h2>
                        <h2
                          v-else
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                        >
                          {{ item.text }}
                        </h2>
                      </template>
                      <template v-if="item.htmlType === 'ul'">
                        <ul
                          v-if="item.html"
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                          v-html="item.html"
                        ></ul>
                        <ul
                          v-else
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                        >
                          <template v-for="(liItem, liIndex) in data">
                            <li
                              v-if="liitems.html"
                              :key="liIndex"
                              v-html="liitems.html"
                            ></li>
                            <li v-else :key="liIndex">
                              {{ liItem }}
                            </li>
                          </template>
                        </ul>
                      </template>
                      <template
                        v-if="
                          item.htmlType === 'image' || item.htmlType === 'img'
                        "
                      >
                        <img
                          :key="index"
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType', 'src']
                            })
                          "
                          :src="item.url || item.src"
                        />
                      </template>
                      <template v-if="item.htmlType === 'p'">
                        <p
                          v-if="item.html"
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                          v-html="item.html"
                        ></p>
                        <p
                          v-else
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['text', 'htmlType']
                            })
                          "
                          :key="index"
                        >
                          {{ item.text }}
                        </p>
                      </template>
                      <template v-if="item.htmlType === 'div'">
                        <div
                          v-if="item.html"
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                          v-html="item.html"
                        ></div>
                        <div
                          v-else
                          v-bind="
                            handleExclAttribute({
                              data: item,
                              attrs: ['html', 'htmlType']
                            })
                          "
                          :key="index"
                        >
                          {{ item.text }}
                        </div>
                      </template>
                      <es-form
                        v-if="item.type === 'form'"
                        ref="esFlowForm"
                        v-bind="
                          handleExclAttribute({
                            data: item,
                            attrs: ['events', 'visible', 'model', 'type', 'ref']
                          })
                        "
                        full
                        :model.sync="item.model"
                        :display="show"
                        :key="index"
                        :closeDialog="false"
                        v-on="{ ...item.events }"
                      ></es-form>
                      <es-data-table
                        v-if="
                          item.type === 'data-table' ||
                          item.type === 'dataTable' ||
                          item.type === 'flow-list' ||
                          item.type === 'flowList'
                        "
                        v-bind="
                          handleExclAttribute({
                            data: item,
                            attrs: ['events', 'visible', 'type']
                          })
                        "
                        :class="{
                          'es-flow-group-data-table':
                            item.type === 'data-table' ||
                            item.type === 'dataTable',
                          'es-flow-list':
                            item.type === 'flow-list' ||
                            item.type === 'flowList'
                        }"
                        :display="show"
                        :key="index"
                        v-on="item.events"
                      >
                        <template v-if="item.dialog" slot="dialog">
                          <template v-if="Array.isArray(item.dialog)">
                            <es-dialog
                              v-for="(ele, ids) in item.dialog"
                              :isReload="true"
                              v-bind="
                                handleExclAttribute({
                                  data: ele,
                                  attrs: ['visible']
                                })
                              "
                              :key="ids"
                              :visible.sync="ele.visible"
                              v-on="{ ...ele.events }"
                            >
                            </es-dialog>
                          </template>
                          <es-dialog
                            v-else
                            :isReload="true"
                            v-bind="
                              handleExclAttribute({
                                data: item.dialog,
                                attrs: ['visible']
                              })
                            "
                            :visible.sync="item.dialog.visible"
                            v-on="{ ...item.dialog.events }"
                          >
                          </es-dialog>
                        </template>
                      </es-data-table>
                      <es-tree-group
                        v-if="
                          item.type === 'tree-group' ||
                          item.type === 'treeGroup'
                        "
                        v-bind="
                          handleExclAttribute({
                            data: item,
                            attrs: ['events', 'visible', 'type']
                          })
                        "
                        :key="index"
                        :display="show"
                        v-on="{ ...item.events }"
                      ></es-tree-group>
                      <iframe
                        v-if="item.type === 'iframe' && !item.blank"
                        frameborder="0"
                        width="100%"
                        height="100%"
                        :key="index"
                        :id="item.id || item.name"
                        :name="item.name"
                        :src="
                          handleUrlJoinParams({
                            url: item.url,
                            param: item.param || {}
                          })
                        "
                      ></iframe>
                      <es-upload
                        v-if="item.type === 'attachment'"
                        height="auto"
                        class="es-attachment"
                        v-bind="
                          handleExclAttribute({
                            data: item,
                            attrs: ['events', 'type']
                          })
                        "
                        :file-count.sync="title.count"
                        :key="index"
                        :display="show"
                        v-on="{ ...item.events }"
                      ></es-upload>
                      <es-dialog
                        v-if="item.type === 'dialog'"
                        :isReload="true"
                        v-bind="
                          handleExclAttribute({
                            data: item,
                            attrs: ['visible', 'type']
                          })
                        "
                        :key="index"
                        :visible.sync="item.visible"
                        v-on="{ ...item.events }"
                      >
                      </es-dialog>
                    </template>
                  </template>
                </template>
                <template v-else>
                  <es-form
                    v-if="contents.type === 'form'"
                    ref="esFlowForm"
                    v-bind="
                      handleExclAttribute({
                        data: contents,
                        attrs: ['events', 'visible', 'model', 'type', 'ref']
                      })
                    "
                    full
                    :model.sync="contents.model"
                    :display="show"
                    :closeDialog="false"
                    v-on="{ ...contents.events }"
                  ></es-form>
                  <es-data-table
                    v-if="
                      contents.type === 'data-table' ||
                      contents.type === 'dataTable' ||
                      contents.type === 'flow-list' ||
                      items.contents.type === 'flowList'
                    "
                    v-bind="
                      handleExclAttribute({
                        data: contents,
                        attrs: ['events', 'visible', 'type']
                      })
                    "
                    :class="{
                      'es-flow-group-data-table':
                        contents.type === 'data-table' ||
                        items.contents.type === 'dataTable',
                      'es-flow-list':
                        contents.type === 'flow-list' ||
                        contents.type === 'flowList'
                    }"
                    :display="show"
                    v-on="contents.events"
                  >
                    <template v-if="contents.dialog" slot="dialog">
                      <template v-if="Array.isArray(contents.dialog)">
                        <es-dialog
                          v-for="(ele, ids) in contents.dialog"
                          :isReload="true"
                          v-bind="
                            handleExclAttribute({
                              data: ele,
                              attrs: ['visible']
                            })
                          "
                          :key="ids"
                          :visible.sync="ele.visible"
                          v-on="{ ...ele.events }"
                        >
                        </es-dialog>
                      </template>
                      <es-dialog
                        v-else
                        :isReload="true"
                        v-bind="
                          handleExclAttribute({
                            data: contents.dialog,
                            attrs: ['visible']
                          })
                        "
                        :visible.sync="contents.dialog.visible"
                        v-on="{ ...contents.dialog.events }"
                      >
                      </es-dialog>
                    </template>
                  </es-data-table>
                  <es-tree-group
                    v-if="
                      contents.type === 'tree-group' ||
                      contents.type === 'treeGroup'
                    "
                    v-bind="
                      handleExclAttribute({
                        data: contents,
                        attrs: ['events', 'visible', 'type']
                      })
                    "
                    :display="show"
                    v-on="{ ...contents.events }"
                  ></es-tree-group>
                  <iframe
                    v-if="contents.type === 'iframe' && !contents.blank"
                    :id="contents.id || contents.name"
                    :name="contents.name"
                    frameborder="0"
                    width="100%"
                    height="100%"
                    :src="
                      handleUrlJoinParams({
                        url: contents.url,
                        param: contents.param || {}
                      })
                    "
                  ></iframe>
                  <es-upload
                    v-if="contents.type === 'attachment'"
                    v-bind="
                      handleExclAttribute({
                        data: contents,
                        attrs: ['events', 'type']
                      })
                    "
                    :display="show"
                    :file-count.sync="title.count"
                    height="auto"
                    class="es-attachment"
                    v-on="{ ...contents.events }"
                  ></es-upload>
                </template>
              </template>
            </es-tabs-panel>
          </template>
        </el-tab-pane>
      </template>
    </slot>
  </el-tabs>
</template>

<script>
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'EsTabs',
  inheritAttrs: false,
  provide() {
    return {
      esTabs: this
    };
  },
  props: {
    mold: String,
    full: {
      type: Boolean,
      default: undefined
    },
    height: String,
    value: {
      type: String,
      default: '0'
    },
    isSubmit: Boolean,
    multiple: Boolean,
    // 页面主体内容
    contents: {
      type: Array,
      default() {
        return [];
      }
    },
    states: [Array, Object]
  },
  watch: {
    activeName(val) {
      this.$emit('input', val);
    },
    tabs: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length) {
          this.getState(val);
        }
      }
    },
    states: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          if (Array.isArray(val) && val.length) {
            this.getState(val);
          } else if (Object.keys(val).length) {
            this.state = val;
          }
        }
      }
    }
  },
  computed: {
    tabs() {
      return this.contents ? this.contents : [];
    },
    isFull() {
      return this.full !== undefined ? this.full : this.fill;
    },
    styles() {
      return {
        height: this.height ? this.height : this.full || this.fill ? '100%' : ''
      };
    }
  },
  data() {
    return {
      activeName: this.value,
      state: {},
      id: null,
      fill: false
    };
  },
  mounted() {
    if (
      this.$el.parentNode.children.length == 1 &&
      util.getStyle(this.$el.parentNode, 'height')
    ) {
      this.fill = true;
    }
  },
  methods: {
    getState(val) {
      if (this.isSubmit) {
        let obj = {};
        val.forEach((item, index) => {
          let key = item.name || String(index);
          if (Array.isArray(item.contents)) {
            obj[key] = true;
            for (let i = 0; i < item.contents.length; i++) {
              if (item.contents[i].type === 'form') {
                obj[key] = Object.prototype.hasOwnProperty.call(
                  item.contents[i],
                  'isSubmit'
                )
                  ? item.contents[i].isSubmit
                  : this.isSubmit
                  ? false
                  : true;
                break;
              }
            }
          } else {
            obj[key] =
              item.contents.type === 'form'
                ? (obj[key] = Object.prototype.hasOwnProperty.call(
                    item.contents,
                    'isSubmit'
                  )
                    ? item.contents.isSubmit
                    : this.isSubmit
                    ? false
                    : true)
                : true;
          }
        });
        this.state = obj;
      }
    },
    handleExclAttribute({ data, attrs }) {
      return util.exclAttribute({
        data: data,
        attrs: attrs
      });
    },
    handleUrlJoinParams({ url, param }) {
      return util.urlJoinParams({ url, param });
    },
    handleBefore(active, old) {
      return new Promise((resolve, reject) => {
        if (this.isSubmit && old !== undefined && !this.state[old]) {
          reject();
          this.$alert('请先保存基本信息', '提示!', {
            confirmButtonText: '确定'
          }).catch(() => {});
        } else {
          resolve();
        }
      });
    },
    handleTabState(res) {
      this.isSubmit && this.$set(this.state, this.activeName, res);
    },
    handleChangeData(res) {
      this.$emit('changeData', res);
      this.$emit('change-data', res);
    }
  }
};
</script>
