<template>
  <div class="product-search">
    <dee-tab :tabs="tabs" @tabClick="tabClick">
      <div :slot="1" class="tab-cotnent">
        <div class="sub-title">查询</div>
        <dee-search-box
          type-name="DxAbstractChangeIssue"
          v-bind="configDetails['DxAbstractChangeIssue']['form']"
          @searchEvent="searchEvent"
        />
      </div>
      <div :slot="2" class="tab-cotnent">
        <div class="sub-title">查询</div>
        <dee-search-box
          type-name="DxChangeRequest"
          v-bind="configDetails['DxChangeRequest']['form']"
          @searchEvent="searchEvent"
        />
      </div>
      <div :slot="3" class="tab-cotnent">
        <div class="sub-title">查询</div>
        <dee-search-box
          type-name="DxChangeNotice"
          v-bind="configDetails['DxChangeNotice']['form']"
          @searchEvent="searchEvent"
        />
      </div>
    </dee-tab>
  </div>
</template>

<script>

export default {
  name: 'Search',
  components: {},
  props: {
    typeName: {
      type: String,
      default: ''
    },
    configDetails: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      formData: [
        {
          form: {
            number: '',
            project: '',
            name: '',
            state: ''
          },
          formData: [
            {
              name: '',
              data: [
                {
                  key: 'project',
                  title: '项目',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'number',
                  title: '编号',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'name',
                  title: '名称',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'state',
                  title: '状态',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                }
              ]
            }
          ],
          rules: {
            project: [
              { required: false, message: '请输入查询条件', trigger: 'blur' }
            ]
          },
          formButtons: [
            {
              'text': '查询',
              'type': 'submit',
              'component': {
                'type': 'primary',
                'size': 'small'
              }
            }
          ]
        },
        {
          form: {
            number: '',
            project: '',
            name: '',
            state: ''
          },
          formData: [
            {
              name: '',
              data: [
                {
                  key: 'project',
                  title: '项目',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'number',
                  title: '编号',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'name',
                  title: '名称',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'state',
                  title: '状态',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                }
              ]
            }
          ],
          rules: {
            project: [
              { required: false, message: '请输入查询条件', trigger: 'blur' }
            ]
          },
          formButtons: [
            {
              'text': '查询',
              'type': 'submit',
              'component': {
                'type': 'primary',
                'size': 'small'
              }
            }
          ]
        },
        {
          form: {
            number: '',
            project: '',
            name: '',
            state: ''
          },
          formData: [
            {
              name: '',
              data: [
                {
                  key: 'project',
                  title: '项目',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'number',
                  title: '编号',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'name',
                  title: '名称',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                },
                {
                  key: 'state',
                  title: '状态',
                  component: {
                    name: 'el-input',
                    size: 'medium'
                  }
                }
              ]
            }
          ],
          rules: {
            project: [
              { required: false, message: '请输入查询条件', trigger: 'blur' }
            ]
          },
          formButtons: [
            {
              'text': '查询',
              'type': 'submit',
              'component': {
                'type': 'primary',
                'size': 'small'
              }
            }
          ]
        }
      ],
      tabs: [
        { id: '1', name: 'PR', icon: '/icons/icon_tab_PR_normal1.png' },
        { id: '2', name: 'ECR', icon: '/icons/icon_tab_ECR_normal1.png' },
        { id: '3', name: 'ECN', icon: '/icons/icon_tab_ECN_normal1.png' }
      ]
    }
  },
  created() {
  },
  methods: {
    searchEvent(item) {
      this.$emit('search', item)
    },
    tabClick(val) {
      this.$emit('switchTabs', val.name)
    }
  }
}
</script>

<style lang="scss">
.product-search {
  .dee-panel .el-tabs .el-tabs__content {
    overflow-x: hidden;
  }
  .el-tabs__nav {
    width: 100%;
  }
  .tab-cotnent{
    padding: 10px;
    box-sizing: border-box;
  }
  .el-tabs__nav-scroll{
    border-left: none;
  }
  .el-tabs__content {
    height: calc(100% - 68px) !important;
  }
  .el-tabs__item{
    width: 33%;
    background-color: #ffffff;
    height: auto;
    font-weight: bold;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    span {
      display: flex;
      flex-direction: column;
      align-items: center;
      .imgStyle {
        margin: 0;
        width: 36px;
        height: 36px;
      }
    }
  }
  .is-active:after {
    position: absolute;
    border-top: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 4px solid #3281DE;
    border-right: 4px solid transparent;
    content: " ";
    display: block;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .el-tabs__item.is-active {
    border-bottom: 2px solid #3281DE ;
    background-color: #f3f3f3;
  }
}
</style>