<template>
  <div>
    <!-- :tab-list="item.list" -->
    <!-- :tab-list="[{key: 'c1z2x3e4q', tab: 'a', scopedSlots: {tab: 'XXX'}}, ...item.list]" -->
    <!-- style="margin-right:-40px;" -->
    <p-card
      v-for="(item, index) of list"
      :key="item.key"
      style="margin-bottom: 20px"
      :tab-list="handleFirst(index, item.list)"
      :active-tab-key="item.checkedKey"
      @tabChange="(key) => (item.checkedKey = key)"
    >
      <template v-slot:c1z2x3e4q>
        <!-- <a-icon type="arrow-left"
                style="position:absolute;top:0;left:0;font-size:20px;color:#2b80ff;"
                @click="handleBack" /> -->
        <p-button type="link" style="margin-right: -40px" @click="handleBack">
          <p-icon type="arrow-left" />
        </p-button>
      </template>
      <template v-slot:tabBarExtraContent>
        <!-- 私自 -->
        <c-btn
          v-for="(btn, i) of item.list.find((tt) => tt.key === item.checkedKey).btns"
          style="margin-left: 20px"
          :key="i"
          :item="btn"
        />
        <!-- 公共 -->
        <c-btn v-for="(btn, i) of item.btns" style="margin-left: 20px" :key="i" :item="btn" />
      </template>
      <template v-for="subitem of item.list">
        <div
          v-show="item.checkedKey === subitem.key"
          :key="subitem.key"
          :style="{ height: item.height || 'auto' }"
          class="box-main"
        >
          <slot :name="subitem.key"></slot>
          <p-grid-form
            v-if="subitem.item.type === 'p-grid-form'"
            :ref="subitem.key"
            :span="8"
            :items="subitem.item.config"
          />
          <editor-table
            v-if="subitem.item.type === 'p-table-edit'"
            :ref="subitem.key"
            :isView="isView"
            :columns="subitem.item.config"
            :rowKey="subitem.item.rowKey"
            :rowSelectType="subitem.item.rowSelectType || 2"
            :colChange="subitem.item.colChange"
            :operations="subitem.item.operations || []"
          />
          <p-table-sheet
            v-if="subitem.item.type === 'p-table-sheet'"
            :ref="subitem.key"
            :rowKey="subitem.item.rowKey"
            :columns="subitem.item.config"
            :rowSelectType="subitem.item.rowSelectType || 2"
            :hasRowSelectCheck="subitem.item.hasRowSelectCheck"
            :operations="subitem.item.operations || []"
            :dataSource="dataBuffers[subitem.key]"
            @onChange="(p) => (subitem.item.colChange ? subitem.item.colChange(p) : null)"
            @onClick="(p) => (subitem.item.onClick ? subitem.item.onClick(p) : null)"
            @onBlur="(p) => (subitem.item.onBlur ? subitem.item.onBlur(p) : null)"
            @onSelect="(p) => (subitem.item.onSelectRow ? subitem.item.onSelectRow(p) : null)"
          />
          <search-table
            v-if="subitem.item.type === 'p-search-table'"
            :ref="subitem.key"
            :rowSelectType="subitem.item.rowSelectType || 2"
            :searchItems="subitem.item.config.searchItems"
            :tableColumns="subitem.item.config.columns"
            :tableRowKey="subitem.item.rowKey"
            :tableRemoteUrl="subitem.item.remoteUrl"
            :tableRemoteParams="subitem.item.remoteParams"
            :tableOperators="subitem.item.operators"
            :tableAutoLoad="subitem.item.autoLoad"
            :tableDoneBefore="subitem.item.doneBefore"
            :selectChange="subitem.item.selectChange"
          />
        </div>
      </template>
    </p-card>
  </div>
</template>

<script>
import EditorTable from './editor-table'
import SearchTable from './search-table'
import CBtn from './btn'
export default {
  components: {
    'editor-table': EditorTable,
    'search-table': SearchTable,
    'c-btn': CBtn,
  },

  props: {
    list: {
      type: Array,
      default: null,
    },
    defData: {
      type: Array | Object,
      default: null,
    },
    isView: {
      type: Boolean,
      default: false,
    },
    handleBack: {
      type: Function,
      default: null,
    },
  },

  watch: {
    defData: {
      handler(data) {
        if (data) this.setDetailData(data)
        else this.resetData()
      },
      // immediate: true
    },
  },

  created() {
    let isShows = {}
    this.list.forEach((t) => {
      t.list.forEach((tt) => {
        isShows[tt.key] = true
      })
    })
    this.isShows = isShows
  },

  mounted() {
    this.$nextTick(() => {
      if (this.defData) this.setDetailData(this.defData)
    })
  },

  data() {
    return {
      isShows: {},
      dataBuffers: {},
    }
  },

  methods: {
    getDetailData(valid = true, selected = false) {
      let detailData = {}
      let promiseMap = {}
      let isPassed = this.list.every((t) => {
        return t.list.every((tt) => {
          let val = null
          if (tt.item.type === 'p-grid-form') {
            val = this.getFormVals(tt.key)
          } else if (tt.item.type === 'p-table-edit') {
            val = this.getEditorTableVals(tt.key)
          } else if (tt.item.type === 'p-table-sheet') {
            let ref = this.$refs[tt.key][0]
            promiseMap[tt.key] = ref
              .getDataSource(selected, valid)
              .then((res) => {
                detailData[tt.key] = res
                return true
              })
              .catch((err) => {
                t.checkedKey = tt.key
                isPassed = false
                return false
              })
            val = []
          }
          if (val) return (detailData[tt.key] = val)
          else {
            t.checkedKey = tt.key
            return false
          }
        })
      })
      if (isPassed) return detailData
      else return false
    },

    resetData() {
      this.list.forEach((t) => {
        t.list.forEach((tt) => {
          if (tt.item.type === 'p-grid-form') {
            this.$refs[tt.key][0].form.resetFields()
          } else if (tt.item.type === 'p-table-edit') {
            this.$refs[tt.key][0].data = []
            this.$refs[tt.key][0].selectedRowKeys = []
          }
        })
      })
    },

    setDetailData(data) {
      this.list.forEach((t) => {
        t.list.forEach((tt) => {
          if (tt.item.type === 'p-grid-form') {
            console.log(this.$refs[tt.key][0], data[tt.key], '11111111111')
            this.setFormData(this.$refs[tt.key][0], data[tt.key])
          } else if (tt.item.type === 'p-table-edit') {
            this.setTableEditData(this.$refs[tt.key][0], data[tt.key])
          } else if (tt.item.type === 'p-table-sheet') {
            this.$set(this.dataBuffers, tt.key, val)
          }
        })
      })
    },

    setFormData(ref, data) {
      console.log(ref, data, '22222222222')
      ref.form.setFieldsValue(data)
    },

    setTableEditData(ref, data) {
      ref.setItems(data)
    },

    getFormVals(key) {
      let val = null
      this.$refs[key][0].form.validateFields((errs, vals) => {
        if (errs) {
          return
        }
        val = vals
      })
      return val
    },

    getEditorTableVals(key) {
      let val = []
      this.$refs[key][0].validateFields((errs, vals) => {
        if (errs) {
          return
        }
        val = vals
      })
      return val
    },

    handleFirst(index, list) {
      if (index > 0) {
        return list
      }
      if (typeof this.handleBack === 'function') {
        return [{ key: 'c1z2x3e4q', scopedSlots: { tab: 'c1z2x3e4q' } }, ...list]
      }
      return list
    },
  },
}
</script>

<style scoped>
.box-main {
  overflow-y: auto;
}
</style>
