<template>
  <el-col>
    <el-col :span="24" class="rightTop">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="需求发布" name="first">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="类别">
                <el-select v-model="form.totaltype" placeholder="请选择类别" @change="indexSelect">
                  <el-option label="服务" value="0" selected></el-option>
                  <el-option label="产品" value="1"></el-option>
                  <el-option label="技术" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="名称">
                  <el-input v-model="form.totaltype" placeholder="请选择名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="类别">
                  <el-select v-model="form.type" placeholder="请选择类型">
                    <el-option label="服务" value="shanghai"></el-option>
                    <el-option label="产品" value="beijing"></el-option>
                    <el-option label="技术" value="beijings"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :v-if="form.totaltype == 1">
                <el-col class="mingcheng" :span="24">
                  <el-form-item label="应用领域">
                    <el-input v-model="form.name" placeholder="请选择名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col class="mingcheng" :span="24">
                  <el-form-item label="服务范围">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :v-else-if="form.totaltype == 0">
                <el-col class="tables" :span="24">
                  <el-form-item label="产品参数">
                    <el-table :data="tableData" style="width: 100%">
                      <el-table-column prop="date" label="参数名称" width="180"> </el-table-column>
                      <el-table-column prop="name" label="参数内容" width="180"> </el-table-column>
                    </el-table>
                    <el-button type="primary">添加</el-button>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :v-else="form.totaltype == 2">
                <el-col class="mingcheng" :span="24">
                  <el-form-item label="应用领域">
                    <el-input v-model="form.name" placeholder="请选择名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col class="tables" :span="24">
                  <el-form-item label="产品参数">
                    <el-table :data="tableData" style="width: 100%">
                      <el-table-column prop="date" label="参数名称" width="180"> </el-table-column>
                      <el-table-column prop="name" label="参数内容" width="180"> </el-table-column>
                    </el-table>
                    <el-button type="primary">添加</el-button>
                  </el-form-item>
                </el-col>
                <el-col class="mingcheng" :span="24">
                  <el-form-item label="市场前景">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                  </el-form-item>
                </el-col>
              </el-col>

              <el-col class="danjia" :span="24">
                <el-form-item label="单价">
                  <el-input v-model="form.name" placeholder="请选择名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="单位">
                  <el-select v-model="form.region" placeholder="请选择类型" id="select">
                    <el-option label="公斤" value="shanghai"></el-option>
                    <el-option label="套" value="beijing"></el-option>
                    <el-option label="件" value="beijings"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="jiaoyi" :span="24">
                <el-form-item label="交易方式">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="转让"></el-radio>
                    <el-radio label="共用"></el-radio>
                    <el-radio label="竞价"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="简介">
                  <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">发布</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="供给发布" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </template>
    </el-col>
  </el-col>
</template>

<script>
export default {
  name: 'contextfabu',
  props: {},
  components: {},
  data: () => ({
    tableData: [{}],
    form: {},
    activeName: 'first',
  }),
  created() {},
  computed: {},
  methods: {
    indexSelect() {
      let optionV = document.getElementById('select').value;
      console.log(optionV);
    },

    onSubmit() {
      console.log('submit!');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
.rightTop {
  height: 60px;
  width: 950px;
}

.rightTopL {
  width: 130px;
  height: 60px;
  background: #215299;
  float: left;
  color: #fff;
  font-size: 18px;
  text-align: center;
  font-family: '微软雅黑', Tahoma, Arial, Helvetica, STHeiti;
}

/deep/.el-tabs__item.is-active {
  color: #ffffff;
  background-color: blue;
}

.el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: blue;
  z-index: 1;
}
.mingcheng {
  width: 700px;
}
.tables {
  width: 500px;
  padding: 0 0 0 30px;
  min-height: 50px;
}
.jiaoyi {
  width: 400px;
}
.danjia {
  width: 500px;
}
</style>
