<template>
  <div class="XFpdding" style="height: 550px;">
    <ul>
      <li
        class="item"
        v-for="(tab, index) in tabslist2"
        :key="index"
        :class="{ active: currentTab2 === index }"
        @click="selectTab2(index)"
      >
        {{ tab.name }}
      </li>
    </ul>
    <!-- 网格文件 -->
    <!-- 执行 -->
    <div
      class="classtable"
      style="margin-top: 10px; "
      v-if="currentTab2 == '0'"
    >
      <el-form label-position="left">
        <el-form-item label="网格文件：" :label-width="formLabelWidth120">
          <el-input v-model="tacsFilename">
            <template #append>
              <fileUploads
                :projectId="125"
                solverType="exampleSolver"
                accept=""
                upId="uniqueId1"
                :imgSrc="tacsfileSrc"
                name="点击选择文件"
              />
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div style="flex-grow: 1"></div>
    </div>
    <!-- 设置参数 -->
    <div
      class="classtable"
      style="margin-top: 10px;"
      v-show="currentTab2 == '2'"
    >
      <el-form-item label="分析对象名称：" :label-width="formLabelWidth1">
        <el-input
          v-model="tacsvalue.objname"
          :step="100"
          :min="0"
          :max="1000"
          controls-position="right"
        />
      </el-form-item>
      <el-collapse v-model="TACSactiveNames">
        <el-collapse-item title="材料属性" name="1">
          <template #title>
            <span class="collapse-title">材料属性</span>
          </template>
          <el-form-item label="材料密度：" :label-width="formLabelWidth1">
            <el-input
              v-model="tacsvalue.density"
              :step="100"
              :min="0"
              :max="1000"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="杨氏模量：" :label-width="formLabelWidth1">
            <el-input
              v-model="tacsvalue.ysml"
              :step="100"
              :min="0"
              :max="1000"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="泊松比：" :label-width="formLabelWidth1">
            <el-input
              v-model="tacsvalue.ratio"
              :step="100"
              :min="0"
              :max="1000"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="屈服应力：" :label-width="formLabelWidth1">
            <el-input
              v-model="tacsvalue.stress"
              :step="100"
              :min="0"
              :max="1000"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="启用FFD参数化：" :label-width="formLabelWidth1">
            <el-radio-group v-model="tacsvalue.radio">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="收敛选项" name="2">
          <template #title>
            <span class="collapse-title">收敛选项</span>
          </template>
          <el-form-item label="绝对收敛参数：" :label-width="formLabelWidth1">
            <el-input
              v-model="tacsvalue.absolute "
              :step="100"
              :min="0"
              :max="1000"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="相对收敛参数：" :label-width="formLabelWidth1">
            <el-input
              v-model="tacsvalue.relative "
              :step="100"
              :min="0"
              :max="1000"
              controls-position="right"
            />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 结构参数 v-show="currentTab=='0'"-->
    <div v-show="currentTab2 == '1'">
      <div class="eldesign classtable" style="margin-top: 10px">
        <el-table
          :data="TACSlailiutable"
          border
          style="width: 100%; "
        >
          <el-table-column label="启用">
            <el-table-column type="index" width="70" label="编号">
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <template v-slot:header>
              <!-- 表头显示复选框 -->
              <el-checkbox
                :false-label="'-1'"
                :true-label="'1'"
                :label="false"
                v-model="thcheckbox"
              />
            </template>
            <el-table-column prop="data" label="厚度分布" width="100">
              <template #default="{ row }">
                <el-input v-model.number="row.data" />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column>
            <el-table-column prop="con" label=""> </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分析参数 v-show="currentTab=='0'"-->
    <div v-show="currentTab2 == '3'">
      <div class="eldesign classtable" style="margin-top: 10px">
        <el-table
          :data="TACSfenxitable"
          border
          style="width: 100%; "
          :header-cell-class-name="headerCellClassName"
        >
          <el-table-column type="index" width="70" label="编号" />
          <el-table-column prop="name" label="参数名称">
            <!-- <template #default="{ row }">
                      <el-input v-model="row.name" @change="handleEdit(row)" />
                    </template> -->
          </el-table-column>
          <el-table-column prop="value" label="参数值">
            <template #default="{ row }">
              <el-input v-model.number="row.value" @change="handleEdit(row)" />
            </template>
          </el-table-column>
          <el-table-column prop="flag" label="启用" width="100">
            <template v-slot="scope">
              <el-checkbox
                :false-label="'-1'"
                :true-label="'1'"
                :label="false"
                v-model="scope.row.flag"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, provide, nextTick } from "vue"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import { Edit, CaretBottom } from "@element-plus/icons-vue"
import fileUploads from '../components/fileuploads.vue'


let formLabelWidth1 = ref(170)
let formLabelWidth120 = ref(120)

let currentTab2=ref(0);
let tabslist2= ref([
  { id: '0', name: '网格文件' },
  { id: '1', name: '结构参数' },
  { id: '2', name: '设置参数' },
  { id: '3', name: '分析参数' },

])

const tacsfileSrc = new URL('@/assets/flowimg/ffdFileSave.png', import.meta.url).href;


let TACSactiveNames = ref(['1','2']);

let tacsvalue = ref({
  objname:'CRM',
  density:'2780.0',
  ysml:'73.1e9',
  ratio:'0.33',
  stress:'262.0e6',
  radio:'1',
  absolute:'1e3',
  relative:'1e3'
})

let thcheckbox = ref('1')

let tacsFilename = ref('UCRM_wing.xml.bdf')

let TACSlailiutable=ref([
  {
    data: '0.995208',
    con: ''
  },
  {
    data: '0.992144',
    con: ''
  },
  {
    data: '0.988525',
    con: ''
  },
  {
    data: '0.984251',
    con: ''
  },
  {
    data: '0.979202',
    con: ''
  },
  {
    data: '0.973236',
    con: ''
  },
  {
    data: '0.966186',
    con: ''
  },
  {
    data: '0.957851',
    con: ''
  },
  {
    data: '',
    con: ''
  },
  {
    data: '',
    con: ''
  },
  {
    data: '',
    con: ''
  },
])

let TACSfenxitable=ref([
  {
    name: '结构质量',
    value: 13972.2123,
    flag:'1'
  },
  {
    name: 'KS聚合应力',
    value: 0.3337,
    flag:'1'
  },
  {
    name: '最大变形',
    value: 0.0,
    flag: '1'
  }
])

const selectTab2=(index)=>{
  currentTab2.value = index;
}

const headerCellClassName = ({ column }) => {
  // console.log('列：',column.property)
  if (column.property === 'name') {
    console.log('yanse',column.property)
    return 'header-blue';
  } else if (column.property === 'value') {
    return 'header-green';
  } else if (column.property === 'flag') {
    return 'header-yellow';
  }
  return '';
};

</script>

<style scoped lang="scss">

:deep(.collapse-title) {
  flex: 1 0 90%;
  order: 1;
  text-align: left;
}

:deep(.collapse-title) .el-collapse-item__header {
  flex: 1 0 auto;
  order: -1;
}
</style>