<template>
  <div class="role">
    <el-row>
      <el-col :span="24">
        <div class="content">
          <p class="title">产品管理</p>
          <p class="search">
            <span class="searchVal">
                <span>产品名称：</span>
                <el-input size="medium" placeholder="请输入"></el-input>
            </span>
            <span class="searchVal">
              <span>产品分类：</span>
              <el-select v-model="type" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item"
                  :label="typeChange(item)"
                  :value="typeChange(item)">
                </el-option>
              </el-select>
            </span>
            <span class="searchVal">
              <span>技术路线：</span>
            </span>
            <span class="button">搜索</span>
            <span class="button add">新建产品</span>
            <span class="button import">导入产品
            </span>
          </p>
          <div class="common-table">
            <el-table
              highlight-current-row
              max-height="840"
              :data="allData"
              stripe
              style="width: 100%;margin-bottom: 10px;">
              <el-table-column
                prop="name"
                label="产品名称"
                align="center">
              </el-table-column>
              <el-table-column
                :formatter="typeChange"
                prop="type"
                label="产品分类"
                align="center">
              </el-table-column>
              <el-table-column
                :formatter="typeChange"
                prop="status"
                label="准入状态"
                align="center">
              </el-table-column>
              <el-table-column
                prop="number"
                label="技术路线"
                align="center">
              </el-table-column>
              <el-table-column
                prop="type"
                label="查看详情"
                align="center">
                <template>
                  <span class="change"><img src="../../basicInformation/company/img/look.png">查看</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <!-- 分页 -->
        </div>
      </el-col>
    </el-row>
    <!-- 新增 / 编辑 公用弹窗 -->
<!--    <el-dialog :visible.sync="openModel" class="model">-->
<!--      <img src="../../../assets/img/close.png" class="closeModel" @click="reset()">-->
<!--      <component :is="components" :name="companyName" :list="companyList" @on-cancel="reset" @on-name="getName"></component>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import '../../basicInformation/company/company.css'
export default {
    name: 'product',
    data() {
        return {
            type: '',
            typeList: [
                {type: '1'},
                {type: '2'}
            ],
            allData: [],
            typeVal: {
                '1':'软件',
                '2': '硬件'
            }
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.$server.getProduceFindAll().then(res => {
                this.allData = res.data.data;
            })
        },
        typeChange(row) {
            return this.typeVal[String(row.type)]
        }
    }
}
</script>

<style scoped>
</style>