<template>  
  <div style="margin-left:5px;display: flex;">
    <div :style="'width:' + (window.pageWidth - 200 - 110 - 50) + 'px;'"> 
      <el-table :data="tableData" border
        :height="window.pageHeight < 600 ? 215 : Math.floor((window.pageHeight - 170) / 2)"
        highlight-current-row @row-click="rowClick" size="small"  ref="elTable">
        <el-table-column type="index" label="序号" min-width="40" align="center"/>
        <el-table-column prop="suggestionContent" label="建议内容">        
          <template slot-scope="scope">            
            <el-input type="textarea" v-model="scope.row.suggestionContent" placeholder="建议内容" style="width: 100%"
              :autosize="{ minRows: 1, maxRows: 100 }">
            </el-input>
          </template>
        </el-table-column>
      </el-table>      
    </div>
    <!--按钮-->
    <div style="margin-left: 10px;">              
      <div>
        <el-button type="primary" class="btnClass" @click="btnQuery">新增</el-button>
      </div>
      <div>
        <el-button type="danger" class="btnClass" @click="btnQuery">删除</el-button>
      </div>
      <div>
        <el-button type="success" class="btnClass" @click="btnQuery">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>

import moment from "moment";
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import Sortable from "sortablejs";

import { deepCopy,dddw } from '@/utlis/proFunc';



export default {
  components: {
    
  },
  props:["formDiagnosis"],
  data() {
    return {      
      tableData:[], //建议列表
      curRow:{},    //当前选中建议
    };
  },

  created() {
    this.init()
  },

  //挂载完成
  mounted() { 
    this.btnQuery();
    
  },

  computed: {
    ...mapState(["window"]),
  },

  methods: {
    moment,dddw,

    init(){
      this.tableData = deepCopy(this.formDiagnosis.suggestions)
    },

    //供树节点组件调用，更新当前所选的项目类别
    refreshItemTypeId(itemTypeId){
      this.query.itemTypeId = itemTypeId
    },

    rowClick(row){
      this.curRow = row
    },

  },

  watch: {
    "formDiagnosis.id"(newVal,oldVal){
      this.init()
    }
  },
};
</script>
<style scoped>
@import '../../assets/css/global_button.css';
@import '../../assets/css/global_card.css';
@import '../../assets/css/global_dialog.css';
@import '../../assets/css/global_form.css';
@import '../../assets/css/global_input.css';
@import '../../assets/css/global_table.css';
@import '../../assets/css/global.css';

.btnClass{
  width:100px;
  margin-bottom: 5px;
}
</style>
