<template>
  <div>
    <el-container>
      <el-header>
         <div style="padding-left: 20px;">产品名称：{{ row.productName }}</div>
      </el-header>
      <el-container>
        <el-aside width="450px" style="padding: 15px;height: 100vh;">
            <frameworkTree :productsRow="row" :isDelete="isDelete" :tableRow="tableRow" :isEdit="isEdit" @table="getTable"></frameworkTree>
        </el-aside>
        <el-main>
          <div style="margin-bottom: 10px;">所属分类：{{ parentName }}</div>
          <!-- 表格 -->
          <el-table
            :data="tableData.slice((queryParams.current-1)*queryParams.size,queryParams.current*queryParams.size)"
            v-loading="loading"
            border
            header-row-class-name="custom-table-header"
            style="width: 100%;margin-bottom: 10px;">
          
            <el-table-column prop="structureName" label="产品架构名称"    align="center"> </el-table-column>
            <el-table-column prop="createPersonName" label="创建人"  align="center"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间"  align="center"> </el-table-column>
            <el-table-column prop="remark" label="产品架构说明" align="center"></el-table-column>
            <el-table-column label="操作" width="180" align="center"> 
              <template slot-scope="scope">
                <el-dropdown split-button type="primary" size="small" trigger="click"  @command="handleCommand($event,scope.row)" @click="handleEdit(scope.row)">
                  <p>编辑</p> 
                  <el-dropdown-menu slot="dropdown" style="text-align: center;">
                    <el-dropdown-item command="1">预览图片</el-dropdown-item>
                    <!-- <el-dropdown-item command="2">查看信息</el-dropdown-item> -->
                    <el-dropdown-item :divided="true" command="3" > <span style="color: red;">删除</span>  </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div style="display: flex;justify-content: center;">
            <el-pagination background layout="total,prev, pager, next,jumper" :total="total"
              @current-change="handleCurrentChange" :current-page.sync ="queryParams.current" :page-size="queryParams.size">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
   
  </div>
</template>

<script>
import frameworkTree from '@/views/product/components/framework/frameworkTree.vue'
export default {
  props:['row'],
  components: {
    frameworkTree,
  },
  data() {
    return {
      tableData: [],
      loading:false,
      queryParams: {
        size: 10,
        current:1,
      },
      total: 0,
      rules: {
        productName:[{ required: true, message: '请输入产品名称', trigger: 'blur' },],
        elementName:[{ required: true, message: '请输入产品架构名称', trigger: 'blur' },],
      },
      isDelete: false,//是否删除
      tableRow: {},
      isEdit: false,//是否编辑
      tab: [],
      parentName:''
    }
  },
 
  mounted() { 
  },
  methods: {
    // 子组件返回数据
    getTable(val) {
      if (val) {
        this.total = val.children.length
        this.tableData = val.children
        this.parentName = val.pathName?val.pathName:this.row.productName
      }
    },
    // 编辑架构
    handleEdit(row) { 
      this.isEdit = !this.isEdit
      this.tableRow=JSON.parse(JSON.stringify(row))
    },
    // 编辑架构右侧下拉菜单
    handleCommand(command, row) { 
      switch (command) {
        case '1'://预览图片
          this.commandPackage(row)
          break;
        case '2'://查看信息

          break;
        case '3'://删除
          this.isDelete = !this.isDelete
          this.tableRow=row
          break;
      
        default:
          break;
      }
    },
    // 下拉菜单图片预览
    commandPackage(row) {
      if (row.pictures && row.pictures.length>0) {
         var item = row.pictures[0]//图片每条信息
          var FileUrl = this.$p + row.pictures[0].url//每张图片的url
          var isPicture = 1
          const router = this.$router.resolve({
                path: '/checkFile',
                query: {
                    row: JSON.stringify(item),
                    FileUrl: FileUrl,
                    isPicture:isPicture,
                }
            })
          window.open(router.href, '_blank');
      }else{
        this.$message.info("暂无图片，请先上传图片再进行预览！")
      }
    },
     // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val
    },
  },
}
</script>

<style lang="scss" scoped>

</style>